/* =====================================================================
   GuardianPPE Core — Hoja de estilo
   Apegada al Manual de Identidad Grafica CFE 2026.

   Color y tipografia NO son decisiones de diseño aqui: los fija el
   manual. Lo unico que se decide libremente es la estructura.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tipografia institucional (Manual §2)
   Coloca los archivos .woff2 en /public/fonts/ para que cargue.
   Mientras no esten, el navegador usa la pila de respaldo del sistema.
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Manual §1.1 — unico verde institucional permitido */
  --verde-cfe: #008E60;
  --verde-oscuro: #006B49;
  --verde-tenue: #E6F4EF;

  /* Manual §1.3 — paleta Gobierno de Mexico.
     El vino se usa para estados de bloqueo porque el manual no define
     un rojo institucional. Decision pendiente de confirmar con la
     Coordinacion de Comunicacion. */
  --vino: #9b2247;
  --vino-oscuro: #611232;
  --vino-tenue: #F7E9ED;
  --dorado: #c39326;
  --dorado-tenue: #FBF3E0;
  --gris-gob: #98989a;
  --negro-gob: #161a1d;

  --superficie: #ffffff;
  --fondo: #F5F6F5;
  --borde: #DCE0DE;
  --texto: #1D2321;
  --texto-suave: #5C6663;

  --radio: 4px;
  --sombra: 0 1px 2px rgba(29, 35, 33, 0.08);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}

h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; max-width: 70ch; }

a { color: var(--verde-oscuro); }

/* ---------------------------------------------------------------------
   Encabezado
   --------------------------------------------------------------------- */
.barra {
  background: var(--verde-cfe);
  color: #fff;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Espacio reservado para el isologotipo oficial.
   Manual §3.5: prohibido redibujar el logotipo. Este hueco se llena
   colocando el archivo oficial en /public/img/. Manual §3.2: el espacio
   restringido de 4x debe respetarse, de ahi el margen derecho amplio. */
.barra__logo {
  height: 34px;
  min-width: 102px; /* proporcion 3:1 del isologotipo */
  margin-right: 1.5rem;
  display: flex;
  align-items: center;
}
.barra__logo img { height: 100%; width: auto; display: block; }
.barra__logo--vacio {
  border: 1px dashed rgba(255, 255, 255, .55);
  border-radius: var(--radio);
  color: rgba(255, 255, 255, .85);
  font-size: .7rem;
  padding: 0 .5rem;
  text-align: center;
}

.barra__titulo { font-weight: 600; font-size: 1rem; }
.barra__espacio { margin-left: auto; }
.barra__usuario { font-size: .85rem; opacity: .95; }

.navegacion {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding: 0 1.25rem;
  display: flex;
  gap: .25rem;
  overflow-x: auto;
}
.navegacion button {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: .7rem .9rem;
  font: inherit;
  font-weight: 500;
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
}
.navegacion button:hover { color: var(--texto); }
.navegacion button[aria-current='page'] {
  color: var(--verde-oscuro);
  border-bottom-color: var(--verde-cfe);
}

main { padding: 1.25rem; max-width: 1180px; margin: 0 auto; }

/* ---------------------------------------------------------------------
   Tarjetas y tablas
   --------------------------------------------------------------------- */
.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.cifra {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--gris-gob);
  border-radius: var(--radio);
  padding: .8rem .9rem;
}
.cifra--alerta { border-left-color: var(--vino); background: var(--vino-tenue); }
.cifra--aviso  { border-left-color: var(--dorado); background: var(--dorado-tenue); }
.cifra--bien   { border-left-color: var(--verde-cfe); }
.cifra__numero { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.cifra__texto  { font-size: .8rem; color: var(--texto-suave); }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--borde); }
th { font-weight: 600; color: var(--texto-suave); font-size: .82rem; }
tbody tr:hover { background: var(--verde-tenue); }
.tabla-envoltura { overflow-x: auto; }

