/* Portal Wanbridge — sistema de diseño (sección 4).
   Interfaz oscura tipo centro de control técnico/industrial. */

:root {
  --void: #04070d;
  --bg-deep: #071120;
  --panel: #0b1626;
  --surface: #0d1a2c;
  --surface-2: rgba(255, 255, 255, .035);
  --border: rgba(112, 170, 226, .16);
  --border-strong: rgba(126, 190, 255, .32);

  --text-1: #eef4fb;
  --text-2: #9db2cc;
  --text-3: #5e7290;

  --wan-blue: #3489e8;
  --wan-blue-bright: #7cd0ff;
  --brand-green: #1f9d55;
  --brand-green-bright: #2fd374;
  --amber: #d9a441;
  --red: #e2584b;
  --grey-status: #5c6c85;

  --wan-blue-soft: rgba(52, 137, 232, .14);
  --brand-green-soft: rgba(31, 157, 85, .15);
  --amber-soft: rgba(217, 164, 65, .15);
  --red-soft: rgba(226, 88, 75, .14);
  --grey-status-soft: rgba(92, 108, 133, .15);

  --font-display: "Rajdhani", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  color-scheme: dark;

  /* Mapeo de variables a Bootstrap 5.3 */
  --bs-body-bg: var(--bg-deep);
  --bs-body-color: var(--text-1);
  --bs-body-font-family: var(--font-body);
  --bs-border-color: var(--border);
  --bs-link-color: var(--wan-blue-bright);
  --bs-link-hover-color: var(--wan-blue);
  --bs-primary: var(--wan-blue);
  --bs-success: var(--brand-green);
  --bs-warning: var(--amber);
  --bs-danger: var(--red);
  --bs-secondary: var(--grey-status);

  --topbar-bg: var(--bg-deep);
}

/* ---------- Tema claro (bombillo en la barra superior) ----------
   Preferencia por usuario (`Usuario.tema_claro`), estampada en <html
   data-theme="light"> desde el servidor — no depende de las preferencias
   del sistema operativo, así que se redefine explícitamente aquí en vez
   de usar `prefers-color-scheme`. Paleta tomada del sitio oficial
   (wanbridge.co): azul marca #1e3a8a (botones/enlaces/activos) con su
   acento más claro #3b82f6 (hover), y su verde/rojo de estado. */
:root[data-theme="light"] {
  --void: #f4f5f7;
  --bg-deep: #f4f5f7;
  --panel: #ffffff;
  --surface: #ffffff;
  --surface-2: rgba(30, 58, 138, .05);
  --border: rgba(30, 58, 138, .14);
  --border-strong: rgba(30, 58, 138, .32);

  --text-1: #0f1a2b;
  --text-2: #48566b;
  --text-3: #74839a;

  --wan-blue: #3b82f6;
  --wan-blue-bright: #1e3a8a;
  --brand-green: #16a34a;
  --brand-green-bright: #15803d;
  --amber: #9c6b08;
  --red: #dc2626;
  --grey-status: #64748b;

  --wan-blue-soft: #e7ecfb;
  --brand-green-soft: #e2f3e7;
  --amber-soft: #f7ecd6;
  --red-soft: #fee2e2;
  --grey-status-soft: #e2e8f0;

  --topbar-bg: #ffffff;

  color-scheme: light;
}

html, body {
  background: var(--bg-deep);
  color: var(--text-1);
  font-family: var(--font-body);
  min-height: 100%;
}

h1, h2, h3, h4, .display-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .02em;
}

.mono, .cifra, code, td.mono {
  font-family: var(--font-mono);
}

a { color: var(--wan-blue-bright); }
a:hover { color: var(--wan-blue); }

/* ---------- Layout ---------- */
.wan-shell {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.wan-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.wan-sidebar-brand {
  padding: 1.5rem 1.25rem 1.1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wan-menu-toggle, .wan-menu-cerrar {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-1);
  font-size: 1.3rem;
  flex-shrink: 0;
}

.wan-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 13, .6);
  z-index: 1040;
}

.wan-sidebar-brand img { max-height: 72px; width: auto; }

.wan-nav { flex: 1; padding: .75rem .6rem; }

