/*
 * Copyright © 2026 Arkanum — software propietario. Todos los derechos reservados.
 * Prohibida su copia, modificación o distribución sin autorización escrita del titular.
 */
/* LAS FUENTES DEL PRODUCTO.
   Los mismos archivos que embarca la aplicación (packages/ark-ui/src/fonts),
   copiados a /f/ por `scripts/preparar.mjs`. El rótulo es EL del login: con una
   sustituta de sistema la página se lee como de otro producto. */
@font-face{font-family:"SF Pro Display";font-weight:700;font-display:swap;src:url(/f/display-bold.woff2) format("woff2")}
@font-face{font-family:"SF Pro Display";font-weight:600;font-display:swap;src:url(/f/display-semibold.woff2) format("woff2")}
@font-face{font-family:"SF Pro Text";font-weight:400;font-display:swap;src:url(/f/text-regular.woff2) format("woff2")}
@font-face{font-family:"SF Pro Text";font-weight:600;font-display:swap;src:url(/f/text-semibold.woff2) format("woff2")}
/* ── Tokens ───────────────────────────────────────────────────────────────
     Paleta tomada del tema real de la app (packages/ark-ui/src/theme.ts): el
     mismo azul de marca, los mismos verdes/ámbares/rojos. Una página de estado
     que no se parece al producto se lee como si fuera de otra empresa. */
  :root {
    --fondo        : #f4f7fb;
    --panel        : #ffffff;
    --panel-alt    : #f3f6fb;
    --borde        : #dde4ec;
    --borde-fuerte : #d7dee7;
    --texto        : #1f2937;
    --texto-2      : #4b5563;
    --texto-3      : #6b7280;
    --marca        : #0f4fa8;
    --marca-suave  : rgba(15, 79, 168, .09);

    --ok           : #16a34a;
    --ok-bg        : #f0fdf4;
    --ok-borde     : #bbf7d0;
    --aviso        : #a16207;
    --aviso-bg     : #fffbeb;
    --aviso-borde  : #fde68a;
    --parcial      : #c2410c;
    --err          : #dc2626;
    --err-bg       : #fff1f2;
    --err-borde    : #fecaca;
    --info         : #2563eb;
    --info-bg      : #eff6ff;
    --info-borde   : #bfdbfe;

    --barra-vacia  : #e6ecf3;
    --sombra       : 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05);
    --radio        : 10px;

    /* LA MISMA FUENTE DEL LOGIN, no una parecida: SF Pro Display para la marca y
       los titulares, SF Pro Text para el cuerpo — los mismos archivos que
       embarca la app (packages/ark-ui/src/fonts), aquí incrustados para que la
       página se vea igual en cualquier máquina, tenga Apple o no. Con una
       sustituta (Inter) el rótulo «se veía otro»: SF Pro es más estrecha, con
       más contraste y terminales cortadas. */
    --display      : 'SF Pro Display', -apple-system, BlinkMacSystemFont,
                     'Helvetica Neue', Helvetica, Arial, sans-serif;
    --texto-fuente : 'SF Pro Text', -apple-system, BlinkMacSystemFont,
                     'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --fondo        : #0e121a;
      --panel        : #1b2333;
      --panel-alt    : #171d2a;
      --borde        : #2b3648;
      --borde-fuerte : #35415a;
      --texto        : #e0e6f0;
      --texto-2      : #9ca3af;
      --texto-3      : #8b95a7;
      --marca        : #4d8ef0;
      --marca-suave  : rgba(77, 142, 240, .14);

      --ok           : #4ade80;
      --ok-bg        : #10231a;
      --ok-borde     : #1d3a2a;
      --aviso        : #fbbf24;
      --aviso-bg     : #241c0a;
      --aviso-borde  : #3d2f0f;
      --parcial      : #fb923c;
      --err          : #f87171;
      --err-bg       : #2a1416;
      --err-borde    : #3f1d1f;
      --info         : #60a5fa;
      --info-bg      : #13233a;
      --info-borde   : #1e3a5f;

      --barra-vacia  : #2b3648;
      --sombra       : 0 1px 2px rgba(0, 0, 0, .35);
    }
  }

  :root[data-theme="dark"] {
    --fondo        : #0e121a;
    --panel        : #1b2333;
    --panel-alt    : #171d2a;
    --borde        : #2b3648;
    --borde-fuerte : #35415a;
    --texto        : #e0e6f0;
    --texto-2      : #9ca3af;
    --texto-3      : #8b95a7;
    --marca        : #4d8ef0;
    --marca-suave  : rgba(77, 142, 240, .14);

    --ok           : #4ade80;
    --ok-bg        : #10231a;
    --ok-borde     : #1d3a2a;
    --aviso        : #fbbf24;
    --aviso-bg     : #241c0a;
    --aviso-borde  : #3d2f0f;
    --parcial      : #fb923c;
    --err          : #f87171;
    --err-bg       : #2a1416;
    --err-borde    : #3f1d1f;
    --info         : #60a5fa;
    --info-bg      : #13233a;
    --info-borde   : #1e3a5f;

    --barra-vacia  : #2b3648;
    --sombra       : 0 1px 2px rgba(0, 0, 0, .35);
  }

  /* ── Base ─────────────────────────────────────────────────────────────── */
  * { box-sizing: border-box; }

  /* El pie se pega al fondo cuando la página es corta —el día que todo va bien
     y no hay ni un incidente que contar— en vez de quedarse flotando a media
     pantalla. */
  html, body { min-height: 100%; }
  body {
    display       : flex;
    flex-direction: column;
    min-height    : 100vh;
    margin      : 0;
    background  : var(--fondo);
    color       : var(--texto);
    font-family : var(--texto-fuente);
    font-size   : 14.5px;
    line-height : 1.55;
    -webkit-font-smoothing: antialiased;
  }

  .envoltura {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    width         : 100%;
    max-width     : 1180px;
    margin        : 0 auto;
    padding-inline: 24px;
    /* Sin relleno abajo: esos 72 px quedaban DESPUÉS del pie y lo dejaban
       flotando con un hueco debajo. El aire que necesita el pie se lo pone él
       mismo, así la página termina donde termina el pie. */
    padding-block : 34px 0;
  }

  h2, h3, h4 { font-family: var(--display); letter-spacing: -.01em; }

  /* ── Cabecera ─────────────────────────────────────────────────────────── */
  .top {
    display        : flex;
    align-items    : flex-start;
    justify-content: space-between;
    gap            : 20px;
    flex-wrap      : wrap;
    padding-bottom : 20px;
    border-bottom  : 1px solid var(--borde);
    margin-bottom  : 22px;
  }

  .marca {
    display       : inline-flex;
    align-items   : baseline;
    gap           : .22em;
    font-family   : var(--display);
    font-size     : 1.75rem;
    font-weight   : 700;
    letter-spacing: -.02em;
    line-height   : 1;
  }
  .marca .ark { color: var(--marca); }
  .marca .sec { color: var(--texto); }

  /* Lo que ESTA página es, dicho una vez y en su sitio: bajo el nombre. Antes
     vivía de subtítulo del cartel de estado, donde explicaba la fontanería justo
     a quien solo quería saber si podía entrar. */
  .lema {
    margin   : 7px 0 0;
    max-width: 60ch;
    font-size: 13.5px;
    color    : var(--texto-3);
  }
  .top-izq { min-width: 0; }

  .top-dcha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

  .btn {
    display      : inline-flex;
    align-items  : center;
    gap          : 7px;
    padding      : 8px 14px;
    border       : 1px solid var(--borde-fuerte);
    border-radius: 8px;
    background   : var(--panel);
    color        : var(--texto-2);
    font-family  : inherit;
    font-size    : 13px;
    font-weight  : 600;
    cursor       : pointer;
    box-shadow   : var(--sombra);
  }
  .btn:hover  { background: var(--panel-alt); color: var(--texto); }
  .btn:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
  .btn svg    { flex-shrink: 0; }

  /* ── Banner global ────────────────────────────────────────────────────── */
  /* El color vive en el PUNTO y en el chip, no en un rectángulo entero: un
     banner ámbar de pared a pared grita, compite con los semáforos de abajo y
     deja el titular escrito en un color que cuesta leer. */
  .banner {
    display      : flex;
    align-items  : flex-start;
    gap          : 15px;
    padding      : 20px 22px;
    border       : 1px solid var(--borde);
    border-radius: var(--radio);
    background   : var(--panel);
    box-shadow   : var(--sombra);
    margin-bottom: 22px;
    flex-wrap    : wrap;
  }
  .banner-txt { flex: 1 1 320px; min-width: 0; }
  .banner-txt .titulo {
    margin        : 0;
    font-family   : var(--display);
    font-size     : 20px;
    font-weight   : 600;
    letter-spacing: -.02em;
    color         : var(--texto);
    text-wrap     : balance;
  }

  /* Con todo en orden no hace falta un cartel: el titular baja al tamaño del
     texto y la caja se encoge a un renglón. A 20 px competía con la marca y
     daba a «no pasa nada» el mismo peso visual que a una caída. El tamaño
     grande se guarda para cuando hay algo que contar. */
  .banner.tranquilo { padding: 13px 18px; align-items: center; }
  .banner.tranquilo .titulo { font-size: 15px; font-weight: 600; }
  .banner.tranquilo .pulso { margin-top: 0; width: 10px; height: 10px; }
  .banner.tranquilo .pulso::after { inset: -6px; }
  .banner-txt .detalle { margin: 5px 0 0; font-size: 13.5px; color: var(--texto-2); }
  .banner-der {
    display       : flex;
    flex-direction: column;
    align-items   : flex-end;
    gap           : 6px;
    margin-left   : auto;
  }
  .banner-der .momento { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }

  .chip {
    display      : inline-block;
    padding      : 3px 10px;
    /* 6 px, no 999: una etiqueta de estado con forma de caramelo se lee como
       adorno. Mismo criterio en el panel del operador. */
    border-radius: 6px;
    font-size    : 12px;
    font-weight  : 600;
    white-space  : nowrap;
  }
  .chip.aviso { background: var(--aviso-bg); color: var(--aviso); border: 1px solid var(--aviso-borde); }
  .chip.ok    { background: var(--ok-bg);    color: var(--ok);    border: 1px solid var(--ok-borde); }

  /* El punto que late: dice «esto se está midiendo AHORA», que es lo primero
     que quiere saber quien entra a una página de estado. */
  .pulso { position: relative; width: 12px; height: 12px; margin-top: 8px; flex-shrink: 0; }
  .pulso i { position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: var(--aviso); }
  .pulso::after {
    content      : '';
    position     : absolute;
    inset        : -7px;
    border-radius: 50%;
    background   : var(--aviso);
    animation    : latir 2.6s ease-out infinite;
  }
  @keyframes latir {
    0%   { transform: scale(.55); opacity: .35; }
    70%  { transform: scale(1.15); opacity: 0; }
    100% { opacity: 0; }
  }

  .punto {
    width        : 12px;
    height       : 12px;
    border-radius: 50%;
    flex-shrink  : 0;
  }
  .punto.ok      { background: var(--ok); }
  .punto.aviso   { background: var(--aviso); }
  .punto.parcial { background: var(--parcial); }
  .punto.err     { background: var(--err); }
  .punto.sm      { width: 9px; height: 9px; }

  /* ── Rejilla principal ────────────────────────────────────────────────── */
  .rejilla {
    display              : grid;
    grid-template-columns: minmax(0, 1fr) 322px;
    gap                  : 22px;
    align-items          : start;
  }
  @media (max-width: 980px) {
    .rejilla { grid-template-columns: minmax(0, 1fr); }
    .lateral { position: static !important; }
  }

  .columna { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
  .lateral { position: sticky; top: 20px; }

  /* ── Tarjetas ─────────────────────────────────────────────────────────── */
  .tarjeta {
    border       : 1px solid var(--borde);
    border-radius: var(--radio);
    background   : var(--panel);
    box-shadow   : var(--sombra);
    overflow     : hidden;
  }

  .tarjeta-cab {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 12px;
    padding        : 13px 18px;
    border-bottom  : 1px solid var(--borde);
    background     : var(--panel-alt);
  }
  .tarjeta-cab h2, .tarjeta-cab h3 {
    margin        : 0;
    font-size     : 12.5px;
    font-weight   : 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color         : var(--texto-3);
  }
  .tarjeta-cab .apunte { font-size: 12px; color: var(--texto-3); }

  /* ── Incidente ────────────────────────────────────────────────────────── */
  .incidente { padding: 20px; }
  .incidente h3 {
    margin     : 0 0 8px;
    font-size  : 18px;
    font-weight: 600;
    text-wrap  : balance;
  }
  .fase {
    display       : inline-block;
    padding       : 2px 9px;
    border-radius : 6px;
    font-size     : 11.5px;
    font-weight   : 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .fase.identificado { background: var(--aviso-bg); color: var(--aviso); border: 1px solid var(--aviso-borde); }
  .fase.resuelto     { background: var(--ok-bg);    color: var(--ok);    border: 1px solid var(--ok-borde); }
  .fase.investigando { background: var(--err-bg);   color: var(--err);   border: 1px solid var(--err-borde); }
  .fase.programado   { background: var(--info-bg);  color: var(--info);  border: 1px solid var(--info-borde); }

  .afecta { margin: 12px 0 18px; font-size: 13px; color: var(--texto-3); }
  .afecta b { color: var(--texto-2); font-weight: 600; }

  .linea { list-style: none; margin: 0; padding: 0; }
  .linea li { position: relative; padding: 0 0 20px 27px; }
  .linea li:last-child { padding-bottom: 0; }

  /* ⭐ El punto y el hilo nacen del MISMO sitio. Antes el hilo era el
     `border-left` del <li> y el punto se colgaba con un `left` negativo: el
     borde vive FUERA de la caja de padding, así que los dos centros quedaban
     separados 2 px y el punto se veía descolgado del hilo. Ahora el punto va en
     0 y el hilo centrado debajo —(11 − 2) / 2 = 4,5 px—, y además arranca DEL
     punto en vez de asomar por encima del primero. */
  .linea li::before {
    content      : '';
    position     : absolute;
    left         : 0;
    top          : 4px;
    width        : 11px;
    height       : 11px;
    border-radius: 50%;
    background   : var(--borde-fuerte);
  }
  .linea li::after {
    content   : '';
    position  : absolute;
    left      : 4.5px;
    top       : 19px;
    bottom    : 0;
    width     : 2px;
    background: var(--borde);
  }
  .linea li:last-child::after { display: none; }
  .linea li.vivo::before {
    background: var(--aviso);
    box-shadow: 0 0 0 4px var(--aviso-bg);
  }
  .linea .cuando { display: block; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
  .linea .que { margin: 3px 0 0; font-size: 14px; color: var(--texto-2); }
  .linea .que strong { color: var(--texto); font-weight: 600; }

  /* ── Sistemas ─────────────────────────────────────────────────────────── */
  .comp { padding: 17px 18px; border-bottom: 1px solid var(--borde); }
  .comp:last-child { border-bottom: 0; }

  .comp-fila { display: flex; align-items: baseline; gap: 14px; margin-bottom: 11px; }
  .comp-nombre { font-weight: 600; min-width: 0; }
  .comp-sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--texto-3); }
  .comp-estado {
    margin-left: auto;
    display    : inline-flex;
    align-items: center;
    gap        : 7px;
    font-size  : 13.5px;
    font-weight: 600;
    white-space: nowrap;
  }
  .comp-estado.ok      { color: var(--ok); }
  .comp-estado.aviso   { color: var(--aviso); }
  .comp-estado.parcial { color: var(--parcial); }

  .barra { display: flex; gap: 2px; height: 32px; align-items: stretch; }
  .dia {
    flex         : 1 1 0;
    min-width    : 2px;
    border-radius: 1.5px;
    background   : var(--ok);
  }
  .dia.aviso   { background: var(--aviso); }
  .dia.parcial { background: var(--parcial); }
  .dia.err     { background: var(--err); }
  .dia.sin     { background: var(--barra-vacia); }
  .dia:hover   { filter: brightness(1.18); }

  .barra-pie {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    gap            : 10px;
    margin-top     : 8px;
    font-size      : 12px;
    color          : var(--texto-3);
    font-variant-numeric: tabular-nums;
  }
  .barra-pie .linea-fina { flex: 1; height: 1px; background: var(--borde); }

  #globo {
    position      : fixed;
    z-index       : 30;
    pointer-events: none;
    padding       : 8px 11px;
    border-radius : 6px;
    background    : var(--texto);
    color         : var(--fondo);
    font-size     : 12px;
    line-height   : 1.45;
    box-shadow    : 0 6px 18px rgba(0,0,0,.22);
    opacity       : 0;
    transition    : opacity .12s;
    white-space   : nowrap;
    font-variant-numeric: tabular-nums;
  }
  #globo.visible { opacity: 1; }
  #globo b { display: block; font-weight: 600; }

  /* ── Historial ────────────────────────────────────────────────────────── */
  .dia-bloque { padding: 17px 18px; border-bottom: 1px solid var(--borde); }
  .dia-bloque:last-child { border-bottom: 0; }
  .dia-fecha {
    margin        : 0 0 11px;
    font-size     : 13px;
    font-weight   : 600;
    color         : var(--texto-3);
    padding-bottom: 9px;
    border-bottom : 1px solid var(--borde);
  }
  .dia-vacio { font-size: 14px; color: var(--texto-3); }
  .hist-item + .hist-item { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde); }
  .hist-item h4 { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; }
  .hist-item p  { margin: 0; font-size: 13.5px; color: var(--texto-2); }
  .hist-meta    { margin-top: 7px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
                  font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }

  /* ── Lateral ──────────────────────────────────────────────────────────── */
  .cuerpo { padding: 18px; }

  .gran-num {
    font-family   : var(--display);
    font-size     : 40px;
    font-weight   : 700;
    letter-spacing: -.03em;
    line-height   : 1;
    color         : var(--texto);
    font-variant-numeric: tabular-nums;
  }
  .gran-num small { font-size: 17px; font-weight: 600; color: var(--texto-3); margin-left: 3px; }
  .gran-pie { margin-top: 6px; font-size: 12.5px; color: var(--texto-3); }

  .mini-lista { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--borde); }
  .mini-lista.sin-linea { margin: 0; padding: 0; border-top: 0; }
  .mini-lista li + li { border-top: 1px solid var(--borde); }
  .mini-lista li {
    display        : flex;
    justify-content: space-between;
    gap            : 12px;
    font-size      : 13px;
    padding        : 5px 0;
    color          : var(--texto-2);
  }
  .mini-lista b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }

  .grafico { padding: 16px 18px 12px; }
  .grafico svg { display: block; width: 100%; height: auto; }

  /* El color del gráfico va por CSS, NO por atributos de presentación: `var()`
     no se resuelve dentro de fill="…" ni stroke="…", así que escrito ahí el
     trazo sale negro en claro e invisible en oscuro. */
  .g-eje   { stroke: var(--borde); stroke-width: 1; }
  .g-area  { fill: url(#degradado-latencia); }
  .g-linea { fill: none; stroke: var(--marca); stroke-width: 1.8;
             stroke-linejoin: round; stroke-linecap: round; }
  .g-punto { fill: var(--marca); stroke: var(--panel); stroke-width: 1.6; }
  .g-txt   { fill: var(--texto-3); font-size: 10px; font-family: var(--texto-fuente); }
  .g-alto  { stop-color: var(--marca); stop-opacity: .22; }
  .g-bajo  { stop-color: var(--marca); stop-opacity: 0; }

  .aviso-mant {
    display      : flex;
    gap          : 11px;
    padding      : 15px 18px;
    background   : var(--info-bg);
    border-top   : 1px solid var(--info-borde);
  }
  .aviso-mant p { margin: 0; font-size: 13px; color: var(--texto-2); }
  .aviso-mant b { display: block; color: var(--texto); font-weight: 600; margin-bottom: 2px; }

  .nota-maqueta {
    margin-top   : 26px;
    padding      : 12px 16px;
    border       : 1px dashed var(--borde-fuerte);
    border-radius: 8px;
    font-size    : 12.5px;
    color        : var(--texto-3);
    background   : var(--panel-alt);
  }

  .pie {
    margin-top   : auto;
    padding-block: 20px 26px;
    border-top   : 1px solid var(--borde);
    display      : flex;
    flex-wrap    : wrap;
    gap          : 8px 18px;
    align-items  : center;
    font-size    : 12.5px;
    color        : var(--texto-3);
  }
  .pie a { color: var(--texto-2); text-decoration: none; }
  .pie a:hover { color: var(--marca); text-decoration: underline; }
  .pie .sep { color: var(--borde-fuerte); }
  .pie .der { margin-left: auto; }

  @media (max-width: 600px) {
    .envoltura { padding-inline: 16px; }
    .marca { font-size: 1.5rem; }
    .banner .sub { margin-left: 0; width: 100%; text-align: left; }
    .comp-estado { margin-left: 0; }
    .comp-fila { flex-wrap: wrap; }
    .pie .der { margin-left: 0; }
  }

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

/* ── Lo que la maqueta no necesitaba y la página real sí ──────────────────── */

/* El tono del banner lo decide el estado de VERDAD, no un valor escrito a mano.
   El color sigue viviendo en el punto y el chip, nunca en un rectángulo entero. */
.banner.ok    .pulso i, .banner.ok    .pulso::after { background: var(--ok); }
.banner.err   .pulso i, .banner.err   .pulso::after { background: var(--err); }
.banner.sin   .pulso i, .banner.sin   .pulso::after { background: var(--texto-3); }
.banner.sin   .pulso::after { animation: none; }

.chip.err { background: var(--err-bg); color: var(--err); border: 1px solid var(--err-borde); }
.chip.sin { background: var(--panel-alt); color: var(--texto-3); border: 1px solid var(--borde); }

.punto.err { background: var(--err); }
.punto.sin { background: var(--texto-3); opacity: .45; }

.comp-estado.err { color: var(--err); }
.comp-estado.sin { color: var(--texto-3); }

/* Un día sin medidas se pinta en gris: no es que fuera bien, es que no
   estábamos mirando. Los primeros 90 días la barra estará medio vacía. */
.dia.sin { background: var(--barra-vacia); }

.fase.monitorizando { background: var(--info-bg); color: var(--info); border: 1px solid var(--info-borde); }

.sin-datos { margin: 0; padding: 6px 0 12px; font-size: 13px; color: var(--texto-3); }

/* La hora traducida a la zona del visitante no debe descolocar la línea al
   cambiar de texto: se reserva sitio con números de ancho fijo. */
time { font-variant-numeric: tabular-nums; }