:root{
  --teal:#0F4C5C; --teal2:#16697A; --cream:#F7F4EE; --green:#137A6B; --pink:#F6D6DC; --pink-ink:#9B3D52;
  --ink:#1F2D33; --muted:#6B7A80; --card:#fff; --sand:#F3E3C3; --sea:#7FC8C2;
  --r:20px; --shadow:0 6px 20px rgba(15,76,92,.10), 0 1px 3px rgba(15,76,92,.08);
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--cream);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Segoe UI",Roboto,"Noto Sans",sans-serif;font-size:18px;line-height:1.35;min-height:100vh;-webkit-text-size-adjust:100%}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}

/* Encabezado */
.topbar{position:sticky;top:0;z-index:20;background:var(--teal);color:#fff;padding-top:var(--safe-top);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.topbar-inner{display:flex;align-items:center;gap:10px;padding:14px 16px;max-width:720px;margin:0 auto}
.topbar h1{flex:1;margin:0;font-size:22px;font-weight:800;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo{font-size:26px}
.icon-btn{background:rgba(255,255,255,.14);border:0;border-radius:14px;width:46px;height:46px;font-size:22px;cursor:pointer}
.icon-btn:active{transform:scale(.94)}

main{max-width:720px;margin:0 auto;padding:16px 16px calc(110px + var(--safe-bot))}
.screen{animation:fadeUp .35s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h2.sec{font-size:26px;font-weight:800;margin:6px 4px 14px;color:var(--teal);display:flex;align-items:center;gap:8px}
h3{margin:0 0 8px;font-size:20px;font-weight:800}
.muted{color:var(--muted)}
.small{font-size:15px}

/* Tarjetas */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin-bottom:16px;position:relative;overflow:hidden}
.card.tap{cursor:pointer}
.card.tap:active{transform:scale(.99)}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* Tarjeta del próximo viaje */
.hero{color:#fff;background:linear-gradient(160deg,#16697A 0%,#0F4C5C 55%,#0B3A47 100%);padding:22px 20px 20px}
.hero .hero-label{font-size:15px;font-weight:700;opacity:.85;text-transform:uppercase;letter-spacing:1px}
.hero .hero-dest{font-size:38px;font-weight:900;margin:4px 0 2px}
.hero .hero-dates{font-size:16px;opacity:.9;font-weight:600}
.hero-art{position:absolute;right:-10px;bottom:-6px;width:170px;height:120px;opacity:.95;pointer-events:none}
.countdown{display:flex;gap:10px;margin:16px 0 6px;position:relative;z-index:1}
.cd-box{background:rgba(255,255,255,.16);border-radius:16px;padding:10px 14px;min-width:84px;text-align:center;backdrop-filter:blur(4px)}
.cd-num{font-size:34px;font-weight:900;line-height:1}
.cd-lbl{font-size:13px;font-weight:700;opacity:.9;margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
.hero .btn{position:relative;z-index:1}
.hero-msg{font-size:20px;font-weight:800;margin:14px 0 8px;position:relative;z-index:1}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;min-height:52px;padding:12px 18px;font-size:18px;font-weight:800;cursor:pointer;transition:transform .12s ease, filter .12s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 4px 12px rgba(19,122,107,.3)}
.btn-light{background:#fff;color:var(--teal)}
.btn-pink{background:var(--pink);color:var(--pink-ink)}
.btn-ghost{background:#EEF3F2;color:var(--teal)}
.btn-block{width:100%}
.btn-big{min-height:60px;font-size:20px;padding:14px 26px;border-radius:20px}
.btn-sm{min-height:44px;padding:8px 14px;font-size:16px;border-radius:14px}
.btn[disabled]{opacity:.55}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row .btn{flex:1}

/* Tarjetas de acceso en Inicio */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.quick .card{margin:0;min-height:120px;display:flex;flex-direction:column;justify-content:space-between}
.quick .q-emoji{font-size:36px}
.quick .q-title{font-size:19px;font-weight:800}
.quick .q-sub{font-size:14px;color:var(--muted);font-weight:600}
.badge{display:inline-block;background:var(--pink);color:var(--pink-ink);font-size:13px;font-weight:800;padding:4px 10px;border-radius:999px}
.letter-card{background:linear-gradient(135deg,#FFF5F7,#FDE8EC);border:1px solid #F6D6DC}

/* Chips de viajeros */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#EAF4F2;color:var(--teal);border-radius:999px;padding:8px 8px 8px 14px;font-weight:800;font-size:17px}
.chip button{border:0;background:var(--pink);color:var(--pink-ink);border-radius:999px;width:30px;height:30px;font-size:15px;font-weight:900;cursor:pointer}
.add-bar{display:flex;gap:8px;margin-top:12px}
.add-bar input{flex:1;min-width:0}

/* Formularios */
input[type=text],input[type=date],input[type=number],textarea,select{width:100%;border:2px solid #E3E8E6;background:#fff;border-radius:14px;padding:12px 14px;font-size:18px;font-weight:600;outline:none;min-height:52px;-webkit-appearance:none;appearance:none}
input:focus,textarea:focus,select:focus{border-color:var(--green)}
textarea{min-height:96px;resize:vertical;font-weight:500}
label.f{display:block;font-weight:800;font-size:16px;color:var(--teal);margin:12px 2px 6px}

/* Lista de viajes */
.trip{display:flex;gap:14px;align-items:center}
.trip-cover{width:68px;height:68px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:36px;flex-shrink:0;box-shadow:inset 0 -6px 0 rgba(0,0,0,.06)}
.trip-name{font-size:21px;font-weight:900}
.trip-dates{font-size:15px;color:var(--muted);font-weight:700}
.trip-notes{font-size:15px;color:var(--ink);opacity:.8;margin-top:4px;white-space:pre-wrap}
.trip-actions{display:flex;gap:8px;margin-top:14px}
.trip-actions .btn{flex:1;white-space:nowrap;padding:8px 6px;font-size:15px}

/* Selector de viaje */
.trip-picker{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 6px;scrollbar-width:none}
.trip-picker::-webkit-scrollbar{display:none}
.trip-picker button{flex-shrink:0;border:2px solid transparent;background:#fff;box-shadow:var(--shadow);border-radius:999px;padding:10px 16px;font-weight:800;font-size:17px;cursor:pointer;min-height:48px}
.trip-picker button.on{background:var(--teal);color:#fff}

/* Itinerario */
.day-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.day-title{font-size:20px;font-weight:900;color:var(--teal)}
.day-date{font-size:14px;color:var(--muted);font-weight:700}
.item{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #F0F0EC}
.item:first-of-type{border-top:0}
.check{width:44px;height:44px;border-radius:14px;border:2.5px solid #CFE3DF;background:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;cursor:pointer;flex-shrink:0;transition:all .18s}
.check.on{background:var(--green);border-color:var(--green);animation:pop .25s ease}
@keyframes pop{50%{transform:scale(1.15)}}
.item-text{flex:1;font-size:19px;font-weight:700;word-break:break-word}
.item-time{font-size:14px;color:var(--muted);font-weight:800;display:block}
.item.done .item-text{color:#A3ACAE;text-decoration:line-through;text-decoration-thickness:2px}
.del-x{width:40px;height:40px;border-radius:12px;border:0;background:var(--pink);color:var(--pink-ink);font-weight:900;font-size:16px;cursor:pointer;flex-shrink:0}
.progress{height:10px;background:#E7EFED;border-radius:99px;overflow:hidden;margin:6px 0 2px}
.progress > i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .3s}

/* Recuerdos */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.gallery button{padding:0;border:0;border-radius:12px;overflow:hidden;aspect-ratio:1;background:#EEE;cursor:pointer}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.empty{text-align:center;padding:20px 10px;color:var(--muted);font-weight:700}
.empty .big{font-size:48px;display:block;margin-bottom:6px}
.diary textarea{background:#FFFDF8;border-color:#F0E6D2;font-size:18px;line-height:1.45}
.saved-tag{font-size:13px;color:var(--green);font-weight:800;opacity:0;transition:opacity .3s}
.saved-tag.on{opacity:1}

/* Sueños */
.dream{display:flex;align-items:center;gap:12px}
.dream-emoji{font-size:34px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#EAF4F2;border-radius:16px;flex-shrink:0}
.dream-name{font-size:20px;font-weight:800}
.dream.visited .dream-name{color:var(--green)}
.dream-btn{border:0;border-radius:14px;min-height:44px;padding:8px 12px;font-weight:800;font-size:15px;cursor:pointer;background:#EEF3F2;color:var(--teal)}
.dream.visited .dream-btn{background:var(--green);color:#fff}
.emoji-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.emoji-pick button{width:50px;height:50px;border-radius:14px;border:2px solid #E3E8E6;background:#fff;font-size:26px;cursor:pointer}
.emoji-pick button.on{border-color:var(--green);background:#E6F3F0}
.color-pick{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.color-pick button{width:46px;height:46px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #E3E8E6;cursor:pointer}
.color-pick button.on{box-shadow:0 0 0 3px var(--green)}

/* Barra de pestañas */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;justify-content:space-around;padding:6px 4px calc(6px + var(--safe-bot));box-shadow:0 -4px 18px rgba(15,76,92,.10);border-top-left-radius:22px;border-top-right-radius:22px}
.tabbar button{flex:1;min-width:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;min-height:58px;font-size:11.5px;letter-spacing:-.1px;white-space:nowrap;font-weight:800;color:var(--muted);cursor:pointer;border-radius:16px}
.tabbar .ti{font-size:23px;transition:transform .2s}
.tabbar button.active{color:var(--teal);background:#E8F2F0}
.tabbar button.active .ti{transform:translateY(-2px) scale(1.08)}

/* Hoja modal */
.sheet-backdrop{position:fixed;inset:0;z-index:50;background:rgba(10,40,48,.45);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--cream);width:100%;max-width:720px;max-height:92vh;overflow:auto;border-top-left-radius:26px;border-top-right-radius:26px;padding:10px 18px calc(22px + var(--safe-bot));animation:slideUp .28s cubic-bezier(.2,.9,.3,1.1)}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.sheet .grab{width:44px;height:5px;border-radius:9px;background:#D5DCDA;margin:4px auto 12px}
.sheet h3{font-size:23px;color:var(--teal)}
.sheet .btn-row{margin-top:18px}

/* Visor */
.viewer{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;animation:fade .2s}
.viewer img{max-width:100%;max-height:100%;object-fit:contain}
.viewer-close{position:absolute;top:calc(12px + var(--safe-top));right:14px;width:50px;height:50px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:22px;cursor:pointer}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:70px;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:40px;border-radius:14px;cursor:pointer}
.viewer-nav.prev{left:8px}.viewer-nav.next{right:8px}
.viewer-del{position:absolute;bottom:calc(20px + var(--safe-bot));left:50%;transform:translateX(-50%);border:0;border-radius:14px;background:var(--pink);color:var(--pink-ink);font-weight:800;padding:12px 20px;font-size:16px;cursor:pointer}

/* Bienvenida */
.welcome{position:fixed;inset:0;z-index:80;overflow:auto;background:linear-gradient(180deg,#FFE9D6 0%,#FDF3EA 35%,var(--cream) 70%);animation:fade .6s ease}
.welcome.leaving{animation:fadeOut .5s ease forwards}
@keyframes fadeOut{to{opacity:0;transform:scale(1.02)}}
.welcome-sky{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.sun-rays{position:absolute;top:-220px;left:50%;width:520px;height:520px;margin-left:-260px;border-radius:50%;
  background:radial-gradient(circle,#FFD58A 0 70px,rgba(255,213,138,.45) 71px 110px,transparent 111px),
  repeating-conic-gradient(rgba(255,200,110,.28) 0 8deg,transparent 8deg 20deg);
  animation:spin 60s linear infinite;-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
@keyframes spin{to{transform:rotate(360deg)}}
.floaties span{position:absolute;bottom:-40px;font-size:22px;opacity:0;animation:floatUp linear infinite}
@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.85}90%{opacity:.6}100%{transform:translateY(-110vh) rotate(25deg);opacity:0}}
.welcome-content{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:calc(26px + var(--safe-top)) 18px calc(30px + var(--safe-bot));display:flex;flex-direction:column;align-items:center;gap:14px}
.welcome-title{text-align:center;animation:fadeUp 1s .2s ease both}
.welcome-emoji{font-size:50px;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.welcome-title h2{margin:2px 0 0;font-size:28px;font-weight:900;color:var(--teal)}
.letter{background:#FFFDF9;border-radius:24px;box-shadow:0 12px 34px rgba(155,61,82,.14),0 2px 6px rgba(0,0,0,.05);padding:20px 20px 20px;width:100%;border:1px solid #F6D6DC;position:relative;animation:fadeUp 1.1s .6s ease both}
.letter:before{content:"";position:absolute;inset:8px;border:1.5px dashed #F2C4CE;border-radius:18px;pointer-events:none}
.letter-head{font-weight:900;color:var(--pink-ink);font-size:17px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px;text-align:center}
.letter-body{font-family:Georgia,"Iowan Old Style","Noto Serif",serif;font-size:18px;line-height:1.5;color:#3A2E31;white-space:pre-line}
.letter-body .sign{font-family:"Snell Roundhand","Segoe Script","Brush Script MT",Georgia,cursive;font-size:24px;color:var(--pink-ink)}
#btnEmpezar{animation:fadeUp 1s 1.2s ease both, glow 2.4s 2.2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 4px 24px rgba(19,122,107,.55)}}
.sheet .letter{animation:none;margin-top:4px}

/* Aviso */
.toast{position:fixed;left:50%;bottom:calc(92px + var(--safe-bot));transform:translateX(-50%);z-index:90;background:var(--teal);color:#fff;font-weight:800;padding:12px 18px;border-radius:14px;box-shadow:var(--shadow);font-size:16px;animation:fadeUp .25s;max-width:90vw;text-align:center}

.section-art{display:block;margin:0 auto 6px;width:100%;max-width:340px;height:auto}

/* ===== Mapa ===== */
.pill{display:inline-block;font-size:13px;font-weight:800;padding:4px 10px;border-radius:999px;vertical-align:middle}
.pill-green{background:#E1F2EE;color:var(--green)}
.pill-pink{background:var(--pink);color:var(--pink-ink)}
.dist-card{background:linear-gradient(135deg,#FFFFFF,#F1F8F6)}
.dist-ico{font-size:30px;width:54px;height:54px;border-radius:16px;background:#E6F3F0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dist-title{font-size:19px;font-weight:800;line-height:1.25}
.dist-title b{color:var(--green);font-size:22px}
.geo-err{margin-top:10px;background:#FFF4F6;border:1px solid var(--pink);color:var(--pink-ink);border-radius:14px;padding:10px 12px;font-size:15px;font-weight:600}
.map-card{padding:0;height:58vh;min-height:340px;max-height:560px;position:relative;z-index:0}
#map{position:absolute;inset:0;border-radius:var(--r);background:#DCEFF0}
.map-pills{position:absolute;top:12px;left:12px;z-index:500;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.map-pills span{background:rgba(255,255,255,.95);box-shadow:0 3px 10px rgba(0,0,0,.12);border-radius:999px;padding:8px 14px;font-weight:800;font-size:16px;color:var(--ink);align-self:flex-start}
.leaflet-container{font:inherit}
.leaflet-control-zoom a{width:40px!important;height:40px!important;line-height:40px!important;font-size:22px!important;color:var(--teal)!important}
.leaflet-control-zoom{border:0!important;box-shadow:0 3px 10px rgba(0,0,0,.15)!important;border-radius:14px!important;overflow:hidden}
.leaflet-popup-content-wrapper{border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.leaflet-popup-content{margin:14px 16px;font-size:16px}
.pin-wrap{background:none;border:0}
.pin{width:40px;height:40px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.25);margin:2px 0 0 2px}
.pin span{transform:rotate(45deg);font-size:20px;line-height:1}
.pin-dest{background:var(--teal);animation:bobPin 2.4s ease-in-out infinite}
.pin-trip{background:#7FA9B3}
.pin-vis{background:var(--green)}
.pin-dream{background:#FFD58A;position:relative}
.pin-dream:after{content:"⭐";position:absolute;top:-10px;right:-10px;transform:rotate(45deg);font-size:15px}
@keyframes bobPin{50%{margin-top:-4px}}
.pin-label{position:absolute;left:50%;top:50px;transform:translateX(-50%);white-space:nowrap;background:var(--teal);color:#fff;font-weight:800;font-size:12px;padding:3px 8px;border-radius:99px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.me-dot{width:22px;height:22px;border-radius:50%;background:#2F80ED;border:4px solid #fff;box-shadow:0 0 0 0 rgba(47,128,237,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 16px rgba(47,128,237,0)}100%{box-shadow:0 0 0 0 rgba(47,128,237,0)}}
.pop-title{font-weight:900;font-size:18px;color:var(--teal)}
.pop-sub{font-size:14px;color:var(--muted);font-weight:700;margin-top:2px}
.pop-visits{margin-top:8px;max-height:130px;overflow:auto}
.map-btns .btn{white-space:nowrap;font-size:17px;padding:12px 8px}
.pop-visit{background:#F4F8F7;border-radius:12px;padding:8px 10px;margin-top:6px}
.pv-date{font-weight:800;font-size:15px}
.pv-note{font-size:14px;margin-top:2px;color:#445}
.pop-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pop-thumbs button{width:52px;height:52px;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer}
.pop-thumbs img{width:100%;height:100%;object-fit:cover}
.pop-thumbs .more{align-self:center;font-weight:800;color:var(--muted)}
.route-card .route-km{font-size:46px;font-weight:900;color:var(--teal);line-height:1}
.route-card .route-km small{font-size:22px}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;font-weight:800;color:var(--muted);margin:0 4px}
.legend span{display:flex;align-items:center;gap:6px}
.lg{width:14px;height:14px;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px #ccd}
.lg-me{background:#2F80ED}.lg-dest{background:var(--teal)}.lg-vis{background:var(--green)}.lg-dream{background:#FFD58A}
.search-wrap{position:relative}
.results{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.results button{text-align:left;border:0;background:#fff;border-radius:12px;padding:12px;font-weight:700;font-size:16px;box-shadow:var(--shadow);cursor:pointer}
.res-msg{color:var(--muted);font-weight:700;padding:6px 4px;font-size:15px}
.sel-place{margin:8px 2px 0;font-weight:800;color:var(--green)}
.hint{background:#EEF6F4;border-radius:12px;padding:10px 12px;margin-top:10px;color:var(--teal);font-weight:600}
hr.sep{border:0;border-top:1px solid #EEE;margin:16px 0}

/* ===== Nuestra distancia ===== */
.nd-carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nd-carousel::-webkit-scrollbar{display:none}
.nd-card{flex:0 0 100%;scroll-snap-align:center;border-radius:24px;overflow:hidden;background:linear-gradient(150deg,#16697A,#0F4C5C);color:#fff;box-shadow:var(--shadow)}
.nd-carousel .nd-card:only-child{flex-basis:100%}
.nd-carousel:has(.nd-card + .nd-card) .nd-card{flex-basis:88%}
.nd-top{padding:18px 18px 12px;text-align:center;cursor:pointer}
.nd-title{font-size:19px;font-weight:700;color:#FBE3E8}
.nd-title b{font-weight:900;color:#fff}
.nd-line{display:flex;align-items:center;justify-content:center;margin:14px 0 8px}
.nd-circle{width:62px;height:62px;border-radius:50%;background:rgba(246,214,220,.22);border:2px solid #F6D6DC;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#fff;flex-shrink:0}
.nd-dots{flex:1;max-width:70px;border-top:3px dotted #F6D6DC;opacity:.8}
.nd-heart{margin:0 6px;animation:beat 1.6s ease-in-out infinite}
@keyframes beat{15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.1)}}
.nd-sub{font-size:13px;opacity:.85;font-weight:600}
.nd-names{display:flex;justify-content:space-between;font-size:13px;font-weight:800;opacity:.85;margin-top:6px;padding:0 6px}
.nd-add{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-top:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.08);color:#FBE3E8;font-size:18px;font-weight:800;padding:14px 20px;cursor:pointer;min-height:54px}
.nd-add span{font-size:26px;line-height:1}
.nd-dotsnav{display:flex;justify-content:center;gap:6px;margin:4px 0 14px}
.nd-dotsnav i{width:8px;height:8px;border-radius:50%;background:#C9D6D3}
.nd-dotsnav i.on{background:var(--teal);width:20px;border-radius:9px}
#nuestraDist{margin-bottom:16px}

/* ===== Cumpleaños y días especiales ===== */
.cumple-card{background:linear-gradient(135deg,#FFF4F6,#FDE3E9);border:1px solid #F6D6DC}
.cumple-msg{font-size:22px;font-weight:800;margin:4px 0 2px;color:#5A2433}
.cumple-msg b{font-size:30px;color:var(--pink-ink)}
.cumple-confetti{position:absolute;right:14px;top:10px;font-size:40px;animation:bob 3s ease-in-out infinite}
.sp-item{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:10px 12px;margin-bottom:8px;box-shadow:var(--shadow);cursor:pointer}

/* ===== Mis números ===== */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.stat{position:relative;text-align:left;border:0;border-radius:22px;padding:16px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;box-shadow:var(--shadow);overflow:hidden}
.stat:active{transform:scale(.98)}
.st-ico{position:absolute;top:12px;right:12px;width:54px;height:54px}
.st-ico svg{width:100%;height:100%}
.st-num{font-size:42px;font-weight:900;line-height:1}
.st-lbl{font-size:16px;font-weight:700;line-height:1.2;margin-top:4px}
.st-blue{background:linear-gradient(160deg,#EEF4FF,#DDE8FC);color:#2F6FD6}
.st-purple{background:linear-gradient(160deg,#F6EEFC,#EADBF7);color:#8E4FC9}
.st-green{background:linear-gradient(160deg,#EDF7EF,#DAEEDD);color:#2E8B57}
.st-sky{background:linear-gradient(160deg,#EAF6FA,#D6EDF4);color:#2A8CA8}

/* ===== Nuestro diario ===== */
.timeline{position:relative;padding-left:0}
.tl-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:18px;cursor:pointer}
.tl-date{flex:0 0 62px;background:#fff;border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;padding:6px 0 8px;margin-top:10px;overflow:hidden}
.tl-m{font-size:12px;font-weight:800;color:var(--pink-ink);background:#FDECEF;align-self:stretch;text-align:center;padding:3px 0;margin-top:-6px}
.tl-d{font-size:26px;font-weight:900;line-height:1.1;margin-top:3px}
.tl-y{font-size:12px;font-weight:700;color:var(--muted)}
.tl-card{flex:1;min-width:0;background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.tl-row:active .tl-card{transform:scale(.99)}
.tl-photo{height:170px;background:#EEE}
.tl-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tl-nophoto{display:flex;align-items:center;justify-content:center;font-size:54px;height:110px;background:linear-gradient(135deg,#FDECEF,#E6F3F0)}
.tl-body{padding:12px 14px 14px}
.tl-title{font-size:18px;font-weight:800}
.tl-text{font-size:15px;color:#4A5558;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tl-place{font-size:13px;font-weight:700;color:var(--muted);margin-top:6px}
.entry-photos{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-radius:18px;overflow:hidden}
.entry-photos.one{grid-template-columns:1fr}
.entry-photos button{padding:0;border:0;aspect-ratio:4/3;cursor:pointer}
.entry-photos img{width:100%;height:100%;object-fit:cover;display:block}
.entry-text{font-size:18px;line-height:1.5;white-space:pre-wrap}
.entry-edit-photos{display:flex;gap:8px;flex-wrap:wrap}
.ep{position:relative;width:74px;height:74px;border-radius:12px;overflow:hidden}
.ep img{width:100%;height:100%;object-fit:cover}
.ep button{position:absolute;top:3px;right:3px;width:26px;height:26px;border-radius:50%;border:0;background:var(--pink);color:var(--pink-ink);font-weight:900;font-size:13px}
.link-box{margin-top:12px;background:#F4F8F7;border-radius:14px;padding:12px}
.link-url{font-size:14px;word-break:break-all;font-weight:700;color:var(--teal);background:#fff;border-radius:10px;padding:8px 10px}


/* ===== Eventos de la escuela ===== */
.back-btn{border:0;background:none;color:var(--teal);font-weight:800;font-size:17px;padding:6px 4px;cursor:pointer;min-height:40px}
.ev-home{background:linear-gradient(135deg,#FFFDF5,#FFF3D6);border:1px solid #F8E3AE}
.ev-next{display:flex;align-items:center;gap:12px;margin-top:12px}
.ev-ico{width:50px;height:50px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:var(--shadow);flex-shrink:0}
.ev-ico.big{width:60px;height:60px;font-size:34px}
.ev-title{font-size:19px;font-weight:800}
.ev-type{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#B7791F}
.ev-count{display:inline-block;margin-top:6px;background:var(--teal);color:#fff;font-weight:800;font-size:14px;padding:6px 12px;border-radius:999px}
.ev-empty-mini{margin-top:10px;background:#fff;border:2px dashed #F2D58C;border-radius:14px;padding:14px;text-align:center;font-weight:800;color:#9A6B12}
.ev-empty .big{font-size:40px}
.ev-up{border-left:6px solid #F2B84B}
.ev-cd{display:flex;align-items:baseline;gap:8px;margin-top:12px;background:#FFF6DF;border-radius:14px;padding:10px 14px;font-weight:800;color:#8A5A0B}
.ev-cd-num{font-size:34px;font-weight:900;color:#B7791F;line-height:1}
.ev-proj{margin-top:10px;font-size:15px;font-weight:600;color:#4A5558}
.ev-proud .tl-photo{position:relative}
.ev-proud .tl-nophoto{background:linear-gradient(135deg,#FFF3D6,#FDECEF)}
.ev-medal{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.95);color:#8A5A0B;font-weight:900;font-size:14px;padding:6px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ev-result{display:inline-block;margin-top:10px;background:linear-gradient(135deg,#FFE7A3,#F9C74F);color:#6B4300;font-weight:900;font-size:18px;padding:10px 16px;border-radius:14px}
.type-pick{display:flex;flex-wrap:wrap;gap:8px}
.type-pick button{border:2px solid #E3E8E6;background:#fff;border-radius:14px;padding:10px 12px;font-weight:800;font-size:15px;cursor:pointer;min-height:46px}
.type-pick button.on{border-color:var(--green);background:#E6F3F0;color:var(--teal)}
.chip-btn{border:0;background:#FFF3D6;color:#8A5A0B;border-radius:999px;padding:8px 12px;font-weight:800;font-size:14px;cursor:pointer;min-height:40px}
.st-gold{background:linear-gradient(160deg,#FFF8E6,#FCEBC0);color:#B7791F}
.st-wide{grid-column:1 / -1;min-height:110px}
.st-wide .st-ico{top:50%;transform:translateY(-50%);right:18px;width:64px;height:64px}
.st-lbl small{font-size:13px;font-weight:700;opacity:.85}


/* ===== Contacto y mensajitos ===== */
.btn-wa{background:#25D366;color:#fff;text-decoration:none;box-shadow:0 4px 12px rgba(37,211,102,.3)}
.contacto-card .btn{text-decoration:none;font-size:16px;padding:12px 10px}
.msj-card{background:linear-gradient(160deg,#FFF6F8,#FDE8EE);border:1px solid #F6D6DC}
.msj-box{border-radius:18px;padding:14px 16px;margin-top:12px;position:relative}
.msj-papa{background:#fff;box-shadow:var(--shadow)}
.msj-hija{background:linear-gradient(135deg,#0F4C5C,#16697A);color:#fff}
.msj-from{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--pink-ink)}
.msj-hija .msj-from{color:#FBE3E8}
.msj-text{font-family:Georgia,"Iowan Old Style","Noto Serif",serif;font-size:21px;line-height:1.35;margin-top:6px;animation:fadeUp .4s ease}
.msj-other{border:0;background:rgba(155,61,82,.1);color:var(--pink-ink);font-weight:800;font-size:14px;border-radius:999px;padding:8px 12px;margin-top:10px;cursor:pointer;min-height:40px}
.msj-hija .msj-other{background:rgba(255,255,255,.18);color:#fff;margin-top:0}
.msj-hija .btn-wa{flex:1 1 auto}
.msj-hearts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.msj-hearts span{position:absolute;bottom:10px;animation:heartUp 2s ease-out forwards;opacity:0}
@keyframes heartUp{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-260px) scale(1.2) rotate(15deg)}}
.past-btn{border:2px dashed #C9DAD6;background:#F8FBFA}
.past-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.past-grid button{border:0;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:14px 10px;font-weight:800;font-size:16px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-height:120px;text-align:center}
.past-grid button span{font-size:34px}
.past-grid button small{font-size:12.5px;color:var(--muted);font-weight:700}
.notif-list{margin:8px 0 0;padding-left:18px;font-size:14px;color:var(--ink);font-weight:600}
.notif-list li{margin:3px 0}
.notif-box{background:#F4F8F7;border-radius:14px;padding:12px;margin-top:10px;font-size:15px;font-weight:600}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}