.wan-nav-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  border-radius: .5rem;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .15rem;
}

.wan-nav-item:hover { background: var(--surface-2); color: var(--text-1); }

.wan-nav-item.active {
  background: var(--wan-blue-soft);
  color: var(--wan-blue-bright);
  border: 1px solid var(--border-strong);
}

.wan-nav-item i { width: 1.2rem; text-align: center; }

.wan-sidebar-footer { padding: .75rem .6rem 1rem; border-top: 1px solid var(--border); }

.wan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.wan-topbar {
  min-height: 64px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.5rem;
  background: var(--topbar-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Nombre y lema en la misma fila; en pantallas angostas el lema baja a la línea siguiente. */
.wan-topbar-titulo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: .15rem;
  min-width: 0;
  flex: 1 1 auto;
}
/* El lema ocupa el espacio entre el nombre y los íconos y queda centrado en él. */
.wan-topbar-titulo .lema { flex: 1 1 auto; text-align: center; }

/* Nombre del portal con los colores del logo: "Portal" en el azul de "BRIDGE" y
   "Wanbridge SAS" en el azul fuerte de "WAN" (navy en claro, celeste en oscuro). */
.wan-topbar-titulo .titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--text-1);
  line-height: 1.05;
  letter-spacing: .01em;
}
.wan-topbar-titulo .titulo-portal { color: var(--wan-blue); }
.wan-topbar-titulo .titulo-marca { color: var(--wan-blue-bright); }

/* Lema en degradado azul → verde (mismos tonos que la barra de los títulos de sección). */
.wan-topbar-titulo .lema {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .03em;
  line-height: 1.2;
}
/* El degradado va en el span para que cubra solo el texto, no todo el ancho centrado. */
.wan-topbar-titulo .lema span {
  background: linear-gradient(90deg, var(--wan-blue-bright), var(--brand-green-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wan-topbar-titulo .fecha {
  font-size: .82rem;
  color: var(--text-3);
}

.wan-content { padding: 1.75rem; flex: 1; width: 100%; }

/* ---------- Componentes ---------- */
.wan-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: .75rem;
}

.wan-encabezado-fisico {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: .75rem;
  overflow: hidden;
  background: var(--panel);
  margin-bottom: 1.25rem;
}

.wan-ef-logo, .wan-ef-titulo, .wan-ef-datos {
  border-right: 1px solid var(--border);
}

.wan-ef-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.5rem;
}

.wan-ef-logo img { max-height: 78px; width: auto; }

.wan-ef-titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-1);
  padding: .6rem 1rem;
}

.wan-ef-datos {
  border-right: none;
  border-collapse: collapse;
  font-size: .78rem;
}

.wan-ef-datos th, .wan-ef-datos td {
  border-top: 1px solid var(--border);
  padding: .3rem .65rem;
  text-align: left;
  white-space: nowrap;
}

.wan-ef-datos tr:first-child th, .wan-ef-datos tr:first-child td { border-top: none; }

.wan-ef-datos th { color: var(--text-3); font-weight: 600; }
.wan-ef-datos td { color: var(--text-1); font-family: var(--font-mono); }

@media (max-width: 640px) {
  .wan-encabezado-fisico { grid-template-columns: 1fr; }
  .wan-ef-logo, .wan-ef-titulo, .wan-ef-datos { border-right: none; border-top: 1px solid var(--border); }
  .wan-ef-logo:first-child { border-top: none; }
}

.wan-section-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--wan-blue-bright);
  margin-bottom: .9rem;
}

.wan-section-title::before {
  content: '';
  width: 5px;
  height: 1.15rem;
  border-radius: 999px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--wan-blue-bright), var(--brand-green-bright));
}

.wan-stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1.1rem 1.25rem;
}

.wan-stat-card .valor {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}

.wan-stat-card .etiqueta {
  color: var(--text-3);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .35rem;
}

a.wan-stat-card { transition: border-color .15s, background .15s; }
a.wan-stat-card:hover { border-color: var(--wan-blue-bright); background: var(--surface-2); }

/* Tarjetas con cantidad variable (ej. una por tipo de usuario): 6 por fila; si hay más,
   pasan a una segunda fila. 3 por fila en tablet y 2 en celular. */
