/* ═══════════════════════════════════════════════════════════════════
   SIGES — Pantallas

   Estilos propios de cada vista. Lo que se repite en varias vive
   en components.css; lo que es único de una pantalla, aquí.
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   ARRANQUE
   ─────────────────────────────────────────────────────────────────── */

.arranque {
  position: fixed;
  inset: 0;
  z-index: var(--capa-carga);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--fondo);
  transition: opacity var(--t-lenta);
}
.arranque.oculto { opacity: 0; pointer-events: none; }

.arranque-marca { display: flex; align-items: center; gap: var(--e-3); }

.arranque-logo {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accion), var(--alerta));
  border-radius: var(--r-md);
  color: #fff;
}

.arranque-nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-2xl);
  font-weight: var(--peso-fuerte);
  letter-spacing: 1px;
}
.arranque-sub {
  font-size: var(--txt-xs);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--texto-4);
}


/* ───────────────────────────────────────────────────────────────────
   INICIO DE SESIÓN
   ─────────────────────────────────────────────────────────────────── */

/* Dos columnas: marca y formulario.
 *
 * Respeta el tema elegido, como el resto de la aplicación. Una
 * pantalla que ignora esa elección es incoherente, y para quien
 * necesita el claro —por sensibilidad a la luz o por costumbre— es
 * quitarle algo que ya había decidido. */

/* Lleva .pantalla-completa.activa delante porque esa regla fija
   display:flex y ganaría por especificidad. */
.pantalla-completa.login-partido.activa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--fondo);
  color: var(--texto);
}

/* ── Columna de marca ─────────────────────────────────────────────
   El degradado radial da profundidad sin necesidad de una imagen,
   que habría que descargar y podría no llegar sin señal.          */

.login-marca-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
  /* Sin esto la imagen del carrusel empuja el panel y desborda la
     pantalla. min-height:0 permite que el hijo se encoja; overflow
     recorta lo que aun así no quepa. */
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--borde);
  /* Respaldo primero: si el navegador no entiende color-mix descarta
     la línea siguiente entera y se queda con el fondo liso, que se ve
     bien igual. */
  background: var(--superficie-1);

  /* El degradado usa el color de acción con transparencia, así que
     funciona igual sobre fondo claro que sobre oscuro. */
  background:
    radial-gradient(circle at 15% 15%,
      color-mix(in srgb, var(--accion) 22%, transparent), transparent 45%),
    var(--superficie-1);
}

.logotipo { display: flex; align-items: center; gap: 12px; }

.logotipo-marca {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accion);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-fuerte);
  font-size: 19px;
  color: #fff;
  flex-shrink: 0;
}

.logotipo-texto {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-fuerte);
  font-size: 20px;
  color: var(--texto);
}

/* ── Carrusel ──────────────────────────────────────────────────────
   Las diapositivas se apilan una encima de otra y se cruzan con una
   transición de opacidad. Apiladas y no en fila, para que el panel no
   cambie de alto al pasar de una a otra: un salto ahí desplazaría el
   formulario justo cuando alguien está escribiendo.               */

/* La columna de marca es alta y estaba casi vacía. La diapositiva
   ocupa lo que hay: la imagen crece hasta llenar el espacio libre y
   el texto se queda abajo, con su alto fijo.

   Las que no traen imagen no dejan un hueco: el texto sube y ocupa
   todo, así que una diapositiva de solo texto se ve intencionada y no
   como si le faltara algo. */

.login-claim {
  margin-top: var(--e-5);
  flex: 1 1 auto;       /* se come el espacio entre logotipo y pie */
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.diapositivas {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.diapositiva {
  grid-area: 1 / 1;          /* todas en la misma celda */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-4);
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-lenta);
}
.diapositiva.activa {
  opacity: 1;
  visibility: visible;
}

