/* ===========================================================================
   Galleta — banner de cookies. Diseño premium, accesible y conforme AEPD.
   Todo va scopeado bajo #galleta-root / #galleta-reopen y con resets fuertes
   para que NINGÚN tema pueda romper el diseño ni la equivalencia de botones.
   =========================================================================== */

#galleta-root,
#galleta-root *,
#galleta-reopen,
#galleta-reopen * {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

#galleta-root {
	--g-surface: #ffffff;
	--g-surface-2: #faf9f7;
	--g-ink: #181513;
	--g-muted: #6c655f;
	--g-line: rgba(24,21,19,.08);
	--g-line-2: rgba(24,21,19,.06);
	--g-reject-bg: #1c1916;
	--g-reject-ink: #ffffff;
	--g-shadow: 0 1px 1px rgba(20,15,10,.04), 0 6px 16px rgba(20,15,10,.08), 0 24px 60px rgba(20,15,10,.18);
	--g-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, system-ui, sans-serif;

	position: fixed;
	inset: auto;
	z-index: 2147483000;
	font-family: var(--g-font);
	color: var(--g-ink);
	margin: 0;
	padding: 0;
}

/* ---------------- Backdrop (solo modal / barra) ---------------- */
#galleta-root .galleta-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(18,14,10,.42);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .35s ease;
}
#galleta-root.galleta--center .galleta-backdrop,
#galleta-root.galleta--bar-bottom .galleta-backdrop { display: block; }
#galleta-root.is-visible .galleta-backdrop { opacity: 1; }

/* ---------------- Sheet (tarjeta) ---------------- */
#galleta-root .galleta-sheet {
	position: fixed;
	width: min(430px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
	background: var(--g-surface);
	border: 1px solid var(--g-line);
	border-radius: var(--galleta-radius, 18px);
	box-shadow: var(--g-shadow);
	overflow: hidden;

	opacity: 0;
	transform: translateY(16px) scale(.985);
	transition: opacity .34s ease, transform .42s cubic-bezier(.2,.9,.25,1);
}
#galleta-root.is-visible .galleta-sheet { opacity: 1; transform: none; }

/* posiciones */
#galleta-root.galleta--bottom-left  .galleta-sheet { left: 18px;  bottom: 18px; }
#galleta-root.galleta--bottom-right .galleta-sheet { right: 18px; bottom: 18px; }
#galleta-root.galleta--center .galleta-sheet {
	left: 50%; top: 50%;
	transform: translate(-50%,-50%) scale(.97);
}
#galleta-root.galleta--center.is-visible .galleta-sheet { transform: translate(-50%,-50%); }
#galleta-root.galleta--bar-bottom .galleta-sheet {
	left: 50%; bottom: 0; transform: translateX(-50%) translateY(16px);
	width: min(900px, 100vw);
	border-bottom: 0;
	border-radius: var(--galleta-radius, 18px) var(--galleta-radius, 18px) 0 0;
}
#galleta-root.galleta--bar-bottom.is-visible .galleta-sheet { transform: translateX(-50%); }

.galleta-grabber { display: none; }

/* ---------------- Vistas: solo una visible ---------------- */
#galleta-root .galleta-view {
	padding: 22px 22px 20px;
	overflow-y: auto;
}
#galleta-root .galleta-view--prefs { display: none; }
#galleta-root.is-prefs .galleta-view--notice { display: none; }
#galleta-root.is-prefs .galleta-view--prefs { display: block; animation: galleta-fade .3s ease; }
#galleta-root .galleta-view--notice { animation: galleta-fade .3s ease; }

@keyframes galleta-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- Cabecera del aviso ---------------- */
#galleta-root .galleta-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
#galleta-root .galleta-mark {
	display: inline-flex;
	width: 46px; height: 46px;
	align-items: center; justify-content: center;
	border-radius: 14px;
	background: radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--galleta-accent) 16%, #fff) 0%, color-mix(in srgb, var(--galleta-accent) 7%, #fff) 100%);
	box-shadow: inset 0 0 0 1px var(--g-line);
	flex: 0 0 auto;
}
#galleta-root .galleta-cookie { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)); }
#galleta-root .galleta-logo { max-height: 38px; width: auto; }

