/* ============================================================
   Sistema de diseño — Módulo Resonancias HCSI
   Herramienta interna de admisiones. Prioridad: legibilidad,
   calma, velocidad de carga de datos. No es una landing.

   Paleta: verde-petróleo institucional profundo (guiño al verde
   del hospital, pero elegido, no genérico) sobre superficies
   cálidas neutras. Estados con color semántico del flujo.
   Tipografía: IBM Plex Sans (UI, tiene carácter de software de
   infraestructura) + IBM Plex Mono para códigos y datos, que son
   el latido de esta herramienta.
   ============================================================ */

:root {
  --ink: #16302a;
  --ink-soft: #4a5c56;
  --surface: #f4f6f4;
  --card: #ffffff;
  --primary: #0f5c4d;
  --primary-dark: #0a4034;
  --primary-ink: #ffffff;
  --line: #dde3df;
  --line-strong: #c4cec8;
  --focus: #b8862b;

  /* Estados del flujo */
  --st-pend-bg: #fdf0d5;  --st-pend-fg: #9a5b06;
  --st-llam-bg: #dbe8fb;  --st-llam-fg: #1d4a9e;
  --st-deri-bg: #e4e8e6;  --st-deri-fg: #465a53;
  --st-apro-bg: #d6efdd;  --st-apro-fg: #17683a;

  --danger-bg: #fbe4e2;   --danger-fg: #a12b1e;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(22,48,42,.06), 0 4px 16px rgba(22,48,42,.05);
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--primary); }

/* ---------- Banda de entorno ----------
   Advierte que el sistema NO está en infraestructura del municipio y que no se
   pueden cargar datos reales de pacientes. Ver settings.ENTORNO y D-025.

   Ocre y no rojo a propósito: no es un error que alguien tenga que resolver,
   es una condición permanente del entorno. El rojo se gasta si está siempre
   encendido y deja de leerse cuando algo falla de verdad.

   Va arriba de todo, ancho completo y sin botón de cerrar: una advertencia que
   se puede ocultar es una advertencia que no está. */
