/*
 * Cargonaut WhatsApp — portal de configuración
 * Tokens de marca (no negociables, ver plan §Restricciones Globales):
 * navy #0B1F3F · mint #10C0A0 · coral SOLO para avisos · Inter · fondos
 * claros siempre · sin emoji.
 *
 * Nota de diseño (corregida en la adopción de diseño del prototipo, Fase 1
 * — spec 2026-09-03, revisión 2): la nota anterior decía que un futuro
 * sidebar iría en navy-700 "igual que el prototipo" — era falso. El
 * sidebar real del prototipo (Mock-Tracking-Template/screens/base.css) es
 * claro, no navy; el shell de este portal (.wa-sidebar/.wa-main/.wa-topbar,
 * más abajo) sigue ese mismo patrón claro. "Fondos claros siempre" ya no
 * tiene excepción de chrome.
 */

:root {
  --navy-900: #0B1F3F;
  --navy-700: #16305A;
  --navy-050: #EEF3FB;   /* insignias neutras: estados de FLUJO, no de alarma */
  --mint-500: #10C0A0;
  --mint-600: #0DA88F;
  --mint-800: #08715F;
  --mint-200: #A9EBDD;
  --mint-050: #E6FAF5;
  /* Coral: avisos y errores UNICAMENTE. Nunca estados de flujo normales,
     nunca decorativo. El relleno solido (coral-600) esta reservado para
     PERDIDA / CAIDO y no aparece en ningun otro lugar del portal - si se
     usa en dos sitios deja de significar "esto se perdio". */
  --coral-700: #B23F2F;   /* texto de fallo sobre claro */
  --coral-600: #D6533F;   /* relleno solido: SOLO perdida / sesion caida */
  --coral-500: #E4604D;   /* borde / texto de aviso degradado */
  --coral-200: #F6C4BC;   /* borde de insignia de aviso */
  --coral-050: #FDEEEC;

  --bg-page:    #FFFFFF;
  --bg-subtle:  #F7F9FC;
  --bg-raised:  #FFFFFF;
  --border:     #E1E6EE;
  --border-strong: #C7D0DE;

  --text-primary: var(--navy-900);
  --text-muted:   #5B6B85;
  --text-on-mint: #FFFFFF;

  --focus-ring: 0 0 0 3px rgba(16, 192, 160, 0.35);
  --radius: 8px;

  /* Escala de radio/sombra/espaciado — spec Fase 1 §3.1. La paleta de color
     ya coincidia casi exacto con el prototipo (ver el header de este
     archivo); esto es lo que realmente faltaba. Valores copiados de
     Mock-Tracking-Template/screens/base.css:101-123. La mayoria (todo
     --space-*, --shadow/--shadow-md, --radius-xs/md/lg/pill) no se usa
     todavia en esta fase — es la escala completa del prototipo, agregada de
     una vez a proposito para que Fase 2+ (pantalla por pantalla) no tenga
     que repetir esta reconciliacion; no es token muerto por descuido, como
     lo fueron los --text-on-navy* que se borraron en esta misma fase. */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11,31,63,.04), 0 1px 1px rgba(11,31,63,.04);
  --shadow:    0 6px 16px rgba(11,31,63,.08), 0 2px 4px rgba(11,31,63,.04);
  --shadow-md: 0 12px 28px rgba(11,31,63,.10), 0 4px 8px rgba(11,31,63,.05);

  --space-page:    24px;
  --space-section: 16px;
  --space-card:    20px;
  --space-card-sm: 16px;

  /* Lienzo de pagina — DISTINTO de --bg-page. --bg-page (#FFFFFF) sigue
     usandolo ~9 pares componente/superficie de contraste (botones,
     .ui-stat, .estado-vacio, etc.) - retonarlo a este valor los aplanaria
     contra --bg-subtle, que ya es este mismo hex. --bg-canvas pinta SOLO
     el lienzo exterior: html/body, .wa-body (el que hace scroll) y
     #screen-mount. */
  --bg-canvas: #F7F9FC;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input {
  font-family: 'Inter', sans-serif;
}

