/* ===========================================================
   SaludRicard Cookies
   -----------------------------------------------------------
   1. Aviso y panel (vanilla-cookieconsent) con el lenguaje del
      rediseño: panel blanco con borde cálido y esquina de 20px,
      botones de 12px en verde marca, Spectral en los títulos y
      Mulish en el texto.
   2. El aviso que sustituye a cada vídeo de YouTube/Vimeo.
   3. Tablas y botón de la política de cookies.

   Los colores son los del child theme (--sr-* / paleta de
   Kadence) escritos como valor fijo, no como var(): el plugin
   no depende del tema y tiene que verse igual si este cambia.
   =========================================================== */

/* ---- 1. Aviso y panel ---- */

#cc-main {
	--cc-font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--cc-modal-border-radius: 20px;
	--cc-btn-border-radius: 12px;
	--cc-modal-margin: 1rem;
	--cc-z-index: 2147483600;

	--cc-bg: #FFFFFF;
	--cc-primary-color: #26302A;
	--cc-secondary-color: #55605A;
	--cc-link-color: #40614E;

	/* Aceptar y rechazar comparten este estilo (equalWeightButtons): ninguno pesa más. */
	--cc-btn-primary-bg: #40614E;
	--cc-btn-primary-color: #F6F2EC;
	--cc-btn-primary-border-color: #40614E;
	--cc-btn-primary-hover-bg: #2C382F;
	--cc-btn-primary-hover-color: #F6F2EC;
	--cc-btn-primary-hover-border-color: #2C382F;

	/* "Configurar" y "Guardar mi selección": superficie blanca con borde cálido, como .sr-btn-ghost. */
	--cc-btn-secondary-bg: #FFFFFF;
	--cc-btn-secondary-color: #26302A;
	--cc-btn-secondary-border-color: #E4DCCB;
	--cc-btn-secondary-hover-bg: #F1ECE2;
	--cc-btn-secondary-hover-color: #26302A;
	--cc-btn-secondary-hover-border-color: #DCCFA6;

	--cc-separator-border-color: #E4DCCB;

	--cc-toggle-on-bg: #40614E;
	--cc-toggle-off-bg: #8A8F87;
	--cc-toggle-on-knob-bg: #FFFFFF;
	--cc-toggle-off-knob-bg: #FFFFFF;
	--cc-toggle-enabled-icon-color: #40614E;
	--cc-toggle-disabled-icon-color: #8A8F87;
	--cc-toggle-readonly-bg: #B7C3B1;
	--cc-toggle-readonly-knob-bg: #FFFFFF;
	--cc-toggle-readonly-knob-icon-color: #B7C3B1;

	--cc-section-category-border: #E4DCCB;
	--cc-cookie-category-block-bg: #FCFAF5;
	--cc-cookie-category-block-border: #E4DCCB;
	--cc-cookie-category-block-hover-bg: #F6F2EC;
	--cc-cookie-category-block-hover-border: #DCCFA6;
	--cc-cookie-category-expanded-block-bg: #FFFFFF;
	--cc-cookie-category-expanded-block-hover-bg: #FCFAF5;

	--cc-overlay-bg: rgba(38, 48, 42, .55);
	--cc-webkit-scrollbar-bg: #E4DCCB;
	--cc-webkit-scrollbar-hover-bg: #B0A275;

	--cc-footer-bg: #FCFAF5;
	--cc-footer-color: #55605A;
	--cc-footer-border-color: #E4DCCB;
}

#cc-main .cm,
#cc-main .pm {
	border: 1px solid #E4DCCB;
	box-shadow: 0 24px 60px -24px rgba(38, 48, 42, .45);
}

#cc-main .cm__title,
#cc-main .pm__title {
	font-family: 'Spectral', Georgia, serif;
	font-weight: 600;
	letter-spacing: 0;
}
#cc-main .cm__title { font-size: 1.3em; }
#cc-main .pm__title { font-size: 1.25em; }
#cc-main .cm__desc { line-height: 1.65; }

/* El diseño "cloud" limita la descripción a 9.4em y la hace desplazable: en un móvil eso
   corta el texto a media frase. Ahí hay alto de sobra. */
@media (max-width: 640px) {
	#cc-main .cm--cloud .cm__desc { max-height: 45vh; }
}

#cc-main .cm__btn,
#cc-main .pm__btn {
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
#cc-main .cm__btn:hover,
#cc-main .pm__btn:hover { transform: translateY(-1px); }

#cc-main .cm__footer a,
#cc-main .pm__section-desc a { font-weight: 600; }

#cc-main .pm__section-title { font-weight: 700; }

/* Foco visible (punto 49). La librería deja el anillo por defecto del navegador
   (`outline: revert`); se cambia por el del resto de la web: 2px en verde marca, separado
   del botón. Con #cc-main delante para ganar a `#cc-main a/button/input` de la librería. */
#cc-main a:focus-visible,
#cc-main button:focus-visible,
#cc-main input:focus-visible {
	outline: 2px solid #40614E;
	outline-offset: 2px;
}

/* Etiqueta "Siempre activas" junto al título de las técnicas */
#cc-main .sr-cc-siempre {
	display: inline-block;
	margin-left: .5em;
	padding: .15em .6em;
	border-radius: 999px;
	background: #E6EAD9;
	color: #556D4C; /* era #5A7350: 4,3:1 sobre #E6EAD9; este, 4,66:1 (punto 49) */
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: .15em;
}

