/* ═══════════════════════════════════════════════════════════════════
   SIGES — Estructura

   Cómo se organiza la pantalla: encabezado, navegación, páginas.

   Enfoque móvil primero:
     · Hasta 900px  → navegación inferior, una columna
     · Desde 900px  → barra lateral, dos columnas
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   CONTENEDOR RAÍZ
   ─────────────────────────────────────────────────────────────────── */

#app {
  position: relative;
  height: 100dvh;         /* dvh respeta la barra del navegador móvil */
  overflow: hidden;
}

/* ── Espacio de la franja de pruebas ───────────────────────────────
   La franja naranja es fija arriba, igual que la cabecera, así que
   una tapaba a la otra: el logo y el nombre de usuario quedaban
   cortados.

   Con una variable, todo lo que va pegado arriba sabe cuánto bajar.
   Vale 0 en producción, donde no hay franja, así que la misma regla
   sirve para los dos entornos sin duplicar nada.                   */

:root { --franja: 0px; }
.entorno-pruebas { --franja: 22px; }


/* ───────────────────────────────────────────────────────────────────
   ENCABEZADO
   ─────────────────────────────────────────────────────────────────── */

.cabecera {
  position: fixed;
  top: var(--franja);
  left: 0;
  right: 0;
  z-index: var(--capa-header);
  height: calc(var(--alto-header) + var(--seguro-arriba));
  padding: var(--seguro-arriba) var(--e-4) 0;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  background: var(--superficie-1);
  border-bottom: 2px solid var(--borde);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-shrink: 0;
}

.marca-logo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accion), var(--alerta));
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.marca-logo svg { width: 18px; height: 18px; color: #fff; }

.marca-nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-lg);
  font-weight: var(--peso-fuerte);
  letter-spacing: .5px;
}

/* Selector de zona activa */
.zona-activa {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--accion-fondo);
  border: 1.5px solid var(--accion);
  border-radius: var(--r-full);
  color: var(--accion);
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  cursor: pointer;
  min-width: 0;
}
.zona-activa svg { width: 13px; height: 13px; flex-shrink: 0; }
.zona-activa .nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabecera-fin {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-shrink: 0;
}

/* ── Indicador de conexión ─────────────────────────────────────────
   Punto de color más una palabra. El punto solo obligaba a recordar
   qué significaba cada color; el texto se entiende sin aprender nada.
   En pantallas estrechas se oculta el texto y queda el punto, que ahí
   sí es lo único que cabe.                                          */

.senal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: var(--txt-xs);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.senal-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.senal-conectado {
  background: var(--ok-fondo);
  border-color: var(--ok-borde);
  color: var(--ok);
}

.senal-sin-conexion {
  background: var(--alerta-fondo);
  border-color: var(--alerta-borde);
  color: var(--alerta);
}

/* Hay trabajo guardado que aún no subió. No es un error: es un aviso
   de que falta enviarlo, y por eso no usa el color de falla. */
.senal-pendiente {
  background: var(--alerta-fondo);
  border-color: var(--alerta-borde);
  color: var(--alerta);
}

.senal-sincronizando {
  background: var(--ip-fondo);
  border-color: var(--ip-borde);
  color: var(--ip);
}
.senal-sincronizando .senal-punto { animation: latido 1.2s ease-in-out infinite; }

/* Hay cambios que dejaron de reintentarse solos (descartados o en
   conflicto) y necesitan que alguien los mire — a propósito con el
   color de falla, distinto del naranja de "pendiente": esto no se va
   a resolver solo con que vuelva la señal. */
.senal-atencion {
  background: var(--falla-fondo);
  border-color: var(--falla-borde);
  color: var(--falla);
}
.senal-atencion .senal-punto { animation: latido 1.2s ease-in-out infinite; }

@keyframes latido { 50% { opacity: .25; } }

/* ── Ficha de usuario ──────────────────────────────────────────── */

.ficha-usuario {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
}

.ficha-usuario-inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accion-fondo);
  color: var(--accion);
  font-size: 11px;
  font-weight: var(--peso-fuerte);
  letter-spacing: .3px;
  flex-shrink: 0;
}

.ficha-usuario-datos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.usuario-actual {
  font-size: var(--txt-xs);
  color: var(--texto-2);
  line-height: 1.2;
}

/* Dentro de la ficha el rol es un rótulo, no una pastilla: dos
   pastillas juntas compiten y ninguna destaca. */