#galleta-root .galleta-title {
	margin: 0;
	font-family: var(--g-font);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--g-ink);
}

#galleta-root .galleta-msg {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--g-muted);
}
#galleta-root .galleta-policy {
	color: var(--galleta-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}
#galleta-root .galleta-policy:hover { opacity: .8; }

/* ---------------- Botones (blindados) ---------------- */
#galleta-root .galleta-actions { display: grid; gap: 10px; }
#galleta-root .galleta-actions--two   { grid-template-columns: 1fr 1fr; }
#galleta-root .galleta-actions--three { display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;}

#galleta-root .galleta-btn {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; align-items: center; justify-content: center;
	margin: 0; border: 0; outline: 0;
	border-radius: calc(var(--galleta-radius, 18px) * .62);
	padding: 13px 14px;
	min-height: 48px;
	width: 100%;
	font-family: var(--g-font);
	font-size: 14px; font-weight: 650; line-height: 1;
	letter-spacing: .005em;
	text-transform: none; text-decoration: none; text-shadow: none;
	cursor: pointer;
	box-shadow: none;
	transition: transform .14s ease, box-shadow .22s ease, filter .2s ease, background .2s ease;
}
#galleta-root .galleta-btn span { pointer-events: none; }
#galleta-root .galleta-btn:hover { transform: translateY(-1px); }
#galleta-root .galleta-btn:active { transform: translateY(0); }

/* Aceptar y Rechazar: mismo tamaño, ambos sólidos y de alto contraste (AEPD). */
#galleta-root .galleta-btn--accept {
	background: var(--galleta-accent) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--galleta-accent) 38%, transparent);
}
#galleta-root .galleta-btn--accept:hover { filter: brightness(1.07); box-shadow: 0 10px 22px color-mix(in srgb, var(--galleta-accent) 45%, transparent); }

#galleta-root .galleta-btn--reject {
	background: var(--g-reject-bg) !important;
	color: var(--g-reject-ink) !important;
}
#galleta-root .galleta-btn--reject:hover { filter: brightness(1.5); }

#galleta-root .galleta-btn--ghost {
	background: var(--g-surface-2) !important;
	color: var(--g-ink) !important;
	box-shadow: inset 0 0 0 1px var(--g-line);
}
#galleta-root .galleta-btn--ghost:hover { background: color-mix(in srgb, var(--g-ink) 5%, var(--g-surface-2)) !important; }

/* Enlace "Configurar" — la 3ª opción puede diferir de los botones. */
#galleta-root .galleta-link {
	-webkit-appearance: none; appearance: none;
	display: block; width: 100%;
	margin-top: 12px; padding: 6px;
	background: none !important; border: 0;
	font-family: var(--g-font); font-size: 13px; font-weight: 600;
	color: var(--g-muted) !important;
	text-decoration: underline; text-underline-offset: 3px;
	cursor: pointer;
}
#galleta-root .galleta-link:hover { color: var(--g-ink) !important; }

/* ---------------- Vista preferencias ---------------- */
#galleta-root .galleta-prefs-head {
	display: flex; align-items: flex-start; gap: 10px;
	margin-bottom: 6px;
}
#galleta-root .galleta-back {
	width: 35px !important;
    height: 35px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background-color: #000000 !important;
    border-radius: 50% !important;       
    border: none !important;
}
#galleta-root .galleta-back:hover { background: #222222 !important; }
#galleta-root .galleta-prefs-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
#galleta-root .galleta-prefs-hint { margin: 2px 0 0; font-size: 12.5px; color: var(--g-muted); line-height: 1.5; }

#galleta-root .galleta-cats { list-style: none; margin: 16px 0; padding: 0; }
#galleta-root .galleta-cat { padding: 15px 0; border-top: 1px solid var(--g-line-2); }
#galleta-root .galleta-cat:first-child { border-top: 0; padding-top: 4px; }

#galleta-root .galleta-cat__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
#galleta-root .galleta-cat__label { display: block; font-size: 14px; font-weight: 650; }
#galleta-root .galleta-cat__desc { display: block; margin-top: 3px; font-size: 12.5px; color: var(--g-muted); line-height: 1.5; }