.wan-stat-fila {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
}
.wan-stat-fila > .wan-stat-card { padding: .85rem .9rem; }
.wan-stat-fila .valor { font-size: 1.6rem; }
.wan-stat-fila .etiqueta {
  font-size: .7rem;
  letter-spacing: .04em;
  overflow-wrap: break-word;
}
@media (max-width: 991.98px) {
  .wan-stat-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .wan-stat-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wan-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.wan-pill-green { background: var(--brand-green-soft); color: var(--brand-green-bright); }
.wan-pill-blue { background: var(--wan-blue-soft); color: var(--wan-blue-bright); }
.wan-pill-amber { background: var(--amber-soft); color: var(--amber); }
.wan-pill-red { background: var(--red-soft); color: var(--red); }
.wan-pill-grey { background: var(--grey-status-soft); color: var(--grey-status); }

.wan-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-1);
  --bs-table-border-color: var(--border);
}

.wan-table thead th {
  color: var(--text-3);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}

.wan-table td, .wan-table th { vertical-align: middle; }

.wan-firma-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .9rem;
  border: 1px solid var(--border);
  border-radius: .6rem;
  margin-bottom: .5rem;
  scroll-margin-top: 5rem;
}

.wan-firma-row:target {
  border-color: var(--wan-blue-bright);
  box-shadow: 0 0 0 3px var(--wan-blue-soft);
}

.wan-topbar-derecha {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.wan-bell-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  line-height: 1;
}

.wan-user-chip {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .3rem .9rem .3rem .4rem;
  background: none;
  color: inherit;
  cursor: pointer;
}

.wan-user-chip .avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--wan-blue-soft);
  color: var(--wan-blue-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
}

.form-control, .form-select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-1);
}

.form-control:focus, .form-select:focus {
  background: var(--surface);
  color: var(--text-1);
  border-color: var(--border-strong);
  box-shadow: 0 0 0 .2rem var(--wan-blue-soft);
}

.form-control::placeholder { color: var(--text-3); }

.password-field { position: relative; }

.password-field .form-control { padding-right: 2.6rem; }

.password-toggle {
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
}

.btn-brand-green {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
  font-weight: 700;
}

.btn-brand-green:hover { background: var(--brand-green-bright); border-color: var(--brand-green-bright); color: #04170c; }

/* Campo de filtro vacío ("Filtrar" o dd/mm/aaaa): texto sombreado, solo informativo. La clase
   `.vacio` la pone el script de base.html según el valor del campo. */
.wan-filtro-campo.vacio { color: var(--text-3); }
.wan-filtro-campo option { color: var(--text-1); }

/* Botones de descarga con el color propio de cada formato (Excel verde, PDF rojo), iguales en
   ambos temas y en todo el portal. Con las variables de Bootstrap (no `background` suelto): su
   regla de `.btn:disabled` es más específica y dejaba transparente el botón deshabilitado. */
.btn-excel, .btn-pdf {
  font-weight: 600;
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-opacity: .4;
}
.btn-excel {
  --bs-btn-bg: #1d6f42; --bs-btn-border-color: #1d6f42;
  --bs-btn-hover-bg: #185c37; --bs-btn-hover-border-color: #185c37;
  --bs-btn-active-bg: #144d2e; --bs-btn-active-border-color: #144d2e;
  --bs-btn-disabled-bg: #1d6f42; --bs-btn-disabled-border-color: #1d6f42;
}
.btn-pdf {
  --bs-btn-bg: #d93025; --bs-btn-border-color: #d93025;
  --bs-btn-hover-bg: #b3261e; --bs-btn-hover-border-color: #b3261e;
  --bs-btn-active-bg: #9c2119; --bs-btn-active-border-color: #9c2119;
  --bs-btn-disabled-bg: #d93025; --bs-btn-disabled-border-color: #d93025;
}

.btn-outline-brand-blue {
  border: 1px solid var(--wan-blue-bright);
  color: var(--wan-blue-bright);
  background: transparent;
  font-weight: 700;
}

.btn-outline-brand-blue:hover {
  background: var(--wan-blue-soft);
  border-color: var(--wan-blue-bright);
  color: var(--wan-blue-bright);
}

/* Bootstrap's .btn-outline-light asume texto/borde claro sobre fondo
   oscuro — en tema claro queda blanco sobre blanco (invisible). Se
   redefine solo dentro de tema claro; en tema oscuro sigue igual. */
:root[data-theme="light"] .btn-outline-light {
  color: var(--text-1);
  border-color: var(--border-strong);
}

:root[data-theme="light"] .btn-outline-light:hover {
  background: var(--surface-2);
  color: var(--text-1);
  border-color: var(--border-strong);
}

.modal-content {
  background: var(--panel);
  color: var(--text-1);
  border: 1px solid var(--border);
}

.modal-header, .modal-footer { border-color: var(--border); }

.modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
:root[data-theme="light"] .modal .btn-close { filter: none; }

.chip-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: .5rem;
  overflow: hidden;
}

