/*
 * COMQUE public front: thin layer on top of the Xunta MAQINT template (lib/maqint-2.0.3, loaded first by the layout).
 * Visual language of www.xunta.gal: blue header bar with the white Xunta logo, centred container, blue headings,
 * blue footer with the logos. The palette lives in the custom properties below.
 * The CSP forbids inline styles, so every visual tweak lives here. Hooks used by our scripts or by the server
 * (hide, message, btn-close, f-error, solicitante-*, propiedade-*, ...) keep their names. The legacy cuadro_* classes of the
 * message boxes are still emitted for parity but carry no style (the look comes from .comque-box).
 */

:root {
	--comque-blue: #007bc4;
	--comque-blue-dark: #005e96;
	--comque-heading: #2172a3;
	--comque-text: #222222;
	--comque-muted: #5a5a5a;
	--comque-rule: #d9e2ea;
	--comque-border: #8a96a0;
	--comque-surface: #fafaf9;
	--comque-disabled: #edeff5;
	--comque-focus: #009ee0;
	--comque-error: #b00020;
	--comque-error-bg: #fdf1f2;
	--comque-success: #1e6b3a;
	--comque-success-bg: #eef7f0;
	--comque-content: 1140px;
	--comque-gutter: 16px;
}

/* MAQINT hides the wrapper until its own script shows it; this front does not load that script. Its side padding
   and min-width are reset so the header and footer bars span the whole viewport. */
#main-wrapper {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	height: auto;
	min-height: 100%;
	padding-right: 0;
	padding-left: 0;
}

html,
body {
	min-height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-bottom: 0;
	background: #ffffff;
	color: var(--comque-text);
	font-size: 16px;
	line-height: 1.6;
}

:focus-visible {
	outline: 3px solid var(--comque-focus);
	outline-offset: 2px;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 2000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 9.6px 16px;
	clip: auto;
	background: #19242f;
	color: #ffffff;
	border-radius: 4px;
}

/* Single centred column shared by header, content and footer so the logo lines up with the page title */
.comque-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--comque-content);
	margin: 0 auto;
	padding-right: var(--comque-gutter);
	padding-left: var(--comque-gutter);
}

/* Header bar (MAQINT's fixed 55px height, grey rule and shadow are reset) */
#main-header {
	flex-shrink: 0;
	height: auto;
	background: var(--comque-blue);
	border-bottom: 0;
	box-shadow: none;
	color: #ffffff;
}

/* Xunta institutional lockup: logo, a rule exactly as tall as the logo, then the two-line service name; everything left-aligned */
.comque-header-inner {
	--comque-header-logo-height: 44px;
	display: flex;
	align-items: center;
	min-height: 64px;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* The whole lockup is the home link; it must look identical to the plain lockup, so link colour and underline are reset (the header is outside #main-content, whose link rules do not apply) */
#main-header a.comque-header-home {
	display: flex;
	align-items: center;
	min-width: 0;
	color: #ffffff;
	text-decoration: none;
}

#main-header a.comque-header-home:hover {
	color: #ffffff;
	text-decoration: none;
}

#main-header a.comque-header-home:focus-visible {
	outline: 3px solid var(--comque-focus);
	outline-offset: 4px;
}

/* Centred on the full bar width, independent of the left-aligned lockup */
.comque-header-flame {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 32px;
	filter: brightness(0) invert(1);
	pointer-events: none;
}

@media (max-width: 767px) {
	.comque-header-flame {
		display: none;
	}
}

/* line-height and margins are neutralised so the logo sits at the true vertical centre */
.comque-header-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.comque-header-logo img {
	display: block;
	max-width: 100%;
	width: auto;
	height: var(--comque-header-logo-height);
	margin: 0;
}

/* The left border is the thin white rule; its height is the logo's, so both share the same vertical centre */
.comque-header-app {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: var(--comque-header-logo-height);
	margin-left: 10px;
	padding-left: 11px;
	border-left: 1px solid #ffffff;
}

