/**
 * Native <dialog> component (scaem-dialog).
 *
 * One styling layer for the new-era dialog system, the counterpart to the
 * Bootstrap-only modal system. Layout uses flex/grid only — no float, no
 * negative-margin overlays.
 *
 * Responsive contract:
 *   - below 768px the dialog fills the viewport (100dvh, no page scroll behind);
 *   - at 768px and above it is content-sized, centered, max-height 90dvh with a
 *     scrollable body.
 */

:root {
	--scaem-dialog-radius: 10px;
	--scaem-dialog-gap: 16px;
	--scaem-dialog-padding: 20px;
	--scaem-dialog-bg: #fff;
	--scaem-dialog-color: #3d4461;
	--scaem-dialog-border: #e3e6ef;
	--scaem-dialog-shadow: 0 24px 60px rgba(20, 30, 60, 0.35);
	--scaem-dialog-backdrop: rgba(24, 32, 54, 0.55);
	--scaem-dialog-danger: #d64545;
	--scaem-dialog-control-height: 50px;
	--scaem-dialog-font-size: 14px;
	/* Global sizing for the dialog base component: one width token and one
	   viewport cap shared by every dialog variant. */
	--scaem-dialog-width: 871px;
	--scaem-dialog-width-narrow: 504px;
	--scaem-dialog-max-width: calc(100vw - 2rem);
}

dialog.scaem-dialog {
	position: fixed;
	inset: 0;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--scaem-dialog-radius);
	background: var(--scaem-dialog-bg);
	color: var(--scaem-dialog-color);
	width: min(var(--scaem-dialog-width), var(--scaem-dialog-max-width));
	max-width: var(--scaem-dialog-max-width);
	max-height: 90dvh;
	box-shadow: var(--scaem-dialog-shadow);
	overflow: hidden;
	font:
		400 14px/24px "Poppins",
		Arial,
		Helvetica,
		sans-serif;
}

/* Prompt/confirm dialogs are narrower on desktop (30% less than the base width). */
dialog.scaem-dialog--confirm,
dialog.scaem-dialog--prompt,
dialog.scaem-dialog--alert {
	width: min(var(--scaem-dialog-width-narrow), var(--scaem-dialog-max-width));
	max-width: var(--scaem-dialog-max-width);
}

dialog.scaem-dialog:not([open]) {
	display: none;
}

dialog.scaem-dialog[open] {
	display: flex;
	flex-direction: column;
	animation: scaem-dialog-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

dialog.scaem-dialog::backdrop {
	background: var(--scaem-dialog-backdrop);
}

dialog.scaem-dialog[open]::backdrop {
	animation: scaem-dialog-backdrop-in 200ms ease-out;
}

/* Subtle shared entrance for every dialog: a barely-there fade and rise. */
@keyframes scaem-dialog-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scaem-dialog-backdrop-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	dialog.scaem-dialog[open],
	dialog.scaem-dialog[open]::backdrop {
		animation: none;
	}
}

.scaem-dialog__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--scaem-dialog-gap);
	padding: 13px var(--scaem-dialog-padding);
}

.scaem-dialog__title {
	margin: 0;
	font-size: 18px;
	line-height: 26px;
	font-weight: 500;
}

/* Alert severity accents the title only; layout stays shared. */
.scaem-dialog--success .scaem-dialog__title {
	color: #2e9e5b;
}

.scaem-dialog--warning .scaem-dialog__title {
	color: #b7791f;
}

.scaem-dialog--error .scaem-dialog__title {
	color: var(--scaem-dialog-danger);
}

.scaem-dialog__close {
	appearance: none;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--secthemecolor, #ff5851);
	font-size: 20px;
	line-height: 26px;
	cursor: pointer;
}

.scaem-dialog__close:focus,
.scaem-dialog__close:focus-visible,
.scaem-dialog__close:active {
	outline: none;
	border: 0;
	box-shadow: none;
}

/* Keep the default black focus/active outline off every dialog control. */
.scaem-dialog button:focus,
.scaem-dialog button:active,
.scaem-dialog a:focus,
.scaem-dialog a:active {
	outline: none;
	box-shadow: none;
}

