/* CIAPSE Consentimientos — estilo sobrio, accesible (objetivo WCAG 2.2 AA). */
:root {
  --azul: #1d3d6b;
  --azul-oscuro: #142c4f;
  --azul-claro: #e8eef7;
  --verde: #1f6b45;
  --verde-claro: #e6f2ea;
  --ambar: #8a5a00;
  --ambar-claro: #fdf3dc;
  --rojo: #a12a2a;
  --rojo-claro: #fbe9e9;
  --gris-900: #1c2430;
  --gris-700: #46505e;
  --gris-300: #c9cfd8;
  --gris-100: #f3f5f8;
  --blanco: #ffffff;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(20, 30, 50, .08), 0 4px 12px rgba(20, 30, 50, .06);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--gris-900);
  background: var(--gris-100);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--azul); }
a:hover { color: var(--azul-oscuro); }
:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }

.saltar { position: absolute; left: -9999px; top: 0; }
.saltar:focus { left: 1rem; top: .5rem; background: var(--blanco); padding: .5rem 1rem; z-index: 10; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.aviso-entorno {
  background: var(--ambar-claro); color: var(--ambar);
  text-align: center; font-size: .875rem; padding: .35rem 1rem; font-weight: 600;
  border-bottom: 1px solid #ecd9a6;
}

.cabecera {
  background: var(--azul); color: var(--blanco);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .75rem clamp(1rem, 4vw, 2rem);
}
.cabecera__marca { display: flex; align-items: center; gap: .75rem; }
.cabecera__logo {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--blanco); color: var(--azul);
  display: grid; place-items: center; font-weight: 800; font-size: 1.15rem;
}
.cabecera__sub { display: block; font-size: .8rem; opacity: .85; }
.cabecera__nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.cabecera__nav a, .cabecera__nav .boton--texto { color: var(--blanco); text-decoration: none; font-weight: 500; }
.cabecera__nav a:hover, .cabecera__nav .boton--texto:hover { text-decoration: underline; }
.en-linea { display: inline; margin: 0; }

.contenido { flex: 1; width: 100%; max-width: 72rem; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 2rem) 3rem; }
.pie { text-align: center; color: var(--gris-700); font-size: .85rem; padding: 1rem; }

h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: .25rem 0 1rem; color: var(--azul-oscuro); }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; color: var(--azul-oscuro); }
.texto-secundario { color: var(--gris-700); margin-top: -.5rem; }

.tarjetas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.tarjeta { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.25rem; }
.tarjeta .boton { margin: .25rem .25rem 0 0; }

.boton, button, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .55rem 1.1rem;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 2px solid var(--azul); border-radius: 8px;
  background: var(--azul); color: var(--blanco);
}
.boton:hover, button:hover, input[type="submit"]:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: var(--blanco); }
.boton--secundario { background: var(--blanco); color: var(--azul); }
.boton--secundario:hover { background: var(--azul-claro); color: var(--azul-oscuro); }
.boton--texto { background: none; border: none; padding: 0; min-height: 0; }
.boton--texto:hover { background: none; }

.etiqueta { display: inline-block; font-size: .8rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; }
.etiqueta--gris { background: var(--gris-100); color: var(--gris-700); border: 1px solid var(--gris-300); }

.mensajes { margin-bottom: 1rem; }
.mensaje { padding: .75rem 1rem; border-radius: 8px; border-left: 4px solid var(--azul); background: var(--azul-claro); margin: 0 0 .5rem; }
.mensaje--success { border-color: var(--verde); background: var(--verde-claro); }
.mensaje--warning { border-color: var(--ambar); background: var(--ambar-claro); }
.mensaje--error { border-color: var(--rojo); background: var(--rojo-claro); }

/* Formularios (incluye los de allauth) */
form p { margin: 0 0 1rem; }
label { display: block; font-weight: 600; margin-bottom: .3rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"], select, textarea {
  width: 100%; max-width: 32rem; min-height: 2.75rem;
  font: inherit; padding: .5rem .75rem;
  border: 1px solid var(--gris-700); border-radius: 8px; background: var(--blanco); color: var(--gris-900);
}
/* iOS Safari: el selector de fecha ignora width/alto sin appearance y centra el valor. */
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; vertical-align: middle; margin-right: .4rem; }
.errorlist { color: var(--rojo); margin: 0 0 .5rem; padding-left: 1.2rem; font-weight: 600; }
.helptext, form small { display: block; color: var(--gris-700); font-size: .875rem; margin-top: .25rem; }

.caja-cuenta { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(1.25rem, 4vw, 2rem); max-width: 34rem; margin: 1rem auto; }
.caja-cuenta img { max-width: 220px; height: auto; display: block; margin: .5rem 0 1rem; }
.caja-cuenta code, .caja-cuenta pre { word-break: break-all; white-space: pre-wrap; }

.filtros { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1rem; margin-bottom: 1rem; }
.filtros label { margin: 0; }
.filtros select { width: auto; }

.tabla-envoltura { overflow-x: auto; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: .925rem; }
.tabla th, .tabla td { padding: .6rem .75rem; border-bottom: 1px solid var(--gris-300); text-align: left; vertical-align: top; }
.tabla th { background: var(--azul-claro); color: var(--azul-oscuro); font-weight: 700; }
.paginacion { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 1rem; }

