/* =====================================================================
   NGB UI — hoja de estilos compartida de RRHH, Caja Chica y Reportería.
   Copia canónica en D:\Cloude\diseno-ngb\ngb-ui.css; se copia a la carpeta
   static/ de cada sistema con sync_diseno.py (no editar las copias).

   1. Tokens de diseño (colores, tipografía, espaciado, sombras)
   2. Base (texto, enlaces, foco accesible)
   3. Componentes (botones, formularios, tablas, tarjetas, avisos)
   4. Navegación (enlace activo)
   Se carga DESPUÉS del style.css de cada sistema para unificar su aspecto.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca (azul del logo de René Repuestos, suavizado para pantalla) */
  --primary: #2158a6;
  --primary-dark: #16386b;
  --primary-light: #e7effb;
  --primary-hover: #1b4a8c;

  /* Neutros */
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-alt: #eef2fa;
  --border: #dbe2ef;
  --border-strong: #c5cfe2;
  --text: #1c2536;
  --text-muted: #5b6579;
  --heading: #16284a;

  /* Estados (todos cumplen contraste AA con texto blanco o sobre su fondo suave) */
  --success: #1f7a4d;
  --success-soft: #e3f4ea;
  --warning: #8a5d00;
  --warning-soft: #fdf1d6;
  --danger: #b3261e;
  --danger-soft: #fbe6e3;
  --info: #2158a6;

  /* Forma y profundidad */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(22, 40, 74, 0.06);
  --shadow: 0 2px 10px rgba(22, 40, 74, 0.08);
  --shadow-lg: 0 8px 28px rgba(22, 40, 74, 0.16);
  --focus-ring: 0 0 0 3px rgba(33, 88, 166, 0.35);

  /* Tipografía */
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size: 15px;
  --line-height: 1.5;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  color-scheme: light;
}

/* ---------- 2. Base ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--heading); font-weight: 700; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; }

a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-dark); }

::selection { background: var(--primary-light); color: var(--primary-dark); }

/* Foco visible para quien navega con teclado (antes casi no se veía) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

/* ---------- 3. Componentes ---------- */

/* Botones */
.btn, button.btn {
  background: var(--primary);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}
.btn:hover, button.btn:hover { background: var(--primary-hover); color: #fff; box-shadow: var(--shadow); }
.btn:active { background: var(--primary-dark); }
.btn:disabled, .btn[disabled] { background: var(--border-strong); color: var(--text-muted); box-shadow: none; cursor: not-allowed; }

.btn-secundario {
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.btn-secundario:hover { background: var(--primary-light); color: var(--primary-dark); }

/* Botones de texto dentro de tablas (Editar / Desactivar / Eliminar) */
.link-btn, td.acciones a {
  background: none;
  border: none;
  padding: 2px 4px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.link-btn:hover, td.acciones a:hover { color: var(--primary-dark); background: var(--primary-light); text-decoration: none; }
form[action*="eliminar"] .link-btn { color: var(--danger); }
form[action*="eliminar"] .link-btn:hover { background: var(--danger-soft); color: var(--danger); }

/* Formularios */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="tel"], input[type="search"], select, textarea {
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: #6b7488; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-alt); color: var(--text-muted); }
label { color: var(--text-muted); }

input[type="file"] { font-family: inherit; font-size: 0.9rem; color: var(--text-muted); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: 0.85rem;
  color: var(--primary-dark); background: var(--primary-light);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 5px 10px; margin-right: var(--space-2); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: #d9e5f8; }

/* Tarjetas */
.card, section.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-highlight { background: linear-gradient(135deg, var(--primary-light), var(--surface)); }
.card-value { color: var(--primary); font-variant-numeric: tabular-nums; }
.card-label { color: var(--text-muted); }

/* Tablas */
table { border-radius: var(--radius); font-variant-numeric: tabular-nums; }
th {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0.01em;
}
td { border-bottom-color: var(--border); }
tbody tr:hover td { background: #f8faff; }
.table-scroll { border-radius: var(--radius-lg); }

/* La celda de acciones no puede ser flex: rompe la tabla. Se alinea en línea. */
td.acciones { display: table-cell; white-space: nowrap; }
td.acciones > * { display: inline-block; vertical-align: middle; margin-right: var(--space-2); }
td.acciones form { margin: 0 var(--space-2) 0 0; }

/* Etiquetas de estado */
.badge-activo, .badge-aprobada { background: var(--success-soft); color: var(--success); }
.badge-inactivo, .badge-rechazada { background: var(--danger-soft); color: var(--danger); }
.badge-pendiente { background: var(--warning-soft); color: var(--warning); }
.badge-tipo-vacaciones { background: var(--primary-light); color: var(--primary-dark); }
.badge-tipo-incapacidad { background: var(--danger-soft); color: var(--danger); }

/* Avisos */
.flash {
  background: var(--primary-light);
  color: var(--primary-dark);
  border: 1px solid #c9d9f3;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
}
.flash a { font-weight: 600; }

/* Ventanas flotantes */
.modal-aviso { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Pantalla de acceso */
.login-box { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }

/* ---------- 4. Navegación ---------- */
.topbar nav a.activo, .topbar nav .nav-dropdown summary.activo {
  color: var(--primary-dark);
  font-weight: 600;
  border-bottom-color: var(--primary);
}
.topbar .brand, .user-area a { color: var(--primary-dark); }

/* Pantallas angostas: nada debe empujar la página más allá del ancho del teléfono */
.content, main { min-width: 0; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.user-area { flex-wrap: wrap; row-gap: 4px; }
img { max-width: 100%; }

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

@media print {
  .topbar, .btn, .user-area { display: none !important; }
  body { background: #fff; }
}