/*
 * CVH CMP Cookies — Placeholder de estilos
 * Paleta CVH y geometría base. Cuando llegue R2-C del equipo de Diseño,
 * sustituir CSS de presentación manteniendo selectores [data-cvh-cmp].
 *
 * Selectores estables (NO renombrar sin migrar JS):
 *   #cvh-cmp-root
 *   [data-cvh-cmp="banner"]
 *   [data-cvh-cmp="modal"]
 *   [data-cvh-cmp="mini-reopen"]
 *   [data-cvh-cmp="acceptance-bar"]
 *   [data-cvh-cmp-act="accept-all"|"reject-all"|"configure"|"save"|"close"|"reopen"]
 *   [data-cvh-cmp-cat="necessary"|"preferences"|"analytics"|"marketing"]
 */

:root {
	--cvh-cmp-bg:        #06060F;
	--cvh-cmp-fg:        #F0EAD6;
	--cvh-cmp-mut:       rgba(240, 234, 214, 0.72);
	--cvh-cmp-acc:       #D4AF37;
	--cvh-cmp-pur:       #4A1942;
	--cvh-cmp-blu:       #4A90E2;
	--cvh-cmp-amb:       #FFA500;
	--cvh-cmp-line:      rgba(212, 175, 55, 0.22);
	--cvh-cmp-glass:     rgba(6, 6, 15, 0.78);
	--cvh-cmp-radius:    14px;
	--cvh-cmp-shadow:    0 18px 48px rgba(0, 0, 0, 0.55);
	--cvh-cmp-z:         99990;
	--cvh-cmp-font:      "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cvh-cmp-font-h:    "Syne", "DM Sans", system-ui, sans-serif;
}

/* Root contenedor — no genera espacio si está vacío. */
#cvh-cmp-root {
	font-family: var(--cvh-cmp-font);
}

/* Bloqueo de scroll cuando el modal está abierto. */
html.cvh-cmp-lock,
body.cvh-cmp-lock { overflow: hidden; }

/* ------------------ BANNER (esquina inferior) ------------------ */
[data-cvh-cmp="banner"] {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	max-width: 720px;
	margin-inline: auto;
	background: var(--cvh-cmp-glass);
	color: var(--cvh-cmp-fg);
	border: 1px solid var(--cvh-cmp-line);
	border-radius: var(--cvh-cmp-radius);
	box-shadow: var(--cvh-cmp-shadow);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	padding: 18px 18px 16px;
	z-index: var(--cvh-cmp-z);
	display: none;
	flex-direction: column;
	gap: 12px;
	font-size: 14px;
	line-height: 1.5;
}
[data-cvh-cmp="banner"].is-open { display: flex; }

[data-cvh-cmp="banner"] h2 {
	font-family: var(--cvh-cmp-font-h);
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 2px;
	color: var(--cvh-cmp-acc);
	letter-spacing: 0.2px;
}
[data-cvh-cmp="banner"] p { margin: 0; color: var(--cvh-cmp-mut); }
[data-cvh-cmp="banner"] a { color: var(--cvh-cmp-acc); text-decoration: underline; }

[data-cvh-cmp="banner"] .cvh-cmp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

/* ------------------ MODAL configuración ------------------ */
[data-cvh-cmp="modal"] {
	position: fixed;
	inset: 0;
	z-index: calc(var(--cvh-cmp-z) + 5);
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.72);
	padding: 16px;
}
[data-cvh-cmp="modal"].is-open { display: flex; }

[data-cvh-cmp="modal"] .cvh-cmp-dialog {
	width: min(720px, 100%);
	max-height: 90vh;
	overflow: auto;
	background: var(--cvh-cmp-bg);
	color: var(--cvh-cmp-fg);
	border: 1px solid var(--cvh-cmp-line);
	border-radius: var(--cvh-cmp-radius);
	box-shadow: var(--cvh-cmp-shadow);
	padding: 22px;
	font-size: 14px;
	line-height: 1.55;
}
[data-cvh-cmp="modal"] h2 {
	font-family: var(--cvh-cmp-font-h);
	color: var(--cvh-cmp-acc);
	font-size: 20px;
	margin: 0 0 6px;
}
[data-cvh-cmp="modal"] h3 {
	font-family: var(--cvh-cmp-font-h);
	color: var(--cvh-cmp-fg);
	font-size: 15px;
	margin: 14px 0 4px;
}
[data-cvh-cmp="modal"] p { margin: 0 0 8px; color: var(--cvh-cmp-mut); }

/* Toggle accesible */
.cvh-cmp-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-top: 1px solid var(--cvh-cmp-line);
	padding: 12px 0;
}
.cvh-cmp-row:first-of-type { border-top: 0; }
.cvh-cmp-row .cvh-cmp-row-body { flex: 1; min-width: 0; }
.cvh-cmp-row .cvh-cmp-row-title {
	font-weight: 700;
	color: var(--cvh-cmp-fg);
	font-size: 14px;
	margin-bottom: 2px;
}

