/* ============================================================================
   GEO-FIBER · NOC MÓVIL
   ----------------------------------------------------------------------------
   CSS propio, escrito a mano, NO Tailwind. La spec F10 §9 advertía que había que
   agregar `./movil/**` a tailwind.config.js o las clases se purgan y la versión
   móvil sale sin estilos. Escribiendo el CSS directamente esa trampa no existe,
   y además el teléfono se baja 6 KB en vez del bundle entero del admin.

   Paleta heredada del design system cosmic de la plataforma.
   ========================================================================== */

:root {
    --bg:        #060814;
    --bg-2:      #0b0f1f;
    --card:      #111729;
    --hair:      rgba(255,255,255,.09);
    --hair-hi:   rgba(255,255,255,.16);
    --txt:       #e8ecf7;
    --txt-2:     #a6aec4;
    --txt-3:     #5c6685;
    --acc:       #6e8bff;
    --ok:        #34d399;
    --warn:      #fbbf24;
    --bad:       #fb7185;
    --off:       #64748b;

    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

    /* La barra del navegador en iOS cambia de alto al scrollear y rompe 100vh. */
    --alto: 100dvh;
    --tabs: 64px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg); color: var(--txt);
    font-family: var(--sans); font-size: 16px; line-height: 1.5;
    overscroll-behavior-y: none;
}
body { min-height: var(--alto); min-height: 100vh; }

.hidden { display: none !important; }

/* ------------------------------------------------------------- cabecera ---- */
.top {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(10px + var(--safe-t)) 16px 10px;
    background: rgba(6,8,20,.93);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hair);
}
.top-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.top-id strong { font-size: .95rem; font-weight: 700; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
.top-act { display: flex; gap: 8px; flex: none; }

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--off); flex: none;
       transition: background .3s; }
.dot.vivo { background: var(--ok); box-shadow: 0 0 10px var(--ok); }

.mini {
    background: transparent; color: var(--txt-2); border: 1px solid var(--hair-hi);
    border-radius: 999px; padding: 6px 13px; font-size: .78rem; font-weight: 700;
    font-family: inherit; cursor: pointer;
}
.mini:active { transform: translateY(1px); }
#btn-instalar { color: var(--acc); border-color: var(--acc); }

/* ---------------------------------------------------------------- aviso ---- */
.banner {
    padding: 9px 16px; font-size: .8rem; font-weight: 600; text-align: center;
    background: rgba(251,191,36,.14); color: var(--warn);
    border-bottom: 1px solid rgba(251,191,36,.3);
}

/* ------------------------------------------------------------- contenido --- */
main { padding: 14px 16px calc(var(--tabs) + var(--safe-b) + 20px); }
.cargando { color: var(--txt-3); text-align: center; padding: 34px 0; font-size: .9rem; }

/* ------------------------------------------------------------ contadores --- */
.conts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.cont {
    background: var(--card); border: 1px solid var(--hair); border-radius: 14px;
    padding: 11px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-family: inherit; cursor: pointer; color: var(--txt-2);
}
.cont b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.cont span { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
             color: var(--txt-3); text-align: center; }
.cont.ok b   { color: var(--ok); }
.cont.warn b { color: var(--warn); }
.cont.bad b  { color: var(--bad); }
.cont.off b  { color: var(--off); }
.cont.sel { border-color: var(--acc); background: rgba(110,139,255,.12); }