@media (max-width: 40rem) {
  .cabecera { flex-direction: column; align-items: flex-start; }
  .tabla { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --- Fase 2-6: panel de consentimientos, portal y documento --- */
.barra-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.barra-titulo h1 { margin: 0; }
.boton--grande { min-height: 3.25rem; font-size: 1.05rem; padding: .7rem 1.4rem; }
.boton--chico { min-height: 2.25rem; padding: .3rem .8rem; font-size: .9rem; }
.boton--ancho { width: 100%; margin-top: .75rem; }
.boton--peligro { background: var(--rojo); border-color: var(--rojo); }
.boton--peligro:hover { background: #7f1f1f; border-color: #7f1f1f; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.acciones form { margin: 0; }
.enlace-peligro { color: var(--rojo); }
.texto-alerta { color: var(--rojo); font-weight: 600; }
.ayuda { color: var(--gris-700); font-size: .9rem; }
.momento { font-size: 1.1rem; }
.huella code { font-size: .8rem; word-break: break-all; }
.tarjeta--ancha { margin-top: 1rem; }
.lista-simple { padding-left: 1.2rem; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.datos dt { font-weight: 600; color: var(--gris-700); }
.datos dd { margin: 0; }
@media (max-width: 30rem) { .datos { grid-template-columns: 1fr; } .datos dd { margin-bottom: .4rem; } }
.historial { padding-left: 1.2rem; font-size: .9rem; }
.historial time { font-variant-numeric: tabular-nums; color: var(--gris-700); }

.estado { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 700; border: 1px solid transparent; }
.estado--grande { font-size: 1rem; padding: .35rem .9rem; }
.estado--pendiente_aceptacion { background: var(--gris-100); color: var(--gris-700); border-color: var(--gris-300); }
.estado--aceptado_pendiente_firma, .estado--pendiente_firma_presencial { background: var(--ambar-claro); color: var(--ambar); border-color: #ecd9a6; }
.estado--firmado_presencial { background: var(--verde-claro); color: var(--verde); border-color: #b9dcc6; }
.estado--revocado, .estado--sustituido { background: var(--rojo-claro); color: var(--rojo); border-color: #f0c4c4; }

.formulario fieldset { border: 1px solid var(--gris-300); border-radius: var(--radio); padding: 1rem 1.25rem; margin: 0 0 1.25rem; background: var(--blanco); }
.formulario legend { font-weight: 700; color: var(--azul-oscuro); padding: 0 .4rem; }
.campo { margin-bottom: 1rem; }
.campo--error input, .campo--error select { border-color: var(--rojo); border-width: 2px; }
.error-campo { color: var(--rojo); font-weight: 600; margin: .3rem 0 0; }
.opcion, .casilla { display: flex; align-items: flex-start; gap: .6rem; margin: .5rem 0; }
.opcion label, .casilla label { font-weight: 400; margin: 0; }
.casilla input[type="checkbox"] { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin-top: .1rem; }

/* Portal del representante: una columna, botones grandes */
.contenido--publico { max-width: 42rem; }
.caja-publica { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(1.1rem, 5vw, 2rem); }
.caja-publica fieldset { border: 1px solid var(--gris-300); border-radius: var(--radio); padding: .75rem 1rem; margin: 1rem 0; }
.caja-publica legend { font-weight: 700; padding: 0 .3rem; }
.input-codigo { font-size: 1.6rem; letter-spacing: .4em; text-align: center; max-width: 14rem; }
form.secundario { margin-top: .5rem; }
.progreso { display: flex; list-style: none; padding: 0; margin: 0 0 1rem; gap: .25rem; counter-reset: paso; }
.progreso li { flex: 1; text-align: center; font-size: .8rem; color: var(--gris-700); padding-top: .4rem; border-top: 4px solid var(--gris-300); }
.progreso li.hecho { border-top-color: var(--azul); color: var(--azul-oscuro); }
.progreso li.actual { font-weight: 700; }

/* Documento (lectura) */
.documento { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(1rem, 5vw, 2.25rem); font-size: 1.02rem; line-height: 1.65; margin-bottom: 1rem; }
.documento p { text-align: justify; hyphens: auto; }
.doc-encabezado { text-align: right; color: var(--gris-700); font-size: .95rem; }
.doc-titulo { text-align: center; font-size: 1.25rem; margin: 1rem 0; }
.doc-seccion { font-size: 1.02rem; margin: 1.4rem 0 .4rem; color: var(--azul-oscuro); }
.doc-campo { font-weight: 700; border-bottom: 1px solid var(--gris-300); }
.doc-marca { font-weight: 700; white-space: nowrap; }
.doc-linea { display: inline-block; min-width: 3.5rem; border-bottom: 1px solid var(--gris-900); }
.doc-guiones { list-style: "– "; }
.doc-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; text-align: center; }
.doc-firmas > div { border-top: 1px solid var(--gris-900); padding-top: .4rem; margin-top: 2.5rem; }
.doc-nota { font-size: .9rem; color: var(--gris-700); text-align: center; }
.documento p.doc-datos { text-align: left; hyphens: manual; }

/* Versión Node.js: código QR de activación del TOTP (SVG en línea). */
.qr-totp { max-width: 220px; margin: 1rem 0; background: #fff; }
.qr-totp svg { width: 100%; height: auto; display: block; }