/* Panel de clientes de Gasparini Web.
   Sin framework: son ~400 lineas y evita arrastrar un build al contenedor.
   Pensado para el celular; el escritorio es el caso ancho, no al reves.

   ============================ TEMA OSCURO ============================
   Rediseno del 08/09/2026, pedido de Luis: "mejorar un poco la estetica del
   SaaS". Se copia la paleta del panel gemelo de suscripciones de Informes Web
   (clientes.gasparini.com.py), que es el que Luis ya tiene abierto todo el dia:
   fondo casi negro, tarjetas un tono mas claras con borde sutil, chips
   redondeados con color por estado y azul #0d6efd para lo primario.

   OSCURO SIEMPRE, sin @media (prefers-color-scheme: light): el panel gemelo lo
   es, y dos temas significan dos veces las combinaciones de color que probar
   para una pantalla que miran tres personas. El <meta name="color-scheme"> del
   HTML dice "dark" para que los controles nativos (date, select, scrollbar)
   vengan oscuros de fabrica y no blancos sobre negro.
   ===================================================================== */

:root {
    --fondo: #0f1419;
    --tarjeta: #161b22;
    /* Un escalon mas claro que la tarjeta: inputs y botones secundarios, que
       tienen que leerse COMO controles sobre la tarjeta y no como texto. */
    --control: #1c222b;
    --borde: #262d38;
    --borde-fuerte: #333c4a;
    --texto: #e6edf3;
    --suave: #8b949e;
    --primario: #0d6efd;
    --primario-hover: #0b5ed7;
    --primario-texto: #ffffff;

    --verde: #3fb950;
    --verde-fondo: #10281a;
    --amarillo: #e3b341;
    --amarillo-fondo: #2b2310;
    --rojo: #ff7b72;
    --rojo-fondo: #33161a;
    --gris: #9aa5b1;
    --gris-fondo: #212832;

    --radio: 14px;
    --radio-chico: 9px;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .18);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fondo);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
    /* Que el notch del telefono no se coma la barra. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.pantalla { display: none; }
.pantalla.activa { display: block; }

/* --------------------------------------------------------------- marca */

/* El logo de la cabecera: cuadrado con la inicial, igual que el "S" de
   Suscripciones del panel gemelo. Es un <span> y no una imagen para no sumar
   un pedido mas al arranque por un cuadrito de 34px. */
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.barra .marca { flex: 1; }

.marca-logo {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex: none;
    font-size: 17px; font-weight: 700; line-height: 1;
    color: var(--primario-texto);
    background: linear-gradient(160deg, #2b7cff, #0d6efd);
    border-radius: 10px;
}

.marca-texto { min-width: 0; }
.marca-texto h1 { margin: 0; font-size: 16px; line-height: 1.15; }
.marca-texto span { display: block; font-size: 11.5px; color: var(--suave); }

/* En el login la marca es el titulo de la pantalla: mismo bloque, mas grande. */
.marca-login { margin-bottom: 22px; }
.marca-login .marca-logo { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
.marca-login .marca-texto h1 { font-size: 22px; }
.marca-login .marca-texto span { font-size: 13px; }

/* Contadores de la cabecera. Redondeados y sin borde de color: son un dato de
   contexto, no una alarma; lo que pide accion son los avisos y el badge. */
.pildoras { display: flex; gap: 6px; flex-wrap: wrap; }

.pildora {
    padding: 4px 11px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    color: var(--suave); background: var(--gris-fondo);
    border-radius: 999px;
}
.pildora.ok  { color: var(--verde); background: var(--verde-fondo); }
.pildora.mal { color: var(--rojo);  background: var(--rojo-fondo); }

/* En pantallas angostas los contadores pasan abajo y ocupan el ancho: en la
   misma linea que la marca y los dos botones no entran sin apretujarse. */
@media (max-width: 560px) {
    .barra { flex-wrap: wrap; }
    .pildoras { order: 3; width: 100%; }
}

/* ------------------------------------------------------------- login */

.login {
    max-width: 380px;
    margin: 12vh auto;
    padding: 28px 24px;
}

.tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--suave); }

