/**
 * Herrera Corporativo - Cookie Consent Banner Styles
 * Matches the branding of the Team Slider widget:
 * Primary Celeste: #3AA6B9
 * Secondary Azul: #0F172A
 * Card Background: #FFFFFF
 * Border Radius: 4px
 * Shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px
 */

#hccc-banner {
	--hccc-primary: #3AA6B9;
	--hccc-secondary: #0F172A;

	position: fixed;
	bottom: 20px;
	z-index: 999999;
	box-sizing: border-box;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

#hccc-banner.hccc-show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Layout: Cuadrada (compact floating card), positionable left/center/right */
#hccc-banner.hccc-layout-box {
	max-width: 400px;
	width: calc(100% - 40px);
}

#hccc-banner.hccc-layout-box.hccc-pos-left {
	left: 20px;
	transform: translateY(16px);
}
#hccc-banner.hccc-layout-box.hccc-pos-left.hccc-show {
	transform: translateY(0);
}

#hccc-banner.hccc-layout-box.hccc-pos-center {
	left: 50%;
	transform: translate(-50%, 16px);
}
#hccc-banner.hccc-layout-box.hccc-pos-center.hccc-show {
	transform: translate(-50%, 0);
}

#hccc-banner.hccc-layout-box.hccc-pos-right {
	right: 20px;
	transform: translateY(16px);
}
#hccc-banner.hccc-layout-box.hccc-pos-right.hccc-show {
	transform: translateY(0);
}

/* Layout: Barra centrada (wide card, always bottom-center) */
#hccc-banner.hccc-layout-bar {
	left: 50%;
	width: calc(100% - 40px);
	max-width: 1100px;
	transform: translate(-50%, 16px);
}
#hccc-banner.hccc-layout-bar.hccc-show {
	transform: translate(-50%, 0);
}

#hccc-banner.hccc-layout-bar .hccc-card {
	display: flex;
	align-items: center;
	gap: 24px;
}

#hccc-banner.hccc-layout-bar .hccc-text {
	flex: 1 1 320px;
}

#hccc-banner.hccc-layout-bar .hccc-title {
	margin-bottom: 4px;
}

#hccc-banner.hccc-layout-bar .hccc-desc {
	margin-bottom: 0;
}

#hccc-banner.hccc-layout-bar .hccc-actions {
	flex: 0 0 auto;
}

#hccc-banner .hccc-card {
	background-color: #ffffff;
	border-radius: 4px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	padding: 24px;
	box-sizing: border-box;
}

#hccc-banner .hccc-title {
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--hccc-secondary);
	margin: 0 0 10px 0;
}

#hccc-banner .hccc-desc {
	font-family: 'Alef', sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
	color: #475569;
	margin: 0 0 18px 0;
}

#hccc-banner .hccc-link {
	color: var(--hccc-primary);
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}

#hccc-banner .hccc-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

#hccc-banner .hccc-btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Raleway', sans-serif;
	font-size: 13px;
	font-weight: 600;
	border-radius: 4px;
	padding: 10px 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	box-sizing: border-box;
	line-height: 1.2;
}

/* Solid style: both buttons filled, differentiated only by color (equal prominence) */
#hccc-banner.hccc-style-solid .hccc-btn-primary {
	background-color: var(--hccc-primary);
	border: 1px solid var(--hccc-primary);
	color: #ffffff;
}

#hccc-banner.hccc-style-solid .hccc-btn-primary:hover {
	background-color: var(--hccc-secondary);
	border-color: var(--hccc-secondary);
}

#hccc-banner.hccc-style-solid .hccc-btn-secondary {
	background-color: #64748B;
	border: 1px solid #64748B;
	color: #ffffff;
}

#hccc-banner.hccc-style-solid .hccc-btn-secondary:hover {
	background-color: var(--hccc-secondary);
	border-color: var(--hccc-secondary);
}

/* Outline style: both buttons transparent with a border, differentiated only by color */
#hccc-banner.hccc-style-outline .hccc-btn-primary {
	background-color: transparent;
	border: 1px solid var(--hccc-primary);
	color: var(--hccc-primary);
}

#hccc-banner.hccc-style-outline .hccc-btn-primary:hover {
	background-color: var(--hccc-primary);
	color: #ffffff;
}

#hccc-banner.hccc-style-outline .hccc-btn-secondary {
	background-color: transparent;
	border: 1px solid #94A3B8;
	color: #64748B;
}

#hccc-banner.hccc-style-outline .hccc-btn-secondary:hover {
	background-color: #64748B;
	border-color: #64748B;
	color: #ffffff;
}

@media (max-width: 700px) {
	#hccc-banner.hccc-layout-bar .hccc-card {
		flex-direction: column;
		align-items: stretch;
		max-height: calc(100vh - 24px);
		overflow-y: auto;
	}

	/* In row layout (desktop) 320px is a min-width; once flex-direction
	   flips to column the same basis would be read as a min-height,
	   forcing a huge empty gap. Reset it so the block sizes to content. */
	#hccc-banner.hccc-layout-bar .hccc-text {
		flex: 0 1 auto;
	}

	#hccc-banner.hccc-layout-bar .hccc-actions {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (max-width: 480px) {
	#hccc-banner.hccc-layout-box.hccc-pos-left,
	#hccc-banner.hccc-layout-box.hccc-pos-center,
	#hccc-banner.hccc-layout-box.hccc-pos-right,
	#hccc-banner.hccc-layout-bar {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		max-width: none;
		transform: translateY(16px);
	}

	#hccc-banner.hccc-layout-box.hccc-pos-left.hccc-show,
	#hccc-banner.hccc-layout-box.hccc-pos-center.hccc-show,
	#hccc-banner.hccc-layout-box.hccc-pos-right.hccc-show,
	#hccc-banner.hccc-layout-bar.hccc-show {
		transform: translateY(0);
	}

	#hccc-banner .hccc-actions {
		flex-direction: column;
	}
}

.hccc-cookies-prefs,
[data-hc-cookies="preferencias"] {
	cursor: pointer;
	text-decoration: underline;
	transition: opacity 0.2s ease;
}
.hccc-cookies-prefs:hover,
[data-hc-cookies="preferencias"]:hover {
	opacity: 0.8;
}