/* ==========================================================================
   IEC Platform — sistema visual
   Un solo archivo, sin preprocesador, sin dependencias externas.
   Ver docs/DESIGN.md para el razonamiento de cada decision.
   ========================================================================== */

:root {
  /* ---- Marca (aprobado, no modificar sin autorizacion) ---- */
  --iec-red: #DE0716;
  --iec-red-dark: #B10511;
  --iec-red-tint: #FBEAEB;   /* derivado de --iec-red, solo como fondo detras de texto/iconos rojos */
  --ink: #17161A;
  --canvas: #F6F4F2;
  --surface: #FFFFFF;
  --graphite: #6B6661;

  /* ---- Topbar oscuro v0.2 (aprobado 2026-10-08, ver docs/DESIGN.md) ----
     Escopado a .topbar unicamente -- --ink/--graphite siguen rigiendo el
     resto de la interfaz (fondos claros) sin cambios. Contraste real
     verificado contra --topbar-bg: blanco 16.1:1, --topbar-muted 8.8:1,
     --iec-red 3.18:1 (no valido como color de texto, solo como indicador
     no-textual: borde activo, outline de foco -- minimo WCAG 1.4.11 es 3:1). */
  --topbar-bg: #202124;
  --topbar-text: #FFFFFF;
  --topbar-muted: rgba(255, 255, 255, .72);
  --topbar-line: rgba(255, 255, 255, .16);
  --topbar-hover-bg: rgba(255, 255, 255, .08);

  /* ---- Neutros derivados (NO son colores de marca nuevos) ---- */
  --line: #DEDAD5;           /* borde/divisor por defecto */
  --line-strong: #C9C3BD;    /* divisor con mas peso (regla de tabla, borde de input) */
  --surface-sunken: #F0EDEB; /* fondo secundario: hover neutro, fila de tabla activa */
  --surface-disabled: #E8E4E1;
  --text-disabled: #9B968F;

  /* ---- Semanticos (independientes del rojo de marca) ---- */
  --success: #2F6B4F;
  --success-tint: #E7F0EA;
  --warning: #8A5A10;
  --warning-tint: #FBF1DE;

  /* ---- Escala ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 2px rgba(23, 22, 26, .07);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

/* ---- Base ---- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  background: var(--canvas);
  color: var(--ink);
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; }
h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--graphite);
  margin-top: var(--space-5);
}
h4 { font-size: 0.9rem; margin-top: var(--space-4); }

a { color: var(--iec-red); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--iec-red); outline-offset: 2px; border-radius: 2px; }

code, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-sunken);
  padding: 1px 5px;
  border-radius: 3px;
}

::selection { background: var(--iec-red-tint); color: var(--iec-red-dark); }

/* ---- Layout compartido ---- */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: var(--topbar-bg);
  color: var(--topbar-text);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--topbar-text);
  flex: none;
}
.brand:hover { text-decoration: none; }

/* Logo oficial IEC (346x86px nativo, ~4.02:1). Solo se fija el ancho;
   height:auto conserva la proporcion original sin deformar ni recortar.
   max-height es un tope de seguridad, object-fit:contain es una red
   adicional si algun dia se fija tambien el alto. */
.brand-logo {
  display: block;
  width: 150px;
  height: auto;
  max-height: 44px;
  object-fit: contain;
}

.brand span {
  font-weight: 700;
  font-size: 0.95rem;
  padding-left: var(--space-3);
  border-left: 1px solid var(--topbar-line);
}

.company-switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.nav a {
  color: var(--topbar-text);
  font-weight: 600;
}
.nav a:hover { color: var(--topbar-text); text-decoration: underline; }
/* Indicador no-textual (3.18:1, cumple el minimo 3:1 de WCAG 1.4.11 para
   graficos/UI) -- el rojo nunca se usa como color de texto sobre el
   topbar oscuro porque ahi cae a 3.18:1 y no pasa AA para texto (4.5:1). */
.nav a.nav-active {
  color: var(--topbar-text);
  border-bottom: 2px solid var(--iec-red);
  padding-bottom: 2px;
}

.nav-module {
  color: var(--topbar-muted);
  font-weight: 500;
}

.topbar .btn--ghost {
  color: var(--topbar-muted);
}
.topbar .btn--ghost:hover {
  background: var(--topbar-hover-bg);
  color: var(--topbar-text);
}

.content {
  max-width: 1160px;
  margin: var(--space-6) auto;
  padding: 0 var(--space-5);
}

@media (max-width: 720px) {
  .topbar { padding: var(--space-3) var(--space-4); }
  .brand-logo { width: 110px; max-height: 36px; }
  .nav { margin-left: 0; width: 100%; }
  .content { margin: var(--space-5) auto; padding: 0 var(--space-4); }
}

/* ---- Botones ---- */

.btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn--primary {
  background: var(--iec-red);
  color: var(--surface);
}
.btn--primary:hover { background: var(--iec-red-dark); }

