/*
  Estilos del servicio de firma. Solo usa variables de tokens.css:
  ningun color escrito aqui. Para cambiar la marca se sustituye tokens.css.
*/

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

html {
  font-family: var(--fuente-texto);
  font-size: 100%;
  line-height: var(--interlineado-texto);
  background: var(--color-fondo);
  color: var(--color-texto);
}

body {
  margin: 0;
  font-size: var(--texto-base);
  background: var(--color-fondo);
  color: var(--color-texto);
}

h1,
h2,
h3 {
  line-height: var(--interlineado-titulo);
  font-weight: var(--peso-fuerte);
  margin: 0 0 var(--espacio-4);
}

h1 {
  font-size: var(--texto-2xl);
}

h2 {
  font-size: var(--texto-xl);
}

h3 {
  font-size: var(--texto-lg);
}

p {
  margin: 0 0 var(--espacio-4);
}

a {
  color: var(--color-accion);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: var(--grosor-borde-fuerte);
}

/* Foco: anillo doble de tokens, visible en claro y en oscuro */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--foco-grosor) solid var(--color-foco);
  outline-offset: var(--grosor-borde-fuerte);
  box-shadow: var(--foco-anillo);
  border-radius: var(--radio-sm);
}

main:focus,
section[tabindex="-1"]:focus {
  box-shadow: none;
}

/* Enlace para saltar al contenido */
.skip-link {
  position: absolute;
  left: var(--espacio-4);
  top: calc(-1 * var(--espacio-9));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-minimo);
  padding: var(--espacio-2) var(--espacio-4);
  background: var(--color-accion);
  color: var(--color-accion-texto);
  border-radius: var(--radio-md);
  font-weight: var(--peso-fuerte);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: var(--espacio-4);
}

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Contenedores */
.contenedor {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--espacio-5);
}

.contenedor--estrecho {
  max-width: 44rem;
  padding-top: var(--espacio-7);
  padding-bottom: var(--espacio-7);
}

/* Cabecera */
.cabecera {
  border-bottom: var(--grosor-borde) solid var(--color-borde);
  background: var(--color-superficie);
}

.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding-top: var(--espacio-3);
  padding-bottom: var(--espacio-3);
}

.marca {
  margin: 0;
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
}

.marca__logo {
  display: block;
  max-height: var(--espacio-7);
  width: auto;
}

/* Selector de tema: enlaces, funciona sin JavaScript */
.tema__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tema__opcion {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-minimo);
  min-width: var(--objetivo-minimo);
  padding: var(--espacio-2) var(--espacio-3);
  border: var(--grosor-borde) solid var(--color-borde);
  border-radius: var(--radio-pildora);
  color: var(--color-texto);
  text-decoration: none;
  font-size: var(--texto-sm);
}

.tema__opcion[aria-current="true"] {
  border: var(--grosor-borde-fuerte) solid var(--color-accion);
  font-weight: var(--peso-fuerte);
  text-decoration: underline;
}

/* Botones y enlaces con forma de boton */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--objetivo-minimo);
  min-width: var(--objetivo-minimo);
  padding: var(--espacio-3) var(--espacio-5);
  border: var(--grosor-borde-fuerte) solid transparent;
  border-radius: var(--radio-md);
  font: inherit;
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracion-corta) var(--curva-estandar);
}

.boton--primario {
  background: var(--color-accion);
  color: var(--color-accion-texto);
}

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

.boton--secundario {
  background: var(--color-superficie);
  color: var(--color-accion);
  border-color: var(--color-accion);
}

.boton--enlace {
  background: transparent;
  color: var(--color-accion);
  text-decoration: underline;
  padding-left: 0;
  padding-right: 0;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin-top: var(--espacio-5);
}

/* Portada */
.hero {
  padding: var(--espacio-8) 0 var(--espacio-7);
}

.hero__eyebrow {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero__titular {
  font-size: var(--texto-hero);
  max-width: 20ch;
}

.hero__subtitulo {
  font-size: var(--texto-lg);
  color: var(--color-texto-suave);
  max-width: 60ch;
}

.resalte {
  color: var(--color-acento);
  text-decoration: underline;
  text-decoration-thickness: var(--grosor-borde-fuerte);
  text-underline-offset: 0.15em;
}

.seccion {
  padding: var(--espacio-7) 0;
  border-top: var(--grosor-borde) solid var(--color-borde);
}

.seccion--cierre {
  background: var(--color-superficie);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--espacio-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tarjeta {
  padding: var(--espacio-5);
  background: var(--color-superficie);
  border: var(--grosor-borde) solid var(--color-borde);
  border-radius: var(--radio-lg);
}

.tarjeta--alivio {
  border-left: var(--espacio-1) solid var(--color-verificado);
}

.tarjeta p {
  margin: 0;
  color: var(--color-texto-suave);
}

.columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--espacio-6);
}

.lista-pasos,
.lista-garantias {
  margin: 0;
  padding-left: var(--espacio-5);
}

.lista-pasos li,
.lista-garantias li {
  margin-bottom: var(--espacio-3);
}

/* Pagina de firma */
.pasos {
  margin-bottom: var(--espacio-6);
}