/* ── La caja de la imagen ──────────────────────────────────────────
 *
 * Tiene tamaño fijo y la imagen se acomoda dentro, no al revés.
 *
 * Es la decisión importante de todo el carrusel: quien sube las
 * imágenes no controla su forma —un cartel es vertical, una foto de
 * obra es apaisada, un logo es cuadrado— y si el panel se adaptara a
 * cada una, el diseño cambiaría en cada vuelta y el título saltaría
 * de sitio.
 *
 * Con una caja fija todas ocupan lo mismo. Las que no llenan dejan
 * franjas a los lados, que es lo normal y lo que hace cualquier
 * televisor con una película de otro formato.
 * ───────────────────────────────────────────────────────────────── */

/* Sin marco ni fondo: la imagen se presenta sola. Un recuadro
   alrededor solo la encajona y delata el hueco vacío cuando la
   imagen no llena la caja. */
.diapositiva-imagen {
  width: 100%;
  height: 42vh;          /* alto fijo, y punto */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* La imagen ocupa exactamente la caja y "contain" la encoge hasta
 * caber entera, sin deformarla.
 *
 * Con width/height al 100% no hay porcentaje que resolver contra un
 * padre indefinido — que es lo que fallaba con max-height y dejaba la
 * imagen más alta que su caja, cortada por abajo. */
.diapositiva-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  border-radius: var(--r-md);
}

/* Con imagen, el título baja de tamaño: la imagen ya lleva el peso
   visual y dos cosas grandes compiten entre sí. */
.diapositiva.con-imagen h1 { font-size: 24px; }
.diapositiva.con-imagen p  { margin-top: 8px; font-size: 14px; }

/* Sin imagen, el texto es lo único que hay y puede crecer. */
.diapositiva:not(.con-imagen) h1 { font-size: 38px; }

.carrusel-puntos {
  display: flex;
  gap: 7px;
  margin-top: var(--e-4);
}

.carrusel-punto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--texto-5);
  cursor: pointer;
  transition: background var(--t-rapida), width var(--t-rapida);
}
.carrusel-punto.activo {
  width: 22px;
  border-radius: var(--r-full);
  background: var(--accion);
}

/* Quien haya pedido menos animación en su sistema, que no vea el
   cruce. El carrusel sigue cambiando, pero sin transición. */
@media (prefers-reduced-motion: reduce) {
  .diapositiva { transition: none; }
}

.login-claim h1 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: -.01em;
  max-width: 420px;
  color: var(--texto);
}

.login-claim p {
  margin-top: 16px;
  max-width: 380px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--texto-2);
}

.login-marca-pie {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--texto-3);
}

/* Sello de cada empresa. Hoy es texto; cuando lleguen los logos en
   SVG se reemplaza el contenido sin tocar la disposición. */
.sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-full);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 12px;
  color: var(--texto-2);
}
.sello-punto {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--accion);
  flex-shrink: 0;
}

/* El amarillo de SYNERTECH. Va fijo y no como variable de tema: es un
   color de marca ajena, no del sistema, y debe verse igual siempre.
   Cuando tengas el código exacto del logo, se cambia solo aquí. */
.sello-punto.amarillo { background: #f2b01e; }
.sello-separador { color: var(--texto-5); }


/* ── Columna del formulario ───────────────────────────────────── */

.login-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px;
}

.login-form-interior {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.login-form-interior h2 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 22px;
  color: var(--texto);
}

.login-sub {
  margin: 6px 0 32px;
  font-size: 14.5px;
  color: var(--texto-2);
}

/* Los campos usan los estilos normales de la aplicación: no hace
   falta repetirlos aquí. */

.login-error {
  min-height: 20px;
  margin: var(--e-2) 0 var(--e-3);
  font-size: var(--txt-sm);
  color: var(--falla);
  text-align: center;
}

.login-pie {
  margin-top: 28px;
  font-size: 12px;
  color: var(--texto-4);
  text-align: center;
}


/* ── El login en móvil ─────────────────────────────────────────────
   Dos columnas no caben. La marca pasa arriba, recortada a lo justo
   —logotipo y sellos—, y el formulario ocupa el resto. El titular se
   oculta: en un celular es lo primero que sobra.                   */

