/*
 * Panel de asistentes · APA Insular
 * Carta náutica: agua pálida, barra en azul de sonda, tinta de carta, ocre caliche para lo archivado y el magenta
 * que las cartas reservan a luces y avisos, solo para lo que espera a una persona.
 */

:root {
  color-scheme: light;
  --agua: #edf4f5;
  --agua-somera: #dcebef;
  --agua-media: #c5dde4;
  --papel: #fbfdfd;
  --sonda: #123047;
  --sonda-2: #1c4563;
  --sonda-texto: #e8f1f5;
  --sonda-suave: #9fbdd0;
  --tinta: #17232c;
  --tinta-2: #3e5160;
  --tinta-3: #5d7080;
  --filete: #c3d4da;
  --filete-fuerte: #9db6bf;
  --luz: #b3166f;
  --luz-fondo: #fbe8f2;
  --luz-texto: #ffffff;
  --luz-borde: #eab3d1;
  --caliche: #f1e6cb;
  --caliche-texto: #6a5220;
  --verde: #1d6b4a;
  --verde-fondo: #e1f1e8;
  --error: #a3261c;
  --error-fondo: #fbe9e6;
  --radio: 6px;
  --radio-g: 10px;
  --sombra: 0 1px 2px rgba(18, 48, 71, 0.08), 0 6px 20px -12px rgba(18, 48, 71, 0.35);
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --barra: 3.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --agua: #0c1a24;
    --agua-somera: #12283a;
    --agua-media: #1b3a52;
    --papel: #10212e;
    --sonda: #081521;
    --sonda-2: #12293b;
    --sonda-texto: #dbe8ef;
    --sonda-suave: #8aa7ba;
    --tinta: #e3edf2;
    --tinta-2: #b4c6d1;
    --tinta-3: #8ea3b1;
    --filete: #23405a;
    --filete-fuerte: #335a78;
    --luz: #ff7ac0;
    --luz-fondo: #3a1530;
    --luz-texto: #2a0819;
    --luz-borde: #6e2a57;
    --caliche: #3a301a;
    --caliche-texto: #e8d29d;
    --verde: #7fd6a8;
    --verde-fondo: #12322a;
    --error: #ffb4a8;
    --error-fondo: #3d1814;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--agua);
  color: var(--tinta);
  font: 16px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--luz);
  color: var(--luz-texto);
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

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

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icono {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Barra superior: el azul de sonda ──────────────────────────────────────────────────────────────────────────── */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--sonda);
  color: var(--sonda-texto);
  border-bottom: 1px solid var(--sonda-2);
}

.barra__fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--barra);
  padding: 0 1rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.marca__rosa {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--sonda-texto);
  stroke-width: 1.25;
  fill: none;
}

.marca__rosa .aguja {
  fill: var(--luz);
  stroke: none;
}

.marca small {
  color: var(--sonda-suave);
  font-weight: 450;
}

.navegacion {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 0.75rem 0.5rem;
}

.navegacion::-webkit-scrollbar {
  display: none;
}

.navegacion a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  color: var(--sonda-suave);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}

.navegacion a:hover {
  color: var(--sonda-texto);
  background: var(--sonda-2);
}

.navegacion a[aria-current='page'] {
  color: var(--sonda);
  background: var(--sonda-texto);
}

.recuento {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--luz);
  color: var(--luz-texto);
  font-size: 0.8rem;
  font-weight: 700;
}

.cuenta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cuenta__nombre {
  color: var(--sonda-suave);
  font-size: 0.9rem;
  display: none;
}

.boton-barra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 48px;
  min-height: 48px;
  padding: 0 0.5rem;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--sonda-texto);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}

.boton-barra:hover {
  background: var(--sonda-2);
}

.boton-barra span {
  display: none;
}