a { color: inherit; text-decoration: none; }

[hidden] { display: none !important; }

/* Integraciones e historial: superficies claras y evidencia compacta. */
.integraciones-head { margin-bottom: var(--space-section); }
.integraciones-head h1 {
  margin: 0 0 5px; color: var(--navy-900); font-size: 20px; line-height: 1.25;
}
.integraciones-head p {
  margin: 0; max-width: 76ch; color: var(--text-muted); font-size: 13px;
}
.integraciones-nota {
  margin: 14px 0 16px; padding: 11px 13px; color: var(--navy-700);
  background: var(--navy-050); border: 1px solid #D8E2F0; border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.45;
}
.integracion-flujo { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.integracion-flujo span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; color: var(--navy-700); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 600; }
.integracion-flujo span:not(:last-child)::after { content: '→'; color: var(--text-muted); margin-left: 5px; }
.integracion-guia { margin: 0 0 16px; padding: 12px 14px; color: var(--text-primary); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.integracion-guia summary { color: var(--navy-900); cursor: pointer; font-weight: 700; }
.integracion-guia summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.integracion-guia-cuerpo { display: grid; gap: 14px; padding-top: 12px; }
.integracion-guia-cuerpo > p, .integracion-guia-seccion p { margin: 0; color: var(--text-muted); line-height: 1.5; }
.integracion-guia-seccion h3 { margin: 0 0 4px; color: var(--navy-900); font-size: 13px; }
.integracion-guia-json { max-width: 100%; max-height: 300px; margin: 8px 0 0; padding: 10px; overflow: auto; color: var(--navy-900); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-xs); font: 11px/1.45 'SFMono-Regular', Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.integracion-metricas {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.integracion-metrica {
  display: flex; flex-direction: column; gap: 5px; padding: 13px 14px;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.integracion-metrica span { color: var(--text-muted); font-size: 11.5px; }
.integracion-metrica strong { color: var(--navy-900); font-size: 21px; }
.integracion-tabla-wrap {
  overflow-x: auto; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.integracion-tabla { width: 100%; border-collapse: collapse; min-width: 920px; }
.integracion-tabla th {
  padding: 10px 12px; text-align: left; color: var(--text-muted);
  background: var(--bg-subtle); border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.integracion-tabla td {
  padding: 11px 12px; color: var(--text-primary); border-bottom: 1px solid var(--border);
  font-size: 12px; vertical-align: top;
}
.integracion-tabla tr:last-child td { border-bottom: 0; }
.integracion-tabla tbody tr:hover td { background: #FBFCFE; }
.integracion-detalle { margin-top: 6px; }
.integracion-detalle summary, .historial-detalle summary {
  width: fit-content; color: var(--navy-700); cursor: pointer; font-size: 11px; font-weight: 600;
}
.integracion-claves {
  display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px; margin: 10px 0;
}
.integracion-claves div {
  display: flex; flex-direction: column; gap: 3px; padding: 8px;
  background: var(--bg-subtle); border-radius: var(--radius-xs);
}
.integracion-claves span { color: var(--text-muted); font-size: 10.5px; }
.integracion-claves strong {
  color: var(--navy-900); font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px; overflow-wrap: anywhere;
}
.integracion-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.integraciones-head button:disabled, .integracion-acciones button:disabled { opacity: .5; cursor: not-allowed; }
.integracion-bloqueo { margin: 7px 0 0; color: var(--text-muted); font-size: 11px; }
.integracion-exportacion {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 12px 0; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-subtle);
}
.integracion-exportacion > div { display: grid; gap: 3px; }
.integracion-exportacion span { color: var(--text-muted); font-size: 12px; }
.integracion-secreto {
  margin: 0 0 14px; padding: 12px; border: 1px solid var(--gold-400, #C79B45);
  border-radius: var(--radius-sm); background: #FFFBEB; color: var(--navy-900);
}
.integracion-secreto > div { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.integracion-secreto code { flex: 1; padding: 7px; overflow-wrap: anywhere; background: white; border-radius: 5px; }
.historial-tabs {
  display: flex; gap: 3px; width: fit-content; max-width: 100%;
  margin-bottom: 12px; padding: 3px; overflow-x: auto;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.historial-tabs button {
  padding: 7px 11px; border: 0; border-radius: var(--radius-xs);
  color: var(--text-muted); background: transparent; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.historial-tabs button.active {
  color: var(--navy-900); background: white; box-shadow: var(--shadow-sm);
}
.historial-tabs button:focus-visible, .integracion-detalle summary:focus-visible,
.historial-detalle summary:focus-visible, .historial-filtro:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}
.historial-filtro {
  width: min(680px, 100%); margin: 0 0 12px; padding: 9px 11px;
  color: var(--text-primary); background: white; border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs); font-size: 12px;
}
.historial-controles {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin: 0 0 12px;
}
.historial-controles input, .historial-controles select {
  width: 150px; padding: 8px 10px; color: var(--text-primary); background: white;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs); font: inherit; font-size: 12px;
}
.historial-controles input:focus-visible, .historial-controles select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.historial-organizacion { display: grid; gap: 3px; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.historial-organizacion select { min-width: 215px; }
.historial-organizacion select:disabled { color: var(--text-muted); background: var(--bg-subtle); cursor: not-allowed; }
.historial-alcance-nota { flex-basis: 100%; margin: 0; color: var(--text-muted); font-size: 11px; }
.historial-tabla td:nth-child(1) { white-space: nowrap; }
.historial-tabla td:nth-child(5) {
  max-width: 220px; font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 10.5px; overflow-wrap: anywhere;
}
.historial-detalle { margin-top: 7px; }
.historial-detalle pre {
  max-width: 520px; max-height: 260px; margin: 7px 0 0; padding: 9px;
  overflow: auto; color: var(--navy-900); background: var(--bg-subtle);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  font: 10.5px/1.45 'SFMono-Regular', Consolas, monospace; white-space: pre-wrap;
}

@media (max-width: 900px) {
  .integracion-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integracion-exportacion { align-items: flex-start; flex-direction: column; }
  .integracion-claves { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Boot / login — full-page centered card, light background throughout     */
/* ---------------------------------------------------------------------- */

#boot-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}

#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.login-brand {
  font-weight: 600;
  font-size: 16px;
  color: var(--navy-900);
  margin-bottom: 4px;
}

.login-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--text-primary);
  background: var(--bg-page);
}

.field input:focus {
  outline: none;
  border-color: var(--mint-500);
  box-shadow: var(--focus-ring);
}

/* OJO: `width: 100%` vivia aqui porque esta clase se escribio para la tarjeta
   de login, donde el boton ocupa el ancho completo con razon. Pero es la unica
   clase de boton primario que existe, asi que toda pantalla que la reutiliza
   heredaba el estiron: "Buscar" en Grupos se renderizaba como una barra menta
   de ~1340 px junto a un campo de 180 px, y "Permitir" y "Aprobar" se iban
   solos a un renglon completo dentro de filas con flex-wrap. El ancho completo
   ahora se pide explicitamente con .btn-block, y el login lo pide. */
.btn-primary {
  padding: 10px 14px;
  border: none;
  border-radius: 6px;
  background: var(--mint-500);
  color: var(--text-on-mint);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary:hover { background: var(--mint-600); }
.btn-primary:disabled { opacity: .6; cursor: default; }

/* Ancho completo a peticion expresa (tarjeta de login), nunca por herencia. */
.btn-block { width: 100%; }

/* Variante compacta, para acciones que viven DENTRO de una fila y no deben
   competir con la accion principal de la pantalla. El tamano tactil de 44px
   sigue aplicando bajo `pointer: coarse` — ahi crecen igual. */
.btn-xs {
  padding: 4px 9px;
  font-size: 11.5px;
}

/* Accion destructiva como categoria propia. Antes "Dar de baja" y "Rechazar"
   eran visualmente identicos a un secundario neutro, disparaban al primer clic
   y son irreversibles desde el portal. Contorno coral discreto: legible como
   peligro sin gritar como una alarma de sistema. */
.btn-danger {
  padding: 8px 12px;
  border: 1px solid var(--coral-200);
  border-radius: 6px;
  background: var(--bg-page);
  color: var(--coral-700);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.btn-danger:hover { background: var(--coral-050); border-color: var(--coral-500); }
.btn-danger:disabled { opacity: .6; cursor: default; }

.btn-secondary {
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 12.5px;
  cursor: pointer;
}

.btn-secondary:hover { background: var(--bg-subtle); }

.form-error {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--coral-050);
  color: var(--coral-500);
  font-size: 12.5px;
}

/* ---------------------------------------------------------------------- */
/* Shell — sidebar claro + topbar claro, todo el chrome es luz sobre blanco */
/* ---------------------------------------------------------------------- */

#shell {
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.wa-sidebar {
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.wa-sidebar-brand {
  padding: 16px 20px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

.wa-sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0;
}

.wa-nav-section { padding-bottom: 4px; }

.wa-nav-section-label {
  padding: 8px 20px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wa-nav-item {
  display: block;
  padding: 8px 20px;
  margin: 1px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.wa-nav-item:hover { color: var(--text-primary); background: var(--navy-050); }

.wa-nav-item.active {
  color: var(--text-primary);
  font-weight: 600;
  background: var(--bg-raised);
  box-shadow: inset 3px 0 0 0 var(--mint-500), var(--shadow-sm);
}

/* El foco de teclado tambien usa box-shadow (convencion del portal, ver
   .ui-filtro:focus-visible mas abajo) - sin esto, un estilo de foco
   generico pisaria la franja mint del item activo al tabular hasta el. */
.wa-nav-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wa-nav-item.active:focus-visible {
  box-shadow: inset 3px 0 0 0 var(--mint-500), var(--focus-ring);
}

.wa-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.wa-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  height: 56px;
  padding: 0 20px;
  flex-shrink: 0;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}

#session-email {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* El scroller es .wa-body, NO #screen-mount (que trae max-width:1200px mas
   abajo y quedaria con margenes muertos sin scroll en monitores anchos si
   fuera el el que hace scroll — spec Fase 1 §3.1, hallazgo N1). */
.wa-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-canvas);
}

/* Session-expiry banner — coral is a warning color, used here for exactly
   that: an interruption the user did not ask for. Not shown on a normal
   "Cerrar sesion" click (see isUnexpectedSignOut in lib/auth.js) — only on
   an SDK-initiated SIGNED_OUT the user didn't request, so it stays rare. */
#session-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--coral-050);
  color: var(--coral-500);
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

#session-banner .field {
  margin-bottom: 0;
}

#session-banner form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

#session-banner input {
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 12.5px;
  width: 160px;
}

/* Sin un tope de ancho, cualquier cadena larga que venga de afuera sangra
   fuera del viewport y se corta a media frase - el estado vacio de Remitentes
   lo hacia, y un cuerpo de mensaje de 2,000 caracteres tambien. El tope va
   aqui, una sola vez, en lugar de en cada pantalla. */
#screen-mount {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  /* Redundante con .wa-body de proposito: hoy pinta el mismo color que ya
     se ve detras (el fondo de .wa-body), pero deja a #screen-mount con
     sentido visual propio si algun dia se separa de .wa-body. */
  background: var(--bg-canvas);
}

/* Todo contenedor de texto ajeno (nombres de grupo, cuerpos de mensaje,
   JIDs) lo declara: romper una palabra larga es mejor que empujar la pagina. */
.text-foreign { overflow-wrap: anywhere; word-break: break-word; }

.screen-stub {
  color: var(--text-muted);
  font-size: 13px;
}

.screen-stub h1 {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-900);
  margin: 0 0 8px;
}

/* ---------------------------------------------------------------------- */
/* Tamano tactil                                                          */
/* ---------------------------------------------------------------------- */

/*
 * 44px es el minimo tactil, pero aplicarlo SIEMPRE engordaria las tablas y
 * las filas densas del escritorio, donde el operador quiere ver muchas lineas
 * a la vez y apunta con un mouse de un pixel. La regla va tras
 * `pointer: coarse`, que es la pregunta correcta -"¿el dedo es el puntero?"-
 * en vez de adivinar por ancho de pantalla: una laptop con pantalla tactil
 * tambien la necesita, y una ventana angosta en escritorio no.
 */
@media (pointer: coarse) {
  button,
  [role="button"],
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 44px;
  }

  button,
  [role="button"] {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Las casillas no crecen solas; se agranda su area de toque real. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
  }

  label {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------- */
/* Estado vacio: primero la persona, despues la maquina                   */
/* ---------------------------------------------------------------------- */

/*
 * Varias pantallas le explicaban al operador que falta correr una migracion,
 * con nombre de archivo y todo. Esa informacion es util -para nosotros- pero
 * no es lo primero que necesita quien despacha carga. El detalle tecnico no
 * se borra, se pliega: arriba que significa y que puede hacer, abajo el
 * detalle para quien lo va a arreglar.
 */
.estado-vacio {
  padding: 20px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.estado-vacio.estado-alerta {
  background: var(--coral-050);
  border-color: var(--coral-200);
  border-left: 3px solid var(--coral-600);
}

.estado-vacio-titulo {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.estado-vacio-cuerpo {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  max-width: 70ch;
}

.estado-vacio details {
  margin-top: 12px;
}

.estado-vacio summary {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-block;
  padding: 4px 0;
}

.estado-vacio summary:hover { color: var(--text-primary); }
.estado-vacio summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

.estado-vacio-tecnico {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted);
  overflow-x: auto;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- */
/* Componentes compartidos: si lo dibuja lib/ui.js, se viste aqui          */
/* ---------------------------------------------------------------------- */

/*
 * Estas reglas vivian dentro del <style> que inyecta screens/mensajes.js, o
 * sea que una insignia dibujada por lib/ui.js solo se veia bien si el
 * operador habia pasado antes por Mensajes. Un componente compartido cuyo
 * aspecto depende de que otra pantalla se haya montado no es compartido: es
 * prestado. La regla que queda es simple — lo que dibuja lib/ui.js se viste
 * en app.css, y una pantalla solo inyecta CSS de lo que es suyo.
 */

.ui-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ui-chip-perdida { background: var(--coral-600); color: #FFFFFF; }
.ui-chip-aviso { background: var(--coral-050); color: var(--coral-700); border: 1px solid var(--coral-200); }
.ui-chip-ok { background: var(--mint-050); color: var(--mint-800); border: 1px solid var(--mint-200); }
.ui-chip-neutra { background: var(--navy-050); color: var(--navy-700); border: 1px solid var(--border-strong); }
.ui-chip-sindato { background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border-strong); }

/* Editor de embarque (lib/ui.js -> renderEditorEmbarque), usado por Grupos y
 * por Embarques. Las clases se llamaban `.grupo-embarque-*` cuando vivian en
 * screens/grupos.js; el nombre nuevo dice de que componente son, no en que
 * pantalla nacieron. */
.editor-embarque {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 7px;
  padding-top: 7px; border-top: 1px dashed var(--border);
}
.editor-embarque-et {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.editor-embarque-val { font-size: 13px; font-weight: 600; color: var(--navy-900); }
.editor-embarque-val.vacio { font-weight: 500; color: var(--text-muted); font-style: italic; }
.editor-embarque-meta { font-size: 11px; color: var(--text-muted); }
.editor-embarque-input {
  padding: 5px 9px; border: 1px solid var(--border-strong); border-radius: 6px;
  font-size: 13px; min-width: 180px; font-family: inherit;
}
.editor-embarque-input:focus { outline: none; border-color: var(--mint-500); box-shadow: var(--focus-ring); }

/*
 * #screen-mount recibe el foco al cambiar de pantalla, para que quien navega
 * con teclado no tenga que tabular desde el principio cada vez. No lleva
 * anillo: el foco aqui es un punto de partida, no un control — y un recuadro
 * alrededor de toda la pantalla se lee como un error. Los controles de
 * adentro conservan el suyo.
 */
#screen-mount:focus { outline: none; }

/* El aviso de que el semaforo se pinto con umbrales del codigo y no con los de
   Configuracion. Neutro a proposito: usar el valor por omision no es una
   perdida, es informacion — el coral se reserva para lo que se rompio. */
.inicio-umbrales-nota {
  margin: 0 0 16px;
  padding: 8px 12px;
  background: var(--navy-050, #EEF2F8);
  border-left: 3px solid var(--navy-400, #3E5C8A);
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--navy-700, #103060);
}

/* ===========================================================================
 * CAPA DE COMPONENTES COMPARTIDA — `ui-*` (2026-08-22)
 * ===========================================================================
 *
 * Las diez pantallas inyectaban cada una su propio <style> en runtime con los
 * MISMOS componentes bajo nombres distintos (.pendientes-header,
 * .actividad-header, ...). Nacio como frontera de archivos entre agentes
 * concurrentes — valido entonces, deuda ahora: diez versiones del mismo
 * encabezado divergen en silencio.
 *
 * Esta capa es el destino comun. La pantalla de Auditoria nace usandola SIN
 * inyectar nada; las demas migran aqui cuando se toquen, no en un big-bang.
 * Regla: una pantalla nueva NO inyecta CSS — si le falta un componente, se
 * agrega aqui, con nombre `ui-*` y para todos.
 */

.ui-screen-header { margin-bottom: 20px; }
.ui-screen-header h1 { font-size: 18px; font-weight: 600; color: var(--navy-900); margin: 0 0 4px; }
.ui-screen-sub { font-size: 13px; color: var(--text-muted); margin: 0; }

.ui-loading, .ui-empty, .ui-info {
  font-size: 13px; color: var(--text-muted); padding: 20px;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius);
}
.ui-empty { text-align: center; }

/* Tira de resumen: los numeros que se leen ANTES que la lista. */
.ui-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.ui-stat {
  flex: 1 1 120px; min-width: 120px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
}
.ui-stat-k {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 4px;
}
.ui-stat-v { font-size: 22px; font-weight: 700; color: var(--navy-900); line-height: 1; font-variant-numeric: tabular-nums; }
.ui-stat-n { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
/* Aviso, NO perdida: borde y texto coral, jamas relleno solido (reservado). */
.ui-stat.stat-aviso { border-color: var(--coral-200); }
.ui-stat.stat-aviso .ui-stat-v, .ui-stat.stat-aviso .ui-stat-k { color: var(--coral-700); }

/* Filtros: botones de alcance sobre una lista ya cargada. */
.ui-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ui-filtro {
  font-size: 12.5px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--bg-raised);
  color: var(--text-primary); cursor: pointer; font-family: inherit;
}
.ui-filtro:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-filtro[aria-pressed="true"] {
  background: var(--navy-900); border-color: var(--navy-900); color: #FFFFFF; font-weight: 600;
}

/* Selectores y panel de lectura: controles nativos, compartidos. */
.ui-selector { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.ui-selector select { max-width: 100%; min-width: 170px; padding: 6px 10px; font: inherit; color: var(--text-primary); background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 6px; }
.ui-selector select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 8px; padding: 14px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); overflow-wrap: anywhere; }
.ui-panel > h2, .ui-panel > p { grid-column: 1 / -1; margin: 0; }
.ui-panel > h2 { font-size: 16px; }
/* renderCampo no debe depender de haber pasado por Mensajes. */
.ui-campo { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; background: var(--bg-page); }
.ui-campo-etiqueta { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.ui-campo-valor { font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.ui-turno-a h3 { font-size: 13.5px; margin: 12px 0 4px; }
.ui-aviso { padding: 10px 14px; margin: 10px 0; border-left: 3px solid var(--coral-500); background: var(--coral-050); color: var(--coral-700); overflow-wrap: anywhere; }
.ui-cita { margin: 6px 0; padding-left: 12px; border-left: 2px solid var(--border-strong); }

/* Tarjeta de turno: pregunta + respuesta + su evidencia. */
.ui-turnos { display: flex; flex-direction: column; gap: 12px; }
.ui-turno {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
/* La palabra es la senal y la posicion la refuerza: borde izquierdo grueso
   para lo que exige mirada, igual que las tarjetas de Control del sistema. */
.ui-turno.turno-aviso { border-left: 3px solid var(--coral-500); }
.ui-turno-q {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 10px 14px; background: var(--bg-subtle); border-bottom: 1px solid var(--border);
}
.ui-turno-q .q-texto { flex: 1; min-width: 200px; font-size: 13.5px; font-weight: 600; color: var(--navy-900); overflow-wrap: anywhere; }
.ui-turno-q .q-meta { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.ui-turno-a { padding: 10px 14px; font-size: 13px; color: var(--text-primary); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-turno-pie {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 8px 14px; background: var(--bg-subtle); border-top: 1px solid var(--border);
}
.ui-turno-pie .pie-acciones { margin-left: auto; display: flex; gap: 6px; }

/* Detalle plegable (las fallas del veredicto, la lista de fuentes). El
   <summary> es un control real: enfocable y con anillo. */
.ui-detalle { font-size: 12px; color: var(--text-muted); width: 100%; }
.ui-detalle summary { cursor: pointer; user-select: none; }
.ui-detalle summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.ui-detalle-cuerpo { margin: 6px 0 0; padding: 8px 10px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; }
.ui-detalle-cuerpo ul { margin: 0; padding-left: 18px; }
/* Internal Audit notes share the existing light card and form vocabulary. */
.ui-comentarios { margin-top: 1rem; }
.ui-comentarios textarea { display: block; width: 100%; box-sizing: border-box; margin: .5rem 0; font: inherit; }
.ui-comentario { padding: .5rem 0; border-bottom: 1px solid var(--border, #dde3eb); }
.ui-comentario p { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Keep navigation available without consuming the mobile content width. */
@media (max-width: 640px) {
  #shell { flex-direction: column; height: 100dvh; }
  .wa-sidebar { width: 100%; min-width: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .wa-sidebar-brand { padding: 10px 16px; }
  .wa-sidebar-nav { display: flex; flex: none; overflow-x: auto; padding: 4px; }
  .wa-nav-section { display: flex; flex: none; padding: 0; }
  .wa-nav-section-label { display: none; }
  .wa-nav-item { white-space: nowrap; margin: 2px; padding: 10px 12px; }
  .wa-main { min-height: 0; }
  .wa-topbar { height: auto; min-height: 48px; padding: 6px 16px; }
  #session-email { min-width: 0; overflow-wrap: anywhere; }
  .wa-topbar button { flex-shrink: 0; }
  #screen-mount { padding: 16px; }
  .historial-tabs { flex-wrap: wrap; }
}

/* Auditoría: panel explicativo de solo lectura. */
.audit-drawer {
  border: 0; padding: 0; margin: 0 0 0 auto;
  width: min(34rem, 100vw); max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  color: var(--navy-900); background: transparent;
}
.audit-drawer::backdrop { background: rgb(16 48 96 / 0.32); }
.audit-drawer-panel {
  box-sizing: border-box; display: flex; flex-direction: column;
  width: 100%; height: 100%; background: var(--bg-raised);
  box-shadow: -14px 0 36px rgb(16 48 96 / 0.18);
}
.audit-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--border);
}
.audit-drawer-head h2, .audit-drawer-body h3 { margin: 0; color: var(--navy-900); }
.audit-drawer-status { margin: .2rem 0 0; color: var(--text-muted); font-size: .875rem; }
.audit-drawer-body { overflow-y: auto; padding: 1.25rem; }
.audit-drawer-body section + section { margin-top: 1.25rem; }
.audit-drawer-body h3 { font-size: .95rem; }
.audit-drawer-body p { margin: .4rem 0 0; line-height: 1.55; color: var(--text-muted); overflow-wrap: anywhere; }
.audit-drawer-body ul { margin: .4rem 0 0; padding-left: 1.25rem; color: var(--text-muted); }
.audit-drawer-body li { overflow-wrap: anywhere; }
.audit-drawer-body li + li { margin-top: .4rem; }
.audit-drawer-conversation { padding-top: 1.1rem; border-top: 1px solid var(--border); }
@media (max-width: 375px) {
  .audit-drawer { width: 100vw; }
  .audit-drawer-head, .audit-drawer-body { padding-left: 1rem; padding-right: 1rem; }
}

/* Control del sistema: lectura humana primero, evidencia tecnica plegable. */
.control-sistema-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin: 0 0 18px;
}
.control-sistema-summary-card {
  min-width: 0; padding: 16px; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 6px 18px rgb(16 48 96 / .05);
}
.control-sistema-summary-card.tone-alert,
.control-sistema-card.tone-alert { border-left: 3px solid var(--coral-500); }
.control-sistema-summary-card.tone-review,
.control-sistema-card.tone-review,
.control-sistema-compact.tone-review { border-left: 3px solid var(--gold-500, #B88A24); }
.control-sistema-summary-label {
  margin: 0 0 8px; color: var(--text-muted); font-size: 10.5px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.control-sistema-summary-value {
  margin: 0; color: var(--navy-900); font-size: 17px; font-weight: 700;
  line-height: 1.25; overflow-wrap: anywhere;
}
.control-sistema-summary-note {
  margin: 7px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.45;
}
.control-sistema-switcher { margin-bottom: 22px; }
.control-sistema-section-head { margin: 0 0 12px; }
.control-sistema-section-head h2 { margin: 0; color: var(--navy-900); font-size: 16px; }
.control-sistema-section-head p {
  margin: 5px 0 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.5;
}
.control-sistema-section-head.control-sistema-subsection { margin-top: 28px; }
.control-sistema-cards { display: grid; gap: 10px; }
.control-sistema-card,
.control-sistema-compact,
.control-sistema-state {
  min-width: 0; padding: 14px 16px; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: 10px;
}
.control-sistema-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 7px;
}
.control-sistema-card h3,
.control-sistema-compact h3 {
  margin: 0; color: var(--navy-900); font-size: 13.5px; line-height: 1.4;
}
.control-sistema-count {
  flex: none; color: var(--navy-900); font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.control-sistema-status {
  flex: none; max-width: 45%; padding: 3px 8px; border-radius: 999px;
  background: var(--navy-050, #EEF2F8); color: var(--navy-700, #103060);
  font-size: 11px; font-weight: 650; text-align: center;
}
.tone-alert .control-sistema-status { background: var(--coral-050); color: var(--coral-700); }
.control-sistema-card-copy,
.control-sistema-card-action,
.control-sistema-compact p,
.control-sistema-state p {
  margin: 5px 0 0; color: var(--text-primary); font-size: 12.5px;
  line-height: 1.5; overflow-wrap: anywhere;
}
.control-sistema-card-action { color: var(--text-muted); }
.control-sistema-card-meta {
  margin: 8px 0 0; color: var(--text-muted); font-size: 11.5px;
}
.control-sistema-technical { margin-top: 10px; }
.control-sistema-code {
  font-family: 'SFMono-Regular', Consolas, monospace; overflow-wrap: anywhere;
  word-break: break-word; white-space: normal;
}
.control-sistema-code + .control-sistema-code { margin-top: 5px; }
.control-sistema-compact-list { display: grid; gap: 8px; }
.control-sistema-more,
.control-sistema-retry { margin-top: 10px; }

@media (max-width: 760px) {
  .control-sistema-summary { grid-template-columns: 1fr; }
}
@media (max-width: 375px) {
  .control-sistema-card-top { display: block; }
  .control-sistema-count,
  .control-sistema-status { display: inline-block; max-width: 100%; margin-top: 8px; }
  .control-sistema-summary-card,
  .control-sistema-card,
  .control-sistema-compact,
  .control-sistema-state { padding: 13px; }
}