#galleta-root .galleta-pill {
	flex: 0 0 auto;
	font-size: 11px; font-weight: 600;
	padding: 5px 11px; border-radius: 999px;
	background: color-mix(in srgb, var(--g-ink) 7%, transparent);
	color: var(--g-muted);
	white-space: nowrap;
}

/* Interruptor (apagado por defecto) */
#galleta-root .galleta-switch { position: relative; flex: 0 0 auto; width: 48px; height: 28px; cursor: pointer; }
#galleta-root .galleta-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
#galleta-root .galleta-switch__track {
	position: absolute; inset: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--g-ink) 16%, transparent);
	transition: background .2s ease;
}
#galleta-root .galleta-switch__track::after {
	content: ""; position: absolute; top: 3px; left: 3px;
	width: 22px; height: 22px; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35);
	transition: transform .22s cubic-bezier(.3,1.4,.5,1);
}
#galleta-root .galleta-switch input:checked + .galleta-switch__track { background: var(--galleta-accent); }
#galleta-root .galleta-switch input:checked + .galleta-switch__track::after { transform: translateX(20px); }
#galleta-root .galleta-switch input:focus-visible + .galleta-switch__track { outline: 2px solid var(--galleta-accent); outline-offset: 2px; }

#galleta-root .galleta-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Detalle "Ver cookies" */
#galleta-root .galleta-cat__detail { margin-top: 10px; }
#galleta-root .galleta-cat__detail summary {
	cursor: pointer; list-style: none;
	font-size: 12.5px; font-weight: 600; color: var(--galleta-accent);
}
#galleta-root .galleta-cat__detail summary::-webkit-details-marker { display: none; }
#galleta-root .galleta-cat__detail summary::before { content: "+ "; }
#galleta-root .galleta-cat__detail[open] summary::before { content: "– "; }

#galleta-root .galleta-cookies { margin-top: 10px; font-size: 12px; }
#galleta-root .galleta-cookies__svc {
	display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
	padding: 8px 0 6px; border-bottom: 1px solid var(--g-line-2);
}
#galleta-root .galleta-cookies__svc strong { font-size: 12.5px; }
#galleta-root .galleta-cookies__svc span { color: var(--g-muted); font-size: 11.5px; }
#galleta-root .galleta-cookies__row {
	display: grid; grid-template-columns: minmax(90px,auto) 1fr auto;
	gap: 6px 10px; padding: 6px 0; border-bottom: 1px solid var(--g-line-2);
	align-items: baseline;
}
#galleta-root .galleta-cookies code {
	font-size: 11px; padding: 2px 6px; border-radius: 6px;
	background: color-mix(in srgb, var(--g-ink) 6%, transparent);
}
#galleta-root .galleta-cookies__purpose { color: var(--g-muted); }
#galleta-root .galleta-cookies__dur { color: var(--g-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------- Botón flotante galleta ---------------- */
#galleta-reopen {
    -webkit-appearance: none; 
    appearance: none;
    position: fixed !important; 
    z-index: 2147482000 !important; 
    bottom: 20px !important; 
    right: 20px !important;
    left: auto !important; /* 🔥 Clave: Anula cualquier orden de ir a la izquierda */
    
    width: 45px !important; 
    height: 45px !important; 
    padding: 0 !important;
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    
    border: 0 !important; 
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(20,15,10,.12), 0 10px 26px rgba(20,15,10,.2) !important;
    cursor: pointer !important;
    transition: transform .2s cubic-bezier(.2,.9,.25,1), box-shadow .2s ease !important;
}
#galleta-reopen:hover { transform: translateY(-2px) rotate(-6deg); box-shadow: 0 6px 14px rgba(20,15,10,.16), 0 16px 34px rgba(20,15,10,.26); }
#galleta-reopen:active { transform: translateY(0) scale(.96); }
#galleta-reopen .galleta-cookie { width: 34px; height: 34px; }
#galleta-reopen.galleta-reopen--bottom-right { right: 20px; }
#galleta-reopen.galleta-reopen--bottom-left,
#galleta-reopen.galleta-reopen--center,
#galleta-reopen.galleta-reopen--bar-bottom { left: 20px; }
#galleta-reopen:focus-visible { outline: 3px solid var(--galleta-accent, #4f46e5); outline-offset: 3px; }