/* El MISMO tropiezo que el overlay del modal, encontrado con Playwright el
   08/09/2026: el `display: block` de arriba es de autor y le gana al
   `[hidden] { display: none }` del user-agent, que es de otro origen y pierde
   siempre. Sin esta regla, "Días a otorgar" seguía a la vista con el propósito
   "Activación de equipo" -donde no existen los días- y ofrecía elegir 30 días
   para algo que es permanente. */
label[hidden] { display: none; }

input, select, textarea {
    width: 100%;
    margin-top: 5px;
    padding: 10px 12px;
    font: inherit;
    color: var(--texto);
    background: var(--control);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
}
input::placeholder { color: #6b7684; }
input:focus, select:focus {
    outline: 2px solid var(--primario);
    outline-offset: -1px;
    border-color: var(--primario);
}

/* 16px como minimo en los inputs: con menos, iOS hace zoom al enfocar y
   descuadra la pantalla entera. */
input, select { font-size: 16px; }

button {
    font: inherit;
    padding: 10px 16px;
    color: var(--texto);
    background: var(--control);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    cursor: pointer;
    /* 44px de alto minimo: es el objetivo tactil que no falla con el pulgar. */
    min-height: 44px;
}
button:hover { border-color: #46536a; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; transform: none; }

button.primario {
    background: var(--primario); color: var(--primario-texto);
    border-color: var(--primario); font-weight: 600;
}
button.primario:hover:not(:disabled) { background: var(--primario-hover); border-color: var(--primario-hover); }

button.icono { min-width: 44px; padding: 8px; font-size: 18px; }
.login button { width: 100%; margin-top: 8px; }

.error {
    margin: 12px 0 0;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--rojo);
    background: var(--rojo-fondo);
    border-radius: var(--radio-chico);
}

/* -------------------------------------------------------------- barra */

.barra {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: rgba(22, 27, 34, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--borde);
}
/* El h1 pelado es el de la ficha (la cabecera del detalle no lleva marca). */
.barra > h1 { flex: 1; margin: 0; font-size: 18px; }
.barra .acciones { display: flex; gap: 6px; }

.filtros { padding: 12px 16px 0; }
.chips-filtro { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; }
.chips-filtro button {
    min-height: 34px; padding: 5px 12px;
    font-size: 13px; white-space: nowrap; border-radius: 999px;
}
.chips-filtro button.activa {
    background: var(--primario); color: var(--primario-texto); border-color: var(--primario);
}

/* Los dos botones de accion rapida. En el celular uno debajo del otro (el
   pulgar no acierta a medio boton); de 520px para arriba, lado a lado. */
.acciones-rapidas { display: grid; gap: 8px; margin-top: 2px; }
@media (min-width: 520px) { .acciones-rapidas { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------- lista */

#lista { padding: 10px 16px 96px; display: grid; gap: 10px; }
/* El escritorio como caso ancho: dos o tres tarjetas por fila en vez de una
   columna de 1400px de largo. */
@media (min-width: 900px) {
    #lista { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); align-items: start; }
}

.fila {
    padding: 14px;
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.fila-cabecera { display: flex; align-items: flex-start; gap: 10px; }
.fila-nombre { flex: 1; min-width: 0; }
.fila-nombre strong { display: block; font-size: 16px; }
.fila-nombre code { font-size: 12px; color: var(--suave); }

.chip {
    padding: 4px 11px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    text-transform: uppercase; letter-spacing: .03em;
    border-radius: 999px;
}
.chip.activa        { color: var(--verde);    background: var(--verde-fondo); }
.chip.por_vencer    { color: var(--amarillo); background: var(--amarillo-fondo); }
.chip.gracia        { color: var(--rojo);     background: var(--rojo-fondo); }
.chip.vencida       { color: var(--rojo);     background: var(--rojo-fondo); }
.chip.pausada       { color: var(--gris);     background: var(--gris-fondo); }
.chip.sin_suscripcion { color: var(--gris);   background: var(--gris-fondo); }

/* Banda para los periodos que entraron con fechas de relleno desde el seed, y
   para los equipos esperando activacion: las dos cosas piden una accion HOY. */
.provisoria {
    margin: 10px 0 0; padding: 7px 11px;
    font-size: 12px; color: var(--amarillo); background: var(--amarillo-fondo);
    border: 1px solid rgba(227, 179, 65, .22);
    border-radius: var(--radio-chico);
}

.fechas { display: flex; gap: 8px; margin-top: 12px; }
.fechas label { flex: 1; margin: 0; font-size: 11px; }

/* Los datos del pie de la tarjeta, en chips: el panel gemelo los muestra asi
   ("faltan 168 dias", "version 1.9.13") y se leen de un vistazo mucho mejor
   que una grilla de numeros sueltos. */
.datos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.dato {
    display: flex; align-items: baseline; gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    background: var(--gris-fondo);
    border: 1px solid var(--borde);
    border-radius: 999px;
    min-width: 0;
}
.dato span { color: var(--suave); font-size: 11px; }
.dato b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dato.alerta { background: var(--rojo-fondo); border-color: rgba(255, 123, 114, .25); }
.dato.alerta b { color: var(--rojo); }

.botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.botones button { min-height: 38px; padding: 6px 12px; font-size: 13px; }

/* ------------------------------------------------------ avisos y otros */

.aviso {
    margin: 12px 16px 0; padding: 12px 14px;
    font-size: 14px;
    color: var(--amarillo); background: var(--amarillo-fondo);
    border: 1px solid rgba(227, 179, 65, .22);
    border-radius: var(--radio);
}
.aviso b { display: block; margin-bottom: 6px; }
.aviso button { margin: 4px 4px 0 0; min-height: 36px; font-size: 13px; }

.vacio { padding: 40px 16px; text-align: center; color: var(--suave); }

.flotante {
    position: fixed; right: 20px; bottom: 24px;
    width: 56px; height: 56px; padding: 0;
    font-size: 28px; line-height: 1;
    color: var(--primario-texto); background: var(--primario);
    border: none; border-radius: 50%;
    box-shadow: 0 6px 18px rgba(13, 110, 253, .45);
}

/* ----------------------------------------------------------- detalle */

.pestanas {
    display: flex; gap: 4px; overflow-x: auto;
    padding: 8px 16px;
    background: var(--tarjeta); border-bottom: 1px solid var(--borde);
}
.pestanas button {
    min-height: 38px; padding: 6px 12px;
    font-size: 14px; white-space: nowrap; color: var(--suave);
    background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
}
.pestanas button:hover { color: var(--texto); border-color: transparent; }
.pestanas button.activa { color: var(--texto); border-bottom-color: var(--primario); font-weight: 600; }

#detalle-cuerpo { padding: 16px 16px 96px; display: grid; gap: 10px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--borde); }
tr:last-child td { border-bottom: none; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.tabla-scroll { overflow-x: auto; }

/* -------------------------------------------------------------- modal */

.modal {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(3, 6, 10, .66);
}

/* El display:flex de arriba le GANA al atributo hidden (el user-agent lo
   aplica como display:none de especificidad minima), asi que el overlay
   invisible quedaba tapando la pagina entera e interceptaba todos los
   clics: no se podia ni apretar Entrar. Encontrado con Playwright el
   27/08/2026, el dia del estreno. */
.modal[hidden] { display: none; }
@media (min-width: 600px) { .modal { align-items: center; } }

.modal-caja {
    width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
    padding: 20px;
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio) var(--radio) 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .5);
}
@media (min-width: 600px) { .modal-caja { border-radius: var(--radio); } }

.modal-caja h2 { margin: 0 0 16px; font-size: 18px; }
.modal-pie { display: flex; gap: 8px; margin-top: 20px; }
.modal-pie button { flex: 1; }
/* El pie del panel de equipos esconde el Guardar: sin esto, el hidden pierde
   contra el flex del contenedor (el mismo tropiezo que el overlay de arriba). */
.modal-pie button[hidden] { display: none; }

.tostada {
    position: fixed; left: 50%; bottom: 24px; z-index: 60;
    transform: translateX(-50%);
    max-width: 90vw; padding: 12px 18px;
    font-size: 14px; color: #fff; background: #22303f;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico); box-shadow: var(--sombra);
}
.tostada.mal { background: #5c1f22; border-color: #7d2b2f; }

/* ------------------------------------------- código de seguridad */

.codigo-desbloqueo { margin-top: 14px; text-align: center; }

/* Se lee EN VOZ ALTA por teléfono: grande, monoespaciado y con aire entre
   caracteres, que "5" y "S" ya se parecen bastante en cualquier tipografía. */
.codigo-grande {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 28px; letter-spacing: 4px; font-weight: 700;
    padding: 10px 0 4px; user-select: all;
}

.boton-codigo {
    width: 100%; min-height: 44px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--control); border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio); font-size: 14px; font-weight: 600;
}

/* --------------------------------------- equipos por activar (badge) */

/* El contador del boton "Equipos por activar". En azul cuando hay algo que
   atender y apagado cuando no: un badge rojo permanente en cero deja de
   mirarse a los dos dias. */
.badge {
    min-width: 22px; padding: 1px 7px;
    font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
    color: var(--primario-texto); background: var(--primario);
    border-radius: 999px;
}
.badge-cero { color: var(--suave); background: var(--gris-fondo); }

#btn-equipos.urgente { border-color: var(--primario); color: var(--texto); }

/* Adentro del modal las tarjetas de equipo se separan igual que en el listado.

   minmax(0, 1fr) y no la columna `auto` por defecto: con `auto`, el
   user-agent -que es una línea larguísima sin cortes- estira la tarjeta fuera
   del modal y se lleva puesto el chip de estado. Con esto el ellipsis de .ua
   vuelve a hacer su trabajo. */
.equipos-lista { display: grid; gap: 10px; margin-top: 12px; grid-template-columns: minmax(0, 1fr); }

/* Cinturón: nada de lo que se pinte adentro puede desbordar la caja a lo ancho. */
.modal-caja { overflow-x: hidden; }

/* ------------------------------------------- equipos y PIN (fase 5) */

.chip.pendiente { color: var(--amarillo); background: var(--amarillo-fondo); }
.chip.aprobado  { color: var(--verde);    background: var(--verde-fondo); }
.chip.rechazado { color: var(--rojo);     background: var(--rojo-fondo); }
/* La orden ya creada pero que el cliente todavía no se llevó. Azul y no verde:
   verde es "aprobado", y esto todavía no pasó del lado del cliente. */
.chip.en-vuelo  { color: #58a6ff; background: rgba(13, 110, 253, .16); }

/* El switch "Exigir activación": etiqueta y casilla en la misma linea, con el
   area de toque completa, que esto se aprieta desde el telefono. */
.switch {
    display: flex; align-items: center; gap: 10px;
    margin: 0; font-size: 15px; font-weight: 600; color: var(--texto);
    min-height: 40px; cursor: pointer;
}
.switch input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--primario); }

/* El user-agent es largo y no importa leerlo entero: se muestra chico y se
   corta, para reconocer el equipo sin que la ficha se vuelva un parrafo. */
.ua {
    margin: 8px 0 0; font-size: 11px; color: var(--suave);
    font-family: ui-monospace, Consolas, monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ya se usaba en la pestaña de seguridad sin regla propia: se le da una sola
   vez acá para que los textos explicativos se lean igual en todas. */
.ayuda { margin: 12px 16px 0; font-size: 13px; color: var(--suave); line-height: 1.5; }
.fila .ayuda, .modal-caja .ayuda { margin-left: 0; margin-right: 0; }