.cvh-cmp-toggle {
	position: relative;
	width: 44px;
	height: 24px;
	flex: 0 0 44px;
	margin-top: 2px;
}
.cvh-cmp-toggle input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cvh-cmp-toggle .cvh-cmp-slider {
	position: absolute; inset: 0;
	background: rgba(240, 234, 214, 0.18);
	border-radius: 999px;
	transition: background .2s ease;
}
.cvh-cmp-toggle .cvh-cmp-slider::before {
	content: ""; position: absolute;
	top: 3px; left: 3px;
	width: 18px; height: 18px;
	background: var(--cvh-cmp-fg);
	border-radius: 50%;
	transition: transform .2s ease;
}
.cvh-cmp-toggle input:checked + .cvh-cmp-slider { background: var(--cvh-cmp-acc); }
.cvh-cmp-toggle input:checked + .cvh-cmp-slider::before { transform: translateX(20px); background: var(--cvh-cmp-bg); }
.cvh-cmp-toggle input:disabled + .cvh-cmp-slider { opacity: .65; cursor: not-allowed; }

.cvh-cmp-cookielist {
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--cvh-cmp-mut);
	border-left: 2px solid var(--cvh-cmp-line);
	padding: 4px 0 4px 10px;
}
.cvh-cmp-cookielist b { color: var(--cvh-cmp-fg); }

.cvh-cmp-modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	justify-content: flex-end;
}

/* ------------------ BOTONES (simétricos AEPD) ------------------ */
.cvh-cmp-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--cvh-cmp-acc);
	background: transparent;
	color: var(--cvh-cmp-acc);
	font-family: var(--cvh-cmp-font);
	font-weight: 600;
	font-size: 14px;
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
	min-height: 44px;
	min-width: 44px;
	transition: background .15s ease, color .15s ease, transform .1s ease;
	text-align: center;
}
.cvh-cmp-btn:hover { background: rgba(212, 175, 55, 0.12); }
.cvh-cmp-btn:active { transform: translateY(1px); }
.cvh-cmp-btn:focus-visible {
	outline: 2px solid var(--cvh-cmp-blu);
	outline-offset: 2px;
}

.cvh-cmp-btn--primary { background: var(--cvh-cmp-acc); color: var(--cvh-cmp-bg); }
.cvh-cmp-btn--primary:hover { background: #e4c14a; }
.cvh-cmp-btn--ghost   { border-color: var(--cvh-cmp-line); color: var(--cvh-cmp-fg); }
.cvh-cmp-btn--ghost:hover { background: rgba(240, 234, 214, 0.06); }

/* ------------------ MINI REOPEN (botón flotante reabrir) ------------------ */
[data-cvh-cmp="mini-reopen"] {
	position: fixed;
	left: 14px;
	bottom: 14px;
	z-index: calc(var(--cvh-cmp-z) - 5);
	display: none;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--cvh-cmp-line);
	background: var(--cvh-cmp-glass);
	color: var(--cvh-cmp-acc);
	cursor: pointer;
	box-shadow: var(--cvh-cmp-shadow);
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	font-size: 18px;
	align-items: center;
	justify-content: center;
}
[data-cvh-cmp="mini-reopen"].is-visible { display: inline-flex; opacity: 0.45; transition: opacity 200ms ease; }
[data-cvh-cmp="mini-reopen"].is-visible:hover,
[data-cvh-cmp="mini-reopen"].is-visible:focus-visible { opacity: 1; }
[data-cvh-cmp="mini-reopen"]:focus-visible { outline: 2px solid var(--cvh-cmp-blu); outline-offset: 2px; }

/* ------------------ BARRA POST-ACEPTACIÓN (toast) ------------------ */
[data-cvh-cmp="acceptance-bar"] {
	position: fixed;
	left: 16px; right: 16px; bottom: 16px;
	max-width: 520px;
	margin-inline: auto;
	background: var(--cvh-cmp-glass);
	color: var(--cvh-cmp-fg);
	border: 1px solid var(--cvh-cmp-line);
	border-radius: 12px;
	box-shadow: var(--cvh-cmp-shadow);
	padding: 10px 14px;
	font-size: 13px;
	display: none;
	gap: 10px;
	align-items: center;
	z-index: 9000; /* debajo del drawer móvil WoodMart (B2 fix CVH-FINAL-003) */
	opacity: 0;
	transition: opacity 220ms ease;
}
[data-cvh-cmp="acceptance-bar"].is-open { display: flex; opacity: 1; }
[data-cvh-cmp="acceptance-bar"] strong { color: var(--cvh-cmp-acc); }