.ficha-usuario .etiqueta-rol {
  padding: 0;
  border: none;
  background: none;
  font-size: 9px;
  line-height: 1.2;
}

@media (max-width: 480px) {
  .ficha-usuario { border: none; padding: 0; }
  .ficha-usuario-datos { display: none; }
}


/* ───────────────────────────────────────────────────────────────────
   NAVEGACIÓN INFERIOR (móvil y tablet)
   ─────────────────────────────────────────────────────────────────── */

.navegacion {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--capa-nav);
  height: calc(var(--alto-nav) + var(--seguro-abajo));
  padding-bottom: var(--seguro-abajo);
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  background: var(--superficie-1);
  border-top: 2px solid var(--borde);
}

.nav-boton {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  color: var(--texto-4);
  transition: color var(--t-rapida);
  min-width: 0;
}
.nav-boton svg { width: 23px; height: 23px; stroke-width: 1.8; }
.nav-boton .rotulo {
  font-size: 10px;
  font-weight: var(--peso-medio);
  letter-spacing: .2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-boton.activo { color: var(--accion); }

/* El activo lleva además una marca arriba: con seis botones, el color
   solo no salta a la vista, y en pantalla al sol menos todavía.
 *
 * Va SOLO en la barra inferior (hasta 900px). En la barra lateral de
 * escritorio, ese "arriba" cae fuera de la barra y se montaba encima
 * del logo. Allí el activo ya se distingue por la franja izquierda y
 * el fondo, así que no hace falta nada más. */
@media (max-width: 899px) {
  .nav-boton { position: relative; }
  .nav-boton.activo::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--accion);
  }
}

/* Botón central elevado — agregar equipo */
.nav-boton.principal .circulo {
  width: 50px;
  height: 50px;
  margin-top: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accion);
  border: 3px solid var(--fondo);
  border-radius: 50%;
  box-shadow: 0 3px 14px rgba(47, 142, 255, .35);
}
.nav-boton.principal .circulo svg {
  width: 26px;
  height: 26px;
  color: #fff;
  stroke-width: 2.4;
}
.nav-boton.principal .rotulo { margin-top: 2px; }


/* ───────────────────────────────────────────────────────────────────
   PÁGINAS
   Cada pantalla ocupa el espacio entre cabecera y navegación.
   ─────────────────────────────────────────────────────────────────── */

.pagina {
  position: absolute;
  top: calc(var(--alto-header) + var(--seguro-arriba) + var(--franja));
  left: 0;
  right: 0;
  bottom: calc(var(--alto-nav) + var(--seguro-abajo));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: none;
}
.pagina.activa { display: block; }

/* Contenido con márgenes cómodos */
.pagina-contenido { padding: var(--e-3) var(--e-4) var(--e-6); }

/* Barra fija dentro de una página (búsqueda, filtros) */
.barra-fija {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--e-3) var(--e-4);
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}


/* ───────────────────────────────────────────────────────────────────
   PANTALLAS COMPLETAS
   Login y selector de zona cubren todo, sin cabecera ni navegación.
   ─────────────────────────────────────────────────────────────────── */

.pantalla-completa {
  position: fixed;
  inset: 0;
  z-index: var(--capa-panel);
  display: none;
  flex-direction: column;
  background: var(--fondo);
  overflow: hidden;
}
.pantalla-completa.activa { display: flex; }

.pantalla-cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: calc(var(--e-4) + var(--seguro-arriba)) var(--e-4) var(--e-4);
  background: var(--superficie-1);
  border-bottom: 2px solid var(--borde);
  flex-shrink: 0;
}

.pantalla-cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--e-4);
  -webkit-overflow-scrolling: touch;
}

/* Centrado vertical — usado por el login */
.pantalla-centro {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-5);
  overflow-y: auto;
}


/* ───────────────────────────────────────────────────────────────────
   BÚSQUEDA
   ─────────────────────────────────────────────────────────────────── */

.buscador { position: relative; }

.buscador input {
  width: 100%;
  padding: 12px var(--e-4) 12px 42px;
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r);
  color: var(--texto);
  transition: border-color var(--t-rapida);
}
.buscador input:focus { outline: none; border-color: var(--accion); }
.buscador input::placeholder { color: var(--texto-5); }

.buscador .lupa {
  position: absolute;
  left: var(--e-3);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--texto-4);
  pointer-events: none;
}