.comque-header-name {
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.15;
}

.comque-header-name-line {
	display: block;
}

@media (max-width: 360px) {
	.comque-header-inner {
		--comque-header-logo-height: 36px;
	}

	.comque-header-app {
		margin-left: 8px;
		padding-left: 8px;
	}

	.comque-header-name {
		font-size: 14px;
	}
}

/* Language selector (xunta.gal style): icon at the right of the bar that opens a short list of languages */
.comque-lang {
	position: relative;
	flex-shrink: 0;
	margin-left: auto;
}

.comque-lang-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 4px;
	cursor: pointer;
	list-style: none;
}

.comque-lang-toggle::-webkit-details-marker {
	display: none;
}

.comque-lang-toggle:hover,
.comque-lang[open] > .comque-lang-toggle {
	background: var(--comque-blue-dark);
}

.comque-lang-toggle:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 0;
}

.comque-lang-toggle img {
	display: block;
	width: 24px;
	height: 24px;
}

.comque-lang-list {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 1000;
	box-sizing: border-box;
	min-width: 160px;
	max-width: calc(100vw - 2 * var(--comque-gutter));
	margin: 4px 0 0;
	padding: 4px 0;
	background: #ffffff;
	border: 1px solid var(--comque-rule);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	list-style: none;
}

#main-header .comque-lang-list a {
	display: block;
	padding: 10px 16px;
	color: var(--comque-text);
	text-decoration: none;
}

#main-header .comque-lang-list a:hover {
	background: var(--comque-surface);
	color: var(--comque-blue-dark);
}

#main-header .comque-lang-list a:focus-visible {
	outline: 3px solid var(--comque-focus);
	outline-offset: -3px;
}

#main-header .comque-lang-list a[aria-current="true"] {
	color: var(--comque-blue-dark);
	font-weight: 700;
}

#main-header .comque-lang-list a[aria-current="true"]::before {
	content: "\2713\00a0";
}

@media (max-width: 360px) {
	.comque-lang-toggle {
		width: 40px;
		height: 40px;
	}
}

/* Main content */
#main-wrapper > #main-content {
	flex: 1 0 auto;
	min-height: 0;
	margin: 0;
	padding: 0 0 40px;
	font-size: 16px;
	line-height: 1.6;
}

#main-content:focus {
	outline: none;
}

#main-content p {
	margin-bottom: 16px;
}

/* Instructions: numbered steps with the number in a blue circle */
.comque-steps {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	counter-reset: comque-step;
}

.comque-steps > li {
	position: relative;
	margin-bottom: 14px;
	padding-left: 44px;
	min-height: 32px;
	counter-increment: comque-step;
}

.comque-steps > li::before {
	content: counter(comque-step);
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	background: var(--comque-blue);
	border-radius: 50%;
	color: #ffffff;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
}

/* Data-protection first layer: visible, visually apart from the instructions */
.comque-privacy {
	margin: 24px 0 16px;
	padding: 16px 20px 4px;
	background: var(--comque-surface);
	border: 1px solid var(--comque-rule);
	border-left: 4px solid var(--comque-blue);
	border-radius: 3px;
	font-size: 14px;
	line-height: 1.6;
}

/* The form's instructions reuse the callout at body size, with comfortable line length */
.comque-privacy.comque-instructions {
	margin: 0 0 8px;
	padding-bottom: 2px;
	font-size: 16px;
}

/* No max-width: the text runs to the right edge of the callout */
.comque-instructions .comque-steps {
	margin: 0;
}

.comque-privacy > .comque-bold {
	font-size: 15px;
}

.comque-privacy a {
	overflow-wrap: anywhere;
}

#main-content a {
	color: var(--comque-blue-dark);
}

#main-content a:hover {
	color: var(--comque-heading);
}

/* Links are underlined (not only coloured); on hover/focus the line thickens so the state stays visible. Buttons excluded */
#main-content a:not(.btn) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