@media (min-width: 720px) {
  /* Escritorio: marca, pestañas y, a la derecha, la cuenta, en una sola fila */
  .barra {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--barra);
    padding: 0 1rem;
  }

  .barra__fila {
    display: contents;
  }

  .marca {
    order: 0;
  }

  .navegacion {
    order: 1;
    padding: 0;
  }

  .cuenta {
    order: 2;
  }

  .cuenta__nombre,
  .boton-barra span {
    display: inline;
  }
}

/* ── Estructura: lista y conversación ───────────────────────────────────────────────────────────────────────────── */

.carta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100dvh - var(--barra) - 3rem);
}

.carta__lista {
  min-width: 0;
}

.carta__detalle {
  min-width: 0;
  display: none;
}

.carta--conversacion .carta__lista {
  display: none;
}

.carta--conversacion .carta__detalle {
  display: block;
}

@media (min-width: 960px) {
  .carta {
    grid-template-columns: 26rem minmax(0, 1fr);
    min-height: calc(100dvh - var(--barra));
  }

  .carta__lista,
  .carta--conversacion .carta__lista {
    display: block;
    border-right: 1px solid var(--filete);
    background: var(--papel);
    position: sticky;
    top: var(--barra);
    height: calc(100dvh - var(--barra));
    overflow-y: auto;
  }

  .carta__detalle {
    display: block;
  }
}

.contenido {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

/* ── Cabecera de la lista y filtros ─────────────────────────────────────────────────────────────────────────────── */

.lista__cabecera {
  padding: 1.1rem 1rem 0.75rem;
  display: grid;
  gap: 0.75rem;
}

.lista__cabecera h1 {
  font-size: 1.25rem;
}

.lista__cabecera p {
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.9rem;
}

.proyectos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.proyectos a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--filete);
  border-radius: 999px;
  color: var(--tinta-2);
  background: var(--papel);
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
}

.proyectos a[aria-current='true'] {
  border-color: var(--sonda);
  background: var(--sonda);
  color: var(--sonda-texto);
}

.linea {
  display: inline-block;
  width: 0.9rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-proyecto, var(--tinta-3));
}

/* ── Entradas de la bandeja ─────────────────────────────────────────────────────────────────────────────────────── */

.entradas {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filete);
}

.entrada {
  border-bottom: 1px solid var(--filete);
}

.entrada a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: 0.15rem 0.6rem;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 140ms ease-out;
}

.entrada a:hover {
  background: color-mix(in srgb, var(--agua-somera) 55%, var(--papel));
}

.entrada a[aria-current='true'] {
  background: var(--agua-somera);
  box-shadow: inset 0 0 0 1px var(--filete-fuerte);
}

.entrada__marca {
  grid-row: span 3;
  padding-top: 0.15rem;
}

.entrada__codigo {
  font-family: var(--mono);
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.entrada__espera {
  justify-self: end;
}

.entrada__proyecto {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--tinta-2);
  font-size: 0.85rem;
  min-width: 0;
}

.entrada__proyecto span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entrada__texto {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Gesto propio: la luz magenta y la espera en cifras de sonda ────────────────────────────────────────────────── */

.luz {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

.luz .destello {
  fill: var(--luz);
}

.luz .boya {
  fill: none;
  stroke: var(--luz);
  stroke-width: 1.5;
}

.luz--apagada .destello {
  fill: none;
  stroke: var(--filete-fuerte);
  stroke-width: 1.5;
}

.luz--apagada .boya {
  stroke: var(--filete-fuerte);
}

.sonda {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radio);
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tinta-2);
}

/* Cuanto más espera, más hondo: las bandas de profundidad de la carta */
.sonda--somera {
  background: var(--agua-somera);
}

.sonda--media {
  background: var(--agua-media);
  color: var(--tinta);
}