.buscador .limpiar {
  position: absolute;
  right: var(--e-2);
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--texto-4);
  border-radius: 50%;
}
.buscador.con-texto .limpiar { display: flex; }
.buscador .limpiar svg { width: 16px; height: 16px; }

/* Indica qué tipo de dato detectó el buscador */
.busqueda-detectada {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--e-2);
  font-size: var(--txt-xs);
  color: var(--texto-4);
}
.busqueda-detectada .tipo {
  padding: 2px 8px;
  background: var(--accion-fondo);
  border: 1px solid var(--accion-borde);
  border-radius: var(--r-full);
  color: var(--accion);
}


/* ───────────────────────────────────────────────────────────────────
   ESTADÍSTICAS DEL ENCABEZADO (escritorio)
   ─────────────────────────────────────────────────────────────────── */

.metricas {
  display: none;
  align-items: center;
  gap: var(--e-4);
}

.metrica { text-align: center; }
.metrica-valor {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-lg);
  font-weight: var(--peso-fuerte);
  line-height: 1;
}
.metrica-rotulo {
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--texto-4);
}


/* ═══════════════════════════════════════════════════════════════════
   ESCRITORIO — desde 900px
   La navegación pasa de abajo a una barra lateral.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  .navegacion {
    top: calc(var(--alto-header) + var(--seguro-arriba));
    bottom: 0;
    right: auto;
    width: var(--ancho-lateral);
    height: auto;
    padding: var(--e-3) 0 0;
    flex-direction: column;
    align-items: stretch;
    border-top: none;
    border-right: 2px solid var(--borde);
    overflow-y: auto;
  }

  .nav-boton {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--e-3);
    padding: 11px var(--e-4);
    border-left: 3px solid transparent;
  }
  .nav-boton .rotulo { font-size: var(--txt-base); }
  .nav-boton.activo {
    background: var(--superficie-2);
    border-left-color: var(--accion);
  }

  /* En escritorio el botón central es uno más de la lista */
  .nav-boton.principal .circulo {
    width: 30px;
    height: 30px;
    margin-top: 0;
    border-width: 0;
    box-shadow: none;
  }
  .nav-boton.principal .circulo svg { width: 19px; height: 19px; }
  .nav-boton.principal .rotulo { margin-top: 0; }

  .pagina {
    left: var(--ancho-lateral);
    bottom: 0;
  }

  .pagina-contenido {
    max-width: 1100px;
    padding: var(--e-5) var(--e-6) var(--e-8);
  }

  .barra-fija { padding: var(--e-4) var(--e-6); }

  .metricas { display: flex; }

  .mensaje { bottom: var(--e-5); }

  /* Los paneles se centran en lugar de subir desde abajo */
  .panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(560px, 92vw);
    max-height: 86vh;
    border: 2px solid var(--borde-fuerte);
    border-radius: var(--r-lg);
    transform: translate(-50%, -46%);
    opacity: 0;
    transition: transform var(--t), opacity var(--t);
  }
  .panel.abierto { transform: translate(-50%, -50%); opacity: 1; }
  .panel-asa { display: none; }
  .panel-cabecera { padding-top: var(--e-4); }
}


/* ═══════════════════════════════════════════════════════════════════
   PANTALLAS PEQUEÑAS — hasta 380px
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  .cabecera { padding-left: var(--e-3); padding-right: var(--e-3); }
  .pagina-contenido { padding-left: var(--e-3); padding-right: var(--e-3); }
  .barra-fija { padding-left: var(--e-3); padding-right: var(--e-3); }
  .marca-nombre { display: none; }
  .campo-fila-3 { grid-template-columns: 1fr 1fr; }
  .previa-usuario-nombre { display: none; }

  /* En un móvil estrecho no cabe el texto del indicador. Se queda el
     punto de color, que sigue avisando aunque diga menos. */
  .senal-texto { display: none; }
  .senal { padding: 5px; }
}

/* Cabeceras de las pantallas previas (clientes/zonas) también se
   apretujan antes de los 380px: dejamos pasar a dos líneas en vez
   de desbordar. */
@media (max-width: 480px) {
  .pantalla-cabecera { flex-wrap: wrap; row-gap: 6px; }
}


/* ═══════════════════════════════════════════════════════════════════
   IMPRESIÓN
   ═══════════════════════════════════════════════════════════════════ */

@media print {
  .cabecera, .navegacion, .panel, .velo, .mensaje { display: none !important; }
  .pagina { position: static; overflow: visible; display: block !important; }
  body { background: #fff; color: #000; overflow: visible; }
}