@media (max-width: 820px) {
  .pantalla-completa.login-partido.activa {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }

  .login-marca-panel {
    padding: var(--e-5) var(--e-4);
    border-right: none;
    border-bottom: 1px solid var(--borde);
    gap: var(--e-4);
  }

  .login-claim { display: none; }

  .login-form-panel { padding: var(--e-6) var(--e-4) var(--e-8); }
}


/* ───────────────────────────────────────────────────────────────────
   SELECTOR DE ZONA
   ─────────────────────────────────────────────────────────────────── */

/* ── Tarjetas de regional ──────────────────────────────────────────
 *
 * Son las mismas tarjetas del selector de cliente: elegir regional y
 * elegir cliente son el mismo gesto un paso más adentro, y que se
 * vieran distintos obligaba a reaprender la pantalla.
 *
 * Cada una tiene dos caras apiladas en la misma celda. Al abrirse
 * cambia el contenido pero NO el tamaño: si creciera, empujaría a las
 * vecinas y habría que perseguirlas con el ratón.
 * ─────────────────────────────────────────────────────────────────── */

.cliente-tarjeta.regional {
  display: grid;
  position: relative;
  min-height: 230px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.regional-frente,
.regional-zonas {
  grid-area: 1 / 1;
  padding: var(--e-5) var(--e-4);
  transition: opacity var(--t-rapida);
}

.regional-frente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
}

.regional-zonas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
}

.regional.abierta .regional-frente { opacity: 0; visibility: hidden; }
.regional.abierta .regional-zonas  { opacity: 1; visibility: visible; }

.regional.abierta { border-color: var(--accion); }

.regional-zonas-titulo {
  margin-bottom: 2px;
  font-family: var(--fuente-titulo);
  font-size: var(--txt-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--texto-4);
  text-align: left;
}

/* Una regional sin zonas no se abre a nada útil, así que se atenúa:
   sigue estando —el admin necesita verla— pero no llama. */
.regional.vacia .cliente-tarjeta-icono { opacity: .45; }
.regional.vacia .cliente-tarjeta-nombre { color: var(--texto-3); }

.regional-vacia-texto {
  font-size: var(--txt-xs);
  line-height: 1.6;
  color: var(--texto-4);
  text-align: left;
}


/* ── Zonas dentro de la tarjeta ──────────────────────────────────── */

.zona-tarjeta {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  padding: 10px 12px;
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.zona-tarjeta:hover {
  border-color: var(--accion);
  background: var(--superficie-3);
}
.zona-tarjeta.reciente { border-color: var(--ok); }

.zona-tarjeta-nombre {
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
}

.zona-tarjeta-datos {
  font-size: var(--txt-xs);
  color: var(--texto-4);
  margin-top: 2px;
}

.marca-reciente {
  flex-shrink: 0;
  font-size: 9px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ok);
}


/* En móvil las tarjetas van a una columna, y ahí sí pueden crecer:
   no hay vecinas a los lados a las que empujar. */
@media (max-width: 480px) {
  .cliente-tarjeta.regional { min-height: 0; }
  .regional-zonas { position: static; }
}


/* ───────────────────────────────────────────────────────────────────
   INICIO DE SESIÓN
   ─────────────────────────────────────────────────────────────────── */

/* Dos columnas: marca y formulario.
 *
 * Respeta el tema elegido, como el resto de la aplicación. Una
 * pantalla que ignora esa elección es incoherente, y para quien
 * necesita el claro —por sensibilidad a la luz o por costumbre— es
 * quitarle algo que ya había decidido. */

/* Lleva .pantalla-completa.activa delante porque esa regla fija
   display:flex y ganaría por especificidad. */
.pantalla-completa.login-partido.activa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--fondo);
  color: var(--texto);
}

/* ── Columna de marca ─────────────────────────────────────────────
   El degradado radial da profundidad sin necesidad de una imagen,
   que habría que descargar y podría no llegar sin señal.          */