#main-content a:not(.btn):hover,
#main-content a:not(.btn):focus {
	text-decoration-thickness: 2px;
}

.comque-link-icon {
	margin-right: 6px;
	font-size: 0.85em;
}

.comque-title,
.comque-heading {
	margin: 28px 0 12px;
	color: var(--comque-heading);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.2;
}

.comque-title {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--comque-rule);
	font-size: 26px;
}

/* Error page: MAQINT jumbotron (centred, no background) with the illustration band right above the footer */
.jumbotron.comque-error-jumbotron {
	margin: 0;
	padding: 48px 0 32px;
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
	text-align: center;
}

.comque-error-jumbotron h1 {
	margin: 0 0 16px;
	font-size: 36px;
	line-height: 1.2;
}

/* Styled like MAQINT's h3 without the h1 -> h3 heading jump */
.comque-error-jumbotron .comque-error-subtitle,
.comque-error-jumbotron .comque-error-home {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
}

#main-content .comque-error-home a {
	color: var(--comque-blue);
	text-transform: uppercase;
	text-decoration: none;
}

#main-content .comque-error-home a:hover,
#main-content .comque-error-home a:focus {
	color: var(--comque-blue);
	text-decoration: underline;
}

#main-content .comque-error-home a:focus-visible {
	outline: 3px solid var(--comque-focus);
	outline-offset: 3px;
}

/* Decorative full-width band (rendered outside the container, so no horizontal overflow); layering as MAQINT's .bottom-bg-XXX */
.comque-error-art {
	width: 100%;
	height: min(60vh, 560px);
	background-position: bottom center, bottom center;
	background-repeat: no-repeat, repeat-x;
	background-size: contain;
}

.comque-error-art--500 {
	background-image: url(../lib/maqint-2.0.3/images/error/anchor_fish_bg.png), url(../lib/maqint-2.0.3/images/error/fish_anchor_line_bg.png);
}

.comque-error-art--404 {
	background-image: url(../lib/maqint-2.0.3/images/error/anchor_cancer_bg.png), url(../lib/maqint-2.0.3/images/error/cancer_anchor_line_bg.png);
}

.comque-error-art--403 {
	background-image: url(../lib/maqint-2.0.3/images/error/anchor_birds_bg.png), url(../lib/maqint-2.0.3/images/error/birds_anchor_line.png);
}

/* Page sections (Instrucións, Datos de acceso, Máis información) are separated by a thin rule */
#main-content section + section {
	margin-top: 8px;
	border-top: 1px solid var(--comque-rule);
}

.comque-bold {
	font-weight: 700;
}

/* Fields */
.control-label,
.f-label {
	font-weight: 400;
}

.form-group {
	margin-bottom: 14px;
	font-size: 15px;
}

.form-group label,
.form-group .control-label {
	font-size: 14px;
}

.form-group > .f-label {
	display: block;
	margin-bottom: 4px;
}

/* The legacy shows the required fields in bold (estilos.css .campo_obrigatorio); the asterisk is added so they are also
   recognisable without relying on weight, and the form footnote refers to it. The group prefix raises the specificity
   over MAQINT's `.form-group label` */
.form-group .campo_obrigatorio,
.f-label.campo_obrigatorio {
	font-weight: 700;
}

.campo_obrigatorio::after {
	content: " *";
	color: var(--comque-error);
}

.form-control {
	height: 38px;
	padding: 6px 12px;
	border: 1px solid var(--comque-border);
	border-radius: 3px;
	box-shadow: none;
	color: var(--comque-text);
	font-size: 15px;
}

.form-control:focus {
	border-color: var(--comque-blue);
	box-shadow: 0 0 0 2px rgba(0, 123, 196, .25);
}

/* A select showing its hidden placeholder option reads as empty; the open list keeps the normal colour */
select.form-control:has(option[hidden]:checked),
select.form-control:has(option:disabled:checked) {
	color: var(--comque-muted);
}

select.form-control option {
	color: var(--comque-text);
}

