/* ===== Fuentes locales ===== */
@font-face{font-family:Orbitron;src:url(assets/fonts/orbitron-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Orbitron;src:url(assets/fonts/orbitron-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Orbitron;src:url(assets/fonts/orbitron-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:Rajdhani;src:url(assets/fonts/rajdhani-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Rajdhani;src:url(assets/fonts/rajdhani-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Rajdhani;src:url(assets/fonts/rajdhani-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Rajdhani;src:url(assets/fonts/rajdhani-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#050a17; --bg2:#0a1631; --bg3:#102449;
  --cian:#43d6ff; --azul:#1d7cf2; --azul-osc:#0d3b8c;
  --naranja:#2f8cff; --naranja2:#5fb2ff;
  --panel:#0f1f40; --panel2:#0a152d; --tinta:#d6e6ff; --tinta2:#8ea6c8; --borde:#1f3a6b;
  --verde:#7ddc4a; --amarillo:#ffd23f; --rojo:#ff4d5e;
  --brillo:0 0 18px rgba(67,214,255,.55);
  --f-tit:Orbitron, "Segoe UI", sans-serif;
  --f-txt:Rajdhani, "Segoe UI", sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:#e8f1ff;font-family:var(--f-txt);font-size:17px;overflow-x:hidden}
button{font:inherit;cursor:pointer;color:inherit}
input,textarea{font:inherit}
.pantalla{position:fixed;inset:0;display:none;overflow:hidden}
.pantalla.activa{display:block}
#ruta.activa{overflow-y:auto}

/* ===== Fondos ===== */
.fondo-grid{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 50% -10%,rgba(29,124,242,.35),transparent 60%),
    radial-gradient(ellipse at 100% 100%,rgba(47,140,255,.10),transparent 50%),
    linear-gradient(rgba(67,214,255,.06) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(67,214,255,.06) 1px,transparent 1px) 0 0/40px 40px,
    var(--bg)}

/* ===== 1. CARGA ===== */
#carga{background:#02050d;display:none;align-items:center;justify-content:center}
#carga.activa{display:flex}
.tunel{position:absolute;inset:-50%;
  background:repeating-conic-gradient(from 0deg,rgba(67,214,255,.0) 0deg 6deg,rgba(67,214,255,.22) 6.5deg 7deg,rgba(29,124,242,0) 7.5deg 13deg,rgba(47,140,255,.18) 13.5deg 14deg);
  -webkit-mask:radial-gradient(circle,transparent 8%,#000 30%,transparent 70%);mask:radial-gradient(circle,transparent 8%,#000 30%,transparent 70%);
  animation:girar 18s linear infinite, pulsoTunel 2.4s ease-in-out infinite}
.hexgrid{position:absolute;inset:0;opacity:.25;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0l28 16v33L28 65 0 49V16zM28 98V65' fill='none' stroke='%2343d6ff' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask:radial-gradient(circle at 50% 50%,#000,transparent 75%);mask:radial-gradient(circle at 50% 50%,#000,transparent 75%);
  animation:subir 12s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes pulsoTunel{50%{opacity:.6}}
@keyframes subir{to{background-position:0 -98px}}
.carga-centro{position:relative;z-index:2;text-align:center;width:min(560px,92vw)}
.anillos{position:relative;width:200px;height:200px;margin:0 auto 22px}
.carga-logo{position:absolute;inset:22px;width:156px;height:156px;border-radius:50%;box-shadow:0 0 40px rgba(67,214,255,.6);animation:latido 2s ease-in-out infinite}
.anillo{position:absolute;inset:0;border-radius:50%;border:2px solid transparent}
.a1{border-top-color:var(--cian);border-bottom-color:var(--cian);animation:girar 2.2s linear infinite}
.a2{inset:-14px;border-left-color:var(--naranja);border-right-color:rgba(47,140,255,.3);animation:girar 3.4s linear infinite reverse}
.a3{inset:-30px;border:1px dashed rgba(67,214,255,.45);animation:girar 14s linear infinite}
@keyframes latido{50%{transform:scale(1.04);box-shadow:0 0 60px rgba(67,214,255,.85)}}
.sys-call{font-family:var(--f-tit);font-size:.68rem;letter-spacing:.35em;color:var(--cian);margin:0 0 8px;opacity:.85}
.carga-titulo{font-family:var(--f-tit);font-weight:900;font-size:clamp(1.7rem,6.4vw,3rem);letter-spacing:.12em;margin:0 0 26px;position:relative;
  background:linear-gradient(180deg,#fff 30%,#9fdcff 60%,#2f8cff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(67,214,255,.55))}
.carga-titulo::after{content:attr(data-text);position:absolute;inset:0;color:var(--naranja);opacity:0;-webkit-text-fill-color:var(--naranja);animation:glitch 3.2s infinite}
@keyframes glitch{0%,90%,100%{opacity:0;transform:none}92%{opacity:.7;transform:translate(3px,-1px);clip-path:inset(20% 0 55% 0)}95%{opacity:.6;transform:translate(-3px,1px);clip-path:inset(60% 0 10% 0)}}
.barra-marco{position:relative;height:14px;border:1px solid rgba(67,214,255,.6);background:rgba(10,22,49,.8);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);overflow:hidden}
.barra-relleno{height:100%;width:0;background:linear-gradient(90deg,var(--azul),var(--cian) 70%,#fff);box-shadow:var(--brillo);transition:width .18s linear}
.barra-brillo{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);width:30%;animation:barrido 1.4s linear infinite}
@keyframes barrido{from{transform:translateX(-120%)}to{transform:translateX(420%)}}
.barra-info{display:flex;justify-content:space-between;margin-top:8px;font-weight:600;letter-spacing:.06em;color:#bfe9ff;font-size:.95rem}
#cargaPct{font-family:var(--f-tit);color:#fff}
.link-start{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;font-family:var(--f-tit);font-weight:900;
  font-size:clamp(2rem,9vw,5rem);letter-spacing:.2em;color:#fff;background:radial-gradient(circle,#fff 0%,rgba(67,214,255,.9) 25%,rgba(5,10,23,0) 70%);
  opacity:0;pointer-events:none;text-shadow:0 0 30px var(--cian)}
.link-start.go{animation:linkStart 1s ease-out forwards}
@keyframes linkStart{0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}

/* ===== 2. MENÚ ===== */
#menu.activa{display:flex;flex-direction:column}
#menu>*{position:relative;z-index:1}
.menu-top{display:flex;align-items:center;gap:14px;padding:max(18px,env(safe-area-inset-top)) 20px 10px}
.mini-logo{width:54px;height:54px;border-radius:50%;box-shadow:0 0 16px rgba(67,214,255,.5)}
.kicker{margin:0;font-family:var(--f-tit);font-size:.62rem;letter-spacing:.3em;color:var(--cian)}
.menu-titulo{margin:2px 0 0;font-family:var(--f-tit);font-weight:900;font-size:clamp(1.05rem,3.4vw,1.6rem);letter-spacing:.1em}
.menu-reloj{margin-left:auto;text-align:right;line-height:1.1}
.menu-reloj span{display:block;font-size:.85rem;color:#a9c4e8;text-transform:capitalize}
.menu-reloj strong{font-family:var(--f-tit);font-size:1.3rem;color:#fff}
.menu-reloj small{display:block;font-size:.62rem;letter-spacing:.25em;color:var(--naranja)}
.mazo-wrap{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:380px}
.mazo{position:relative;width:min(270px,70vw);height:min(400px,62vh);perspective:1200px;touch-action:pan-y;user-select:none}
.flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:48px;height:48px;border-radius:50%;border:1px solid rgba(67,214,255,.5);
  background:rgba(10,22,49,.75);font-size:1.9rem;line-height:1;color:var(--cian);transition:.2s}
.flecha:hover{background:var(--naranja);color:#fff;border-color:var(--naranja);box-shadow:0 0 18px rgba(47,140,255,.6)}
.flecha.izq{left:max(10px,4vw)} .flecha.der{right:max(10px,4vw)}

.carta{position:absolute;inset:0;border-radius:14px;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s;cursor:pointer;will-change:transform}
.carta-cara{position:absolute;inset:0;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(165deg,#15305e 0%,var(--panel) 55%,var(--panel2) 100%);color:var(--tinta);
  border:1px solid #23457e;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(67,214,255,.25)}
.carta.activa .carta-cara{box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 2px var(--naranja),0 0 34px rgba(47,140,255,.45)}
.carta-cab{background:linear-gradient(90deg,var(--azul-osc),var(--azul));color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-tit);font-size:.62rem;letter-spacing:.25em}
.carta-num{opacity:.75}
.carta-icono{margin:22px auto 10px;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#1a3a70,#0a152d);border:2px solid var(--borde);box-shadow:inset 0 0 0 6px #0c1a36,0 0 0 1px var(--borde),0 0 20px rgba(67,214,255,.25)}
.carta-icono svg{width:52px;height:52px}
.carta-nombre{text-align:center;font-family:var(--f-tit);font-weight:900;font-size:1.15rem;letter-spacing:.06em;color:#fff;padding:0 14px;line-height:1.25}
.carta-sub{text-align:center;font-weight:600;color:var(--tinta2);letter-spacing:.12em;font-size:.82rem;margin-top:6px}
.banderas{display:flex;justify-content:center;gap:8px;margin:14px 0 6px}
.bandera{width:34px;height:22px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.15);position:relative;overflow:hidden}
.b-pe{background:linear-gradient(90deg,#d91023 33.3%,#fff 33.3% 66.6%,#d91023 66.6%)}
.b-ar{background:linear-gradient(#74acdf 33.3%,#fff 33.3% 66.6%,#74acdf 66.6%)}
.b-ar::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#f6b40e}
.b-bo{background:linear-gradient(#d52b1e 33.3%,#f9e300 33.3% 66.6%,#007934 66.6%)}
.carta-stats{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--borde)}
.carta-stats div{padding:12px;text-align:center}
.carta-stats div+div{border-left:1px solid var(--borde)}
.carta-stats b{display:block;font-family:var(--f-txt);font-weight:700;font-size:1.9rem;line-height:1;color:var(--verde)}
.carta-stats .pend b{color:var(--rojo)}
.carta-stats small{font-size:.7rem;letter-spacing:.16em;color:var(--tinta2);font-weight:700}
.carta-entrar{background:var(--naranja);color:#fff;text-align:center;font-family:var(--f-tit);font-size:.72rem;letter-spacing:.3em;padding:10px;opacity:0;transition:.3s}
.carta.activa .carta-entrar{opacity:1}
.carta::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.65) 48%,transparent 60%);background-size:250% 100%;background-position:120% 0;transition:background-position .9s}
.carta.activa:hover::after{background-position:-40% 0}
.puntos{display:flex;justify-content:center;gap:10px;padding:6px}
.puntos button{width:30px;height:5px;border:0;padding:0;background:rgba(255,255,255,.22);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);transition:.3s}
.puntos button.on{background:var(--naranja);width:44px}
.ayuda{text-align:center;color:#8ea6c8;font-size:.9rem;letter-spacing:.06em;margin:6px 0 0}
.menu-pie{display:flex;justify-content:space-between;align-items:center;padding:12px 20px max(14px,env(safe-area-inset-bottom))}

/* ===== Botones SAO ===== */
.sao-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--borde);
  background:linear-gradient(#18346a,var(--panel2));color:var(--tinta);font-weight:700;letter-spacing:.1em;padding:10px 18px;border-radius:4px;
  transition:.18s;font-size:.9rem;white-space:nowrap}
.sao-btn:hover,.sao-btn:focus-visible{background:linear-gradient(var(--naranja2),var(--naranja));color:#fff;border-color:var(--naranja);box-shadow:0 0 14px rgba(47,140,255,.55);outline:none}
.sao-btn.principal{background:linear-gradient(var(--cian),var(--azul));color:#fff;border-color:var(--azul);font-family:var(--f-tit);letter-spacing:.2em;padding:12px 28px}
.sao-btn.principal:hover{background:linear-gradient(var(--naranja2),var(--naranja));border-color:var(--naranja)}
.sao-btn.chico{padding:7px 12px;font-size:.78rem}
.sao-btn.ok{color:var(--verde)}
.sao-btn.ok:hover{background:linear-gradient(#9be86a,#4fae22);border-color:var(--verde)}
.estado-sync{font-family:var(--f-tit);font-size:.62rem;letter-spacing:.2em;color:#8ea6c8}
.estado-sync.nube{color:var(--verde)} .estado-sync.error{color:var(--rojo)}

/* ===== 3. RUTA ===== */
#ruta>*{position:relative;z-index:1}
.ruta-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:max(16px,env(safe-area-inset-top)) 20px 14px;
  background:linear-gradient(180deg,rgba(10,22,49,.95),rgba(10,22,49,.6));border-bottom:1px solid rgba(67,214,255,.3);position:sticky;top:0;z-index:10;backdrop-filter:blur(8px)}
.btn-volver{width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:rgba(255,255,255,.08);font-size:1.8rem;line-height:1;color:#fff;transition:.2s;flex:none}
.btn-volver:hover{background:var(--naranja);border-color:var(--naranja);box-shadow:0 0 16px rgba(47,140,255,.6)}
.ruta-titulo-wrap{flex:1;min-width:180px}
.ruta-titulo-wrap h2{margin:2px 0;font-family:var(--f-tit);font-weight:900;font-size:clamp(1.15rem,3.6vw,1.8rem);letter-spacing:.08em;text-shadow:0 0 16px rgba(67,214,255,.5)}
.ruta-fecha{margin:0;color:#a9c4e8;font-weight:600}
.relojes{display:flex;gap:10px}
.reloj{min-width:132px;background:linear-gradient(#15305e,var(--panel2));border:1px solid var(--borde);color:var(--tinta);border-radius:6px;padding:8px 14px;border-left:4px solid var(--azul)}
.reloj.cli{border-left-color:var(--cian)}
.reloj small{display:flex;align-items:center;gap:6px;font-size:.66rem;letter-spacing:.18em;font-weight:700;color:var(--tinta2)}
.reloj small .bandera{width:18px;height:12px}
.reloj strong{display:block;font-family:var(--f-tit);font-size:1.35rem;color:#fff;font-variant-numeric:tabular-nums}
.reloj em{font-style:normal;font-size:.74rem;color:var(--tinta2);text-transform:capitalize}

.ruta-main{max-width:980px;margin:0 auto;padding:18px 16px 30px}
.sao-panel{border:1px solid var(--borde);background:linear-gradient(170deg,#132a54,var(--panel2));color:var(--tinta);border-radius:8px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.panel-cab{display:flex;align-items:center;gap:10px;padding:10px 16px;background:linear-gradient(90deg,var(--azul-osc),var(--azul));color:#fff;font-family:var(--f-tit);font-size:.72rem;letter-spacing:.28em}
.rombo{width:9px;height:9px;background:var(--naranja);transform:rotate(45deg);box-shadow:0 0 8px var(--naranja)}
#entrada{display:block;width:100%;border:0;border-bottom:1px solid var(--borde);background:#081329;color:#e8f1ff;padding:14px 16px;resize:vertical;min-height:110px;font-size:1.05rem;font-weight:500;outline:none}
#entrada:focus{box-shadow:inset 0 -2px 0 var(--naranja)}
.vista-previa{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s}
.vista-previa.on{max-height:260px;padding:10px 16px;overflow:auto}
.vista-previa p{margin:0 0 4px;font-size:.92rem;color:var(--tinta2)}
.vista-previa .pv{font-weight:700;color:#e8f1ff;letter-spacing:.03em;margin:4px 0;padding-left:12px;border-left:3px solid var(--cian)}
.panel-acciones{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;gap:10px}
.tip{color:var(--tinta2);font-weight:600}

.hp{margin:22px 2px 14px}
.hp-label{display:flex;justify-content:space-between;font-family:var(--f-tit);font-size:.66rem;letter-spacing:.22em;color:#cfe3ff;margin-bottom:6px}
.hp-barra{height:12px;background:linear-gradient(#a3202f,#6e0f1a);border:1px solid rgba(255,255,255,.35);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);overflow:hidden}
.hp-relleno{height:100%;width:0;background:linear-gradient(var(--verde),#4fae22);transition:width .8s cubic-bezier(.2,.8,.2,1),background .5s}


.barra-herr{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.filtros{display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:4px;overflow:hidden}
.filtro{border:0;background:none;padding:8px 12px;font-weight:700;letter-spacing:.1em;font-size:.78rem;color:#cfe3ff}
.filtro.activo{background:var(--naranja);color:#fff}
#buscar{flex:1;min-width:150px;padding:8px 12px;border-radius:4px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;outline:none}
#buscar:focus{border-color:var(--cian)}
.masivas{display:flex;flex-wrap:wrap;gap:6px}

.lista{display:flex;flex-direction:column;gap:16px}
.dia-sep{display:flex;align-items:center;gap:10px;font-family:var(--f-tit);font-size:.66rem;letter-spacing:.3em;color:var(--cian);margin-top:6px}
.dia-sep::before,.dia-sep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(67,214,255,.5),transparent)}
.tarea{border:1px solid var(--borde);background:rgba(12,24,50,.96);color:var(--tinta);border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:entraTarea .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes entraTarea{from{opacity:0;transform:translateY(18px) scale(.97)}}
.tarea-cab{display:flex;align-items:center;gap:10px;padding:9px 14px;background:linear-gradient(90deg,#4a0f1a,#8a1f2c);color:#fff}
.tarea-cab h3{margin:0;font-family:var(--f-tit);font-size:.85rem;letter-spacing:.2em}
.tarea-cab time{font-size:.85rem;color:#b9c9e4;font-weight:600}
.tarea-cab .prog{margin-left:auto;font-family:var(--f-tit);font-size:.7rem;color:#ffd0d5}
.tarea.completa .tarea-cab{background:linear-gradient(90deg,#2e6b16,#4b9a26)}
.tarea.completa .tarea-cab .prog{color:#fff}
.item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--borde);position:relative;animation:entraItem .5s cubic-bezier(.2,.8,.2,1) both;background:#0c1a36;transition:background .3s}
.item:first-of-type{border-top:0}
@keyframes entraItem{from{opacity:0;transform:translateX(-24px)}}
.item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rojo);box-shadow:0 0 8px rgba(255,77,94,.6)}
.item.hecho::before{background:var(--verde);box-shadow:0 0 8px rgba(125,220,74,.6)}
.check{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--rojo);background:transparent;display:grid;place-items:center;transition:.25s;padding:0}
.check svg{width:16px;height:16px;stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s .1s}
.check:hover{border-color:var(--verde)}
.item.hecho .check{background:var(--verde);border-color:var(--verde);box-shadow:0 0 12px rgba(125,220,74,.7)}
.item.hecho .check svg{stroke-dashoffset:0}
.item-cuerpo{flex:1;min-width:0}
.item-texto{font-weight:700;color:#e8f1ff;letter-spacing:.02em;font-size:1.04rem;line-height:1.3;word-break:break-word}
.item-texto .po{color:var(--cian);font-family:var(--f-tit);font-size:.9rem;letter-spacing:.04em}
.item.hecho .item-texto{color:#6f86a8;text-decoration:line-through;text-decoration-color:var(--verde);text-decoration-thickness:2px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.chip{font-size:.68rem;font-weight:700;letter-spacing:.1em;padding:2px 8px;border-radius:3px;background:rgba(47,140,255,.16);color:#9fd0ff;border:1px solid rgba(47,140,255,.3)}
.chip.t-alta,.chip.t-media,.chip.t-normal{background:rgba(255,77,94,.18);color:#ff8f9b;border-color:rgba(255,77,94,.45)}
.item-acc{display:flex;gap:6px;flex:none}
.ib{width:36px;height:36px;border-radius:50%;border:1px solid var(--borde);background:linear-gradient(#18346a,var(--panel2));display:grid;place-items:center;padding:0;transition:.18s;color:var(--tinta)}
.ib svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ib.ok:hover{background:var(--verde);border-color:var(--verde);color:#fff}
.ib.ed:hover{background:var(--naranja);border-color:var(--naranja);color:#fff}
.ib.del:hover{background:#050a17;border-color:var(--cian);color:var(--cian)}
.edit-input{width:100%;font-weight:700;font-size:1rem;padding:8px 10px;border:2px solid var(--naranja);border-radius:4px;color:#e8f1ff;background:#081329;outline:none}
.edit-acc{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.item.sale{animation:romper .5s ease-in forwards}
@keyframes romper{
  0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:none}
  40%{filter:brightness(2.2) saturate(0);clip-path:polygon(0 0,40% 10%,100% 0,90% 60%,100% 100%,50% 85%,0 100%,12% 45%)}
  100%{opacity:0;transform:scale(1.06);filter:brightness(3) blur(3px);clip-path:polygon(20% 20%,45% 30%,80% 15%,70% 55%,85% 85%,50% 70%,15% 85%,30% 50%)}}
.item.flash{animation:flashOk .7s}
@keyframes flashOk{30%{background:#123a2a}}
.vacio{text-align:center;padding:40px 16px;color:#8ea6c8;border:1px dashed rgba(67,214,255,.35);border-radius:8px}
.vacio b{display:block;font-family:var(--f-tit);letter-spacing:.2em;color:#cfe3ff;margin-bottom:6px;font-size:.85rem}
.ruta-pie{display:flex;justify-content:space-between;gap:10px;padding:10px 20px max(14px,env(safe-area-inset-bottom));color:#8ea6c8;font-size:.85rem}

/* ===== Modales SAO ===== */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(2,5,13,.7);backdrop-filter:blur(4px);padding:16px}
.modal[hidden]{display:none}
.sao-msg{width:min(420px,100%);border:1px solid var(--borde);background:linear-gradient(#15305e,var(--panel2));color:var(--tinta);border-radius:8px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:abreMsg .35s cubic-bezier(.2,.9,.3,1.2)}
.sao-msg.ancho{width:min(560px,100%);max-height:90vh;display:flex;flex-direction:column}
.sao-msg.ancho .msg-cuerpo{overflow:auto}
@keyframes abreMsg{from{opacity:0;transform:scaleY(.1)}}
.msg-cab{text-align:center;padding:12px;font-family:var(--f-tit);letter-spacing:.25em;font-size:.8rem;border-bottom:1px solid var(--borde);color:#fff}
.msg-cuerpo{padding:18px 20px;font-weight:600;line-height:1.4}
.msg-cuerpo h4{margin:14px 0 6px;font-family:var(--f-tit);font-size:.7rem;letter-spacing:.2em;color:var(--azul)}
.msg-cuerpo h4:first-child{margin-top:0}
.msg-cuerpo p{margin:0 0 8px}
.fila-btn{display:flex;flex-wrap:wrap;gap:8px}
.campo{display:block;font-size:.85rem;color:var(--tinta2)}
.campo input{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--borde);border-radius:4px;background:#081329;color:#e8f1ff}
.msg-pie{display:flex;justify-content:center;gap:40px;padding:14px;border-top:1px solid var(--borde);background:var(--panel2)}
.sao-circ{width:52px;height:52px;border-radius:50%;border:0;font-size:1.5rem;font-weight:700;color:#fff;transition:.2s}
.sao-circ.ok{background:linear-gradient(#5aa8ff,var(--azul));box-shadow:0 4px 12px rgba(29,124,242,.5)}
.sao-circ.no{background:linear-gradient(#24406f,#0a152d);border:1px solid var(--borde);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.sao-circ:hover{transform:scale(1.08)}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,30px);z-index:60;opacity:0;pointer-events:none;
  border:1px solid var(--borde);background:linear-gradient(#15305e,var(--panel2));color:var(--tinta);font-weight:700;letter-spacing:.06em;padding:10px 20px;border-radius:4px;border-left:4px solid var(--naranja);box-shadow:0 10px 30px rgba(0,0,0,.5);transition:.35s;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Transición de pantallas */
.pantalla.entra{animation:entraPant .55s cubic-bezier(.2,.8,.2,1)}
@keyframes entraPant{from{opacity:0;transform:scale(1.04);filter:blur(6px)}}

@media (max-width:640px){
  html,body{font-size:16px}
  .menu-top{padding-left:16px;padding-right:16px}
  .mini-logo{width:44px;height:44px}
  .menu-reloj strong{font-size:1.05rem}
  .flecha{width:40px;height:40px;font-size:1.5rem}
  .ruta-top{padding-left:16px;padding-right:16px}
  .relojes{width:100%}
  .reloj{flex:1;min-width:0}
  .ruta-main{padding:14px 16px 24px}
  .item{flex-wrap:wrap}
  .item-cuerpo{flex-basis:calc(100% - 46px)}
  .item-acc{margin-left:42px}
  .masivas{width:100%}
  .tip{visibility:hidden}
  .flecha{top:auto;bottom:-6px;transform:none}
  .masivas .sao-btn{flex:1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}