/* ---------------------------------------------------------------------
   Estado operativo.
   El color NUNCA va solo: siempre acompañado de simbolo y palabra.
   Un semaforo que solo usa color deja fuera al 8% de hombres con
   deficiencia de vision cromatica, y en seguridad industrial eso no
   es aceptable.
   --------------------------------------------------------------------- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid;
}
.estado--apto    { color: var(--verde-oscuro); background: var(--verde-tenue); border-color: var(--verde-cfe); }
.estado--bloqueo { color: var(--vino-oscuro);  background: var(--vino-tenue);  border-color: var(--vino); }
.estado--aviso   { color: #6B4E12;             background: var(--dorado-tenue); border-color: var(--dorado); }
.estado__simbolo { font-weight: 700; }

/* ---------------------------------------------------------------------
   Formularios y botones
   --------------------------------------------------------------------- */
label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .25rem; }
input, select, textarea {
  width: 100%;
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
  color: var(--texto);
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--verde-cfe);
  outline-offset: 1px;
}
.campo { margin-bottom: .85rem; }
.fila { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.fila > * { flex: 1 1 190px; }

.boton {
  font: inherit;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: var(--radio);
  border: 1px solid var(--verde-cfe);
  background: var(--verde-cfe);
  color: #fff;
  cursor: pointer;
}
.boton:hover:not(:disabled) { background: var(--verde-oscuro); border-color: var(--verde-oscuro); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton--secundario { background: #fff; color: var(--verde-oscuro); }
.boton--secundario:hover:not(:disabled) { background: var(--verde-tenue); }

/* ---------------------------------------------------------------------
   Compuerta de validacion.
   Es la pieza central de la interfaz: tres comprobaciones apiladas que
   deben pasar todas. Se muestran siempre las tres, incluso al aprobar,
   para que el supervisor vea que se verifico y no solo el veredicto.
   --------------------------------------------------------------------- */
.compuerta { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.compuerta__paso {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--borde);
  background: #fff;
}
.compuerta__paso:last-child { border-bottom: none; }
.compuerta__paso--pasa  { border-left: 4px solid var(--verde-cfe); }
.compuerta__paso--falla { border-left: 4px solid var(--vino); background: var(--vino-tenue); }
.compuerta__marca { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.compuerta__paso--pasa  .compuerta__marca { color: var(--verde-cfe); }
.compuerta__paso--falla .compuerta__marca { color: var(--vino); }
.compuerta__titulo { font-weight: 600; }
.compuerta__motivo { font-size: .87rem; color: var(--texto-suave); }

.veredicto { padding: .85rem 1rem; font-weight: 600; border-radius: var(--radio); margin-bottom: .85rem; }
.veredicto--aprobada { background: var(--verde-tenue); color: var(--verde-oscuro); border: 1px solid var(--verde-cfe); }
.veredicto--bloqueada { background: var(--vino-tenue); color: var(--vino-oscuro); border: 1px solid var(--vino); }

/* ---------------------------------------------------------------------
   Acceso
   --------------------------------------------------------------------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; background: var(--verde-cfe); }
.acceso__caja { background: #fff; border-radius: var(--radio); padding: 1.75rem; width: 100%; max-width: 380px; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.acceso__logo { height: 44px; margin-bottom: 1.25rem; display: flex; align-items: center; }
.acceso__logo img { height: 100%; width: auto; }
.acceso__logo--vacio { border: 1px dashed var(--borde); border-radius: var(--radio); color: var(--texto-suave); font-size: .72rem; padding: 0 .6rem; }

.aviso { padding: .7rem .85rem; border-radius: var(--radio); font-size: .88rem; margin-bottom: .85rem; }
.aviso--error { background: var(--vino-tenue); color: var(--vino-oscuro); border: 1px solid var(--vino); }
.aviso--info  { background: var(--verde-tenue); color: var(--verde-oscuro); border: 1px solid var(--verde-cfe); }

.vacio { text-align: center; padding: 2rem 1rem; color: var(--texto-suave); }
.silencioso { color: var(--texto-suave); font-size: .85rem; }

@media (max-width: 640px) {
  main { padding: .85rem; }
  .barra { padding: .6rem .85rem; }
  .cifra__numero { font-size: 1.4rem; }
}

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