.chip-toggle input { display: none; }

.chip-toggle label {
  padding: .45rem 1.1rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-2);
  cursor: pointer;
  margin: 0;
}

.chip-toggle input:checked + label.chip-c,
.chip-toggle input:checked + label[data-valor="C"],
.chip-toggle input:checked + label[data-valor="SI"],
.chip-toggle input:checked + label[data-valor="B"] {
  background: var(--brand-green-soft);
  color: var(--brand-green-bright);
}

.chip-toggle input:checked + label.chip-nc,
.chip-toggle input:checked + label[data-valor="NC"],
.chip-toggle input:checked + label[data-valor="NO"],
.chip-toggle input:checked + label[data-valor="M"] {
  background: var(--red-soft);
  color: var(--red);
}

.chip-toggle input:checked + label[data-valor="R"] { background: var(--amber-soft); color: var(--amber); }

/* ---------- Responsivo (sección 4): sidebar off-canvas en móvil/tablet ---------- */
@media (max-width: 991.98px) {
  html, body { overflow-x: hidden; }

  .wan-menu-toggle { display: flex; }
  .wan-menu-cerrar { display: flex; }

  .wan-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 82vw;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 32px rgba(0, 0, 0, .5);
  }

  body.wan-menu-abierto .wan-sidebar { transform: translateX(0); }
  body.wan-menu-abierto .wan-sidebar-backdrop { display: block; }

  .wan-topbar { padding: .75rem 1rem; gap: .6rem; }
  .wan-topbar-titulo .titulo { font-size: 1.3rem; }
  .wan-topbar-titulo .lema { font-size: .85rem; flex-basis: 100%; text-align: left; }
  .wan-topbar-titulo .fecha { display: none; }
  .wan-topbar-derecha { gap: .5rem; }
  .wan-user-chip { padding: .25rem; border: none; }
  .wan-user-chip .lh-sm { display: none; }

  .wan-content { padding: 1rem; }
}

@media (max-width: 575.98px) {
  .wan-topbar-titulo .titulo { font-size: 1.05rem; }
  .wan-topbar-titulo .lema { font-size: .7rem; letter-spacing: .01em; }
  .display-title { font-size: 1.35rem; }
}
.chip-toggle input:checked + label[data-valor="NA"] { background: var(--grey-status-soft); color: var(--grey-status); }

/* ---------- Criterios de inspección (referencia informativa junto al formulario) ---------- */
.wan-criterios { columns: 2; column-gap: 1.5rem; }
.wan-criterios-grupo { break-inside: avoid; margin-bottom: 1rem; }
.wan-criterios-titulo {
  font-family: var(--font-display); font-weight: 700; text-align: center; text-transform: uppercase;
  font-size: .78rem; letter-spacing: .04em; color: var(--wan-blue-bright);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: .4rem;
  padding: .4rem .5rem; margin-bottom: .4rem;
}
.wan-criterios-lista { list-style: none; padding-left: 0; margin: 0; font-size: .85rem; color: var(--text-2); }
.wan-criterios-lista li { padding: .35rem 0; border-bottom: 1px dashed var(--border); }
.wan-criterios-lista li:last-child { border-bottom: none; }

@media (max-width: 575.98px) {
  .wan-criterios { columns: 1; }
}