/* Vigía · estilos
   Paleta de verdes grisáceos y tinta suave, pensada para largas horas de uso.
   Tema claro y oscuro: sigue al sistema, o lo que elijas con "Cambiar tema". */

:root {
  --fondo: #E7ECEA;
  --superficie: #F5F7F6;
  --superficie-2: #EDF1EF;
  --linea: #D0DAD6;
  --tinta: #23302D;
  --tinta-suave: #5A6965;
  --acento: #2D6A5D;
  --acento-hover: #24574C;
  --sobre-acento: #F4F8F6;
  --foco: #3F8A79;

  --vencido: #A3453B;   --vencido-fondo: #F2DEDA;
  --critico: #B05A26;   --critico-fondo: #F5E3D5;
  --pronto: #8C6A1C;    --pronto-fondo: #F1E8CF;
  --ok: #367049;        --ok-fondo: #DAEADF;
  --neutro: #6B7975;    --neutro-fondo: #E2E8E6;

  --radio-panel: 14px;
  --radio-control: 8px;
  --fuente: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #131918;
    --superficie: #1A2221;
    --superficie-2: #212B29;
    --linea: #2D3937;
    --tinta: #D5DFDC;
    --tinta-suave: #91A19D;
    --acento: #7DBBAA;
    --acento-hover: #96CBBC;
    --sobre-acento: #10201C;
    --foco: #9AD3C3;
    --vencido: #E4958A;   --vencido-fondo: #3A2523;
    --critico: #E8A777;   --critico-fondo: #3A2A1F;
    --pronto: #D9BD72;    --pronto-fondo: #342E1D;
    --ok: #8BC79F;        --ok-fondo: #1F3326;
    --neutro: #93A19D;    --neutro-fondo: #26302E;
    color-scheme: dark;
  }
}

:root[data-tema="oscuro"] {
  --fondo: #131918;
  --superficie: #1A2221;
  --superficie-2: #212B29;
  --linea: #2D3937;
  --tinta: #D5DFDC;
  --tinta-suave: #91A19D;
  --acento: #7DBBAA;
  --acento-hover: #96CBBC;
  --sobre-acento: #10201C;
  --foco: #9AD3C3;
  --vencido: #E4958A;   --vencido-fondo: #3A2523;
  --critico: #E8A777;   --critico-fondo: #3A2A1F;
  --pronto: #D9BD72;    --pronto-fondo: #342E1D;
  --ok: #8BC79F;        --ok-fondo: #1F3326;
  --neutro: #93A19D;    --neutro-fondo: #26302E;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.55;
}
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; }
h1 { font-size: 1.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin: 0.35rem 0 0; }
a { color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento-hover); }
small { font-size: 0.85rem; }
.suave { color: var(--tinta-suave); }
[hidden] { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Marco ---------- */
.marco {
  display: grid;
  grid-template-columns: 228px 1fr;
  min-height: 100vh;
}
.lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--linea);
}
.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.6rem;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
}
.marca svg { width: 26px; height: 26px; color: var(--acento); }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  padding: 0.55rem 0.7rem;
  border-radius: var(--radio-control);
  color: var(--tinta-suave);
  text-decoration: none;
}
.menu a:hover { background: var(--superficie-2); color: var(--tinta); }
.menu a[aria-current="page"] {
  background: var(--superficie);
  color: var(--tinta);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--acento);
}
.lateral-pie {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 0.7rem;
  font-size: 0.9rem;
}
.lateral-pie a, .enlace-boton { color: var(--tinta-suave); text-decoration: none; }
.lateral-pie a:hover, .enlace-boton:hover { color: var(--tinta); }
.enlace-boton {
  background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer;
}

.contenido {
  padding: 2rem clamp(1rem, 3vw, 2.75rem) 4rem;
  max-width: 1240px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cabecera-pagina {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.cabecera-pagina p { max-width: 62ch; }
.miga { margin: 0 0 0.25rem; font-size: 0.9rem; }
.miga a { color: var(--tinta-suave); }

/* ---------- Paneles ---------- */
.panel {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-panel);
  padding: 1.25rem 1.4rem;
}
.panel > h2 { margin-bottom: 0.9rem; }
.panel-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.vacio { color: var(--tinta-suave); margin: 0; }
.panel.vacio { padding: 1.5rem 1.4rem; }

.rejilla-tablero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.25rem;
  align-items: start;
}
.columna-lateral { display: flex; flex-direction: column; gap: 1.25rem; }
.rejilla-gestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 1.25rem;
  align-items: start;
}
.rejilla-gestion > div { display: flex; flex-direction: column; gap: 1.25rem; }

/* ---------- Línea de vencimientos (el elemento protagonista) ---------- */
.linea-panel { padding-bottom: 1.6rem; }
.resumen {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  list-style: none; margin: 0; padding: 0;
  color: var(--tinta-suave); font-size: 0.92rem;
}
.resumen li { display: flex; align-items: center; gap: 0.4rem; }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.punto-vencido { background: var(--vencido); }
.punto-critico { background: var(--critico); }
.punto-pronto { background: var(--pronto); }
.punto-ok { background: var(--ok); }

