/* =====================================================================
   RV25 Relojería · CASILLAS LEGALES
   ---------------------------------------------------------------------
   Las dos casillas (Términos · Privacidad) de cada formulario.
   Casilla grande (24px) para el dedo, texto pequeño con enlaces
   subrayados. Si falta alguna al enviar, se marca en rojo vino con un
   aviso. Lo maneja js/componentes/casillas-legales.js
   ===================================================================== */

.casillas-legales {
  display: grid; gap: 10px;
  margin: 16px 0 0; padding: 0; border: 0;
  min-width: 0;
}

.casilla {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start;
  font-size: 14px; line-height: 1.45; color: var(--tinta-suave);
  cursor: pointer;
}
.casilla input {
  width: 22px; height: 22px; margin: 0;
  accent-color: var(--noche);
  cursor: pointer;
}
.casilla a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.casilla a:hover { color: var(--acento-texto); }

/* Falta marcar alguna */
.casillas-error {
  margin: 0;
  font: 600 14px/1.4 var(--letra); color: var(--favorito);
}
.casillas-legales.con-error .casilla input:not(:checked) { outline: 2px solid var(--favorito); outline-offset: 2px; }

/* Mientras falte alguna casilla, el botón de seguir se ve apagado.
   (Sigue respondiendo al toque: muestra el aviso y lleva a la casilla.) */
[data-requiere-casillas][aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Panel "Antes de continuar" (js/secciones/confirmar-compra.js) */
.confirmar-nota { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--tinta-suave); }
#panel-compra .panel-pie .boton-comprar { margin-top: 16px; }