.login-marca-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
  /* Sin esto la imagen del carrusel empuja el panel y desborda la
     pantalla. min-height:0 permite que el hijo se encoja; overflow
     recorta lo que aun así no quepa. */
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--borde);
  /* Respaldo primero: si el navegador no entiende color-mix descarta
     la línea siguiente entera y se queda con el fondo liso, que se ve
     bien igual. */
  background: var(--superficie-1);

  /* El degradado usa el color de acción con transparencia, así que
     funciona igual sobre fondo claro que sobre oscuro. */
  background:
    radial-gradient(circle at 15% 15%,
      color-mix(in srgb, var(--accion) 22%, transparent), transparent 45%),
    var(--superficie-1);
}

.logotipo { display: flex; align-items: center; gap: 12px; }

.logotipo-marca {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accion);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-fuerte);
  font-size: 19px;
  color: #fff;
  flex-shrink: 0;
}

.logotipo-texto {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-fuerte);
  font-size: 20px;
  color: var(--texto);
}

/* ── Carrusel ──────────────────────────────────────────────────────
   Las diapositivas se apilan una encima de otra y se cruzan con una
   transición de opacidad. Apiladas y no en fila, para que el panel no
   cambie de alto al pasar de una a otra: un salto ahí desplazaría el
   formulario justo cuando alguien está escribiendo.               */

/* La columna de marca es alta y estaba casi vacía. La diapositiva
   ocupa lo que hay: la imagen crece hasta llenar el espacio libre y
   el texto se queda abajo, con su alto fijo.

   Las que no traen imagen no dejan un hueco: el texto sube y ocupa
   todo, así que una diapositiva de solo texto se ve intencionada y no
   como si le faltara algo. */

.login-claim {
  margin-top: var(--e-5);
  flex: 1 1 auto;       /* se come el espacio entre logotipo y pie */
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.diapositivas {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.diapositiva {
  grid-area: 1 / 1;          /* todas en la misma celda */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-4);
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-lenta);
}
.diapositiva.activa {
  opacity: 1;
  visibility: visible;
}

/* ── La caja de la imagen ──────────────────────────────────────────
 *
 * Tiene tamaño fijo y la imagen se acomoda dentro, no al revés.
 *
 * Es la decisión importante de todo el carrusel: quien sube las
 * imágenes no controla su forma —un cartel es vertical, una foto de
 * obra es apaisada, un logo es cuadrado— y si el panel se adaptara a
 * cada una, el diseño cambiaría en cada vuelta y el título saltaría
 * de sitio.
 *
 * Con una caja fija todas ocupan lo mismo. Las que no llenan dejan
 * franjas a los lados, que es lo normal y lo que hace cualquier
 * televisor con una película de otro formato.
 * ───────────────────────────────────────────────────────────────── */

/* Sin marco ni fondo: la imagen se presenta sola. Un recuadro
   alrededor solo la encajona y delata el hueco vacío cuando la
   imagen no llena la caja. */
.diapositiva-imagen {
  width: 100%;
  height: 42vh;          /* alto fijo, y punto */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* La imagen ocupa exactamente la caja y "contain" la encoge hasta
 * caber entera, sin deformarla.
 *
 * Con width/height al 100% no hay porcentaje que resolver contra un
 * padre indefinido — que es lo que fallaba con max-height y dejaba la
 * imagen más alta que su caja, cortada por abajo. */
.diapositiva-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  border-radius: var(--r-md);
}

/* Con imagen, el título baja de tamaño: la imagen ya lleva el peso
   visual y dos cosas grandes compiten entre sí. */
.diapositiva.con-imagen h1 { font-size: 24px; }
.diapositiva.con-imagen p  { margin-top: 8px; font-size: 14px; }

/* Sin imagen, el texto es lo único que hay y puede crecer. */
.diapositiva:not(.con-imagen) h1 { font-size: 38px; }

.carrusel-puntos {
  display: flex;
  gap: 7px;
  margin-top: var(--e-4);
}