/* Keyboard-only focus keeps a subtle brand ring instead of the black outline. */
.scaem-dialog button:focus-visible,
.scaem-dialog a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(63, 171, 243, 0.35);
}

.scaem-dialog__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--scaem-dialog-gap);
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 30px;
}

/* Prompt dialogs wrap body + footer in a form; it must be the flex column
   that lets the body grow and scroll inside the dialog. */
.scaem-dialog__form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.scaem-dialog__footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding: 16px var(--scaem-dialog-padding);
}

.scaem-dialog__button {
	min-width: 120px;
}

/* Primary dialog actions are solid blue by default; the shared .scaem-btn hover
   filter darkens them on hover. */
.scaem-dialog .sync-carrera,
.scaem-dialog #guardar-fie,
.scaem-dialog #carnet-save-adjustment,
.scaem-dialog .probar-enlace,
.scaem-dialog__adjust-button,
.scaem-dialog__confirm-accept,
.scaem-dialog__prompt-confirm,
.scaem-dialog__alert-confirm {
	background-color: var(--themecolor, #3fabf3);
	border-color: var(--themecolor, #3fabf3);
	color: #fff;
}

/* main.css forces `background: transparent` on `.scaem-btn[type="submit"]`
   (higher specificity than the single-class primary rule above); restore the
   filled primary look for submit actions inside a dialog. */
.scaem-dialog .scaem-btn[type="submit"] {
	background-color: var(--themecolor, #3fabf3);
	border-color: var(--themecolor, #3fabf3);
	color: #fff;
}

/* Secondary dialog actions are outline-only; the primary action stays filled. */
.scaem-dialog__prompt-cancel,
.scaem-dialog__confirm-cancel {
	background-color: transparent;
	border-color: var(--themecolor, #3fabf3);
	color: var(--themecolor, #3fabf3);
}

/* "Ajustar carnet" sits below the preview and spans its width. */
.scaem-dialog__adjust-button {
	display: block;
	width: 100%;
}

.scaem-dialog .carnet-editar {
	gap: 12px;
}

/* Standard form control: full column width. Visuals come from the shared
   form-control/select rules in main.css so the dialog matches the rest of the
   application. */
.scaem-dialog .form-control,
.scaem-dialog__control,
.scaem-dialog select {
	width: 100%;
	box-sizing: border-box;
	font-size: var(--scaem-dialog-font-size);
}

/* Legacy `#form-ficha-linkid input/select` rules (main.css, styles.carnet-listado.css,
   perapi.css) force 1.1rem; the View dialog must match the Edit dialog, so pin it
   to the shared dialog font size. The id keeps specificity above those legacy rules. */
.scaem-dialog #form-ficha-linkid input,
.scaem-dialog #form-ficha-linkid select {
	font-size: var(--scaem-dialog-font-size);
}

/* Disabled / read-only fields must read as non-interactive. */
.scaem-dialog .form-control:disabled,
.scaem-dialog .form-control[readonly],
.scaem-dialog__control:disabled,
.scaem-dialog select:disabled {
	background-color: #e9ecef;
	color: #6c757d;
	cursor: not-allowed;
}

/* Aligned field container: 12-column grid with a fixed label row. */
.scaem-dialog__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--scaem-dialog-gap);
	width: 100%;
}

/* Each cell stacks its own label + control with gap instead of margins. */
.scaem-dialog__grid > * {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.scaem-dialog__col-1 {
	grid-column: span 1;
}

.scaem-dialog__col-2 {
	grid-column: span 2;
}

.scaem-dialog__col-3 {
	grid-column: span 3;
}

.scaem-dialog__col-4 {
	grid-column: span 4;
}

.scaem-dialog__col-5 {
	grid-column: span 5;
}

.scaem-dialog__col-6 {
	grid-column: span 6;
}

.scaem-dialog__col-7 {
	grid-column: span 7;
}

.scaem-dialog__col-8 {
	grid-column: span 8;
}

.scaem-dialog__col-9 {
	grid-column: span 9;
}

.scaem-dialog__col-10 {
	grid-column: span 10;
}

.scaem-dialog__col-11 {
	grid-column: span 11;
}

.scaem-dialog__col-12 {
	grid-column: span 12;
}

/* Below the mobile breakpoint every column stacks full width. */
@media (max-width: 767.98px) {
	.scaem-dialog__grid > [class*="scaem-dialog__col-"] {
		grid-column: span 12;
	}
}

.scaem-dialog label {
	margin: 0;
	color: var(--terthemecolor, #3d4461);
}

.scaem-dialog__field-label {
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 26px;
	font-weight: 500;
}

/* Inline info icons carry a native tooltip (see openDialog in Dialog.js). */
.scaem-dialog .modo-edicion {
	display: inline-block;
	cursor: help;
}

/* Password field with a real eye toggle. */
.scaem-dialog__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.scaem-dialog__label {
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 26px;
	font-weight: 500;
}

.scaem-dialog__password {
	position: relative;
	display: block;
}

.scaem-dialog__password .scaem-dialog__control {
	padding-right: 52px;
}

.scaem-dialog__eye {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: var(--scaem-dialog-control-height);
	border: 0;
	background: transparent;
	color: #6b7280;
	cursor: pointer;
}

.scaem-dialog__message {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.scaem-dialog__message p {
	margin: 0;
}

.scaem-dialog__message .scaem-dialog__blank-line {
	height: 1em;
}

.scaem-dialog__error {
	display: block;
	color: var(--scaem-dialog-danger);
	font-size: 13px;
}

.scaem-dialog__error[hidden] {
	display: none;
}

@media (max-width: 767.98px) {
	dialog.scaem-dialog {
		inset: 0;
		margin: 0;
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}

	/* Full-bleed on mobile: fade only, so the rise never reveals an edge gap. */
	dialog.scaem-dialog[open] {
		animation: scaem-dialog-backdrop-in 200ms ease-out;
	}

	.scaem-dialog__body {
		padding: 20px;
	}
}

/* Native overlay dialog used by the carnet adjust editor. */
dialog.carnet-container-bg {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.25);
}

dialog.carnet-container-bg:not([open]) {
	display: none;
}

dialog.carnet-container-bg[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	animation: scaem-dialog-backdrop-in 200ms ease-out;
}

dialog.carnet-container-bg::backdrop {
	background: transparent;
}

/* Primary action inside the carnet adjust overlay (this dialog is not
   `.scaem-dialog`, so it needs its own filled-button rule). */
dialog.carnet-container-bg .scaem-btn {
	background-color: var(--themecolor, #3fabf3);
	border-color: var(--themecolor, #3fabf3);
	color: #fff;
}

/* Standard: in a dialog the secondary action is outline-only. In the carnet
   adjust overlay that is "Guardar Ajuste"; the primary action (print) stays
   filled. */
dialog.carnet-container-bg #carnet-save-adjustment {
	background-color: transparent;
	border-color: var(--themecolor, #3fabf3);
	color: var(--themecolor, #3fabf3);
}

/* Outline actions keep their outline look on hover — a light tint with blue
   text — instead of the shared .scaem-btn hover that fills them solid blue
   with white text. */
.scaem-dialog .scaem-dialog__prompt-cancel:not(:disabled):not([disabled]):hover,
.scaem-dialog .scaem-dialog__confirm-cancel:not(:disabled):not([disabled]):hover,
dialog.carnet-container-bg #carnet-save-adjustment:not(:disabled):not([disabled]):hover {
	background-color: rgba(63, 171, 243, 0.12);
	border-color: var(--themecolor, #3fabf3);
	color: var(--themecolor, #3fabf3) !important;
	filter: none !important;
	box-shadow: none;
}

/* CAV code under the QR, sized for the dialog carnet. */
.scaem-dialog #cav-carnet {
	font-size: 1.15rem;
}

@media (max-width: 767.98px) {
	.scaem-dialog #cav-carnet {
		font-size: 1.83rem;
	}
}