/* ------------------------------------------------------------ lista ------- */
.lista { display: flex; flex-direction: column; gap: 9px; }
.item {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--card); border: 1px solid var(--hair); border-left-width: 4px;
    border-radius: 13px; padding: 13px 14px; font-family: inherit; color: var(--txt);
    cursor: pointer;
}
.item:active { transform: scale(.99); }
.item.ONLINE  { border-left-color: var(--ok); }
.item.WARNING { border-left-color: var(--warn); }
.item.DANGER  { border-left-color: var(--bad); }
.item.OFFLINE { border-left-color: var(--off); }
.item-txt { flex: 1; min-width: 0; }
.item-txt b { display: block; font-size: .95rem; font-weight: 700;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Solo el span DIRECTO es la linea de abajo. Sin el `>`, esta regla pisaba el
   inline-block de .etq y la etiqueta se estiraba a todo el ancho de la fila. */
.item-txt > span { display: block; font-size: .76rem; color: var(--txt-3); margin-top: 3px; }
.item-km { font-family: var(--mono); font-size: .92rem; font-weight: 600;
           font-variant-numeric: tabular-nums; flex: none; }

.etq { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .05em;
       text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.etq.ONLINE  { background: rgba(52,211,153,.16); color: var(--ok); }
.etq.WARNING { background: rgba(251,191,36,.16); color: var(--warn); }
.etq.DANGER  { background: rgba(251,113,133,.16); color: var(--bad); }
.etq.OFFLINE { background: rgba(100,116,139,.18); color: var(--off); }

/* ------------------------------------------------------------- tarjetas ---- */
.caja { background: var(--card); border: 1px solid var(--hair); border-radius: 16px;
        padding: 16px; margin-bottom: 12px; }
.caja h2 { margin: 0 0 12px; font-size: .72rem; font-weight: 800; letter-spacing: .09em;
           text-transform: uppercase; color: var(--txt-3); }
.caja.grave { border-color: rgba(251,113,133,.45); background: rgba(251,113,133,.07); }

.dato { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
        padding: 8px 0; border-bottom: 1px solid var(--hair); }
.dato:last-child { border-bottom: none; }
.dato dt { color: var(--txt-3); font-size: .82rem; }
.dato dd { margin: 0; font-family: var(--mono); font-weight: 600; font-size: .92rem;
           text-align: right; font-variant-numeric: tabular-nums; }

/* El dato que se lee de un vistazo a las 3 de la mañana. */
.grande { font-family: var(--mono); font-size: 2.4rem; font-weight: 800; line-height: 1.05;
          letter-spacing: -.02em; text-align: center; margin: 4px 0 2px; }
.grande.bad { color: var(--bad); }
.sub { text-align: center; color: var(--txt-3); font-size: .78rem; margin: 0 0 14px; }

.coord { font-family: var(--mono); font-size: 1.02rem; text-align: center;
         background: rgba(0,0,0,.45); border: 1px solid var(--hair); border-radius: 12px;
         padding: 13px 10px; color: var(--ok); word-break: break-all; }

/* -------------------------------------------------------------- botones ---- */
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 14px 10px; border-radius: 13px; border: 1px solid var(--hair-hi);
    background: var(--bg-2); color: var(--txt); font-family: inherit;
    font-size: .86rem; font-weight: 700; cursor: pointer; width: 100%;
}
.btn:active { transform: translateY(1px); }
.btn.pri { background: var(--acc); border-color: var(--acc); color: #060814; }
.btn.ancho { grid-column: 1 / -1; }
.btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }

/* ══════════════════════════ LA TIRA DEL ENLACE ══════════════════════════
   Spec F10 §5.a. La reflectometría no entra en un teléfono: son 4000 muestras
   en 360 píxeles, once puntos por píxel, y se ve una mancha. La tira dice de un
   vistazo hasta dónde llega la fibra y dónde se corta.

   Hoy solo dibuja origen, fin esperado y punto de falla, porque es lo único que
   sabemos de verdad: NO hay tabla de eventos (eso es T23/T26/T28). El contenedor
   ya acepta marcas de eventos para cuando existan. */
.tira-wrap { padding: 6px 0 2px; }
.tira {
    position: relative; height: 42px; border-radius: 10px; overflow: hidden;
    background: linear-gradient(90deg, rgba(52,211,153,.30), rgba(52,211,153,.10));
    border: 1px solid var(--hair);
}
.tira.WARNING { background: linear-gradient(90deg, rgba(251,191,36,.32), rgba(251,191,36,.10)); }
.tira.DANGER  { background: linear-gradient(90deg, rgba(251,113,133,.32), rgba(251,113,133,.08)); }
.tira.OFFLINE { background: linear-gradient(90deg, rgba(100,116,139,.30), rgba(100,116,139,.08)); }

/* Tramo muerto: de la falla al fin esperado ya no hay fibra viva. */
.tira-muerto { position: absolute; top: 0; bottom: 0; right: 0;
               background: repeating-linear-gradient(45deg, rgba(0,0,0,.55) 0 6px, rgba(0,0,0,.3) 6px 12px); }
.tira-marca { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--txt);
              box-shadow: 0 0 8px rgba(0,0,0,.8); }
