/* =============================================================================
   Sens — the cookie notice as a compact floating card (proposal, web-marcela, 8-Nov-2026; loaded by
   includes/aviso-tarjeta.php, which also explains why). Spec: Marcela's review «HANDOFF TÉCNICO — Optimización del
   banner Cookiebot de SENS», sections 7–8: floating card, never a full-width bar; phones 12px from the edges, radius
   14–18px, padding 18–22px, SENS logo 80–105px wide, title 21–24px bold, text 15–17px / 1.4–1.5, buttons stacked and
   full width (primary first, 48–54px tall, 10–12px apart); computers max 780–900px, centred 20–32px above the bottom,
   text left (60–65 %) and stacked buttons right (30–35 %), the X inside the card's top row; tablets stacked; no dark
   overlay; the X 18–20px with a 40–44px tap area, no circle, background or strong colour; no «Mostrar detalles».
   ONLY the first layer: every rule needs #CybotCookiebotDialog.CybotEdge. «Configurar» turns the same element into
   Cookiebot's popup and removes CybotEdge, so the second layer stays exactly Cookiebot's. Texts, colours, buttons and
   their functions stay Cookiebot's (its settings); only size, place and spacing change here.
   Specificity: 'html body.sens-aviso-tarjeta' outranks sens.css section 4 ('html body #CybotCookiebotDialog…') and
   Cookiebot's own stylesheet; every property section 4 sets is set again here.
   Second round, Marcela 8 Nov 2026 (her four changes + notes): shorter text (Cookiebot setting) and less height on
   phones; «Configurar preferencias» lighter (no arrow, 42px, 1px grey border) under the big orange button; the SENS
   logo a bit bigger, Cookiebot's mark smaller and further away; computers a little lower and shorter, more room
   between text and buttons, the X centred on the logo row. Width unchanged.
   Third round, Marcela 9 Nov 2026 («pequeños ajustes antes de cerrar la versión»). Computers: text 16px / 1.55 (was
   15px / 1.45), more room under the title, Cookiebot's mark bigger and darker (still secondary), the card 24px above
   the bottom (was 16px) and fully visible at 1366x768, browser zoom 110–125 % and tablets held sideways. Phones: the
   logo row lower (SENS logo 10 % smaller, less room above and below it), less room between text and the orange
   button, and on narrow screens (320–375px, also at zoom 110–125 %) the title stays on two lines and both buttons
   stay in view without scrolling inside the card.
   ============================================================================= */

/* --- The card: phones and tablets (stacked) ---------------------------------------------------------------------- */
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge {
	top: auto !important;
	bottom: 12px !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	box-sizing: border-box !important;
	width: calc(100% - 24px) !important;
	min-width: 0 !important;
	max-width: 520px !important;
	height: auto !important;
	max-height: calc(100% - 24px) !important;
	padding: 12px 20px 18px !important;
	border-radius: 16px !important;
	box-shadow: 0 12px 32px rgba(23, 34, 56, .22), 0 2px 8px rgba(23, 34, 56, .10) !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	flex: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	position: relative !important;
}