.carrusel-punto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--texto-5);
  cursor: pointer;
  transition: background var(--t-rapida), width var(--t-rapida);
}
.carrusel-punto.activo {
  width: 22px;
  border-radius: var(--r-full);
  background: var(--accion);
}

/* Quien haya pedido menos animación en su sistema, que no vea el
   cruce. El carrusel sigue cambiando, pero sin transición. */
@media (prefers-reduced-motion: reduce) {
  .diapositiva { transition: none; }
}

.login-claim h1 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: -.01em;
  max-width: 420px;
  color: var(--texto);
}

.login-claim p {
  margin-top: 16px;
  max-width: 380px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--texto-2);
}

.login-marca-pie {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--texto-3);
}

/* Sello de cada empresa. Hoy es texto; cuando lleguen los logos en
   SVG se reemplaza el contenido sin tocar la disposición. */
.sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-full);
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 12px;
  color: var(--texto-2);
}
.sello-punto {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--accion);
  flex-shrink: 0;
}

/* El amarillo de SYNERTECH. Va fijo y no como variable de tema: es un
   color de marca ajena, no del sistema, y debe verse igual siempre.
   Cuando tengas el código exacto del logo, se cambia solo aquí. */
.sello-punto.amarillo { background: #f2b01e; }
.sello-separador { color: var(--texto-5); }


/* ── Columna del formulario ───────────────────────────────────── */

.login-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px;
}

.login-form-interior {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.login-form-interior h2 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 22px;
  color: var(--texto);
}

.login-sub {
  margin: 6px 0 32px;
  font-size: 14.5px;
  color: var(--texto-2);
}

/* Los campos usan los estilos normales de la aplicación: no hace
   falta repetirlos aquí. */

.login-error {
  min-height: 20px;
  margin: var(--e-2) 0 var(--e-3);
  font-size: var(--txt-sm);
  color: var(--falla);
  text-align: center;
}

.login-pie {
  margin-top: 28px;
  font-size: 12px;
  color: var(--texto-4);
  text-align: center;
}


/* ── El login en móvil ─────────────────────────────────────────────
   Dos columnas no caben. La marca pasa arriba, recortada a lo justo
   —logotipo y sellos—, y el formulario ocupa el resto. El titular se
   oculta: en un celular es lo primero que sobra.                   */

@media (max-width: 820px) {
  .pantalla-completa.login-partido.activa {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }

  .login-marca-panel {
    padding: var(--e-5) var(--e-4);
    border-right: none;
    border-bottom: 1px solid var(--borde);
    gap: var(--e-4);
  }

  .login-claim { display: none; }

  .login-form-panel { padding: var(--e-6) var(--e-4) var(--e-8); }
}


/* Mismas tarjetas que en el selector de cliente: elegir zona es el
   mismo gesto un paso más adentro, y que se vea distinto obliga a
   volver a aprender la pantalla. */

.region-zonas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
  justify-content: center;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-4);
  background: var(--superficie-2);
}

.zona-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-5) var(--e-3);
  background: var(--superficie-1);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-rapida), background var(--t-rapida),
              transform var(--t-rapida);
}
.zona-tarjeta:hover {
  border-color: var(--accion);
  background: var(--superficie-2);
  transform: translateY(-2px);
}
.zona-tarjeta:active { transform: none; }

.zona-tarjeta-nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-md);
  font-weight: var(--peso-fuerte);
}

@media (max-width: 480px) {
  .region-zonas {
    grid-template-columns: 1fr;
    gap: var(--e-2);
    padding: var(--e-3);
  }
  .zona-tarjeta {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: var(--e-4);
  }
}
.zona-tarjeta-datos {
  font-size: var(--txt-xs);
  color: var(--texto-4);
}
.zona-tarjeta.reciente { border-color: var(--ok-borde); }
.zona-tarjeta .marca-reciente {
  display: inline-block;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ok);
}


/* ───────────────────────────────────────────────────────────────────
   INICIO — macrosectores y accesos rápidos
   ─────────────────────────────────────────────────────────────────── */