.tira-marca.falla { background: var(--bad); width: 4px; box-shadow: 0 0 12px var(--bad); }
.tira-ejes { display: flex; justify-content: space-between; margin-top: 6px;
             font-family: var(--mono); font-size: .68rem; color: var(--txt-3); }
.tira-nota { text-align: center; font-size: .72rem; color: var(--txt-3); margin: 8px 0 0; }

/* --------------------------------------------------------- reflectometría -- */
#curva { width: 100%; height: 170px; display: block; background: rgba(0,0,0,.4);
         border: 1px solid var(--hair); border-radius: 12px; }

/* -------------------------------------------------------------- alertas ---- */
.alerta { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0;
          border-bottom: 1px solid var(--hair); }
.alerta:last-child { border-bottom: none; }
.alerta-p { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; }
.alerta-p.DANGER { background: var(--bad); }
.alerta-p.WARNING { background: var(--warn); }
.alerta-p.ONLINE { background: var(--ok); }
.alerta-t { flex: 1; min-width: 0; }
.alerta-t b { font-size: .87rem; font-weight: 700; }
.alerta-t span { display: block; font-size: .74rem; color: var(--txt-3); margin-top: 1px; }
.alerta-h { font-family: var(--mono); font-size: .7rem; color: var(--txt-3); flex: none; }

/* ---------------------------------------------------------------- tabs ----- */
.tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(11,15,31,.97);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--hair);
    padding-bottom: var(--safe-b);
}
.tab {
    position: relative; background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: var(--tabs); color: var(--txt-3); font-family: inherit;
}
.tab svg { width: 21px; height: 21px; fill: currentColor; }
.tab span { font-size: .63rem; font-weight: 700; }
.tab.activa { color: var(--acc); }
.pip { position: absolute; top: 11px; right: 50%; margin-right: -17px;
       width: 8px; height: 8px; border-radius: 50%; background: var(--bad);
       box-shadow: 0 0 8px var(--bad); }

/* ----------------------------------------------------------- hoja de iOS --- */
.hoja { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.75);
        display: flex; align-items: flex-end; }
.hoja-caja { background: var(--bg-2); border-top: 1px solid var(--hair-hi);
             border-radius: 20px 20px 0 0; padding: 24px 22px calc(28px + var(--safe-b));
             width: 100%; }
.hoja-caja h2 { margin: 0 0 14px; font-size: 1.05rem; }
.hoja-caja ol { margin: 0 0 14px; padding-left: 20px; color: var(--txt-2); font-size: .9rem; }
.hoja-caja li { margin-bottom: 8px; }
.fino { font-size: .78rem; color: var(--txt-3); margin: 0 0 16px; }
.ios-share { display: inline-block; width: 13px; height: 17px; vertical-align: -3px;
             border: 1.5px solid var(--acc); border-top: none; border-radius: 0 0 3px 3px;
             position: relative; }
.ios-share::before { content: ""; position: absolute; left: 4.5px; top: -7px;
                     width: 1.5px; height: 9px; background: var(--acc); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }