/* atiende — panel de atención. Contrastes comprobados para WCAG 2.2 AA (texto ≥ 4.5:1). */
:root {
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --texto: #1b1f24;
  --secundario: #4a5260;      /* 7.4:1 sobre blanco */
  --borde: #c9ced6;
  --primario: #0b5c4a;        /* 7.6:1 sobre blanco */
  --primario-texto: #ffffff;
  --urgente-fondo: #fde8e6;
  --urgente: #8a1c12;         /* 8.3:1 sobre su fondo */
  --aviso-fondo: #e3f3ec;
  --aviso: #0b4d3e;
  --advertencia: #7a4a00;     /* 7.0:1 sobre blanco */
  --peligro: #a3160b;
  --foco: #1a56db;
  --cliente: #ffffff;
  --saliente: #e6f2ee;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12161b; --superficie: #1b2129; --texto: #e8ebef; --secundario: #b3bcc8;
    --borde: #3a4350; --primario: #5cc9a7; --primario-texto: #06231b;
    --urgente-fondo: #3d1612; --urgente: #ffb4a8; --aviso-fondo: #12322a; --aviso: #a6e9d2;
    --advertencia: #ffcf7a; --peligro: #ff9a8f; --foco: #8ab4ff; --cliente: #1b2129; --saliente: #183029;
  }
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto);
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--primario); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--superficie); padding: .5rem 1rem; z-index: 10; }
.saltar:focus { left: .5rem; }

.cabecera { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; padding: .75rem 1rem;
  background: var(--superficie); border-bottom: 1px solid var(--borde); }
.marca { margin: 0; }
.cabecera nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; margin: 0; padding: 0; }
.cabecera nav a { text-decoration: none; padding: .25rem .1rem; }
.cabecera nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.salir { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.insignia { background: var(--urgente); color: var(--superficie); border-radius: 1rem; padding: 0 .5rem; font-weight: 700; }

main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
main:focus { outline: none; }
h1 { font-size: 1.6rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.25rem; }
.documento { max-width: 46rem; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: .5rem; padding: 1rem; margin: 1rem 0; }
.tarjeta.estrecha { max-width: 26rem; margin: 3rem auto; }
.tarjeta.peligro { border-color: var(--peligro); }

.campo { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1rem; }
.campo.casilla, .casilla { flex-direction: row; align-items: center; gap: .5rem; display: inline-flex; }
label { font-weight: 600; }
input, select, textarea { font: inherit; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--secundario); border-radius: .375rem; padding: .5rem .6rem; min-height: 2.75rem; }
input[type="checkbox"] { min-height: auto; width: 1.25rem; height: 1.25rem; }
textarea { min-height: 6rem; }
[aria-invalid="true"] { border: 2px solid var(--peligro); }
.error-campo { color: var(--peligro); margin: 0; font-weight: 600; }

.boton { display: inline-block; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  background: var(--primario); color: var(--primario-texto); border: 2px solid var(--primario);
  border-radius: .375rem; padding: .55rem 1rem; min-height: 2.75rem; }
.boton.secundario { background: transparent; color: var(--primario); }
.boton.peligro { background: var(--peligro); border-color: var(--peligro); color: var(--superficie); }
.boton.enlace { background: none; border: none; color: var(--primario); text-decoration: underline; padding: 0; min-height: auto; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.acciones form, form.en-linea { display: inline; margin: 0; }
.fila-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.aviso { background: var(--aviso-fondo); color: var(--aviso); border-left: 4px solid var(--aviso); padding: .75rem 1rem; border-radius: .25rem; }
.error { background: var(--urgente-fondo); color: var(--urgente); border-left: 4px solid var(--urgente); padding: .75rem 1rem; border-radius: .25rem; }
.advertencia { color: var(--advertencia); font-weight: 600; }
.secundario { color: var(--secundario); font-size: .925rem; display: block; }
.vacio { color: var(--secundario); font-style: italic; }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filtros a { padding: .4rem .8rem; border: 1px solid var(--borde); border-radius: 2rem; text-decoration: none; background: var(--superficie); }
.filtros a[aria-current="true"] { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }

.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabla th, .tabla td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla thead th { font-size: .9rem; color: var(--secundario); }
.tabla tbody th { font-weight: 600; }
.recorte { max-width: 28rem; }
tr.estado-humano { background: var(--urgente-fondo); }
.etiqueta { display: inline-block; font-size: .85rem; font-weight: 700; padding: .1rem .5rem; border-radius: .25rem;
  border: 1px solid currentColor; }
.etiqueta.urgente { color: var(--urgente); }
.etiqueta.apagada { color: var(--secundario); }

.mensajes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.mensaje { max-width: 40rem; padding: .6rem .9rem; border-radius: .5rem; border: 1px solid var(--borde); background: var(--cliente); }
.mensaje.saliente { align-self: flex-end; background: var(--saliente); }
.mensaje .meta { margin: 0 0 .25rem; font-size: .875rem; color: var(--secundario); }
.mensaje .texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.estado-fallido, .estado-no_enviado, .error-envio { color: var(--peligro); font-weight: 600; }
.error-envio { margin: .25rem 0 0; font-size: .875rem; }
.fuentes { margin-top: .5rem; font-size: .9rem; }
.burbuja { background: var(--saliente); padding: .75rem 1rem; border-radius: .5rem; white-space: pre-wrap; }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.cifras div { background: var(--superficie); border: 1px solid var(--borde); border-radius: .5rem; padding: .75rem 1rem; }
.cifras dt { color: var(--secundario); font-size: .9rem; }
.cifras dd { margin: 0; font-size: 1.6rem; font-weight: 700; }

details > summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; }
@media (max-width: 40rem) {
  .tabla thead { display: none; }
  .tabla tr { display: block; border-bottom: 1px solid var(--borde); }
  .tabla th, .tabla td { display: block; border: none; padding: .25rem .5rem; }
  .salir { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }