/* =====================================================================
   Consentimiento de cookies - Farmacia Terranea
   Adaptado a la Guia sobre el uso de las cookies de la AEPD
   (art. 22.2 LSSI, RGPD y LOPDGDD)
   ===================================================================== */

:root{
	--cc-principal:#7A5F47;        /* marron corporativo */
	--cc-principal-oscuro:#5E4836; /* hover y titulares secundarios */
	--cc-acento:#AFCA0B;           /* verde lima, solo para el foco de teclado */
	--cc-titulo:#5E4836;
	--cc-texto:#333;
	--cc-borde:#dcdcdc;
}

#cc-banner,#cc-panel,#cc-panel *,#cc-banner *{box-sizing:border-box;}

/* ------------------------- PRIMERA CAPA ------------------------- */
#cc-banner{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:2147483000;
	background:#fff;
	border-top:4px solid var(--cc-principal);
	box-shadow:0 -3px 18px rgba(0,0,0,.18);
	font-family:'Montserrat',Arial,Helvetica,sans-serif;
	color:var(--cc-texto);
	padding:18px 20px;
	transform:translateY(110%);
	transition:transform .35s ease;
}
#cc-banner.cc-visible{transform:translateY(0);}

.cc-banner-inner{
	max-width:1200px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:16px;
}
.cc-banner-texto{flex:1 1 460px;min-width:260px;}

/* La plantilla Yanka impone tamanos muy grandes a los titulares y transforma
   el texto. Se sube la especificidad para que el aviso no quede desproporcionado. */
#cc-banner .cc-banner-texto h2{
	margin:0 0 6px!important;
	padding:0!important;
	font-family:inherit!important;
	font-size:17px!important;
	font-weight:700!important;
	color:var(--cc-principal)!important;
	line-height:1.3!important;
	letter-spacing:normal!important;
	text-transform:none!important;
	border:none!important;
}
#cc-banner .cc-banner-texto p{
	margin:0!important;
	font-size:13px!important;
	line-height:1.55!important;
	text-align:justify;
	color:var(--cc-texto)!important;
	text-transform:none!important;
}
.cc-banner-texto a{color:var(--cc-principal);text-decoration:underline;}

.cc-banner-botones{
	flex:0 0 auto;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	align-items:center;
}

/* Botones. ACEPTAR y RECHAZAR con identico peso visual: la AEPD exige
   que rechazar sea tan sencillo y visible como aceptar. */
.cc-btn{
	font-family:inherit;
	font-size:.8em;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	padding:11px 22px;
	border-radius:4px;
	border:2px solid var(--cc-principal);
	cursor:pointer;
	line-height:1.2;
	transition:opacity .2s ease,background .2s ease,color .2s ease;
	white-space:nowrap;
}
.cc-btn:hover{opacity:.85;}
.cc-btn:focus-visible{outline:3px solid var(--cc-acento);outline-offset:2px;}
.cc-btn-principal{background:var(--cc-principal);color:#fff;}
.cc-btn-secundario{background:#fff;color:var(--cc-principal);}
.cc-btn-enlace{
	background:none;
	border:none;
	color:var(--cc-principal);
	text-decoration:underline;
	text-transform:none;
	letter-spacing:0;
	font-weight:600;
	padding:11px 6px;
}

/* ------------------------- SEGUNDA CAPA / PANEL ------------------------- */
#cc-panel{
	position:fixed;
	inset:0;
	z-index:2147483001;
	background:rgba(0,0,0,.55);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	opacity:0;
	visibility:hidden;
	transition:opacity .3s ease,visibility .3s ease;
	font-family:'Montserrat',Arial,Helvetica,sans-serif;
	color:var(--cc-texto);
}
#cc-panel.cc-visible{opacity:1;visibility:visible;}

.cc-panel-caja{
	outline:none;
	background:#fff;
	border-radius:6px;
	width:100%;
	max-width:720px;
	max-height:88vh;
	display:flex;
	flex-direction:column;
	overflow:hidden;
	transform:translateY(20px);
	transition:transform .3s ease;
}
#cc-panel.cc-visible .cc-panel-caja{transform:translateY(0);}

.cc-panel-cabecera{
	padding:20px 24px;
	border-bottom:1px solid var(--cc-borde);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}
#cc-panel .cc-panel-cabecera h2{
	margin:0!important;
	padding:0!important;
	font-family:inherit!important;
	font-size:18px!important;
	font-weight:700!important;
	color:var(--cc-principal)!important;
	line-height:1.3!important;
	letter-spacing:normal!important;
	text-transform:none!important;
	border:none!important;
}
.cc-cerrar{
	background:none;
	border:none;
	font-size:1.6em;
	line-height:1;
	cursor:pointer;
	color:var(--cc-texto);
	padding:0 4px;
}
.cc-cerrar:focus-visible{outline:3px solid var(--cc-acento);}