.banda-entorno {
  background: #8a5206;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: center;
  align-items: baseline;
  padding: 7px 16px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.banda-entorno strong { font-weight: 600; }

.banda-entorno b {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Barra superior ---------- */
.topbar {
  background: var(--primary);
  color: var(--primary-ink);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  height: 60px;
  box-shadow: var(--shadow);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--primary-ink);
}
.brand .brand-code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  opacity: .72;
  border: 1px solid rgba(255,255,255,.35);
  padding: 1px 6px;
  border-radius: 5px;
}
.topbar nav { display: flex; gap: 4px; margin-left: 8px; }
.topbar nav a {
  color: rgba(255,255,255,.86);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.topbar nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbar nav a.activo { background: rgba(255,255,255,.16); color: #fff; }
.topbar .spacer { flex: 1; }
.topbar .usuario { font-size: 13px; opacity: .9; display: flex; align-items: center; gap: 12px; }
.topbar .usuario form { margin: 0; }
.topbar .usuario button {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 0;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.topbar .usuario button:hover { background: rgba(255,255,255,.22); }

/* ---------- Contenedor ---------- */
.wrap { max-width: 1040px; margin: 0 auto; padding: 32px 24px 80px; }
/* Las pantallas con tabla necesitan mas aire. El ancho angosto por defecto
   es para leer; una tabla cortada no se lee de ninguna manera. */
.wrap.ancho { max-width: 1360px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-head h1 { font-size: 24px; letter-spacing: -.02em; margin: 0; }
.page-head .sub { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 500; font-size: 14px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 5px 11px; font-size: 13px; }

/* ---------- Tarjetas ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 22px; }

/* auto-fit en vez de 3 columnas fijas: hay filas de 3 y de 4 tarjetas. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .n { font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.stat .l { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.stat.pend .n { color: var(--st-pend-fg); }
.stat.llam .n { color: var(--st-llam-fg); }

/* ---------- Barra de búsqueda ---------- */
.toolbar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar input[type=search], .toolbar select {
  font: inherit; padding: 9px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
}
.toolbar input[type=search] { flex: 1; min-width: 200px; }

/* ---------- Tabla ---------- */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
table.datos { width: 100%; border-collapse: collapse; font-size: 14px; }
table.datos th {
  text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 12px 14px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
table.datos td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.datos tr:last-child td { border-bottom: 0; }
table.datos tbody tr:hover { background: #fafbfa; }
.codigo { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: -.01em; white-space: nowrap; }
.paciente { font-weight: 500; }
.dim { color: var(--ink-soft); }
.dias { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dias.alerta { color: var(--danger-fg); font-weight: 600; }

/* ---------- Badges de estado ---------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
/* Dentro de una tabla la etiqueta puede partirse: "Observada por Salud
   Publica" mide mas que varias columnas juntas, y forzarla en una linea
   empujaba el resto fuera de la pantalla. */
table.datos .badge { white-space: normal; }
table.datos td.acciones { white-space: nowrap; text-align: right; }
/* Familias de estado. Nueve estados serian nueve colores indistinguibles;
   se agrupan en cuatro que es lo que el ojo necesita de un vistazo. La
   etiqueta sigue diciendo el estado exacto en texto, asi que la lectura
   nunca depende del color. Ver Solicitud.CLASES_ESTADO. */
.badge.abierta { background: var(--st-llam-bg); color: var(--st-llam-fg); }
.badge.trabada { background: var(--st-pend-bg); color: var(--st-pend-fg); }
.badge.cerrada { background: var(--st-apro-bg); color: var(--st-apro-fg); }
.badge.otra    { background: var(--st-deri-bg); color: var(--st-deri-fg); }

/* Usos no relacionados con el circuito (estado de una cuenta, envio fallido).
   Nombres propios en vez de reutilizar los de un estado, que confundia. */
.badge.ok      { background: var(--st-apro-bg); color: var(--st-apro-fg); }
.badge.inactiva{ background: var(--st-deri-bg); color: var(--st-deri-fg); }
.badge.error   { background: var(--st-pend-bg); color: var(--st-pend-fg); }

/* ---------- Formularios ---------- */
form.stack { display: grid; gap: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.field input:not([type=checkbox]):not([type=radio]),
.field select, .field textarea {
  width: 100%; font: inherit; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
}
.field textarea { resize: vertical; }
.field .help { color: var(--ink-soft); font-size: 13px; margin-top: 5px; }
.field .errorlist { color: var(--danger-fg); font-size: 13px; margin: 6px 0 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.zonas-box { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; background: #fbfcfb; }
.zonas-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.zonas-box li label { font-weight: 400; display: flex; gap: 7px; align-items: center; cursor: pointer; }
.zonas-box.oculto { display: none; }
.zonas-hint { color: var(--ink-soft); font-size: 13px; }

.form-actions { display: flex; gap: 10px; padding-top: 4px; }

/* ---------- Mensajes ---------- */
.mensajes { display: grid; gap: 8px; margin-bottom: 20px; }
.msg { padding: 11px 15px; border-radius: var(--radius-sm); font-size: 14px; border: 1px solid; }
.msg.success { background: var(--st-apro-bg); color: var(--st-apro-fg); border-color: #b8dcc4; }
.msg.error { background: var(--danger-bg); color: var(--danger-fg); border-color: #eec2bd; }
.msg.info { background: var(--st-llam-bg); color: var(--st-llam-fg); border-color: #bcd2f2; }

/* ---------- Estado vacío ---------- */
.vacio { text-align: center; padding: 60px 24px; color: var(--ink-soft); }
.vacio h2 { color: var(--ink); font-size: 18px; margin: 0 0 6px; }
.vacio p { margin: 0 0 18px; }

/* ---------- Login ---------- */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(160deg, #0f5c4d 0%, #0a4034 100%); }
.login-card { background: var(--card); border-radius: 14px; box-shadow: 0 20px 60px rgba(10,64,52,.35);
  width: 100%; max-width: 380px; padding: 34px; }
.login-card .brand-block { margin-bottom: 24px; }
.login-card .brand-block .code { font-family: var(--font-mono); font-size: 12px; color: var(--primary);
  background: #e8f2ef; padding: 2px 8px; border-radius: 5px; display: inline-block; margin-bottom: 10px; }
.login-card h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; }
.login-card p.sub { color: var(--ink-soft); font-size: 14px; margin: 4px 0 0; }
.login-card .field { margin-bottom: 16px; }
.login-card .btn { width: 100%; justify-content: center; }

/* ---------- Detalle / modal-página ---------- */
.detalle-lista { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; font-size: 14px; }
.detalle-lista dt { color: var(--ink-soft); }
.detalle-lista dd { margin: 0; font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: stretch; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar nav { display: none; }
  .wrap { padding: 22px 14px 60px; }
}

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

/* =========================================================================
   TABLERO DE ESTADÍSTICAS
   =========================================================================
   Paleta de gráficos: NO son los mismos colores que las etiquetas de estado.
   Los de las etiquetas funcionan como texto chico sobre fondo teñido, pero
   como áreas contiguas Derivado y Aprobado quedaban a ΔE 8.2 — indistinguibles
   incluso con visión normal, y peor con daltonismo.

   Estos se re-escalonaron manteniendo las familias de color y se verificaron:
   pasan banda de luminosidad, piso de saturación, separación para protanopia,
   deuteranopia y tritanopia, y contraste contra el fondo blanco.
   ========================================================================= */
:root {
  --gr-pendiente: #b8760c;   /* ámbar  */
  --gr-llamado:   #3266cc;   /* azul   */
  --gr-derivado:  #d1587f;   /* rosa   */
  --gr-aprobado:  #0a6b3f;   /* verde  */
  --gr-neutro:    #0f5c4d;   /* el primario, para series de una sola categoría */
  --gr-pista:     #eef2f0;
}

/* ---- Filtros del tablero ---- */
.filtro-campo { display: flex; flex-direction: column; gap: .2rem; }
.filtro-campo > span {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); font-family: var(--font-mono);
}

/* ---- Nota sobre las métricas ---- */
.nota-metrica {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .9rem 1.1rem;
  margin-top: .9rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}

.stat.stat-alerta .n { color: var(--danger-fg); }

/* ---- Barras horizontales ---- */
.grafico-barras { display: flex; flex-direction: column; gap: .55rem; }

.barra-fila {
  display: grid;
  grid-template-columns: 8.5rem 1fr 3rem;
  align-items: center;
  gap: .8rem;
}
.barra-etiqueta { font-size: .88rem; color: var(--ink-soft); }
.barra-pista {
  background: var(--gr-pista);
  border-radius: var(--radius-sm);
  height: 1.4rem;
  overflow: hidden;
}
.barra {
  height: 100%;
  border-radius: var(--radius-sm);
  min-width: 3px;
  transition: width .2s ease;
}
.barra-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: .9rem;
  font-weight: 500;
}

.barra-abierta { background: var(--gr-llamado); }
.barra-trabada { background: var(--gr-pendiente); }
.barra-cerrada { background: var(--gr-aprobado); }
.barra-otra    { background: var(--gr-derivado); }
.barra-tipo      { background: var(--gr-neutro); }
/* Las zonas usan el mismo neutro que los tipos a propósito: son otra vista de
   lo mismo, y sumar un color nuevo obligaría a revalidar toda la paleta. */
.barra-zona      { background: var(--gr-neutro); }
/* "Sin zonas" es el mismo color atenuado: se lee como parte de la serie pero
   se distingue del resto sin sumar un color a la paleta. */
.barra-sinzona   { background: var(--gr-neutro); opacity: .45; }

/* ---- Barras mensuales ---- */
.leyenda { display: flex; gap: 1.2rem; margin-bottom: 1rem; }
.leyenda-item {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--ink-soft);
}
.punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.punto-ingresos { background: var(--gr-llamado); }
.punto-cierres  { background: var(--gr-pendiente); }

.grafico-meses {
  display: flex;
  align-items: flex-end;
  gap: .7rem;
  height: 190px;
  overflow-x: auto;
  padding-top: 1.2rem;
}
.mes-grupo {
  display: flex; flex-direction: column;
  flex: 1 0 3.2rem; height: 100%;
  min-width: 3.2rem;
}
.mes-barras {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 2px;                  /* separación entre las dos barras del mes */
  flex: 1;
}
.mes-barra {
  width: 42%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  position: relative;
}
.mes-ingresos { background: var(--gr-llamado); }
.mes-cierres  { background: var(--gr-pendiente); }
.mes-valor {
  position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  color: var(--ink-soft);
}
.mes-etiqueta {
  text-align: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
  padding-top: .45rem;
  border-top: 1px solid var(--line);
  margin-top: .3rem;
}

/* ---- Tabla alternativa ---- */
.tabla-alternativa { margin-top: 1.2rem; }
.tabla-alternativa > summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--ink-soft);
  padding: .35rem 0;
}
.tabla-alternativa > summary:hover { color: var(--primary); }

@media (max-width: 640px) {
  .barra-fila { grid-template-columns: 6rem 1fr 2.4rem; gap: .5rem; }
  .barra-etiqueta { font-size: .8rem; }
}

/* ---- Linea de tiempo del recorrido de una solicitud ---- */
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: .9rem;
  padding-bottom: 1.1rem;
  position: relative;
}
/* La linea vertical se dibuja con un borde en el marcador, no con un
   pseudo-elemento posicionado: asi acompana la altura real de cada fila. */
.linea-tiempo li:not(:last-child) .lt-marca::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: -2px;
  width: 1px;
  background: var(--line);
}
.lt-marca { position: relative; margin-top: 5px; }
.lt-marca::before {
  content: "";
  display: block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gr-neutro);
  margin-left: 2px;
}
.lt-titulo { font-size: .95rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lt-meta { color: var(--ink-soft); font-size: .82rem; margin-top: .15rem; }
.lt-motivo {
  margin-top: .4rem;
  padding: .5rem .7rem;
  background: var(--gr-pista);
  border-radius: var(--radius-sm);
  font-size: .88rem;
}
.lt-aviso {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .05rem .5rem;
  cursor: help;
}

/* ---- Avisos al paciente ---- */
.aviso-fila { padding: .1rem 0 .9rem; }
.aviso-fila + .aviso-fila { border-top: 1px solid var(--line); padding-top: .9rem; }
.aviso-cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Campo que el formulario destaca cuando pasa a ser obligatorio. */
.field.destacado {
  border-left: 3px solid var(--primary);
  padding-left: .8rem;
  margin-left: -.8rem;
}

/* Aviso del autocompletado de paciente. */
.hint.ok  { color: var(--st-apro-fg); }
.hint.dim { color: var(--ink-soft); }