.pasos__contador {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  margin-bottom: var(--espacio-2);
}

.pasos__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pasos__item {
  padding: var(--espacio-1) var(--espacio-3);
  border: var(--grosor-borde) solid var(--color-borde);
  border-radius: var(--radio-pildora);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.pasos__item--hecho {
  color: var(--color-verificado);
  border-color: var(--color-verificado);
}

.pasos__item--actual {
  color: var(--color-texto);
  border: var(--grosor-borde-fuerte) solid var(--color-accion);
  font-weight: var(--peso-fuerte);
}

.formulario {
  margin-top: var(--espacio-5);
}

.formulario--secundario {
  margin-top: var(--espacio-4);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-5);
}

label {
  font-weight: var(--peso-medio);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
select {
  min-height: var(--objetivo-minimo);
  padding: var(--espacio-2) var(--espacio-3);
  font: inherit;
  color: var(--color-texto);
  background: var(--color-superficie);
  border: var(--grosor-borde-fuerte) solid var(--color-borde);
  border-radius: var(--radio-md);
}

#otp-code {
  font-family: var(--fuente-mono);
  font-size: var(--texto-xl);
  letter-spacing: 0.3em;
  max-width: 14ch;
}

input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.casilla,
.opcion {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--objetivo-minimo);
  margin-bottom: var(--espacio-3);
}

.casilla input,
.opcion input {
  width: var(--espacio-5);
  height: var(--espacio-5);
  flex-shrink: 0;
  accent-color: var(--color-accion);
}

.ayuda {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.manuscrita {
  margin: 0 0 var(--espacio-6);
  padding: var(--espacio-5);
  border: var(--grosor-borde) solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
}

.manuscrita legend {
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-lg);
  padding: 0 var(--espacio-2);
}

/* El lienzo fuerza el tema claro (data-theme="light") para que la firma
   salga con tinta oscura sobre fondo claro tambien en el PDF. */
.lienzo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
}

.lienzo[hidden],
.panel[hidden],
.manuscrita[hidden] {
  display: none;
}

#firma-canvas {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 500 / 120;
  background: var(--color-superficie);
  border: var(--grosor-borde-fuerte) dashed var(--color-borde);
  border-radius: var(--radio-md);
  touch-action: none;
  cursor: crosshair;
}

.confirmar {
  margin-top: var(--espacio-6);
  padding-top: var(--espacio-5);
  border-top: var(--grosor-borde) solid var(--color-borde);
}

/* Avisos: el estado va en palabras, el color solo acompana */
.aviso {
  margin: 0 0 var(--espacio-5);
  padding: var(--espacio-4) var(--espacio-5);
  border: var(--grosor-borde-fuerte) solid var(--color-borde);
  border-left-width: var(--espacio-2);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
}

.aviso p:last-child {
  margin-bottom: 0;
}

.aviso--error {
  border-color: var(--color-error);
}

.success-box {
  padding: var(--espacio-5);
  border: var(--grosor-borde-fuerte) solid var(--color-verificado);
  border-left-width: var(--espacio-2);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
}

/* Estado de firmantes */
.firmantes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.firmante {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-4);
  padding: var(--espacio-4);
  margin-bottom: var(--espacio-3);
  border: var(--grosor-borde) solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
}

.firmante__nombre {
  font-weight: var(--peso-fuerte);
}

.firmante__correo {
  color: var(--color-texto-suave);
}

.firmante__estado {
  flex-basis: 100%;
}

.firmante--firmado {
  border-left: var(--espacio-1) solid var(--color-verificado);
}

/* Pie */
.pie {
  margin-top: var(--espacio-8);
  padding: var(--espacio-6) 0;
  border-top: var(--grosor-borde) solid var(--color-borde);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie__enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-minimo);
}

/* Paginas legales (contenido generado en router.py) */
.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--espacio-6) var(--espacio-5);
}

.legal h2 {
  margin-top: var(--espacio-6);
}

/* Dato legal sin rellenar: color de aviso mas peso y subrayado, para no depender solo del color */
.legal-pendiente {
  color: var(--color-aviso);
  font-weight: var(--peso-fuerte);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: var(--espacio-1);
}

.legal-pendiente__variable {
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

/* Nota interna de redaccion, visible solo fuera de produccion */
.legal-nota {
  font-size: var(--texto-sm);
  font-style: italic;
  color: var(--color-texto-suave);
}

@media (forced-colors: active) {
  :focus-visible {
    outline: var(--foco-grosor) solid CanvasText;
  }

  .boton {
    border-color: ButtonText;
  }
}

/* Marca AmbarMark: cabecera con simbolo y portada con imagen */
.marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}

.marca__logo {
  height: var(--espacio-7);
  width: auto;
}

.hero__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-items: center;
  gap: var(--espacio-6);
}

.hero__imagen,
.tarjeta--imagen img,
.flujo__diagrama {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio-lg);
}

.hero__imagen {
  border: var(--grosor-borde) solid var(--color-borde);
}

.tarjeta--imagen img {
  margin-bottom: var(--espacio-4);
}

.flujo__diagrama {
  margin: var(--espacio-5) 0;
}