/* Se acomodan solas: cinco en pantalla ancha, dos o tres en móvil.
   Sin número fijo de columnas, así no hay que tocar esto cada vez que
   se agregue o quite una métrica. */
.resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

/* ── Tarjeta de métrica ────────────────────────────────────────────
   Icono, número grande y rótulo. El icono ayuda a distinguirlas de
   reojo sin leer, que es como se mira un panel cuando se entra con
   prisa.                                                          */

/* Todo centrado: el icono, la cifra y el rótulo en el mismo eje. Con
   cinco tarjetas seguidas, alinearlas a la izquierda deja los números
   a distinta altura visual y cuesta compararlos de una ojeada. */
.metrica-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--e-4) var(--e-3);
  background: var(--superficie-1);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-md);
}

.metrica-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--e-3);
  border-radius: var(--r-sm);
  background: var(--superficie-2);
}

.metrica-numero {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-2xl);
  font-weight: var(--peso-fuerte);
  line-height: 1;
}

.metrica-rotulo {
  margin-top: 6px;
  font-size: var(--txt-xs);
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--texto-4);
}

/* ── Métrica que se puede abrir ────────────────────────────────────
   La pista de "Ver detalle" está siempre, no solo al pasar el ratón:
   en una pantalla táctil no hay "pasar el ratón", y una tarjeta que
   se puede pulsar sin decirlo no la pulsa nadie.                   */

.metrica-tarjeta.pulsable {
  width: 100%;
  cursor: pointer;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.metrica-tarjeta.pulsable:hover {
  border-color: var(--accion);
  background: var(--superficie-2);
}

.metrica-pista {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--accion);
}


/* ── Lista de equipos atendidos ──────────────────────────────────── */

.atendido {
  margin-bottom: var(--e-3);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-md);
  overflow: hidden;
}

.atendido-cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  padding: var(--e-3);
  background: var(--superficie-2);
  cursor: pointer;
}
.atendido-cabecera:hover { background: var(--superficie-3); }

.atendido-nombre {
  font-size: var(--txt-base);
  font-weight: var(--peso-medio);
  word-break: break-word;
}
.atendido-ip { font-size: var(--txt-xs); color: var(--ip); margin-top: 2px; }

.atendido-conteo {
  flex-shrink: 0;
  font-size: var(--txt-xs);
  color: var(--texto-4);
}

.atendido-notas { padding: var(--e-2) var(--e-3) var(--e-3); }

.atendido-nota {
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--borde-sutil);
}
.atendido-nota:last-child { border-bottom: none; padding-bottom: 0; }

.atendido-nota-arriba {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.atendido-nota-fecha  { font-size: var(--txt-xs); color: var(--texto-4); }
.atendido-nota-texto  { font-size: var(--txt-sm); color: var(--texto-2); line-height: 1.5; }
.atendido-nota-autor  { font-size: var(--txt-xs); color: var(--texto-4); margin-top: 3px; }

.resumen-dato {
  padding: var(--e-3);
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-md);
  text-align: center;
}
.resumen-valor {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-xl);
  font-weight: var(--peso-fuerte);
  line-height: 1;
}
.resumen-rotulo {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--texto-4);
}

.grupo-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--e-5) 0 var(--e-2);
  font-size: var(--txt-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--texto-4);
}
.grupo-titulo:first-child { margin-top: 0; }

/* Fila de macrosector */
.macro-fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-3) var(--e-4);
  margin-bottom: 6px;
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-rapida);
}
.macro-fila:active { border-color: var(--accion); }
.macro-fila.hijo { margin-left: var(--e-5); }

.macro-fila-icono { flex-shrink: 0; }
.macro-fila-nombre { flex: 1; font-size: var(--txt-base); font-weight: var(--peso-medio); min-width: 0; }
.macro-fila-conteo {
  font-family: var(--fuente-datos);
  font-size: var(--txt-xs);
  color: var(--texto-4);
  background: var(--superficie-3);
  padding: 2px 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}


/* ───────────────────────────────────────────────────────────────────
   DETALLE DE EQUIPO
   ─────────────────────────────────────────────────────────────────── */