.cc-panel-cuerpo{
	padding:20px 24px;
	overflow-y:auto;
	font-size:.85em;
	line-height:1.6;
}
.cc-panel-cuerpo>p{margin:0 0 16px;text-align:justify;}
.cc-panel-cuerpo a{color:var(--cc-principal);text-decoration:underline;}

.cc-bloque{
	border:1px solid var(--cc-borde);
	border-radius:5px;
	padding:14px 16px;
	margin-bottom:12px;
}
.cc-bloque-cabecera{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
}
#cc-panel .cc-bloque-cabecera h3{
	margin:0!important;
	padding:0!important;
	font-family:inherit!important;
	font-size:15px!important;
	font-weight:700!important;
	color:var(--cc-titulo)!important;
	line-height:1.3!important;
	letter-spacing:normal!important;
	text-transform:none!important;
	border:none!important;
}
#cc-panel .cc-bloque p{margin:8px 0 0!important;text-align:justify;font-size:13px!important;line-height:1.55!important;}
#cc-panel .cc-panel-cuerpo>p{font-size:13px!important;line-height:1.6!important;}
.cc-siempre{
	font-size:.85em;
	font-weight:700;
	color:var(--cc-principal);
	text-transform:uppercase;
	letter-spacing:.03em;
	white-space:nowrap;
}

/* Interruptor. Sin casillas premarcadas: arranca siempre desactivado. */
.cc-switch{position:relative;display:inline-block;width:52px;height:28px;flex:0 0 auto;}
.cc-switch input{opacity:0;width:0;height:0;position:absolute;}
.cc-slider{
	position:absolute;
	inset:0;
	background:#c4c4c4;
	border-radius:28px;
	cursor:pointer;
	transition:background .25s ease;
}
.cc-slider:before{
	content:"";
	position:absolute;
	height:22px;
	width:22px;
	left:3px;
	top:3px;
	background:#fff;
	border-radius:50%;
	transition:transform .25s ease;
}
.cc-switch input:checked+.cc-slider{background:var(--cc-principal);}
.cc-switch input:checked+.cc-slider:before{transform:translateX(24px);}
.cc-switch input:focus-visible+.cc-slider{outline:3px solid var(--cc-acento);outline-offset:2px;}

.cc-panel-pie{
	padding:16px 24px;
	border-top:1px solid var(--cc-borde);
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:flex-end;
	background:#fafafa;
}
.cc-aviso-guardar{
	flex:1 1 100%;
	margin:0 0 6px;
	font-size:.75em;
	line-height:1.5;
	color:#666;
	text-align:justify;
}

/* ------------------------- TABLA DE COOKIES ------------------------- */
.cc-tabla-wrap{overflow-x:auto;margin:10px 0 0;-webkit-overflow-scrolling:touch;}
table.cc-tabla{
	width:100%;
	border-collapse:collapse;
	font-size:.82em;
	min-width:640px;
}
table.cc-tabla th,table.cc-tabla td{
	border:1px solid var(--cc-borde);
	padding:8px 10px;
	text-align:left;
	vertical-align:top;
	line-height:1.45;
}
table.cc-tabla th{
	background:var(--cc-principal);
	color:#fff;
	font-weight:700;
	text-transform:uppercase;
	font-size:.92em;
	letter-spacing:.02em;
}
table.cc-tabla tbody tr:nth-child(even){background:#f6f6f6;}

/* ------------------------- RESPONSIVE ------------------------- */
@media (max-width:900px){
	.cc-banner-inner{flex-direction:column;align-items:stretch;}
	.cc-banner-botones{justify-content:stretch;}
	.cc-banner-botones .cc-btn{flex:1 1 auto;text-align:center;}
}
@media (max-width:600px){
	#cc-banner{padding:14px;max-height:80vh;overflow-y:auto;}
	.cc-banner-texto p{font-size:.78em;}
	.cc-banner-botones{flex-direction:column;}
	.cc-banner-botones .cc-btn{width:100%;}
	.cc-panel-pie{flex-direction:column;}
	.cc-panel-pie .cc-btn{width:100%;}
	.cc-panel-cabecera,.cc-panel-cuerpo,.cc-panel-pie{padding-left:16px;padding-right:16px;}
}