/* estilo.css — panel de plataforma.
   ⛔ LOS COLORES NO SE DEFINEN ACÁ: salen de tokens.css, generado por
   scripts/generar_tokens_css.php desde lib/provider/theme_provider.dart.
   Este archivo sólo les pone nombres cortos. */

:root {
  --fondo:   var(--hp-scaffold-bg);
  --panel:   var(--hp-card-bg);
  --borde:   var(--hp-border);
  --texto:   var(--hp-text-primary);
  --suave:   var(--hp-text-secondary);
  --acento:  var(--hp-aqua-btn);
  --campo:   var(--hp-input-bg);
  --bien:    var(--hp-success-fg);
  --mal:     var(--hp-error-fg);
  --tibio:   var(--hp-warning-fg);
  --cabtabla: var(--hp-table-header-bg);
  --hover:   var(--hp-hover-bg);
}

* { box-sizing: border-box; }
body { margin:0; padding:28px 16px; background:var(--fondo); color:var(--texto);
       font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
body.centrado { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px; }

.tarjeta { max-width:1080px; margin:0 auto; background:var(--panel);
           border:1px solid var(--borde); border-radius:12px; padding:26px 30px 32px; }
.tarjeta.angosta { max-width:440px; }

header { border-bottom:1px solid var(--borde); padding-bottom:14px; margin-bottom:20px; }
h1 { margin:0; font-size:22px; }
h2 { font-size:17px; margin:24px 0 10px; }
.sub { margin:5px 0 0; color:var(--suave); font-size:13.5px; }

.aviso { padding:11px 13px; border-radius:8px; margin:14px 0; border-left:3px solid; font-size:14px; }
.aviso.bien   { background:color-mix(in srgb, var(--bien) 10%, transparent);  border-color:var(--bien); }
.aviso.mal    { background:color-mix(in srgb, var(--mal) 10%, transparent);   border-color:var(--mal); }
.aviso.alerta { background:color-mix(in srgb, var(--tibio) 10%, transparent); border-color:var(--tibio); }

label { display:block; margin:14px 0 0; font-size:13.5px; color:var(--suave); }
input, select { display:block; width:100%; margin-top:5px; padding:9px 11px;
  background:var(--campo); color:var(--texto); border:1px solid var(--borde);
  border-radius:7px; font:inherit; font-size:14px; }
input:focus, select:focus { outline:none; border-color:var(--acento); }

button, .boton { display:inline-block; margin:20px 8px 0 0; padding:10px 20px;
  background:var(--acento); color:#fff; border:0; border-radius:7px;
  font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
button:hover, .boton:hover { filter:brightness(1.12); }
.boton.suave { background:transparent; border:1px solid var(--borde); color:var(--suave); font-weight:500; }

table { width:100%; border-collapse:collapse; margin:12px 0; font-size:14px; }
th { text-align:left; background:var(--cabtabla); color:var(--texto);
     padding:9px 10px; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; }
td { padding:9px 10px; border-bottom:1px solid var(--borde); }
tbody tr:hover { background:var(--hover); }

.etiqueta { display:inline-block; padding:2px 8px; border-radius:11px; font-size:11.5px; font-weight:600; }
.etiqueta.prod { background:color-mix(in srgb, var(--bien) 18%, transparent);  color:var(--bien); }
.etiqueta.test { background:color-mix(in srgb, var(--tibio) 18%, transparent); color:var(--tibio); }
.etiqueta.baja { background:color-mix(in srgb, var(--mal) 18%, transparent);   color:var(--mal); }

.nota { color:var(--suave); font-size:13px; margin:8px 0 0; }
.mono-chico { font-family:ui-monospace,Consolas,monospace; font-size:11.5px; color:var(--suave); word-break:break-all; }
code { background:var(--fondo); padding:1px 5px; border-radius:4px; font-size:12.5px; }
.secreto { font-family:ui-monospace,Consolas,monospace; font-size:17px; letter-spacing:1.5px;
  background:var(--fondo); border:1px dashed var(--borde); border-radius:8px;
  padding:14px; text-align:center; margin:14px 0; user-select:all; }
details { margin-top:14px; } summary { cursor:pointer; color:var(--suave); font-size:13px; }
.barra { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.metricas { display:flex; gap:12px; flex-wrap:wrap; margin:14px 0; }
.metrica { flex:1; min-width:130px; background:var(--fondo); border:1px solid var(--borde);
  border-radius:9px; padding:13px 15px; }
.metrica .n { font-size:25px; font-weight:700; }
.metrica .q { font-size:12px; color:var(--suave); text-transform:uppercase; letter-spacing:.4px; }

/* ── Filtros del listado (A1) ─────────────────────────────────────────────── */
.filtros { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin:16px 0 4px; }
.filtros input[type=search] { flex:1 1 260px; margin-top:0; }
.filtros select { flex:0 0 auto; width:auto; margin-top:0; }
.filtros button { margin:0; }
a { color:var(--acento); }
table th[scope], table tr > th:first-child { white-space:nowrap; }

/* ── A4 · ciclo de vida ─────────────────────────────────────────────────────
   Los formularios de acción van en línea, no apilados: suspender y reactivar
   son una etiqueta y un botón, y verlos como un formulario alto de página
   completa hace parecer grave lo que es reversible.

   🪤 `.peligro` NO es rojo por decoración. Suspender y retirar viven en la
   misma pantalla que otorgar meses, y las tres son un botón. El color es lo
   único que distingue «le regalo tres meses» de «le corto el servicio» cuando
   alguien hace clic sin leer. */
form.accion { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px;
              margin:12px 0; padding:12px 14px; border:1px solid var(--borde);
              border-radius:8px; background:var(--hp-input-bg); }
form.accion label { flex:1 1 320px; margin:0; }
form.accion button { margin:0; }

button.peligro, .boton.peligro {
  background:color-mix(in srgb, var(--mal) 88%, black);
  color:#fff; border-color:var(--mal);
}

/* ── El código QR del segundo factor ─────────────────────────────────────── */
.qr-fila { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; margin-top:16px; }
/* 🪤 El QR va sobre BLANCO, siempre. Sobre el fondo oscuro del panel muchos
   lectores no lo encuentran: esperan módulos oscuros sobre claro. */
.qr { background:#fff; padding:10px; border-radius:8px; line-height:0; }
.qr svg { display:block; }
.qr-texto { flex:1; min-width:260px; }
.qr-texto p { margin:0 0 10px; font-size:14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   EL INGRESO — el campo de contraseña y el de seis dígitos
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Contraseña con el ojo para mirarla ──────────────────────────────────── */
.campo-clave { position:relative; }
.campo-clave input { padding-right:44px; }
.campo-clave .ojo {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:6px; cursor:pointer;
  color:var(--suave);
}
.campo-clave .ojo:hover { background:var(--hover); color:var(--texto); filter:none; }
.campo-clave .ojo svg { width:18px; height:18px; display:block; }
/* 🪤 El ojo se dibuja recién cuando el script lo enciende. Sin JavaScript no
   podría alternar nada, y un botón que no hace nada es peor que su ausencia. */
.campo-clave .ojo[hidden] { display:none; }

/* ── Las seis casillas del código ────────────────────────────────────────── */
.otp { display:flex; gap:9px; margin-top:6px; }
.otp input {
  width:100%; margin:0; padding:0; height:52px;
  text-align:center; font-size:22px; font-weight:600; letter-spacing:0;
  font-variant-numeric:tabular-nums;
  background:var(--campo); border:1px solid var(--borde); border-radius:9px;
  color:var(--texto);
  transition:border-color .12s ease, background-color .12s ease;
}
.otp input:focus {
  outline:none; border-color:var(--acento);
  background:color-mix(in srgb, var(--acento) 8%, var(--campo));
}
/* Una casilla ya cargada se ve distinta de una vacía: se lee de un vistazo
   cuántos dígitos faltan sin tener que contarlos. */
.otp input.cargado { border-color:color-mix(in srgb, var(--acento) 55%, var(--borde)); }

/* El campo plano original queda como respaldo: si el script no corre, es lo
   único que hay, y tiene que verse bien igual. */
.otp-plano { font-size:20px; letter-spacing:.4em; text-align:center;
             font-variant-numeric:tabular-nums; padding:12px 11px; }

.pista { margin:7px 0 0; font-size:12.5px; color:var(--suave); }

/* ═══════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN DEL PANEL

   🪤 Existe desde que el panel pasó de tres páginas a nueve. Con la navegación
   repetida en cada archivo, una página nueva queda alcanzable sólo por URL —
   existe y nadie la encuentra. Ahora se declara una vez, en `hp_menu()`.
   ═══════════════════════════════════════════════════════════════════════════ */
.menu { max-width:1080px; margin:0 auto 14px; display:flex; align-items:center;
        gap:10px; flex-wrap:wrap; padding:0 4px; }
.menu ul { list-style:none; display:flex; gap:2px; flex-wrap:wrap;
           margin:0; padding:0; flex:1; }
.menu a { display:block; padding:8px 13px; border-radius:8px; font-size:14px;
          color:var(--suave); text-decoration:none; white-space:nowrap; }
.menu a:hover { background:color-mix(in srgb, var(--acento) 10%, transparent);
                color:var(--texto); }
.menu a.actual { background:var(--acento); color:#fff; font-weight:600; }
.menu .salir { padding:8px 13px; border-radius:8px; font-size:14px;
               color:var(--suave); text-decoration:none; }
.menu .salir:hover { color:var(--mal); }
/* AP-2.2-8 (11/10/2026 02:01): «Salir» es un botón de un formulario POST; se ve igual que el enlace de antes. */
.menu .salir-form { display:inline; margin:0; }
.menu button.salir { background:none; border:0; cursor:pointer; font:inherit; }

/* Una tabla vacía DICE por qué está vacía: «no hay nada» y «esto no funciona»
   se ven igual, y quien mira no puede distinguirlos. */
.vacio { padding:26px 14px; text-align:center; color:var(--suave);
         font-size:14px; border:1px dashed var(--borde); border-radius:10px;
         margin:14px 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARIOS

   El panel hasta hoy sólo LEÍA (más el ingreso). Con planes, cuentas de cobro y
   administradores pasa a escribir, así que necesita formularios de verdad.
   ═══════════════════════════════════════════════════════════════════════════ */
.formulario { border:1px solid var(--borde); border-radius:12px; padding:18px;
              margin:16px 0; background:color-mix(in srgb, var(--panel) 60%, transparent); }
.formulario h2 { margin:0 0 14px; font-size:17px; }
.formulario label { display:block; margin:0 0 12px; font-size:13px;
                    color:var(--suave); font-weight:600; }
.formulario label.fila { display:flex; align-items:center; gap:9px; }
.formulario input[type=text], .formulario input[type=number],
.formulario input:not([type]), .formulario textarea, .formulario select {
  display:block; width:100%; margin-top:5px; padding:9px 11px; font:inherit;
  font-weight:400; color:var(--texto); background:var(--campo);
  border:1px solid var(--borde); border-radius:8px; }
.formulario input[readonly] { opacity:.6; cursor:not-allowed; }
.formulario small { display:block; margin-top:4px; font-weight:400;
                    color:var(--suave); font-size:12px; }
.rejilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
           gap:0 14px; }
.acciones { display:flex; gap:9px; margin-top:6px; }

/* Una pastilla de estado. Lleva el color del significado, no del gusto. */
.pastilla { display:inline-block; padding:2px 9px; border-radius:20px;
            font-size:12px; font-weight:600; white-space:nowrap; }
.pastilla.bien  { background:color-mix(in srgb, var(--bien) 16%, transparent);  color:var(--bien); }
.pastilla.mal   { background:color-mix(in srgb, var(--mal) 16%, transparent);   color:var(--mal); }
.pastilla.ojo   { background:color-mix(in srgb, var(--tibio) 16%, transparent); color:var(--tibio); }
.pastilla.tenue { background:color-mix(in srgb, var(--suave) 14%, transparent); color:var(--suave); }
.boton.chico { padding:4px 10px; font-size:12px; }