.detalle-nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-lg);
  font-weight: var(--peso-medio);
  word-break: break-word;
  margin-bottom: var(--e-2);
}

.detalle-ubicacion {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  padding: 10px var(--e-3);
  margin-bottom: var(--e-3);
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r);
  font-size: var(--txt-sm);
  color: var(--texto-2);
  line-height: 1.5;
}
.detalle-ubicacion svg { color: var(--accion); flex-shrink: 0; margin-top: 1px; }

.detalle-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: var(--e-4);
}

.detalle-acciones { display: flex; flex-direction: column; gap: var(--e-2); }
.detalle-acciones-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }


/* ───────────────────────────────────────────────────────────────────
   SELECTOR DE TIPO DE EQUIPO
   ─────────────────────────────────────────────────────────────────── */

.tipos-tira {
  display: flex;
  gap: 6px;
  padding: var(--e-2) var(--e-4);
  overflow-x: auto;
  background: var(--superficie-1);
  border-bottom: 1px solid var(--borde);
  scrollbar-width: none;
}
.tipos-tira::-webkit-scrollbar { display: none; }

.tipo-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-full);
  color: var(--texto-3);
  font-size: var(--txt-xs);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color var(--t-rapida), color var(--t-rapida);
}
.tipo-chip.activo { border-color: var(--accion); color: var(--accion); background: var(--accion-fondo); }
.tipo-chip svg { width: 14px; height: 14px; }

/* Cuadrícula de tipos — primera vez que se agrega un equipo */
.tipos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--e-2);
}

.tipo-tarjeta {
  padding: var(--e-3) var(--e-2);
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-md);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-rapida);
}
.tipo-tarjeta:active { border-color: var(--accion); }
.tipo-tarjeta svg { margin: 0 auto 6px; }
.tipo-tarjeta-nombre { font-size: var(--txt-sm); font-weight: var(--peso-medio); }


/* ───────────────────────────────────────────────────────────────────
   NOVEDADES
   ─────────────────────────────────────────────────────────────────── */

.novedad-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.novedad-tipo {
  padding: var(--e-3) var(--e-2);
  background: var(--alerta-fondo);
  border: 1.5px solid var(--alerta-borde);
  border-radius: var(--r-md);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.novedad-tipo:active,
.novedad-tipo.activo { border-color: var(--alerta); background: #2d1200; }
.novedad-tipo svg { color: var(--alerta); margin: 0 auto 5px; }
.novedad-tipo-nombre { font-size: var(--txt-xs); color: var(--texto-2); line-height: 1.3; }

.novedad-fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  margin-bottom: 6px;
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-left: 3px solid var(--alerta);
  border-radius: 0 var(--r) var(--r) 0;
}
.novedad-fila-info { flex: 1; min-width: 0; }
.novedad-fila-tipo { font-size: var(--txt-base); font-weight: var(--peso-medio); }
.novedad-fila-meta { font-size: var(--txt-xs); color: var(--texto-4); margin-top: 2px; }
.novedad-fila-tiempo {
  font-size: var(--txt-sm);
  color: var(--alerta);
  flex-shrink: 0;
}


/* ───────────────────────────────────────────────────────────────────
   PANEL DE ESTADÍSTICAS
   ─────────────────────────────────────────────────────────────────── */

.periodo-tira {
  display: flex;
  gap: 5px;
  margin-bottom: var(--e-4);
}
.periodo-btn {
  flex: 1;
  padding: 8px;
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-sm);
  color: var(--texto-3);
  font-size: var(--txt-sm);
  cursor: pointer;
}
.periodo-btn.activo { border-color: var(--accion); color: var(--accion); background: var(--accion-fondo); }

.panel-metricas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}
@media (min-width: 640px) {
  .panel-metricas { grid-template-columns: repeat(4, 1fr); }
}

