/* ============================================================================
 * INDABEAT — Aviso de derechos y formulario de reclamación
 * ----------------------------------------------------------------------------
 * Hoja independiente: NO sustituye a style.css, se encola aparte y solo en
 * las páginas que llevan el aviso o el shortcode [indabeat_derechos].
 *
 * Reutiliza los tokens ya definidos en style.css (--ib-negro, --ib-gris,
 * --ib-gris2, --ib-border, --ib-texto, --ib-subtexto, --ib-verde, --ib-azul,
 * --ib-rojo, --ib-radius). No se inventa ningún token global.
 *
 * La única variable nueva es --ib-der-acento, LOCAL a cada tarjeta:
 * de ella cuelgan el filete superior, el borde y el estado activo.
 *
 * Reparto de color: verde para «acreditar», azul para «bajar». Los dos son
 * colores neutros de la paleta y pesan lo mismo; el amarillo se evita a
 * propósito porque lee como advertencia y haría que pedir la baja pareciera
 * la opción conflictiva. El rojo queda reservado para errores.
 *
 * Escrito móvil primero. Los @media son siempre min-width.
 * ========================================================================== */

/* ── 1 · Contenedores y reseteos acotados ────────────────────────────────
 *
 * color-scheme: dark hace que el navegador pinte en oscuro los controles
 * nativos que el CSS no alcanza: el desplegable del <select>, las barras de
 * desplazamiento del <textarea> y el autorrelleno. Sin esto salen en blanco
 * sobre blanco dentro de un tema oscuro.
 */

.ib-derechos,
.ib-derechos-form {
	color-scheme: dark;
	overflow-wrap: anywhere;
}

.ib-derechos,
.ib-derechos *,
.ib-derechos *::before,
.ib-derechos *::after,
.ib-derechos-form,
.ib-derechos-form *,
.ib-derechos-form *::before,
.ib-derechos-form *::after {
	box-sizing: border-box;
}

.ib-derechos {
	max-width: 760px;
	margin-inline: auto;
	padding-block: clamp(24px, 5vw, 40px);
	color: var(--ib-texto);
	font-family: "Manrope", sans-serif;
}

.ib-derechos p {
	margin: 0 0 18px;
	font-size: clamp(15px, 1.05rem, 17px);
	line-height: 1.75;
	color: #ccc;
}

.ib-derechos strong {
	color: var(--ib-texto);
	font-weight: 700;
}

/* ── 2 · Cabecera del aviso ──────────────────────────────────────────── */

.ib-der-kicker {
	margin: 0 0 14px !important;
	font-family: "Space Mono", monospace;
	font-size: 10px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--ib-verde);
	opacity: .7;
}

.ib-derechos .ib-der-titulo {
	margin: 0 0 22px;
	font-family: "Bebas Neue", sans-serif;
	font-size: clamp(30px, 6vw, 46px);
	line-height: 1.05;
	letter-spacing: 1px;
	color: #fff;
}

.ib-derechos .ib-der-lead {
	font-size: clamp(16px, 1.15rem, 19px);
	color: var(--ib-texto);
}

.ib-derechos .ib-der-subtitulo {
	margin: 40px 0 16px;
	font-family: "Bebas Neue", sans-serif;
	font-size: clamp(22px, 3.4vw, 30px);
	letter-spacing: 1px;
	color: #fff;
}

/* ── 3 · Las dos vías ────────────────────────────────────────────────────
 *
 * Mismo tamaño, mismo peso tipográfico, mismo tratamiento. Lo único que
 * cambia entre las dos tarjetas es el color del filete. Es deliberado: el
 * aviso no debe empujar hacia ninguna de las dos opciones.
 */

.ib-derechos .ib-der-vias {
	display: grid;
	gap: 16px;
	margin: 28px 0 8px;
	padding: 0;
	list-style: none;
}

/* En cuanto hay sitio van una al lado de la otra: apiladas, la de arriba
 * parecería la opción principal, y las dos pesan lo mismo. */
@media (min-width: 620px) {

	.ib-derechos .ib-der-vias {
		grid-template-columns: 1fr 1fr;
	}
}

.ib-der-via {
	position: relative;
	padding: 26px 22px 22px;
	background: var(--ib-gris);
	border: 1px solid var(--ib-border);
	border-radius: var(--ib-radius);
	overflow: hidden;
}

.ib-der-via::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--ib-der-acento);
}

.ib-der-via--credito { --ib-der-acento: var(--ib-verde); }
.ib-der-via--baja    { --ib-der-acento: var(--ib-azul); }

.ib-derechos .ib-der-via-titulo {
	margin: 0 0 10px;
	font-family: "Bebas Neue", sans-serif;
	font-size: 24px;
	letter-spacing: 1px;
	color: var(--ib-der-acento);
}

.ib-derechos .ib-der-via p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
}

/* ── 4 · Compromisos y nota ──────────────────────────────────────────── */