.sonda--honda {
  background: var(--luz-fondo);
  color: var(--luz);
  box-shadow: inset 0 0 0 1px var(--luz-borde);
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.estado--esperando,
.estado--persona-pendiente {
  background: var(--luz-fondo);
  color: var(--luz);
}

.estado--persona {
  background: var(--verde-fondo);
  color: var(--verde);
}

.estado--ia {
  background: var(--agua-somera);
  color: var(--tinta-2);
}

.estado--cerrada {
  background: var(--caliche);
  color: var(--caliche-texto);
}

.etiqueta {
  display: inline-flex;
  padding: 0.05rem 0.5rem;
  border-radius: var(--radio);
  border: 1px dashed var(--filete-fuerte);
  color: var(--tinta-2);
  font-size: 0.78rem;
}

/* ── Vacíos ─────────────────────────────────────────────────────────────────────────────────────────────────────── */

.vacio {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  color: var(--tinta-2);
}

.vacio svg {
  width: 3rem;
  height: 3rem;
  stroke: var(--filete-fuerte);
  stroke-width: 1.25;
  fill: none;
}

.vacio h2 {
  font-size: 1.1rem;
  color: var(--tinta);
}

.vacio p {
  margin: 0;
  max-width: 34ch;
}

.carta__detalle > .vacio {
  min-height: 60dvh;
  align-content: center;
  justify-items: center;
  text-align: center;
}

/* ── Conversación ───────────────────────────────────────────────────────────────────────────────────────────────── */

.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 48px;
  color: var(--tinta-2);
  text-decoration: none;
  font-weight: 550;
}

@media (min-width: 960px) {
  .volver {
    display: none;
  }
}

.conversacion__cabecera {
  display: grid;
  gap: 0.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--filete);
}

.conversacion__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.conversacion__titulo h1 {
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.conversacion__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  color: var(--tinta-3);
  font-size: 0.9rem;
}

.conversacion__meta .proyecto {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--tinta-2);
  font-weight: 550;
}

.aviso {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: var(--radio-g);
  background: var(--papel);
  box-shadow: var(--sombra);
}

.aviso h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--luz);
}

.aviso p {
  margin: 0.35rem 0 0;
  max-width: 70ch;
}

.aviso .contacto {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--filete);
  font-size: 0.95rem;
}

.aviso .sin-contacto {
  color: var(--tinta-3);
  font-size: 0.9rem;
}

.registro {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.mensaje {
  max-width: min(42rem, 92%);
  padding: 0.65rem 0.9rem 0.75rem;
  border-radius: var(--radio-g);
  background: var(--papel);
  border: 1px solid var(--filete);
}

.mensaje__quien {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--tinta-2);
}

.mensaje__quien time {
  font-weight: 450;
  color: var(--tinta-3);
}

.mensaje__texto {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mensaje--asistente {
  background: transparent;
  border-style: dashed;
}

.mensaje--persona {
  justify-self: end;
  background: var(--sonda);
  border-color: var(--sonda);
  color: var(--sonda-texto);
}

.mensaje--persona .mensaje__quien,
.mensaje--persona .mensaje__quien time {
  color: var(--sonda-suave);
}

.accion {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--tinta-3);
  font-size: 0.85rem;
  font-style: italic;
  padding-left: 0.25rem;
}

.accion .icono {
  width: 1rem;
  height: 1rem;
}

/* ── Respuesta y acciones ───────────────────────────────────────────────────────────────────────────────────────── */

.responder {
  position: sticky;
  bottom: 0;
  margin: 1.5rem -1rem 0;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--agua) 88%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--filete);
}

.responder label {
  display: block;
  font-weight: 650;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.responder textarea {
  display: block;
  width: 100%;
  min-height: 6rem;
  max-height: 40dvh;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio-g);
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  resize: vertical;
  field-sizing: content;
}

.responder textarea:focus-visible {
  border-color: var(--luz);
}

.responder__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.6rem;
}

.responder__ayuda {
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.85rem;
  flex: 1 1 14rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 48px;
  padding: 0 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radio-g);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 140ms ease-out, transform 120ms ease-out;
}

.boton:active {
  transform: translateY(1px);
}

.boton--principal {
  background: var(--luz);
  color: var(--luz-texto);
}

.boton--principal:hover {
  background: color-mix(in srgb, var(--luz) 86%, #000);
}

.boton--secundario {
  background: var(--papel);
  border-color: var(--filete-fuerte);
  color: var(--tinta);
}

.boton--secundario:hover {
  background: var(--agua-somera);
}

.boton--peligro {
  background: transparent;
  border-color: var(--filete);
  color: var(--tinta-2);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.acciones form {
  margin: 0;
}

.nota {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: var(--radio-g);
  background: var(--agua-somera);
  color: var(--tinta-2);
}

.nota--cerrada {
  background: var(--caliche);
  color: var(--caliche-texto);
}

.nota p {
  margin: 0;
}

.nota .acciones {
  margin-top: 0.75rem;
}

.etiquetar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.etiquetar label {
  font-size: 0.85rem;
  color: var(--tinta-3);
}

select,
input[type='date'],
input[type='search'],
input[type='text'] {
  min-height: 44px;
  padding: 0 0.7rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
}

.etiquetar .boton {
  min-height: 44px;
}

.novedades {
  position: sticky;
  top: calc(var(--barra) + 0.5rem);
  z-index: 5;
  display: none;
  margin: 0 0 1rem;
}

.novedades.visible {
  display: flex;
}

/* ── Historial: filtros ─────────────────────────────────────────────────────────────────────────────────────────── */

.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
  padding: 0 1rem 1rem;
}

.filtros label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tinta-3);
}

.filtros input,
.filtros select,
.formulario input,
.formulario select {
  width: 100%;
  font: 400 1rem/1.4 var(--sans);
  color: var(--tinta);
}

.filtros .boton {
  align-self: end;
}

/* ── Páginas de una columna: ausencias, seguridad ───────────────────────────────────────────────────────────────── */

.pagina h1 {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}

.pagina > p {
  margin: 0 0 1.25rem;
  color: var(--tinta-2);
  max-width: 65ch;
}

.pagina h2 {
  font-size: 1.1rem;
  margin: 2rem 0 0.75rem;
}

.bloque {
  padding: 1rem;
  border-radius: var(--radio-g);
  background: var(--papel);
  box-shadow: var(--sombra);
}

.bloque > h2:first-child,
.bloque > h3:first-child {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.bloque h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.bloque + .bloque {
  margin-top: 0.75rem;
}

.filas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.filas li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--filete);
}

.filas li:last-child {
  border-bottom: 0;
}

.filas .meta {
  color: var(--tinta-3);
  font-size: 0.875rem;
}

.formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.formulario label {
  display: grid;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.mensaje-flash {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radio-g);
  background: var(--verde-fondo);
  color: var(--verde);
  font-weight: 550;
}

.mensaje-flash--error {
  background: var(--error-fondo);
  color: var(--error);
}

/* ── Entrada ────────────────────────────────────────────────────────────────────────────────────────────────────── */

.acceso {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding: 2rem 1rem;
  background: linear-gradient(180deg, var(--sonda) 0 13rem, var(--agua) 13rem);
}

.acceso__caja {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
}

.acceso .marca {
  color: var(--sonda-texto);
  margin-bottom: 1.25rem;
  font-size: 1.1rem;
}

.acceso form {
  padding: 1.25rem;
  border-radius: var(--radio-g);
  background: var(--papel);
  box-shadow: var(--sombra);
}

.acceso h1 {
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.acceso label {
  display: block;
  font-weight: 600;
  margin: 1rem 0 0.35rem;
}

.acceso label:first-of-type {
  margin-top: 0;
}

.acceso input {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  background: var(--agua);
  color: var(--tinta);
  font: inherit;
}

.acceso input:focus-visible {
  border-color: var(--luz);
}

.acceso .ayuda {
  color: var(--tinta-3);
  font-size: 0.875rem;
  margin: 0.35rem 0 0;
}

.acceso .boton {
  width: 100%;
  margin-top: 1.25rem;
}

.acceso .error {
  margin: 0 0 1rem;
  padding: 0.75rem;
  border-radius: var(--radio);
  background: var(--error-fondo);
  color: var(--error);
}

.cf-turnstile {
  margin-top: 1rem;
}

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