/* top row: SENS logo, Cookiebot's mark smaller, the X at the right */
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	align-self: stretch !important;
	width: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 0 6px !important;
	border: 0 !important;
	/* on short screens (landscape phones, zoom) the card scrolls instead of squeezing the logo row into the title */
	flex-shrink: 0 !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeaderLogosWrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	align-self: center !important;
	flex: 0 1 auto !important;
	width: auto !important;
	gap: 28px !important;
}
/* Cookiebot gives each logo box a fixed share of the row (50 % / 175px, its mark pushed to the right, both centred from
   1280px): here each box is as wide as its logo, side by side on the left */
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogPoweredbyLink {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex: none !important;
	width: auto !important;
}
/* The logo picture (Cookiebot setting) is 205x97 with white margins around the drawing (136x54 at x 36, y 24); the
   negative margins cancel the white so it lines up with the text and keeps the row low. Phones: 141px wide = the drawn
   «sens psicología» 94x37px (round 3: 10 % smaller than 104x41, which tablets and computers keep, see below). */
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogPoweredbyImage {
	width: 141px !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	margin: -16.5px -22.7px -13.1px -24.8px !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogPoweredbyCybot {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	/* round 3: «Cookiebot se ve extremadamente pequeño… comprobaría que sigue siendo legible»: 11px at 60 % before */
	opacity: .72 !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogPoweredbyCybot svg {
	height: 13px !important;
	width: auto !important;
}

/* The X: the one in the top row on every size (Cookiebot shows a second copy, …E2E, on the right of its wide bar from
   1280px: hidden here). Grey #7b8496 (3.7:1 on white, enough for an icon), 12px icon (18px first; Marcela, 8 Nov:
   «puedes poner la x más pequeña porfa»; today's is 14px), 44x44px tap area whose negative margins keep the row as
   tall as the logo, so it stays easy to tap. Same element and function as today: Cookiebot's submitDecline. */
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotBannerCloseButtonE2E {
	display: none !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge.CybotCloseButtonEnabled #CybotCookiebotDialogHeader .CybotCookiebotBannerCloseButton {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: none !important;
	box-sizing: border-box !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	margin: -12px -13px -12px 8px !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	fill: #7b8496 !important;
	position: relative !important;
	z-index: 1 !important;
	cursor: pointer;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge.CybotCloseButtonEnabled #CybotCookiebotDialogHeader .CybotCookiebotBannerCloseButton:hover,
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge.CybotCloseButtonEnabled #CybotCookiebotDialogHeader .CybotCookiebotBannerCloseButton:focus-visible {
	fill: #35415b !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge.CybotCloseButtonEnabled #CybotCookiebotDialogHeader .CybotCookiebotBannerCloseButton svg {
	width: 12px !important;
	height: 12px !important;
	flex: none !important;
}

/* title and text */
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogNav {
	display: none !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogTabContent {
	flex: none !important;
	width: 100% !important;
	margin: 0 !important;
	overflow: visible !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody {
	display: block !important;
	overflow: visible !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody .CybotCookiebotScrollContainer {
	display: block !important;
	width: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding: 0 !important;
	border: 0 !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContent {
	height: auto !important;
	max-height: none !important;
	padding: 0 !important;
	overflow: visible !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody .CybotCookiebotFader,
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBody .CybotCookiebotScrollbarContainer {
	display: none !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContentTitle {
	margin: 0 0 6px !important;
	text-wrap: balance;
	font-size: 22px !important;
	line-height: 1.25 !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContentText {
	font-size: 15px !important;
	line-height: 1.45 !important;
	letter-spacing: 0 !important;
	text-wrap: pretty;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContentText p {
	margin: 0 !important;
}

/* no «Mostrar detalles» on the first layer: «Configurar» is the one way to the choices */
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails {
	display: none !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogBodyBottomWrapper {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* buttons: «Aceptar y continuar» first, «Configurar» under it, full width */
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter {
	display: block !important;
	position: static !important;
	width: 100% !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	flex-shrink: 0 !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
	padding: 0 !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter .CybotCookiebotScrollbarContainer {
	display: none !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyButtons {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyButtonsWrapper {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 10px !important;
	width: 100% !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyButtonsWrapper .CybotCookiebotDialogBodyButton {
	flex: none !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 50px !important;
	margin: 0 !important;
	padding: 12px 16px !important;
	white-space: normal !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
	order: 1 !important;
}
/* «Configurar preferencias» lighter than the orange button (round 2): lower, 1px grey border, no arrow; same colours,
   font and function (Cookiebot's own button, which opens its second layer) */
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelButtonCustomize {
	order: 2 !important;
}
/* (ids twice: this must beat the shared button rule above, «…ButtonsWrapper .CybotCookiebotDialogBodyButton») */
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyButtonsWrapper #CybotCookiebotDialogBodyLevelButtonCustomize {
	min-height: 42px !important;
	padding: 8px 16px !important;
	border-width: 1px !important;
	border-style: solid !important;
	/* #8a94a6: 3:1 on white, the least a button's edge needs to read as a button (WCAG 1.4.11); Cookiebot's #c9d1dd at
	   1px almost vanished on computer screens (1.5:1) */
	border-color: #8a94a6 !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyLevelButtonCustomize .CybotCookiebotDialogArrow {
	display: none !important;
}

/* Keyboard focus: Impreza's «a, button {outline:none !important}» also hides Cookiebot's own focus ring (WCAG 2.4.7).
   Cookiebot's colour #006272 (7:1 on white); only for keyboard focus, never on a tap or a click. */
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge :focus-visible {
	outline: 2px solid #006272 !important;
	outline-offset: 2px !important;
}
html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader .CybotCookiebotBannerCloseButton:focus-visible {
	outline-offset: -2px !important;
}

/* --- Narrow phones (320px, or 360–375px with the browser at 110–125 %): a little less padding, and the title shrinks
   with the screen so «tu experiencia en SENS» (11.2em in Arial/Helvetica bold) still fits on one line: two lines in
   all, never three. 11.6 leaves ~4 % for other fonts (Roboto, Helvetica Neue). ---------------------------------------- */
@media (max-width: 340px) {
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge {
		padding: 12px 16px 16px !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContentTitle {
		font-size: clamp(17px, calc((100vw - 56px) / 11.6), 22px) !important;
	}
}
/* 320px phones at zoom 125 % (256px): «Configurar preferencias» on one line too */
@media (max-width: 280px) {
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyButtonsWrapper .CybotCookiebotDialogBodyButton,
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyButtonsWrapper #CybotCookiebotDialogBodyLevelButtonCustomize {
		padding-left: 10px !important;
		padding-right: 10px !important;
		font-size: 15px !important;
	}
}

/* --- Tablets and small computers: the same stacked card, a little more room ------------------------------------- */
@media (min-width: 601px) {
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge {
		bottom: 20px !important;
		width: calc(100% - 48px) !important;
		max-width: 560px !important;
		max-height: calc(100% - 40px) !important;
		padding: 22px 24px 24px !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader {
		margin-bottom: 10px !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogPoweredbyImage {
		width: 157px !important;
		margin: -18px -25px -15px -28px !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogPoweredbyCybot svg {
		height: 14px !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter {
		margin-top: 14px !important;
	}
}

/* --- Computers: text on the left, buttons on the right, the logo row with the X across the top ------------------ */
@media (min-width: 900px) {
	/* round 3: 24px above the bottom (16px «queda muy próxima al borde inferior») */
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge {
		bottom: 24px !important;
		width: calc(100% - 64px) !important;
		max-width: 860px !important;
		max-height: calc(100% - 48px) !important;
		padding: 18px 28px 20px !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 270px !important;
		grid-template-areas: "cabecera cabecera" "texto botones" !important;
		column-gap: 48px !important;
		align-items: center !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader {
		grid-area: cabecera !important;
		margin-bottom: 8px !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogTabContent { grid-area: texto !important; }
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter {
		grid-area: botones !important;
		align-self: center !important;
		margin: 0 !important;
	}
	/* round 3: easier to read (text was 15px / 1.45), more room under the title (was 6px), Cookiebot's mark 16px */
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContentTitle {
		margin-bottom: 12px !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyContentText {
		font-size: 16px !important;
		line-height: 1.55 !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogPoweredbyCybot svg {
		height: 16px !important;
	}
}

/* --- Phones held sideways (wide but short screens): the computer layout, smaller, so the card does not cover 3/4 of
   the screen (stacked it was 292px tall: 75 % at 844x390, 78 % at 667x375) ------------------------------------------ */
@media (min-width: 601px) and (max-width: 899px) and (max-height: 500px) {
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge {
		bottom: 12px !important;
		max-width: 760px !important;
		max-height: calc(100% - 24px) !important;
		padding: 16px 24px 18px !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge .CybotCookiebotDialogContentWrapper {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 230px !important;
		grid-template-areas: "cabecera cabecera" "texto botones" !important;
		column-gap: 28px !important;
		align-items: center !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogHeader {
		grid-area: cabecera !important;
		margin-bottom: 6px !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogPoweredbyImage {
		width: 141px !important;
		margin: -16.5px -22.7px -13.1px -24.8px !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogPoweredbyCybot svg {
		height: 13px !important;
	}
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogTabContent { grid-area: texto !important; }
	html body.sens-aviso-tarjeta #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogFooter {
		grid-area: botones !important;
		align-self: center !important;
		margin: 0 !important;
	}
}