.ib-derechos .ib-der-pasos {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.ib-derechos .ib-der-pasos li {
	position: relative;
	margin-bottom: 14px;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.7;
	color: #ccc;
}

.ib-derechos .ib-der-pasos li::before {
	content: "";
	position: absolute;
	top: .65em;
	left: 4px;
	width: 7px;
	height: 7px;
	border-radius: 100px;
	background: var(--ib-verde);
}

.ib-der-nota {
	margin-top: 32px !important;
	padding: 18px 20px;
	background: var(--ib-gris);
	border-left: 3px solid var(--ib-gris2);
	border-radius: 0 var(--ib-radius) var(--ib-radius) 0;
	font-size: 14px !important;
	color: var(--ib-subtexto) !important;
}

.ib-der-cta-wrap {
	margin-top: 28px !important;
}

.ib-derechos .ib-der-cta {
	display: inline-block;
	padding: 13px 30px;
	background: var(--ib-verde);
	color: var(--ib-negro);
	border-radius: 100px;
	font-family: "Bebas Neue", sans-serif;
	font-size: 17px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .25s, transform .25s;
}

.ib-derechos .ib-der-cta:hover,
.ib-derechos .ib-der-cta:focus-visible {
	background: #fff;
	color: var(--ib-negro);
	transform: translateY(-2px);
}

/* ── 5 · Formulario · estructura ─────────────────────────────────────── */

.ib-derechos-form {
	max-width: 760px;
	margin-inline: auto;
	padding-block: clamp(20px, 4vw, 32px);
	scroll-margin-top: 24px;
	font-family: "Manrope", sans-serif;
	color: var(--ib-texto);
}

.ib-der-form {
	padding: clamp(20px, 4vw, 34px);
	background: var(--ib-gris);
	border: 1px solid var(--ib-border);
	border-radius: var(--ib-radius);
}

.ib-der-campo {
	margin-bottom: 24px;
}

.ib-der-fieldset {
	min-width: 0;   /* sin esto un fieldset no encoge y desborda en móvil */
	margin: 0 0 28px;
	padding: 0;
	border: 0;
}

/* Dos columnas solo cuando hay sitio de verdad. */
.ib-der-fila {
	display: grid;
	gap: 0 20px;
}

@media (min-width: 640px) {

	.ib-der-fila {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── 6 · Formulario · etiquetas y campos ──────────────────────────────── */

.ib-derechos-form .ib-der-label {
	display: block;
	margin-bottom: 7px;
	padding: 0;
	font-family: "Space Mono", monospace;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ib-texto);
}

.ib-der-req {
	color: var(--ib-verde);
}

.ib-derechos-form .ib-der-ayuda {
	margin: 7px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ib-subtexto);
}

/* El <select> NO lo cubre la regla del personalizador (que solo alcanza a
 * input[type=text|email|search] y textarea), así que sin esto sale más claro
 * que el resto de campos. Se le da a mano el mismo aspecto. */

.ib-derechos-form select {
	background: var(--ib-gris);
	border: 1px solid #333;
	border-radius: 8px;
	color: var(--ib-texto);
}

/* El fondo, el borde, el color y el radio de los campos ya vienen impuestos
 * con !important desde el CSS adicional del personalizador. No se pelea con
 * eso: coincide con lo que queríamos. Aquí solo se define lo que ese bloque
 * no cubre (tamaño, espaciado, tipografía) y lo que sí hay que sobreescribir
 * se marca campo a campo más abajo. */

.ib-derechos-form input[type="text"],
.ib-derechos-form input[type="email"],
.ib-derechos-form select,
.ib-derechos-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;   /* menos de 16px hace que iOS haga zoom al enfocar */
	line-height: 1.5;
	transition: border-color .2s, box-shadow .2s;
}

.ib-derechos-form textarea {
	min-height: 140px;
	resize: vertical;
}

.ib-derechos-form ::placeholder {
	color: #666;
	opacity: 1;
}

/* Foco siempre visible, también para quien navega con el tabulador. */
.ib-derechos-form :focus-visible {
	outline: 2px solid var(--ib-verde);
	outline-offset: 2px;
}

.ib-derechos-form input:focus,
.ib-derechos-form select:focus,
.ib-derechos-form textarea:focus {
	border-color: var(--ib-verde) !important;
	box-shadow: 0 0 0 3px rgba(0, 255, 127, .12);
}

/* Campo con error: el borde rojo tiene que ganarle al !important heredado. */
.ib-derechos-form [aria-invalid="true"] {
	border-color: var(--ib-rojo) !important;
}

.ib-der-error {
	margin: 8px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.5;
	color: var(--ib-rojo) !important;
}

/* ── 7 · Formulario · elección de vía ─────────────────────────────────────
 *
 * El radio nativo se esconde pero SIGUE siendo enfocable y navegable con
 * las flechas: no se usa display:none, que lo sacaría del foco. La tarjeta
 * es la <label>, así que todo el bloque es zona de clic.
 */

.ib-der-opciones {
	display: grid;
	gap: 12px;
	margin-top: 12px;
}