/* ---------------- Placeholder de iframes ---------------- */
.galleta-embed-placeholder {
	display: flex; align-items: center; justify-content: center;
	min-height: 220px;
	background: rgba(120,120,140,.06);
	border: 1px dashed rgba(120,120,140,.4);
	border-radius: 14px; padding: 24px; text-align: center;
	font-family: -apple-system, system-ui, sans-serif;
}
.galleta-embed-text { margin: 0 0 14px; color: #6c655f; font-size: 14px; }
.galleta-embed-load {
	-webkit-appearance: none; appearance: none;
	border: 0; cursor: pointer; border-radius: 10px;
	background: var(--galleta-accent, #4f46e5); color: #fff;
	font-weight: 650; font-size: 14px; padding: 11px 18px;
}
.galleta-embed-load:hover { filter: brightness(1.07); }

/* ---------------- Foco accesible ---------------- */
#galleta-root .galleta-btn:focus-visible,
#galleta-root .galleta-link:focus-visible,
#galleta-root .galleta-back:focus-visible { outline: 3px solid color-mix(in srgb, var(--galleta-accent) 60%, #000); outline-offset: 2px; }

/* ---------------- Tema oscuro ---------------- */
#galleta-root.galleta--theme-dark {
	--g-surface: #1b1815; --g-surface-2: #242019;
	--g-ink: #f4f1ec; --g-muted: #b0a89f;
	--g-line: rgba(255,255,255,.1); --g-line-2: rgba(255,255,255,.07);
	--g-reject-bg: #f4f1ec; --g-reject-ink: #1b1815;
}
@media (prefers-color-scheme: dark) {
	#galleta-root.galleta--theme-auto {
		--g-surface: #1b1815; --g-surface-2: #242019;
		--g-ink: #f4f1ec; --g-muted: #b0a89f;
		--g-line: rgba(255,255,255,.1); --g-line-2: rgba(255,255,255,.07);
		--g-reject-bg: #f4f1ec; --g-reject-ink: #1b1815;
	}
}

/* ---------------- Responsive: bottom-sheet en móvil ---------------- */
@media (max-width: 600px) {
	#galleta-root .galleta-backdrop { display: block; }
	#galleta-root .galleta-sheet,
	#galleta-root.galleta--bottom-left .galleta-sheet,
	#galleta-root.galleta--bottom-right .galleta-sheet,
	#galleta-root.galleta--center .galleta-sheet,
	#galleta-root.galleta--bar-bottom .galleta-sheet {
		left: 0; right: 0; bottom: 0; top: auto;
		width: 100%; max-width: 100%;
		transform: translateY(18px);
		border-radius: 22px 22px 0 0;
		border-bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		max-height: 86vh;
	}
	#galleta-root.is-visible .galleta-sheet { transform: translateY(0) !important; }
	.galleta-grabber {
		display: block;
		width: 40px; height: 4px; margin: 10px auto 0;
		border-radius: 999px; background: color-mix(in srgb, var(--g-ink) 18%, transparent);
		flex: 0 0 auto;
	}
	#galleta-root .galleta-actions--three { grid-template-columns: 1fr; }
	#galleta-root .galleta-cookies__row { grid-template-columns: 1fr; gap: 2px; }
	#galleta-root .galleta-cookies__dur { color: var(--g-muted); }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
	#galleta-root .galleta-sheet,
	#galleta-root .galleta-backdrop,
	#galleta-root .galleta-btn,
	#galleta-reopen,
	#galleta-root .galleta-switch__track,
	#galleta-root .galleta-switch__track::after,
	#galleta-root .galleta-view { transition: none !important; animation: none !important; }
}
@media (max-width: 480px) {
    #galleta-reopen {
        /* Bajamos a 38px para compensar el grosor de la sombra y que visualmente claven el tamaño */
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;  /* 🔥 Evita que el plugin fuerce los 45px de escritorio */
        min-height: 40px !important; /* 🔥 Evita que el plugin fuerce los 45px de escritorio */
        
        box-sizing: border-box !important;
        bottom: 20px !important;
        right: 20px !important;
    }
    
    /* Achicamos la galleta interna proporcionalmente */
    #galleta-reopen .galleta-cookie {
        width: 25px !important;
        height: 25px !important;
    }
}