/* Disabled selects (dependent location cascade) must read as inactive */
.form-control[disabled],
.form-control[readonly] {
	background-color: var(--comque-disabled);
	color: var(--comque-muted);
	cursor: not-allowed;
	opacity: 1;
}

.form-control[readonly] {
	cursor: default;
}

.comque-narrow {
	max-width: 420px;
}

/* Fields of a row share its height even when a read-only value replaces an input (they are toggled by our script) */
.comque-row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -8px;
	margin-left: -8px;
}

.comque-row::before,
.comque-row::after {
	display: none;
}

.comque-row > [class*="col-"] {
	padding-right: 8px;
	padding-left: 8px;
}

.form-control-static.f-value {
	min-height: 38px;
	margin: 0;
	padding: 7px 12px;
	background: var(--comque-disabled);
	border: 1px solid var(--comque-rule);
	border-radius: 3px;
	font-size: 15px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.f-error {
	margin-top: 4px;
	color: var(--comque-error);
	font-size: 14px;
	font-weight: 400;
}

.form-group.has-error .control-label,
.form-group.has-error .checkbox label,
.form-group.has-error label {
	color: inherit;
}

.form-group.has-error .form-control {
	border-color: var(--comque-error);
	box-shadow: none;
}

.has-error .f-error {
	color: var(--comque-error);
}

/* Server validation error on a group of controls (relationship radios, consent checkbox): the label turns red and a red
   bar marks the group; the aria-invalid attribute marks the group itself, so the "other" text box keeps its own border */
.comque-fieldset > .form-group.has-error label {
	color: var(--comque-error);
}

.comque-fieldset > .form-group.has-error,
.form-group.has-error [role="group"][aria-invalid="true"] {
	padding-left: 12px;
	border-left: 4px solid var(--comque-error);
}

.form-group.has-error [role="group"][aria-invalid="true"] .form-control:not([aria-invalid="true"]) {
	border-color: var(--comque-border);
}

/* A whole group in error (the start-page consent checkbox) gets its message after the group: the group and label bottom
   margins move below the message so it sits right under the label and the next block keeps its usual distance */
.form-group.error,
.form-group.error > label {
	margin-bottom: 0;
}

.form-group.error + .f-error {
	margin-top: 4px;
	margin-bottom: 14px;
}

/* The legacy shows the consent label of the start page in bold as well (index.php inline style) */
.form-group .comque-confirm-label {
	font-weight: 700;
	font-size: 14px;
}

.comque-confirm-label > input,
.f-label > input {
	margin-right: 4px;
}

/* Form sections: a blue legend over a thin rule instead of boxes */
.comque-fieldset {
	min-width: 0;
	margin: 0;
	padding: 0 0 12px;
	border: 0;
}

.comque-fieldset + .comque-fieldset {
	margin-top: 8px;
	border-top: 1px solid var(--comque-rule);
}

.comque-fieldset legend {
	width: 100%;
	margin: 20px 0 14px;
	padding: 0;
	border: 0;
	color: var(--comque-heading);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.2;
}

.comque-fieldset > p {
	margin-bottom: 10px;
}

.comque-fieldset > .form-group {
	margin: 10px 0;
}

.comque-choice {
	display: inline-block;
	margin: 0 20px 6px 5px;
	font-size: 15px;
}

.comque-choice > input {
	margin-right: 4px;
}

.comque-choice > .f-label {
	display: inline;
	font-size: 15px;
}

.comque-choice > .form-control {
	display: inline-block;
	width: 240px;
	max-width: 100%;
	margin-left: 8px;
	vertical-align: middle;
}

.comque-date-icon {
	margin-right: 8px;
	color: var(--comque-heading);
	font-size: 15px;
	vertical-align: -1px;
}

.date-range > .f-value {
	color: var(--comque-text);
	font-weight: 700;
}

.date-range,
.date-range > .f-label {
	font-size: 15px;
}

/* Consent and dates fieldsets side by side on wide screens */
.comque-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 32px;
	align-items: stretch;
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px solid var(--comque-rule);
}