/* ------------------ RESPONSIVE 320 / 480 / 768 / 1024 / 1440 ------------------ */
@media (max-width: 480px) {
	[data-cvh-cmp="banner"] { left: 8px; right: 8px; bottom: 8px; padding: 14px; font-size: 13.5px; }
	[data-cvh-cmp="banner"] .cvh-cmp-actions .cvh-cmp-btn { flex: 1 1 100%; }
	[data-cvh-cmp="modal"] .cvh-cmp-dialog { padding: 16px; font-size: 13.5px; }
	[data-cvh-cmp="modal"] .cvh-cmp-modal-actions .cvh-cmp-btn { flex: 1 1 100%; }
}
@media (min-width: 1024px) {
	[data-cvh-cmp="banner"] { right: 24px; left: auto; bottom: 24px; }
}

/* ------------------ ACCESIBILIDAD ------------------ */
@media (prefers-reduced-motion: reduce) {
	.cvh-cmp-toggle .cvh-cmp-slider,
	.cvh-cmp-toggle .cvh-cmp-slider::before,
	.cvh-cmp-btn { transition: none; }
}
@media (prefers-contrast: more) {
	[data-cvh-cmp="banner"], [data-cvh-cmp="modal"] .cvh-cmp-dialog, [data-cvh-cmp="mini-reopen"] {
		background: #000;
	}
	.cvh-cmp-btn { border-color: var(--cvh-cmp-fg); color: var(--cvh-cmp-fg); }
	.cvh-cmp-btn--primary { background: var(--cvh-cmp-fg); color: #000; }
}

/* ------------------ PRINT — ocultar UI legal flotante ------------------ */
@media print {
	#cvh-cmp-root { display: none !important; }
}

/* ------------------ TABLA shortcode [cvh_cmp_cookies_table] ------------------ */
.cvh-cmp-table-wrap {
	font-family: var(--cvh-cmp-font);
	color: var(--cvh-cmp-fg);
	margin: 24px 0;
}
.cvh-cmp-table-section { margin-bottom: 28px; }
.cvh-cmp-table-section h3 {
	font-family: var(--cvh-cmp-font-h);
	color: var(--cvh-cmp-acc);
	font-size: 18px;
	margin: 0 0 6px;
}
.cvh-cmp-table-section p { color: var(--cvh-cmp-mut); margin: 0 0 10px; font-size: 14px; }

.cvh-cmp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	background: rgba(6, 6, 15, 0.6);
	border: 1px solid var(--cvh-cmp-line);
	border-radius: 10px;
	overflow: hidden;
}
.cvh-cmp-table thead th {
	text-align: left;
	background: rgba(212, 175, 55, 0.08);
	color: var(--cvh-cmp-acc);
	font-weight: 600;
	padding: 10px 12px;
	border-bottom: 1px solid var(--cvh-cmp-line);
	font-size: 13px;
}
.cvh-cmp-table tbody td {
	padding: 10px 12px;
	border-top: 1px solid var(--cvh-cmp-line);
	color: var(--cvh-cmp-fg);
	vertical-align: top;
	word-break: break-word;
}
.cvh-cmp-table tbody td code {
	background: rgba(74, 144, 226, 0.12);
	color: var(--cvh-cmp-blu);
	padding: 1px 6px;
	border-radius: 4px;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
}

@media (max-width: 640px) {
	.cvh-cmp-table, .cvh-cmp-table thead, .cvh-cmp-table tbody, .cvh-cmp-table tr, .cvh-cmp-table th, .cvh-cmp-table td { display: block; }
	.cvh-cmp-table thead { display: none; }
	.cvh-cmp-table tbody tr {
		border-top: 1px solid var(--cvh-cmp-line);
		padding: 10px 12px;
	}
	.cvh-cmp-table tbody td { border-top: 0; padding: 4px 0; }
	.cvh-cmp-table tbody td::before {
		content: attr(data-label);
		display: block;
		font-size: 11.5px;
		color: var(--cvh-cmp-mut);
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
}

/* ------------------ Visualmente oculto pero accesible ------------------ */
.cvh-cmp-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ============================================================
   CVH-087 · Bloque D · Responsive: banner NO tapa footer en móvil/tablet
   Aditivo · sin tocar lógica de consentimiento · sin modificar data-cvh-cmp
   ============================================================ */
@media (max-width: 1023px) {
  /* Cuando el banner está visible, reservar espacio en el body para no tapar footer */
  body:has([data-cvh-cmp="banner"].is-open) {
    padding-bottom: 240px !important;
  }
  /* Fallback sin :has() (navegadores viejos) — usa clase agregada por JS al body */
  body.cvh-cmp-banner-open {
    padding-bottom: 240px !important;
  }
  /* Banner con anchura razonable en móvil/tablet */
  [data-cvh-cmp="banner"] {
    max-width: min(720px, calc(100vw - 24px));
  }
}
@media (max-width: 480px) {
  body:has([data-cvh-cmp="banner"].is-open) {
    padding-bottom: 280px !important;
  }
  body.cvh-cmp-banner-open {
    padding-bottom: 280px !important;
  }
}