/* ════════════════════════════════════════════════════════
   Afina RGPD — Popup centrado
   Hereda variables CSS de afina.es con fallbacks.
════════════════════════════════════════════════════════ */
:root {
	--arg-primary:      var(--afina-blue,      #2E508A);
	--arg-primary-dark: var(--afina-blue-dark,  #1e3d70);
	--arg-primary-light:var(--afina-blue-light, #eef2f9);
	--arg-yellow:       var(--afina-yellow,     #FFD931);
	--arg-yellow-dark:  var(--afina-yellow-dark,#c9a800);
	--arg-text:         var(--afina-text,       #111827);
	--arg-text-light:   var(--afina-text-light, #6b7280);
	--arg-muted:        var(--afina-text-muted, #9ca3af);
	--arg-bg:           var(--afina-bg,         #ffffff);
	--arg-border:       var(--afina-border,     #e2e8f0);
	--arg-font:         var(--afina-font,       'Space Grotesk','Helvetica Neue',Arial,sans-serif);
	--arg-radius:       var(--afina-radius-xl,  16px);
	--arg-shadow:       0 30px 70px rgba(0,0,0,.22), 0 8px 24px rgba(0,0,0,.12);
	--arg-transition:   .15s ease;
}

/* ════════════════════════════════════════════════════════
   RESET: neutralizar estilos del tema WordPress en botones
   (sin esto el tema pinta todos los <button> de azul)
════════════════════════════════════════════════════════ */
.arg-overlay button {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	width: auto;
	color: inherit;
	font-family: var(--arg-font);
	font-size: inherit;
	line-height: normal;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	outline: none;
	-webkit-font-smoothing: antialiased;
}

/* ── Overlay ── */
.arg-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	animation: arg-fade .2s ease both;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
@keyframes arg-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Popup card ── */
.arg-popup {
	background: var(--arg-bg);
	border-radius: var(--arg-radius);
	width: 480px;
	max-width: 100%;
	max-height: calc(100vh - 48px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--arg-shadow);
	font-family: var(--arg-font);
	font-size: 14px;
	color: var(--arg-text);
	animation: arg-pop .28s cubic-bezier(.34, 1.45, .64, 1) both;
}
@keyframes arg-pop {
	from { opacity: 0; transform: scale(.92) translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* Barra amarilla superior */
.arg-accent-bar {
	height: 4px;
	background: var(--arg-yellow);
	flex: 0 0 4px;
}

/* ── Cabecera: logo + botón cerrar ── */
.arg-popup-header {
	display: flex;
	align-items: center;
	padding: 20px 24px 14px;
	gap: 10px;
}

.arg-logo-img {
	height: 26px !important;
	max-height: 26px !important;
	width: auto !important;
	max-width: 110px !important;
	object-fit: contain !important;
	display: block;
	flex: 0 0 auto;
}

.arg-logo-text {
	font-size: 22px;
	font-weight: 700;
	color: var(--arg-primary);
	letter-spacing: -.02em;
	line-height: 1;
}

.arg-header-spacer { flex: 1; }

/* Volver: igual que "Gestionar servicios" — link azul subrayado */
.arg-overlay .arg-back-btn {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--arg-primary) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	line-height: 1;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: color var(--arg-transition);
}
.arg-overlay .arg-back-btn:hover { color: var(--arg-primary-dark) !important; }

/* Ocultar botón .arg-close (legacy) y cualquier botón de cierre inyectado por el tema */
.arg-close,
.arg-overlay .arg-popup-header > button:not(.arg-back-btn),
.arg-overlay .arg-popup > button:not(.arg-popup-header > button):not(.arg-popup-body > button):not(.arg-popup-footer > button) {
	display: none !important;
	visibility: hidden !important;
}

/* ── Cuerpo scrollable ── */
.arg-popup-body {
	padding: 0 24px 20px;
	overflow-y: auto;
	flex: 1;
}

.arg-popup-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--arg-primary);
	margin: 0 0 10px;
	letter-spacing: -.02em;
	line-height: 1.25;
	text-transform: none;
}

.arg-popup-desc {
	font-size: 14px;
	color: var(--arg-text-light);
	line-height: 1.7;
	margin: 0;
}

.arg-overlay .arg-manage-btn {
	display: inline-block;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--arg-primary) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	transition: color var(--arg-transition);
	text-transform: none;
}
.arg-overlay .arg-manage-btn:hover { color: var(--arg-primary-dark) !important; }

/* ── Footer ── */
.arg-popup-footer {
	padding: 16px 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid var(--arg-border);
	flex: 0 0 auto;
}

/* Fila de botones lado a lado */
.arg-btn-row {
	display: flex;
	gap: 10px;
}

/* Botones principales: azul / blanco — hover: amarillo / blanco (AEPD: misma jerarquía) */
.arg-overlay .arg-btn-accept,
.arg-overlay .arg-btn-reject {
	flex: 1;
	display: block;
	width: auto;
	padding: 14px 16px;
	background: var(--arg-primary);
	color: #fff !important;
	border-radius: 10px;
	font-family: var(--arg-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	transition: background var(--arg-transition), color var(--arg-transition);
	line-height: 1;
	text-align: center;
	text-transform: none !important;
}
.arg-overlay .arg-btn-accept:hover,
.arg-overlay .arg-btn-reject:hover {
	background: #FFD931 !important;
	color: #fff !important;
}

/* Guardar preferencias (vista servicios) */
.arg-overlay .arg-btn-save {
	display: block;
	width: 100%;
	padding: 14px 20px;
	background: var(--arg-primary);
	color: #fff !important;
	border-radius: 10px;
	font-family: var(--arg-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	transition: background var(--arg-transition);
	line-height: 1;
	text-align: center;
	text-transform: none !important;
}
.arg-overlay .arg-btn-save:hover {
	background: #FFD931 !important;
	color: #fff !important;
}

/* Links de pie */
.arg-footer-links {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 2px;
}

.arg-footer-link {
	font-size: 12px;
	color: var(--arg-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	padding: 0;
	background: none;
	border: none;
	font-family: var(--arg-font);
	transition: color var(--arg-transition);
}
.arg-footer-link:hover { color: var(--arg-text-light); }

/* ════════════════════════════════════════════════════════
   Vista de servicios — botones pequeños proporcionales al texto
   Alta especificidad (.arg-overlay .arg-vbtn) para vencer al tema
════════════════════════════════════════════════════════ */
.arg-vsection {
	border-bottom: 1px solid var(--arg-border);
	padding: 4px 0;
}
.arg-vsection:last-child { border-bottom: none; }

.arg-vsection-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0 8px;
	gap: 8px;
}

.arg-vsection-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--arg-muted);
	flex: 1;
}

.arg-vrow {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--arg-border);
}

.arg-vinfo { flex: 1; min-width: 0; }
.arg-vinfo strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--arg-text);
	margin-bottom: 2px;
}
.arg-vinfo span {
	font-size: 12px;
	color: var(--arg-text-light);
	line-height: 1.4;
}

.arg-vpair {
	display: flex;
	gap: 5px;
	flex: 0 0 auto;
	align-items: center;
	margin-top: 1px;
}

/* Botones de vendor: tamaño proporcional al texto, reset completo */
.arg-overlay .arg-vbtn {
	display: inline-block;
	width: auto;
	padding: 5px 11px;
	background: #fff;
	color: var(--arg-text-light);
	border: 1px solid var(--arg-border);
	border-radius: 6px;
	font-family: var(--arg-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: border-color var(--arg-transition), background var(--arg-transition), color var(--arg-transition);
}
.arg-overlay .arg-vbtn:not(.is-active-block):not(.is-active-allow):hover {
	background: var(--arg-primary) !important;
	border-color: var(--arg-primary) !important;
	color: #fff !important;
}
.arg-overlay .arg-vbtn.is-active-block {
	background: #374151;
	color: #fff;
	border-color: #374151;
}
.arg-overlay .arg-vbtn.is-active-allow {
	background: var(--arg-primary);
	color: #fff;
	border-color: var(--arg-primary);
}

/* Botones de grupo (Bloquear todos / Autorizar todos): ligeramente más pequeños */
.arg-overlay .arg-vbtn-group {
	font-size: 11px;
	padding: 4px 9px;
}

.arg-badge-always {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	color: #166534;
	background: #dcfce7;
	padding: 3px 9px;
	border-radius: 20px;
}

/* ════════════════════════════════════════════════════════
   Responsive: móvil — sube desde abajo como sheet
════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
	.arg-overlay { align-items: flex-end; padding: 0; }
	.arg-popup {
		border-radius: var(--arg-radius) var(--arg-radius) 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-height: 90vh;
		animation: arg-slide-up .28s ease both;
	}
	@keyframes arg-slide-up {
		from { transform: translateY(40px); opacity: 0; }
		to   { transform: none; opacity: 1; }
	}
}