/* AUGE Municipal — consentimiento para servicios externos (AM-TEC-6B.4).
   Usa las variables del tema AUGE si existen (colores con contraste comprobado) y valores neutros si no.
   Los tres botones tienen el mismo aspecto: aceptar y rechazar pesan igual. */

/* El aviso es fijo abajo: el contenido y el foco no quedan ocultos debajo (WCAG 2.4.11). */
html.auge-cookies-visible { scroll-padding-bottom: calc(var(--auge-cookies-alto, 0px) + 16px); }
html.auge-cookies-visible body { padding-bottom: var(--auge-cookies-alto, 0px); }

.auge-cookies[hidden], .auge-preferencias-abrir[hidden], .auge-externo [hidden] { display: none !important; }

.auge-cookies {
	position: fixed; inset: auto 0 0 0; z-index: 9990; max-height: 70vh; overflow-y: auto;
	background: var(--c-superficie, #ffffff); color: var(--c-superficie-texto, #1f2328);
	border-top: 1px solid var(--c-borde, #c4c9cf); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
}
.auge-cookies__contenido {
	display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
	max-width: 1280px; margin: 0 auto; padding: 16px;
}
.auge-cookies__cuerpo { flex: 1 1 32rem; min-width: 0; }
.auge-cookies__titulo { margin: 0 0 4px; font-size: 1.05rem; line-height: 1.3; }
.auge-cookies__texto { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.auge-cookies__texto a, .auge-preferencias a { color: var(--c-enlaces, #1d4f73); }
.auge-cookies__botones, .auge-preferencias__botones { display: flex; flex-wrap: wrap; gap: 8px; }

.auge-cookies__boton, .auge-preferencias-abrir {
	min-height: 44px; padding: 8px 16px; font: inherit; font-weight: 650; line-height: 1.2; cursor: pointer;
	background: var(--c-botones, #1d4f73); color: var(--c-botones-texto, #ffffff);
	border: 2px solid var(--c-botones, #1d4f73); border-radius: var(--radio-pequeno, 4px);
}
.auge-cookies__boton:hover { background: var(--c-botones-activo, #163d59); border-color: var(--c-botones-activo, #163d59); text-decoration: underline; }
.auge-cookies__boton:focus-visible, .auge-preferencias-abrir:focus-visible, .auge-externo__permitir:focus-visible,
.auge-preferencias__cerrar:focus-visible, .auge-servicio input:focus-visible {
	outline: 3px solid var(--c-foco, #ffbf47); outline-offset: 2px; box-shadow: 0 0 0 6px var(--c-foco-borde, #0b0c0c);
}

/* Botón del pie: con aspecto de enlace, como los demás enlaces legales. */
.auge-preferencias-abrir {
	min-height: 24px; padding: 0; background: none; border: 0; color: inherit; font-weight: inherit; text-decoration: underline;
}
.auge-preferencias-abrir:hover { text-decoration-thickness: 2px; }

/* Panel de preferencias (diálogo modal nativo: foco atrapado y Escape). */
.auge-preferencias {
	width: min(40rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto;
	background: var(--c-superficie, #ffffff); color: var(--c-superficie-texto, #1f2328);
	border: 1px solid var(--c-borde, #c4c9cf); border-radius: var(--radio, 8px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.auge-preferencias::backdrop { background: rgba(0, 0, 0, 0.5); }
.auge-preferencias > * { margin-left: 20px; margin-right: 20px; }
.auge-preferencias__cabecera { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin-top: 16px; }
.auge-preferencias__titulo { margin: 4px 0 0; font-size: 1.2rem; line-height: 1.3; }
.auge-preferencias__cerrar {
	flex: 0 0 auto; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; cursor: pointer;
	background: none; color: inherit; border: 1px solid var(--c-borde, #c4c9cf); border-radius: var(--radio-pequeno, 4px);
}
.auge-preferencias__servicios { margin-top: 12px; margin-bottom: 12px; padding: 0; border: 0; }
.auge-preferencias__servicios legend { padding: 0; font-weight: 700; margin-bottom: 8px; }
.auge-servicio {
	display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start;
	padding: 12px 0; border-top: 1px solid var(--c-borde, #c4c9cf);
}
.auge-servicio input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--c-botones, #1d4f73); }
.auge-servicio label { font-weight: 700; cursor: pointer; }
.auge-servicio__info { grid-column: 2; font-size: 0.92rem; line-height: 1.5; }
.auge-servicio__info p { margin: 0 0 4px; }
.auge-preferencias__botones { margin-top: 8px; margin-bottom: 20px; }

/* Contenido externo bloqueado: tarjeta neutra (no es un error) sin hueco reservado. */
.auge-externo { margin: 16px 0; }
.auge-externo__aviso {
	padding: 12px 16px; border: 1px solid var(--c-borde, #c4c9cf); border-radius: var(--radio, 8px);
	background: var(--c-superficie, #ffffff); color: var(--c-superficie-texto, #1f2328);
}
.auge-externo__aviso > * { margin: 0 0 8px; }
.auge-externo__aviso > :last-child { margin-bottom: 0; }
.auge-externo__acciones { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.auge-externo__permitir {
	min-height: 44px; padding: 8px 14px; font: inherit; font-weight: 650; cursor: pointer;
	background: var(--c-superficie, #ffffff); color: var(--c-enlaces, #1d4f73);
	border: 2px solid currentColor; border-radius: var(--radio-pequeno, 4px);
}
.auge-externo__permitir:hover { text-decoration: underline; }
.auge-externo__enlace { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
.auge-externo__alternativo { margin: 8px 0 0; font-size: 0.92rem; }
.auge-externo--activo iframe { display: block; max-width: 100%; border: 0; }
/* Vídeos: todo el ancho con su proporción (el script la toma de width y height; 16:9 si no la hay). */
.auge-externo--activo[data-auge-servicio="vimeo"] iframe,
.auge-externo--activo[data-auge-servicio="youtube"] iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.auge-externo > p:empty { display: none; }

@media (max-width: 599px) {
	.auge-cookies__contenido { padding: 12px 16px; }
	.auge-cookies__botones { width: 100%; }
	.auge-cookies__boton { flex: 1 1 100%; }
	.auge-preferencias__botones .auge-cookies__boton { flex: 1 1 100%; }
}
@media (forced-colors: active) {
	.auge-cookies, .auge-preferencias, .auge-externo__aviso { border: 1px solid CanvasText; }
	.auge-cookies__boton, .auge-externo__permitir { border: 2px solid ButtonText; }
}