/* Las tablas del panel: nombres de cookie en monoespaciada, que se leen como tales. */
#cc-main .pm__table-td:first-child { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .92em; }

/* ---- 2. Aviso en lugar de cada vídeo ---- */

.sr-embed {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 22px;
	box-sizing: border-box;
	background: linear-gradient(135deg, #F1ECE2, #E6EAD9);
	text-align: center;
}
.sr-embed-aviso { max-width: 30em; }
/* El formulario de suscripción (Mailrelay, punto 49) no es un vídeo: sin el 16:9, que a ancho
   completo lo dejaba en unos 420 px de alto, y más justo en la ventana estrecha del móvil. */
.sr-embed--formulario { aspect-ratio: auto; min-height: 16em; }
.sg-popup-builder-content .sr-embed { padding: 12px 8px; }
.sr-embed-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #FFFFFF;
	color: #40614E;
	box-shadow: 0 8px 18px rgba(38, 48, 42, .12);
}
.sr-embed-icono svg { margin-left: 3px; }
.sr-embed-aviso p {
	margin: 12px 0 14px;
	font: 400 14.5px/1.6 'Mulish', system-ui, sans-serif;
	color: #55605A;
}
.sr-embed-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.sr-embed-btns button {
	margin: 0;
	padding: 10px 16px;
	border: 1px solid #40614E;
	border-radius: 12px;
	background: #40614E;
	color: #F6F2EC;
	font: 700 13.5px/1.2 'Mulish', system-ui, sans-serif;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease;
}
.sr-embed-btns button:hover,
.sr-embed-btns button:focus-visible { background: #2C382F; border-color: #2C382F; color: #F6F2EC; }
.sr-embed-btns .sr-embed-siempre { background: #FFFFFF; border-color: #E4DCCB; color: #26302A; }
/* Anillo de foco propio (punto 49): el plugin no depende del tema. */
.sr-embed-btns button:focus-visible,
.sr-embed a.sr-embed-fuera:focus-visible,
.sr-cookies-boton:focus-visible {
	outline: 2px solid #40614E;
	outline-offset: 3px;
}
.sr-embed-btns .sr-embed-siempre:hover,
.sr-embed-btns .sr-embed-siempre:focus-visible { background: #F1ECE2; border-color: #DCCFA6; color: #26302A; }
.sr-embed a.sr-embed-fuera {
	display: inline-block;
	margin-top: 12px;
	font: 600 13px 'Mulish', system-ui, sans-serif;
	color: #40614E;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 600px) {
	.sr-embed { padding: 16px 14px; }
	.sr-embed-icono { width: 44px; height: 44px; }
	.sr-embed-aviso p { font-size: 13.5px; margin: 8px 0 10px; }
}

/* ---- 3. Política de cookies: tablas y botón ----
   Solo márgenes verticales: estos bloques son hijos directos del contenido y el tema los
   centra con margin-left/right: auto. */

.sr-tabla-cookies {
	overflow-x: auto;
	margin-top: 6px;
	margin-bottom: 30px;
	border: 1px solid #E4DCCB;
	border-radius: 16px;
	background: #FFFFFF;
}
.sr-tabla-cookies table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font: 400 14.5px/1.55 'Mulish', system-ui, sans-serif;
}
.sr-tabla-cookies th,
.sr-tabla-cookies td {
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid #E4DCCB;
	text-align: left;
	vertical-align: top;
	color: #26302A;
}
.sr-tabla-cookies tr:last-child td { border-bottom: 0; }
.sr-tabla-cookies th {
	background: #E6EAD9;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #556D4C; /* era #5A7350, 4,3:1 (punto 49) */
}
.sr-tabla-cookies td:nth-child(3) { color: #55605A; }
.sr-tabla-cookies code {
	font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
	font-size: 12.5px;
	background: #F6F2EC;
	padding: 1px 5px;
	border-radius: 5px;
	white-space: nowrap;
}

/* En móvil cada cookie es una ficha: una tabla de 4 columnas no cabe en 360px. */
@media (max-width: 600px) {
	.sr-tabla-cookies thead { display: none; }
	.sr-tabla-cookies tr { display: block; padding: 10px 14px; border-bottom: 1px solid #E4DCCB; }
	.sr-tabla-cookies tr:last-child { border-bottom: 0; }
	.sr-tabla-cookies td { display: block; padding: 3px 0; border: 0; }
	.sr-tabla-cookies td::before {
		content: attr(data-col);
		display: block;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: #72785E; /* era #7A8064, 4,1:1 en blanco (punto 49) */
	}
	.sr-tabla-cookies code { white-space: normal; }
}

.sr-cookies-accion {
	margin-top: 4px;
	margin-bottom: 26px;
}
.sr-cookies-boton {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 13px 22px;
	border: 0;
	border-radius: 12px;
	background: #40614E;
	color: #F6F2EC;
	font: 700 14px/1.2 'Mulish', system-ui, sans-serif;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 8px 18px rgba(64, 97, 78, .2);
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}
.sr-cookies-boton:hover,
.sr-cookies-boton:focus-visible { background: #2C382F; color: #F6F2EC; transform: translateY(-2px); }