.linea {
  position: relative;
  height: 112px;
  margin: 0.25rem 18px 0 26px;
}
.linea-eje {
  position: absolute;
  left: 0; right: 0; top: 74px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--critico) 0, var(--critico) calc(7 / 90 * 100%),
    var(--pronto) calc(7 / 90 * 100%), var(--pronto) calc(30 / 90 * 100%),
    var(--linea) calc(30 / 90 * 100%));
  opacity: 0.85;
}
.linea-zona-vencida {
  position: absolute;
  left: -26px; width: 22px; top: 68px; height: 16px;
  border-radius: 8px;
  background: var(--vencido-fondo);
  border: 1px solid var(--vencido);
}
.linea-hoy, .linea-mes {
  position: absolute;
  top: 86px;
  font-size: 0.8rem;
  color: var(--tinta-suave);
  white-space: nowrap;
  transform: translateX(-50%);
}
.linea-hoy { left: 0; color: var(--tinta); font-weight: 700; }
.linea-mes::before {
  content: "";
  position: absolute;
  left: 50%; top: -14px;
  width: 1px; height: 10px;
  background: var(--tinta-suave);
  opacity: 0.6;
}
.hito {
  position: absolute;
  top: calc(46px - var(--nivel, 0) * 17px);
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  border: 2px solid var(--superficie);
  background: var(--ok);
  z-index: 1;
}
.hito::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 2px; margin-left: -1px;
  height: calc(16px + var(--nivel, 0) * 17px);
  background: currentColor;
  opacity: 0.35;
}
.hito { color: var(--ok); }
.hito-vencido { background: var(--vencido); color: var(--vencido); }
.hito-critico { background: var(--critico); color: var(--critico); }
.hito-pronto { background: var(--pronto); color: var(--pronto); }
.hito:hover, .hito:focus-visible { z-index: 3; transform: scale(1.25); outline-offset: 3px; }
.hito-info {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: var(--tinta);
  color: var(--fondo);
  font-size: 0.85rem;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.hito-info strong { display: block; font-size: 0.92rem; }
.hito-izquierda .hito-info { left: -6px; transform: none; }
.hito-derecha .hito-info { left: auto; right: -6px; transform: none; }
.hito:hover .hito-info, .hito:focus-visible .hito-info { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  .hito { transition: transform 0.15s ease; }
  .hito-info { transition: opacity 0.12s ease; }
  .linea .hito { animation: aparecer 0.5s ease backwards; }
  .linea-eje { animation: trazar 0.7s ease-out backwards; transform-origin: left; }
  @keyframes trazar { from { transform: scaleX(0); } }
  @keyframes aparecer { from { opacity: 0; } }
}

/* ---------- Estados y etiquetas ---------- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.7rem 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--neutro-fondo);
  color: var(--neutro);
}
.estado::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.estado-vencido { background: var(--vencido-fondo); color: var(--vencido); }
.estado-critico { background: var(--critico-fondo); color: var(--critico); }
.estado-pronto { background: var(--pronto-fondo); color: var(--pronto); }
.estado-ok { background: var(--ok-fondo); color: var(--ok); }

.etiqueta {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  font-size: 0.78rem;
  background: var(--neutro-fondo);
  color: var(--tinta-suave);
  white-space: nowrap;
}
.etiqueta-pronto { background: var(--pronto-fondo); color: var(--pronto); }
.etiqueta-vencido { background: var(--vencido-fondo); color: var(--vencido); }

/* ---------- Listas ---------- */
.lista-servicios, .lista-simple, .lista-agencias, .lista-boveda {
  list-style: none; margin: 0; padding: 0;
}
.fila-servicio, .fila-boveda {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--linea);
}
.fila-boveda { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.fila-servicio:first-child, .fila-boveda:first-child { border-top: 0; padding-top: 0.2rem; }
.fila-servicio .estado { justify-self: start; }
.fila-principal { display: flex; flex-direction: column; min-width: 0; }
.fila-principal .suave { font-size: 0.9rem; }
.fila-titulo {
  color: var(--tinta);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.fila-titulo:hover { color: var(--acento); text-decoration: underline; }
.fila-dato {
  display: flex; flex-direction: column; align-items: flex-end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fila-dato small { color: var(--tinta-suave); }
.fila-acciones { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }

.lista-simple li, .lista-agencias li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--linea);
}
.lista-simple li:first-child, .lista-agencias li:first-child { border-top: 0; padding-top: 0.2rem; }
.lista-simple li > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lista-simple .suave { font-size: 0.9rem; }
.lista-agencias li { flex-wrap: wrap; gap: 0.15rem 0.6rem; }
.lista-agencias li a { font-weight: 700; flex-basis: 100%; }
.lista-agencias .suave { font-size: 0.9rem; }

.grupo-agencia { display: flex; flex-direction: column; gap: 0.75rem; }
.grupo-agencia > h2 {
  font-size: 1.3rem;
  padding-top: 0.75rem;
}
.grupo-cliente h3 { margin-bottom: 0.6rem; display: flex; gap: 0.5rem; align-items: baseline; }
.grupo-cliente h3 a { color: var(--tinta); text-decoration: none; }
.grupo-cliente h3 a:hover { color: var(--acento); }

.montos { margin: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.montos div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.montos dt { color: var(--tinta-suave); }
.montos dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Bóveda ---------- */
.boveda-cerrada { max-width: 560px; }
.boveda-cerrada h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.boveda-cerrada > p { max-width: 60ch; }
.boveda-cerrada .formulario { margin-top: 1.1rem; }
.credencial { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.copiable {
  align-self: flex-start;
  max-width: 100%;
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--tinta);
  cursor: copy;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.copiable:hover { color: var(--acento); }
.secreto {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92rem;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}
.secreto.visible { color: var(--tinta); }
.enlace-url { font-size: 0.88rem; overflow-wrap: anywhere; }
.detalles summary { cursor: pointer; font-weight: 700; }
.detalles[open] summary { margin-bottom: 1rem; }

/* ---------- Formularios ---------- */
.formulario { display: flex; flex-direction: column; gap: 0.95rem; }
.formulario-ancho { max-width: 860px; }
label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 700; font-size: 0.92rem; }
input, select, textarea {
  width: 100%;
  font: inherit;
  font-weight: 400;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--superficie-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-control);
  padding: 0.6rem 0.75rem;
  min-height: 44px;
}
textarea { resize: vertical; min-height: 80px; }
input:hover, select:hover, textarea:hover { border-color: var(--tinta-suave); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 0;
  border-color: var(--foco);
}
input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--acento); margin: 0.15rem 0 0; flex: none; }
.ayuda { color: var(--tinta-suave); font-weight: 400; }
.ayuda.ok { color: var(--ok); }
.ayuda.error { color: var(--vencido); }
.campos-2, .campos-3 { display: grid; gap: 0.95rem; }
.campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo-con-boton { display: flex; gap: 0.5rem; }
.campo-con-boton input { flex: 1; min-width: 0; }
.campo-dinero { display: flex; gap: 0.4rem; }
.campo-dinero select { width: 88px; flex: none; }
.casillas { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.casilla { flex-direction: row; align-items: flex-start; gap: 0.6rem; font-weight: 400; font-size: 0.97rem; }
.acciones-form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem; }