.metrica-tarjeta {
  padding: var(--e-3) var(--e-4);
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-md);
}
.metrica-tarjeta-valor {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-2xl);
  font-weight: var(--peso-fuerte);
  line-height: 1;
}
.metrica-tarjeta-rotulo {
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--texto-4);
  line-height: 1.3;
}

/* Gráfica de barras */
.grafica {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 110px;
  padding: var(--e-3) 0;
}
.grafica-columna {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.grafica-barra {
  width: 100%;
  background: var(--ip);
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  transition: height var(--t);
}
.grafica-barra.novedad { background: var(--alerta); border-radius: 0 0 3px 3px; }
.grafica-rotulo { font-size: 9px; color: var(--texto-4); }

/* Barras horizontales */
.barra-h { display: flex; align-items: center; gap: var(--e-2); margin-bottom: 7px; }
.barra-h-rotulo {
  min-width: 96px;
  font-size: var(--txt-xs);
  color: var(--texto-2);
  text-align: right;
}
.barra-h-pista {
  flex: 1;
  height: 15px;
  background: var(--superficie-3);
  border-radius: 3px;
  overflow: hidden;
}
.barra-h-relleno { height: 100%; background: var(--alerta); border-radius: 3px; }
.barra-h-valor {
  min-width: 54px;
  font-family: var(--fuente-titulo);
  font-size: var(--txt-xs);
  color: var(--alerta);
}

/* Leyenda */
.leyenda { display: flex; gap: var(--e-4); margin-top: var(--e-2); }
.leyenda-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--txt-xs);
  color: var(--texto-4);
}
.leyenda-punto { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }


/* ───────────────────────────────────────────────────────────────────
   IMÁGENES DE NOTAS
   ─────────────────────────────────────────────────────────────────── */

.imagenes-tira {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
  margin-bottom: var(--e-3);
}

.imagen-miniatura {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1.5px solid var(--borde);
  flex-shrink: 0;
}
.imagen-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.imagen-miniatura .quitar {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .75);
  border-radius: 50%;
  color: var(--falla);
}
.imagen-miniatura .quitar svg { width: 13px; height: 13px; }

.btn-camara {
  width: 78px;
  height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--superficie-2);
  border: 1.5px dashed var(--borde);
  border-radius: var(--r-sm);
  color: var(--texto-4);
  font-size: 10px;
  flex-shrink: 0;
}
.btn-camara:active { border-color: var(--ip); color: var(--ip); }


/* ───────────────────────────────────────────────────────────────────
   SUGERENCIA DE IP LIBRE
   ─────────────────────────────────────────────────────────────────── */

.ips-libres {
  padding: var(--e-3);
  background: var(--red-fondo);
  border: 1.5px dashed var(--ok-borde);
  border-radius: var(--r);
  margin-bottom: var(--e-3);
}
.ips-libres-titulo {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: var(--e-2);
  font-size: var(--txt-xs);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ok);
}
.ips-lista { display: flex; gap: 6px; flex-wrap: wrap; }
.ip-libre {
  padding: 5px 10px;
  background: var(--superficie-2);
  border: 1px solid var(--ip-borde);
  border-radius: var(--r-sm);
  color: var(--ip);
  font-family: var(--fuente-datos);
  font-size: var(--txt-sm);
  cursor: pointer;
}
.ip-libre:active { background: var(--ip-fondo); }
.ips-nota {
  margin-top: var(--e-2);
  font-size: 10px;
  color: var(--alerta);
  line-height: 1.4;
}


/* ───────────────────────────────────────────────────────────────────
   LISTA DE USUARIOS
   ─────────────────────────────────────────────────────────────────── */

.usuario-fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  margin-bottom: 6px;
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r);
}
.usuario-inicial {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: var(--peso-fuerte);
  font-size: var(--txt-sm);
  color: #000;
  flex-shrink: 0;
}
.usuario-datos { flex: 1; min-width: 0; }
.usuario-nombre-fila { font-size: var(--txt-base); font-weight: var(--peso-medio); }
.usuario-meta { font-size: var(--txt-xs); color: var(--texto-4); margin-top: 1px; }