/* Each fieldset is an equal-height card like the instructions callout. The legend floats so it stays inside the border
   (a plain legend would sit on it) and the following content clears it */
#frmDatosCom .comque-pair > .comque-fieldset,
#frmDatosCom .comque-pair > .comque-fieldset + .comque-fieldset {
	margin-top: 0;
	padding: 16px 20px 4px;
	background: var(--comque-surface);
	border: 1px solid var(--comque-rule);
	border-left: 4px solid var(--comque-blue);
	border-radius: 3px;
}

#frmDatosCom .comque-pair > .comque-fieldset > legend {
	float: left;
	margin: 0 0 12px;
}

#frmDatosCom .comque-pair > .comque-fieldset > legend + * {
	clear: both;
}

@media (max-width: 991px) {
	.comque-pair {
		display: block;
	}

	#frmDatosCom .comque-pair > .comque-fieldset + .comque-fieldset {
		margin-top: 12px;
	}
}

/* The form page is dense: tighter section, field and button spacing than the start page (readable font sizes are kept) */
#frmDatosCom .comque-fieldset {
	padding-bottom: 4px;
}

#frmDatosCom .comque-fieldset + .comque-fieldset {
	margin-top: 4px;
}

#frmDatosCom .comque-fieldset legend {
	margin: 12px 0 8px;
}

#frmDatosCom .form-group {
	margin-bottom: 12px;
}

#frmDatosCom .comque-fieldset > .comque-actions {
	padding: 0 0 4px;
}

#frmDatosCom .comque-note {
	margin: 4px 0 0;
}

.comque-note {
	margin: 16px 0;
	font-size: 14px;
	font-weight: 700;
}

/* Button rows: MAQINT's .modal-footer is reset; start page left-aligned, form right-aligned */
.comque-actions {
	margin: 0;
	padding: 12px 0;
	background: transparent;
	border: 0;
	text-align: left;
}

#frmDatosCom .comque-actions {
	text-align: right;
}

.comque-actions .btn + .btn {
	margin-left: 0;
}

.btn {
	border-radius: 3px;
	font-size: 15px;
}

/* Institutional blue instead of Bootstrap's green/blue (the classes stay: scripts and tests rely on them) */
.btn-success,
.btn-primary,
.btn-success[disabled],
.btn-primary[disabled] {
	background-color: var(--comque-blue);
	border-color: var(--comque-blue-dark);
	color: #ffffff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--comque-blue-dark);
	border-color: #004a78;
	color: #ffffff;
}

/* Links styled as buttons keep the button colour: the generic "#main-content a" colour would out-specify it */
#main-content a.btn-success,
#main-content a.btn-primary,
#main-content a.btn-success:hover,
#main-content a.btn-success:focus,
#main-content a.btn-success:active,
#main-content a.btn-primary:hover,
#main-content a.btn-primary:focus,
#main-content a.btn-primary:active {
	color: #ffffff;
	text-decoration: none;
}

/* Messages (server-rendered by _Messages.cshtml and built by comque.js): boxes with a coloured left border */
#notification:empty {
	display: none;
}

#notification {
	z-index: 900;
}

#notification.notification-sticky {
	position: sticky;
	top: 5px;
}

.message {
	position: relative;
	margin: 16px 0;
}

.comque-box {
	padding: 12px 16px 4px;
	background: var(--comque-error-bg);
	border: 1px solid var(--comque-error);
	border-left-width: 6px;
	border-radius: 3px;
	color: var(--comque-error);
	font-size: 16px;
}

.comque-box + .comque-box {
	margin-top: 16px;
}

.message-closable {
	padding-right: 40px;
}

.comque-box.message-SUCCESS {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	font-size: inherit;
}

.comque-box.message-SUCCESS + .comque-box {
	margin-top: 16px;
}

