/* =========================================================
   TÉRMINOS Y CONDICIONES — casilla de aceptación
   RUTH.il

   Se usa en las tres pantallas de registro, que tienen cada una su propia
   paleta (el de cliente en magenta, el de abogado en rojo, el de notaría
   en su tono). Por eso aquí no se fija ningún color de marca: todo sale de
   las variables que ya declara cada pantalla, con un valor de reserva por
   si alguna no las trae.
   ========================================================= */

.terminos {
  margin: 18px 0 4px;
  border: 1px solid var(--border-strong, rgba(128,128,128,.3));
  border-radius: 12px;
  background: var(--bg-2, rgba(128,128,128,.05));
  overflow: hidden;
}

.terminos-cabecera {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2, inherit);
  border-bottom: 1px solid var(--border, rgba(128,128,128,.2));
}
.terminos-cabecera i { font-size: .95rem; opacity: .8; }

.terminos-ampliar {
  margin-left: auto;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 5px 11px;
  border-radius: 20px;
  cursor: pointer;
  background: transparent;
  color: var(--accent, currentColor);
  border: 1px solid var(--border-strong, rgba(128,128,128,.3));
}
.terminos-ampliar:hover { background: var(--bg-3, rgba(128,128,128,.12)); }

/* El texto, en su propia caja con desplazamiento. Va delante y no detrás
   de un enlace: la aceptación solo significa algo si el texto estuvo a la
   vista. */
.terminos-texto {
  max-height: 220px;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text-2, inherit);
  /* Que el foco del teclado se vea: esta caja es enfocable para poder
     recorrerla sin ratón. */
  outline-offset: -2px;
}
.terminos-texto:focus-visible { outline: 2px solid var(--accent, currentColor); }

.terminos-texto h1 {
  font-size: .92rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-1, inherit);
}
.terminos-texto h2 {
  font-size: .84rem;
  font-weight: 700;
  margin: 16px 0 5px;
  color: var(--text-1, inherit);
}
.terminos-texto h3 {
  font-size: .8rem;
  font-weight: 600;
  margin: 12px 0 4px;
  color: var(--text-1, inherit);
}
.terminos-texto p  { margin: 0 0 9px; }
.terminos-texto ul { margin: 0 0 9px; padding-left: 20px; }
.terminos-texto li { margin-bottom: 4px; }
.terminos-texto > *:last-child { margin-bottom: 0; }

/* "Ver en grande": el texto es largo y en 220px se lee a cuentagotas.
   Esto lo abre sobre la pantalla, sin sacar a nadie del formulario a
   medio rellenar.

   CUIDADO CON LA BARRA SUPERIOR: la barra del sitio va fija arriba y con
   su propio z-index. En la primera versión el panel empezaba a 4vh y la
   barra le tapaba la cabecera entera, incluido el botón de cerrar: se
   podía abrir y no se podía cerrar. Por eso ahora va con una capa de
   fondo que cubre TODO —barra incluida— y un z-index por encima de ella. */
.terminos-fondo {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(2px);
}

.terminos.ampliado {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 92vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  z-index: 4001;
  margin: 0;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .5);
  background: var(--bg, #14171A);
}
.terminos.ampliado .terminos-texto { max-height: none; flex: 1; min-height: 0; }
.terminos.ampliado .terminos-cabecera,
.terminos.ampliado .terminos-acepto { flex-shrink: 0; }

.terminos-acepto {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  font-size: .86rem;
  line-height: 1.45;
  cursor: pointer;
  border-top: 1px solid var(--border, rgba(128,128,128,.2));
  color: var(--text-1, inherit);
}
.terminos-acepto input {
  /* 18px y no el tamaño por defecto: es la casilla que cierra un contrato,
     tiene que poder marcarse sin apuntar. */
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent, currentColor);
}

.terminos-aviso {
  margin: 0;
  padding: 0 15px 13px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--danger, #dc3545);
}

/* Cuando se intenta enviar sin aceptar, la caja entera se señala: si solo
   se marcara la casilla, en un formulario largo pasa desapercibida. */
.terminos.sin-aceptar {
  border-color: var(--danger, #dc3545);
  box-shadow: 0 0 0 3px rgba(220,53,69,.14);
}

.terminos.cargando,
.terminos.error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  font-size: .84rem;
  color: var(--text-3, inherit);
}
.terminos.error { color: var(--danger, #dc3545); }

.terminos-spinner {
  width: 15px; height: 15px; flex-shrink: 0;
  border: 2px solid var(--border-strong, rgba(128,128,128,.3));
  border-top-color: var(--accent, currentColor);
  border-radius: 50%;
  animation: terminosGirar .7s linear infinite;
}
@keyframes terminosGirar { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
  .terminos-texto { max-height: 190px; font-size: .8rem; }
  .terminos-acepto { padding: 14px 15px; }
  /* Zona de toque cómoda para la casilla y su etiqueta. */
  .terminos-acepto input { width: 22px; height: 22px; }
  .terminos-ampliar { min-height: 44px; padding: 5px 14px; }
  .terminos.ampliado { width: 96vw; max-height: 94vh; }
}