/**
 * Ley 21.719 - Consent modal (F2).
 *
 * Two-level consent UI. All rules are scoped within .ley21719-modal so they
 * cannot leak into the active theme (same technique as admin plugin-scope.css).
 */

.ley21719-modal {
	--ley21719-primary: #1565c0;
	--ley21719-danger: #c62828;
	--ley21719-text: #212121;
	--ley21719-muted: #616161;
	--ley21719-surface: #ffffff;
	--ley21719-border: #e0e0e0;
	--ley21719-focus: #1976d2;
	--ley21719-radius: 12px;
}

.ley21719-modal {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483000;
	display: none;
	box-sizing: border-box;
}

.ley21719-modal * {
	box-sizing: border-box;
}

.ley21719-modal .ley21719-consent-status {
	margin: 12px auto;
	max-width: 720px;
	padding: 12px 16px;
	border: 1px solid var(--ley21719-danger);
	border-radius: 6px;
	background: #ffebee;
	color: var(--ley21719-danger);
	font-size: 14px;
	font-weight: 600;
}

.ley21719-modal .ley21719-consent-status:focus {
	outline: 2px solid var(--ley21719-focus);
	outline-offset: 2px;
}

.ley21719-modal [data-action]:disabled {
	cursor: wait;
	opacity: 0.65;
}

/* Nivel 1 - panel inferior de decisión rápida. */
.ley21719-modal .ley21719-banner {
	background: var(--ley21719-surface);
	border-top: 1px solid var(--ley21719-border);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
	color: var(--ley21719-text);
	padding: 20px 24px;
}

.ley21719-modal .ley21719-banner-content {
	max-width: 1100px;
	margin: 0 auto;
}

.ley21719-modal h2 {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
	color: var(--ley21719-text);
}

.ley21719-modal .ley21719-banner-controller {
	margin: 0 0 8px;
	color: var(--ley21719-muted);
	font-size: 14px;
}

.ley21719-modal p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ley21719-text);
}

.ley21719-modal .ley21719-banner-policy-link a {
	color: var(--ley21719-primary);
	text-decoration: underline;
}

/* Botón de cierre (✕) = rechazar todo lo no necesario. */


.ley21719-modal .ley21719-banner {
	position: relative;
}

/* Las tres acciones de igual jerarquía. */
.ley21719-modal .ley21719-banner-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.ley21719-modal .ley21719-action {
	min-height: 44px;
	min-width: 44px;
	padding: 12px 20px;
	border: 1px solid var(--ley21719-border);
	border-radius: 6px;
	background: var(--ley21719-surface);
	color: var(--ley21719-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
}

.ley21719-modal .ley21719-action:hover {
	border-color: var(--ley21719-primary);
}

/* Al abrirse, el diálogo mueve el foco a su título para que quien usa lector de
   pantalla aterrice dentro y se anuncie de qué trata. Ese título lleva
   tabindex="-1": no está en el orden de tabulación, así que nadie puede llegar a
   él con Tab y no hay navegación por teclado que señalar. El anillo del navegador
   solo sería ruido visual sobre un encabezado que no se puede accionar, de modo
   que se suprime aquí. Los controles que sí son operables (botones, enlaces y
   switches) conservan su indicador de foco más abajo. */
.ley21719-modal h2:focus {
	outline: none;
}

.ley21719-modal .ley21719-action:focus-visible,
.ley21719-modal .ley21719-toggle:focus-visible,
.ley21719-modal a:focus-visible {
	outline: 2px solid var(--ley21719-focus);
	outline-offset: 2px;
}

/* Simetría obligatoria: aceptar y rechazar comparten peso visual.
   El consentimiento sólo es libre si rechazar no cuesta más que aceptar
   — ni en clics, ni en tamaño, ni en contraste (Art. 14). No diferencies
   estos dos botones por color: no es una decisión de diseño disponible. */
.ley21719-modal .ley21719-action[data-action="accept"],
.ley21719-modal .ley21719-action[data-action="reject"] {
	background: var(--ley21719-primary);
	border-color: var(--ley21719-primary);
	color: #fff;
}

/* Nivel 2 - centro de preferencias. */
.ley21719-modal .ley21719-panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483001;
	background: var(--ley21719-surface);
	border-top: 1px solid var(--ley21719-border);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
	max-height: 70vh;
	overflow-y: auto;
}

.ley21719-modal .ley21719-panel-body {
	max-width: 720px;
	margin: 0 auto;
	padding: 24px;
}

/* Cabecera del nivel 2: salida siempre visible.
   El visitante debe poder volver al banner o cerrar sin verse obligado a
   decidir para escapar del panel. */
.ley21719-modal .ley21719-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

/* En el panel la X vive dentro de la cabecera, no flotando en la esquina. */

.ley21719-modal .ley21719-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: none;
	color: var(--ley21719-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.ley21719-modal .ley21719-back:hover {
	border-color: var(--ley21719-primary);
	color: var(--ley21719-primary);
}

.ley21719-modal .ley21719-back:focus-visible {
	outline: 2px solid var(--ley21719-focus);
	outline-offset: 2px;
}

.ley21719-modal .ley21719-toggle-row {
	border-bottom: 1px solid var(--ley21719-border);
	padding: 14px 0;
}

.ley21719-modal .ley21719-toggle-label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	font-size: 15px;
	color: var(--ley21719-text);
	cursor: pointer;
}

/* Interruptor (form-switch).
   Sigue siendo un <input type="checkbox"> nativo: conserva teclado, foco y
   semántica de formulario. Sólo cambia su presentación. No lo sustituyas por
   un <div>: perdería la accesibilidad que exige el criterio de F2.3. */
.ley21719-modal .ley21719-toggle {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 48px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ley21719-border);
	border-radius: 999px;
	background-color: #cfd8dc;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle cx='12' cy='12' r='12' fill='%23ffffff'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: left 2px center;
	background-size: 22px 22px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, background-position 0.15s ease-in-out;
}

.ley21719-modal .ley21719-toggle:checked {
	background-color: var(--ley21719-primary);
	border-color: var(--ley21719-primary);
	background-position: right 2px center;
}

/* "Necesarias": activo y bloqueado. Se ve encendido pero no se puede apagar. */
.ley21719-modal .ley21719-toggle:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
	.ley21719-modal .ley21719-toggle {
		transition: none;
	}
}

.ley21719-modal .ley21719-toggle-desc {
	margin: 8px 0 0 60px;
	color: var(--ley21719-muted);
	font-size: 13px;
}

.ley21719-modal .ley21719-panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

@media (max-width: 600px) {
	.ley21719-modal .ley21719-banner,
	.ley21719-modal .ley21719-panel {
		padding-left: 16px;
		padding-right: 16px;
	}

	.ley21719-modal .ley21719-banner-actions,
	.ley21719-modal .ley21719-panel-actions {
		flex-direction: column;
	}

	.ley21719-modal .ley21719-action {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ley21719-modal .ley21719-banner,
	.ley21719-modal .ley21719-panel {
		transition: none;
	}
}