/* The home confirmation separates its title from the text with two <br>: the title is styled as a heading instead */
.message-SUCCESS .contenedor_texto_dous > strong:first-child + br,
.message-SUCCESS .contenedor_texto_dous > strong:first-child + br + br {
	display: none;
}

.message .contenedor_texto_dous {
	display: block;
	overflow-wrap: anywhere;
}

.message .contenedor_texto_dous > :last-child {
	margin-bottom: 10px;
}

/* Error summary of several validation failures: one item per failure, linking to its field */
.comque-error-list {
	margin: 0;
	padding-left: 18px;
}

.comque-error-list li + li {
	margin-top: 4px;
}

/* The id selector matches the specificity of the generic link colour of #main-content */
#main-content .comque-error-list a,
#main-content .comque-error-list a:hover {
	color: var(--comque-error);
}

.message-SUCCESS .contenedor_texto_dous > strong:first-child,
.message-SUCCESS .contenedor_texto_dous > p:first-child > strong {
	display: block;
	margin: 28px 0 10px;
	color: var(--comque-heading);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.2;
}

.message-SUCCESS p.normal {
	margin-bottom: 10px;
}

/* Receipt of a registered communication: the success screen laid out from the receipt parts */
.comque-receipt {
	margin: 16px 0;
}

.comque-receipt-banner {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--comque-success-bg);
	border: 1px solid var(--comque-success);
	border-radius: 3px;
	color: var(--comque-success);
	font-size: 16px;
}

.comque-receipt-banner .glyphicon {
	margin-right: 10px;
	font-size: 1.2em;
	vertical-align: -2px;
}

.comque-receipt-number {
	margin: 0 0 16px;
	padding: 20px 20px 8px;
	background: var(--comque-surface);
	border: 1px solid var(--comque-rule);
	border-left: 4px solid var(--comque-blue);
	border-radius: 3px;
	text-align: center;
}

.comque-receipt-number p {
	margin: 0 0 12px;
}

.comque-receipt-number-value {
	color: var(--comque-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
}

.comque-receipt-dates {
	font-size: 15px;
}

.comque-receipt-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
	margin: 0 0 16px;
}

.comque-receipt-card {
	min-width: 0;
	padding: 16px 20px 4px;
	background: var(--comque-surface);
	border: 1px solid var(--comque-rule);
	border-left: 4px solid var(--comque-blue);
	border-radius: 3px;
}

.comque-receipt-card h2 {
	margin: 0 0 12px;
	color: var(--comque-heading);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
}

.comque-receipt-card dl {
	margin: 0;
}

.comque-receipt-card dt {
	color: var(--comque-muted);
	font-size: 14px;
	font-weight: 400;
}

.comque-receipt-card dd {
	margin: 0 0 12px;
	overflow-wrap: anywhere;
}

.comque-receipt-requested {
	margin: 0 0 16px;
	color: var(--comque-muted);
	font-size: 14px;
}

.comque-receipt-notice {
	margin-top: 0;
	padding-bottom: 12px;
}

.comque-receipt-notice p {
	margin: 0 0 8px;
}

.comque-receipt-signature {
	margin: 0;
	color: var(--comque-muted);
	font-size: 14px;
}

@media (max-width: 991px) {
	.comque-receipt-cards {
		display: block;
	}

	.comque-receipt-card + .comque-receipt-card {
		margin-top: 12px;
	}
}

@media (max-width: 599px) {
	.comque-receipt-number-value {
		font-size: 28px;
	}
}

.message .btn-close {
	position: absolute;
	top: 6px;
	right: 10px;
	color: inherit;
}

.message[hidden] {
	display: none;
}

/* "Processing" layer (comque.showProcess) */
.comque-process-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #19242f;
	opacity: .45;
	z-index: 1000;
	cursor: wait;
}

.comque-process-box {
	position: fixed;
	top: 40%;
	left: 50%;
	width: min(90vw, 384px);
	margin: 0;
	transform: translateX(-50%);
	z-index: 1011;
	cursor: wait;
}