.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--secondary:hover { border-color: var(--iec-red); color: var(--iec-red); }

.btn--ghost {
  background: transparent;
  color: var(--graphite);
}
.btn--ghost:hover { background: var(--surface-sunken); color: var(--ink); }

.btn--danger {
  background: transparent;
  color: var(--iec-red);
  border-color: var(--line-strong);
}
.btn--danger:hover { background: var(--iec-red-tint); border-color: var(--iec-red); }

.btn--sm { padding: 6px 12px; font-size: 0.78rem; }

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-disabled);
  color: var(--text-disabled);
  border-color: var(--line);
}

.btn:focus-visible {
  outline: 2px solid var(--iec-red);
  outline-offset: 2px;
}

/* ---- Formularios ---- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.field .field-note {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--graphite);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  font: inherit;
  font-size: 0.9rem;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}

textarea { resize: vertical; min-height: 64px; }

input::placeholder,
textarea::placeholder { color: var(--text-disabled); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--iec-red);
  box-shadow: 0 0 0 3px var(--iec-red-tint);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--surface-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.field-error input,
.field-error select {
  border-color: var(--iec-red);
}
.field-error .field-note {
  color: var(--iec-red-dark);
  font-weight: 600;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  margin: var(--space-3) 0;
}
.inline-form--flush { margin: 0; }

.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---- Mensajes de sistema ---- */

.msg {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0 0 var(--space-3);
}
.msg--success { background: var(--success-tint); color: var(--success); }
.msg--warning { background: var(--warning-tint); color: var(--warning); }
.msg--error   { background: var(--iec-red-tint); color: var(--iec-red-dark); }

.error { color: var(--iec-red-dark); font-size: 0.85rem; font-weight: 500; }

/* ---- Badges ---- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge--success { background: var(--success-tint); color: var(--success); }
.badge--warning { background: var(--warning-tint); color: var(--warning); }
.badge--danger  { background: var(--iec-red-tint); color: var(--iec-red-dark); }
.badge--neutral { background: var(--canvas); color: var(--graphite); border: 1px solid var(--line); }

/* ---- Indicadores (grilla de estadisticas, p. ej. Inventarios) ---- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.stat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.stat--accent { border-top-color: var(--iec-red); }

.stat .stat-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--graphite);
}
.stat--accent .stat-icon { background: var(--iec-red-tint); color: var(--iec-red); }
.stat-icon .icon { width: 20px; height: 20px; }

.stat .stat-value {
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}
.stat .stat-value--accent { color: var(--iec-red); }

.stat .stat-label {
  font-size: 0.78rem;
  color: var(--graphite);
  margin-top: var(--space-1);
}

/* ---- Tarjetas ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.card > h2:first-child,
.card > h1:first-child { margin-top: 0; }

/* ---- Tablas ---- */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

thead th {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 700;
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--line-strong);
}

tbody td {
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-sunken); }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--graphite);
}

/* ---- Utilidades de texto ---- */

.muted { color: var(--graphite); }
.empty { color: var(--graphite); font-style: italic; }
.hint { color: var(--graphite); font-size: 0.8rem; }

/* ---- Login ---- */

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--canvas);
  padding: var(--space-5);
}

.auth-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-5);
  width: 100%;
  max-width: 400px;
}

/* Logo oficial IEC: 346x86px nativo (~4.02:1). height fijo + object-fit:
   contain conserva proporcion/colores originales sin recortar el PNG;
   sustituir por SVG en el futuro solo requiere cambiar el src. */
.auth-logo {
  display: block;
  height: 72px;
  width: auto;
  object-fit: contain;
  margin: 0 auto var(--space-5);
}

.auth-box h1 {
  margin: 0 0 2px;
  text-align: center;
}
.auth-box .subtitle {
  margin: 0 0 var(--space-5);
  color: var(--graphite);
  font-size: 0.82rem;
  text-align: center;
}
.auth-box form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.auth-box .btn--primary {
  margin-top: var(--space-1);
  justify-content: center;
}

/* ---- Navegacion interna de modulos ---- */

.action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.module-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.module-nav-grid .card {
  margin-bottom: 0;
  padding: var(--space-4);
}

.module-nav-grid .card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0;
}

.module-nav-grid .card h3 .icon {
  width: 20px;
  height: 20px;
  color: var(--iec-red);
}

@media (max-width: 720px) {
  .module-nav-grid { grid-template-columns: 1fr; }
}

/* ---- Iconos SVG en linea (sprite en shared/views/layout.php) ----
   Reutilizables en cualquier modulo (Inventarios hoy; Personal/Reportes
   despues) via <svg class="icon"><use href="#icon-x"></use></svg>.
   aria-hidden en el <svg> -- el texto de la tarjeta/KPI es el label
   accesible real, el icono es puramente decorativo/reforzador. ---- */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}