.filtros {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end;
}
.filtros label { min-width: 160px; }
.filtros .filtro-buscar { flex: 1 1 260px; }
.filtros-compactos { margin-bottom: 1rem; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px;
  padding: 0.5rem 1rem;
  border-radius: var(--radio-control);
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.boton:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.boton-primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.boton-primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); color: var(--sobre-acento); }
.boton-suave { background: transparent; border-color: transparent; color: var(--acento); min-height: 36px; padding: 0.35rem 0.7rem; }
.boton-suave:hover { background: var(--superficie-2); border-color: transparent; color: var(--acento-hover); }
.boton-peligro { background: transparent; color: var(--vencido); border-color: var(--vencido-fondo); }
.boton-peligro:hover { background: var(--vencido-fondo); border-color: var(--vencido); color: var(--vencido); }
.boton[disabled] { opacity: 0.6; cursor: progress; }
.grupo-botones { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.grupo-botones form { margin: 0; }
form { margin: 0; }

.zona-peligro {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 0.25rem;
  font-size: 0.9rem;
}
.panel .zona-peligro { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }

/* ---------- Avisos ---------- */
.aviso {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  max-width: 860px;
}
.aviso-ok { background: var(--ok-fondo); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.aviso-error { background: var(--vencido-fondo); color: var(--vencido); border-color: color-mix(in srgb, var(--vencido) 30%, transparent); }
.aviso-alerta { background: var(--pronto-fondo); color: var(--pronto); border-color: color-mix(in srgb, var(--pronto) 30%, transparent); }

.notificacion {
  position: fixed;
  bottom: 1.25rem; left: 50%;
  transform: translateX(-50%);
  padding: 0.6rem 1rem;
  border-radius: 10px;
  background: var(--tinta);
  color: var(--fondo);
  font-weight: 700;
  font-size: 0.92rem;
  z-index: 50;
}

/* ---------- Acceso ---------- */
.pantalla-acceso { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.acceso { width: 100%; max-width: 400px; }
.acceso h1 { margin-top: 2rem; }
.acceso .formulario { margin-top: 1.5rem; }
.acceso .aviso { margin-top: 1rem; }
.marca-grande { padding: 0; }
.marca-grande svg { width: 32px; height: 32px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .rejilla-tablero, .rejilla-gestion { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .marco { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: sticky;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-right: 0;
    border-bottom: 1px solid var(--linea);
    background: var(--fondo);
    z-index: 10;
    overflow-x: auto;
  }
  .marca span { display: none; }
  .menu { flex-direction: row; }
  .menu a { white-space: nowrap; }
  .menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--acento); }
  .lateral-pie { flex-direction: row; margin: 0 0 0 auto; white-space: nowrap; gap: 0.9rem; padding: 0; }
  .contenido { padding-top: 1.25rem; }
  .campos-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  h1 { font-size: 1.5rem; }
  .panel { padding: 1rem; }
  .campos-2 { grid-template-columns: minmax(0, 1fr); }
  .fila-servicio, .fila-boveda { grid-template-columns: minmax(0, 1fr) auto; }
  .fila-servicio .estado { grid-column: 1 / -1; }
  .fila-servicio .fila-principal, .fila-boveda .fila-principal { grid-column: 1 / -1; }
  .fila-servicio > form, .fila-acciones { justify-content: flex-start; }
  .fila-dato { align-items: flex-start; }
  .linea { margin-left: 26px; margin-right: 6px; }
  .linea-mes { font-size: 0.72rem; }
  .campo-con-boton { flex-wrap: wrap; }
  .campo-con-boton input { flex-basis: 100%; }
}