.comque-spin {
	animation: comque-spin .9s linear infinite;
}

@keyframes comque-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.comque-spin {
		animation-duration: 3s;
	}
}

/* Footer: single blue band, three blocks (MAQINT's fixed-height footer is reset) */
#main-footer {
	flex-shrink: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--comque-blue);
	color: #ffffff;
	font-size: 14px;
	line-height: 1.5;
}

/* Three fixed columns (logo, text, contact) so the blocks never wrap onto a new line on desktop */
.comque-footer-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px 32px;
	padding-top: 16px;
	padding-bottom: 16px;
}

#main-footer #footer-logo {
	float: none;
	width: auto;
	height: auto;
	padding: 0;
}

#main-footer #footer-logo img {
	display: block;
	max-width: 100%;
	width: auto;
	height: 40px;
}

#main-footer #footer-text,
#main-footer #footer-menu {
	float: none;
	width: auto;
	padding: 0;
}

#main-footer #footer-text {
	text-align: center;
}

#main-footer #footer-menu {
	text-align: right;
}

#main-footer #footer-contact {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 12px 16px;
}

#main-footer a.link {
	color: #ffffff;
	text-decoration: underline;
}

#main-footer a.link:hover,
#main-footer a.link:focus {
	color: #ffffff;
	text-decoration: none;
}

#main-footer .footer-feder img {
	display: block;
	height: 36px;
	max-width: 100%;
	width: auto;
	padding: 2px 4px;
	background: #ffffff;
	border-radius: 2px;
}

@media (max-width: 767px) {
	.comque-footer-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	#main-footer #footer-contact {
		flex-direction: column;
		justify-self: center;
	}

	#main-footer #footer-menu {
		text-align: center;
	}
}

@media (max-width: 767px) {
	.comque-actions .btn {
		max-width: 100%;
		white-space: normal;
	}

	#frmDatosCom .comque-actions {
		text-align: left;
	}

	.comque-title {
		font-size: 22px;
	}

	.comque-error-jumbotron h1 {
		font-size: 28px;
	}

	.comque-error-jumbotron .comque-error-subtitle,
	.comque-error-jumbotron .comque-error-home {
		font-size: 18px;
	}

	.comque-error-art {
		height: 240px;
	}

	.comque-heading,
	.comque-fieldset legend,
	.message-SUCCESS .contenedor_texto_dous > strong:first-child,
	.message-SUCCESS .contenedor_texto_dous > p:first-child > strong {
		font-size: 19px;
	}
}

@media print {
	.comque-error-art {
		display: none;
	}

	#frmDatosCom .comque-pair > .comque-fieldset {
		background: transparent;
	}

	.comque-receipt-banner,
	.comque-receipt-number,
	.comque-receipt-card,
	.comque-receipt-notice {
		background: transparent;
		border-color: var(--comque-border);
		border-left-width: 1px;
		box-shadow: none;
		color: var(--comque-text);
	}

	.comque-receipt-number-value,
	.comque-receipt-card h2,
	.comque-receipt-card dt,
	.comque-receipt-requested,
	.comque-receipt-signature {
		color: var(--comque-text);
	}

	.comque-receipt-card,
	.comque-receipt-number {
		break-inside: avoid;
	}

	.skip-link,
	.btn,
	#footer-logo,
	.footer-feder,
	.comque-header-logo {
		display: none;
	}

	#main-header,
	#main-footer {
		background: transparent;
		color: var(--comque-text);
	}

	#main-footer a.link {
		color: var(--comque-text);
	}

	.comque-header-name {
		color: var(--comque-text);
	}

	/* Without the logo the rule and the two-line stacking make no sense: the name prints on one line */
	.comque-header-inner {
		display: block;
		min-height: 0;
	}

	.comque-header-app {
		display: block;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.comque-header-name-line {
		display: inline;
	}

	.comque-footer-inner {
		grid-template-columns: 1fr auto;
	}
}