@media (min-width: 620px) {

	.ib-der-opciones {
		grid-template-columns: 1fr 1fr;
	}
}

.ib-der-opcion {
	position: relative;
	display: flex;
}

.ib-der-opcion--autoria { --ib-der-acento: var(--ib-verde); }
.ib-der-opcion--baja    { --ib-der-acento: var(--ib-azul); }

.ib-derechos-form .ib-der-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.ib-derechos-form .ib-der-radio + label {
	display: block;
	flex: 1;
	padding: 18px 18px 18px 46px;
	background: var(--ib-gris2);
	border: 1px solid #333;
	border-radius: var(--ib-radius);
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

/* Marca circular dibujada con CSS, para no depender del control nativo. */
.ib-derechos-form .ib-der-radio + label::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 17px;
	width: 16px;
	height: 16px;
	border: 2px solid #555;
	border-radius: 100px;
	transition: border-color .2s, box-shadow .2s;
}

.ib-derechos-form .ib-der-radio:checked + label {
	background: var(--ib-gris2);
	border-color: var(--ib-der-acento);
}

.ib-derechos-form .ib-der-radio:checked + label::before {
	border-color: var(--ib-der-acento);
	box-shadow: inset 0 0 0 3px var(--ib-der-acento);
}

.ib-derechos-form .ib-der-radio:hover + label {
	border-color: #555;
}

.ib-derechos-form .ib-der-radio:focus-visible + label {
	outline: 2px solid var(--ib-verde);
	outline-offset: 2px;
}

.ib-der-opcion-titulo {
	display: block;
	margin-bottom: 5px;
	font-family: "Bebas Neue", sans-serif;
	font-size: 20px;
	letter-spacing: 1px;
	color: #fff;
}

.ib-der-opcion-ayuda {
	display: block;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ib-subtexto);
}

/* ── 8 · Mensajes de resultado ───────────────────────────────────────── */

.ib-der-mensaje {
	margin-bottom: 24px;
	padding: 20px 22px;
	background: var(--ib-gris);
	border: 1px solid var(--ib-border);
	border-left: 3px solid var(--ib-subtexto);
	border-radius: 0 var(--ib-radius) var(--ib-radius) 0;
	scroll-margin-top: 24px;
}

.ib-derechos-form .ib-der-mensaje h3 {
	margin: 0 0 10px;
	font-family: "Bebas Neue", sans-serif;
	font-size: 22px;
	letter-spacing: 1px;
	color: #fff;
}

.ib-derechos-form .ib-der-mensaje p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.7;
	color: #ccc;
}

.ib-derechos-form .ib-der-mensaje p:last-child {
	margin-bottom: 0;
}

.ib-derechos-form .ib-der-mensaje ul {
	margin: 0;
	padding-left: 20px;
}

.ib-derechos-form .ib-der-mensaje li {
	margin-bottom: 6px;
	font-size: 15px;
	line-height: 1.6;
	color: #ccc;
}

.ib-der-mensaje--ok {
	border-left-color: var(--ib-verde);
}

.ib-der-mensaje--error,
.ib-der-mensaje--fallo {
	border-left-color: var(--ib-rojo);
}

.ib-derechos-form .ib-der-mensaje--error a {
	color: var(--ib-rojo);
}

/* ── 9 · Envío ───────────────────────────────────────────────────────── */

.ib-der-envio {
	margin: 30px 0 0;
}

.ib-derechos-form .ib-der-boton {
	display: block;
	width: 100%;
	padding: 15px 34px;
	background: var(--ib-verde);
	color: var(--ib-negro);
	border: none;
	border-radius: 100px;
	font-family: "Bebas Neue", sans-serif;
	font-size: 19px;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .25s, transform .25s;
}

@media (min-width: 620px) {

	.ib-derechos-form .ib-der-boton {
		display: inline-block;
		width: auto;
		min-width: 260px;
	}
}

.ib-derechos-form .ib-der-boton:hover {
	background: #fff;
	transform: translateY(-2px);
}

.ib-derechos-form .ib-der-pie {
	margin: 18px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ib-subtexto);
}

/* ── 10 · Utilidades ─────────────────────────────────────────────────────
 *
 * .ib-der-hp es la trampa antispam. Se saca de la pantalla en vez de
 * ocultarla con display:none, porque así sigue existiendo en el árbol de
 * accesibilidad: su etiqueta dice «No escribas nada aquí» y quien use lector
 * de pantalla la oye. Los robots la rellenan igual.
 *
 * .ib-der-sr es texto solo para lectores de pantalla. Se define aquí y no se
 * usa .screen-reader-text del tema padre, para no depender de Blocksy.
 */

.ib-der-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ib-der-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Quien haya pedido menos movimiento en el sistema, no lo recibe. */
@media (prefers-reduced-motion: reduce) {

	.ib-derechos *,
	.ib-derechos-form * {
		transition: none !important;
		transform: none !important;
	}
}