/**
 * El armazón de la aplicación.
 *
 * Para adaptarlo a un proyecto basta con el bloque `:root`: color, radio,
 * tipografía y anchuras salen de ahí. Lo demás describe la estructura, que no
 * cambia entre proyectos.
 *
 * Todo cuelga de `.smx-page`, la clase que el plugin añade al body solo en la
 * página de la aplicación: así nada de esto alcanza al resto del sitio.
 */

:root {
	--smx-brand: #5368a5;
	--smx-brand-dark: #3f5189;
	--smx-brand-soft: #eceff7;
	--smx-accent: #deaa03;
	--smx-accent-soft: #fbf1d3;
	--smx-accent-ink: #6e5300;
	--smx-ink: #1c1c1c;
	--smx-ink-soft: #666666;
	--smx-line: #e6e6e6;
	--smx-line-strong: #cccccc;
	--smx-bg: #f7f7f7;
	--smx-surface: #ffffff;
	--smx-ok: #1f6b3a;
	--smx-ok-bg: #e7f4ec;
	--smx-error: #b42318;
	--smx-error-bg: #fdecea;
	--smx-radius: 10px;
	/* Alto único de campos, botones y librerías: cambiarlo aquí los mueve a todos */
	--smx-control: 40px;
	--smx-radius-lg: 14px;
	--smx-menu-width: 288px;
	/* Montserrat no se carga aquí: la carga el tema `bacata` en todo el sitio */
	--smx-font: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* La forma de la flecha del desplegable. Se usa como máscara, así que el
	   color de dentro da igual: lo pone `background-color` */
	--smx-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5 2.5 6h11z'/%3E%3C/svg%3E");
}

.smx-page {
	color: var(--smx-ink);
	font-family: var(--smx-font);
	line-height: 1.3em;
}

/* El tema justifica el contenido de las páginas y pone los botones en
   mayúsculas: dentro de la aplicación, ninguna de las dos cosas */
.smx-main-auth, .smx-main-account { text-align: left; }

/* Con sesión, la aplicación ocupa la ventana: fuera la cabecera, el pie y el
   menú móvil del tema `bacata`. Sin sesión se ve el sitio normal. WhatsApp se queda.
   `.smx-session` lo pone el <head> mientras carga; si la sesión ya no vale, el
   acceso vuelve a mostrar el tema */
:is(html.smx-session body.smx-page:not(:has(.smx-main-auth)), body.smx-page:has(.smx-main-account))
	:is(#e89-header, .pre-footer, #e89-footer, #e89-mobile-nav, .e89-mobile-nav-overlay) { display: none; }

:is(html.smx-session body.smx-page:not(:has(.smx-main-auth)), body.smx-page:has(.smx-main-account)) { background: var(--smx-bg); }
:is(html.smx-session body.smx-page:not(:has(.smx-main-auth)), body.smx-page:has(.smx-main-account)) #e89-main-content { padding: 0; }
:is(html.smx-session body.smx-page:not(:has(.smx-main-auth)), body.smx-page:has(.smx-main-account)) #e89-main { background: var(--smx-bg); }
:is(html.smx-session body.smx-page:not(:has(.smx-main-auth)), body.smx-page:has(.smx-main-account)) #smx-main { min-height: 100vh; }

#smx-main {
	position: relative;
	min-height: 60vh;
}

/* ------------------------------------------------------------- cargadores */

.smx-loader {
	display: block;
	width: 28px;
	height: 28px;
	margin: 60px auto;
	border: 3px solid var(--smx-line);
	border-top-color: var(--smx-brand);
	border-radius: 50%;
	animation: smx-spin .7s linear infinite;
}

.smx-loader.hide { display: none; }

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

/* Quien respeta la preferencia del sistema no ve nada girando */
@media (prefers-reduced-motion: reduce) {
	.smx-loader { animation-duration: 2s; }
}

.smx-account-wrapper.show-loader { opacity: .4; pointer-events: none; }

/* ---------------------------------------------------------------- acceso */

/* El acceso va dentro del sitio, entre la cabecera y el pie del tema */
.smx-main-auth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 1260px;
	min-height: 560px;
	margin: 0 auto;
}

/* La presentación va a la izquierda, sobre la imagen, y el formulario a la derecha */
.smx-main-auth .main-info {
	background: linear-gradient(to top, rgba(4, 10, 36, .9), rgba(4, 10, 36, .2) 65%), url('../img/login-bg.jpg') center / cover no-repeat, #0a1633;
	color: #fff;
	display: flex;
	align-items: flex-end;
	border-radius: 20px;
	padding: 70px 9% 35px 9%;
}

.smx-main-auth .main-info .logo {
	display: block;
	margin-bottom: 18px;
}

.smx-main-auth .main-info .logo img { display: block; width: 100%; max-width: 250px; height: auto; }

.smx-main-auth .main-info .logo::before {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-bottom: 22px;
	border-radius: 2px;
	background: var(--smx-accent);
}

.smx-main-auth .main-info .claim { color: #fff; font-size: 1.05rem; max-width: 460px; }

.smx-main-auth .form-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 70px 9% 35px 9%;
	max-width: 500px;
	width: 100%;
	margin: 0 auto;
}

.smx-main-auth .form-box h2 { margin: 0 0 16px; font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; }
.smx-main-auth .form-box .alt { margin: 20px 0 0; font-size: .9rem; color: var(--smx-ink-soft); }
.smx-main-auth .form-box .help { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--smx-line); font-size: .9rem; color: var(--smx-ink-soft); }
.smx-main-auth .form-box a { color: var(--smx-brand); }
.smx-main-auth .form-box a.button { color: #fff; margin-top: 8px; }
.smx-main-auth [hidden] { display: none; }

/* ------------------------------------------------------------- estructura */

/* El fondo va aquí y no solo en el body: el tema pinta de blanco sus
   contenedores y lo tapa. La columna del menú se pinta desde aquí para que
   llegue hasta abajo aunque la página sea más alta que la ventana */
.smx-main-account {
	display: grid;
	grid-template-columns: var(--smx-menu-width) 1fr;
	min-height: 100vh;
	background: linear-gradient(to right, var(--smx-surface) calc(var(--smx-menu-width) - 1px), var(--smx-line) 0, var(--smx-line) var(--smx-menu-width), var(--smx-bg) 0);
}

/* El menú queda fijo a la altura de la ventana: la tarjeta del usuario no se
   pierde al bajar por una tabla larga */
.smx-account-menu-wrapper {
	position: sticky;
	top: 0;
	height: 100vh;
	box-sizing: border-box;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 28px 16px 20px;
	background: var(--smx-surface);
	border-right: 1px solid var(--smx-line);
}

.smx-account-menu-wrapper .menu-head { display: flex; align-items: center; justify-content: space-between; }

.smx-page .brand { display: flex; align-items: center; padding: 0 10px; }
.smx-page .brand img { display: block; width: 150px; height: auto; }

.smx-account-menu { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.smx-account-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.smx-account-menu > ul { flex: 1; }
.smx-account-menu ul ul { margin-top: 2px; }

.smx-account-menu .name {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: var(--smx-radius);
	color: #3d3d3d;
	text-decoration: none;
	font-size: .9rem;
	font-weight: 500;
	white-space: nowrap;
}

.smx-account-menu .name svg { flex: 0 0 18px; width: 18px; height: 18px; }
.smx-account-menu ul ul .name { min-height: 38px; padding-left: 44px; font-size: .85rem; }

.smx-account-menu a.name:hover { background: var(--smx-bg); color: var(--smx-ink); }

/* Una sección con hijos no es enlace: es un botón que despliega sus hijos, y se marca por dentro, en el hijo activo */
.smx-account-menu .toggle { width: 100%; box-sizing: border-box; border: 0; background: none; color: var(--smx-ink); font-family: inherit; font-size: .9rem; font-weight: 500; letter-spacing: normal; text-transform: none; text-align: left; cursor: pointer; }
.smx-account-menu .toggle:hover { background: var(--smx-bg); }
.smx-account-menu .toggle { padding-right: 8px; }
.smx-account-menu .toggle .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.smx-account-menu .toggle .chev { display: flex; flex: none; margin-left: -4px; }
.smx-account-menu .toggle .chev svg { width: 14px; height: 14px; flex: none; }
.smx-account-menu .toggle .chev svg:last-child, .smx-account-menu .has-sub.open > .toggle .chev svg:first-child { display: none; }
.smx-account-menu .has-sub.open > .toggle .chev svg:last-child { display: block; }
.smx-account-menu .has-sub:not(.open) > ul { display: none; }
.smx-account-menu .item.active > .toggle { font-weight: 700; }

.smx-account-menu .item.active > a.name {
	background: var(--smx-brand-soft);
	color: var(--smx-brand-dark);
	font-weight: 700;
}

.smx-account-menu .user-card {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 4px 8px 10px;
	border: 1px solid var(--smx-line);
	border-radius: 12px;
}

.smx-page .user-card .user {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	color: var(--smx-ink);
	text-decoration: none;
}

.smx-page .user-card .who { display: flex; flex-direction: column; min-width: 0; font-size: .85rem; font-weight: 600; }
.smx-page .user-card .who small { color: var(--smx-ink-soft); font-size: .75rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.smx-page .user-card .logout {
	flex: 0 0 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--smx-radius);
	color: var(--smx-ink-soft);
}

.smx-page .user-card .logout:hover { background: var(--smx-bg); color: var(--smx-error); }

.smx-page .avatar {
	display: block;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--smx-accent-soft) center/cover no-repeat;
}

.smx-account-wrapper { padding: 0; min-width: 0; transition: opacity .15s; }

/* La barra solo existe en móvil: en escritorio la marca y el usuario ya están
   en el menú */
.smx-account-wrapper .bar { display: none; }

.smx-account-content { padding: 40px 56px; }
.smx-account-content .smx-screen { max-width: 2000px; }
/* La cabecera: área, título y su explicación a la izquierda; la acción
   principal a la derecha, donde se busca, y no suelta entre el título y la tabla */
.smx-screen-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--smx-line);
}

.smx-screen-head .area {
	display: block;
	margin-bottom: 4px;
	color: var(--smx-brand);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.smx-screen-head .hint { margin: 6px 0 0; max-width: 60ch; }
.smx-screen-head .actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

/* Sin margen abajo: la línea que explica va pegada al título, y quien separa
   del contenido es la cabecera */
.smx-screen h1 { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; }
.smx-screen h2 { font-size: 1.25rem; font-weight: 700; }
.smx-screen .hint { color: var(--smx-ink-soft); font-size: .875rem; }
.smx-screen code { background: var(--smx-line); padding: 2px 5px; border-radius: 4px; font-size: .85em; }

/* Menú móvil: el botón y el velo solo existen por debajo del punto de corte */
.smx-menu-open, .smx-menu-overlay, .smx-account-menu-wrapper .close { display: none; }

/* --------------------------------------------------------------- tarjetas */

/* Un apartado dentro de una pantalla. Separa cosas que se guardan por
   separado: si dos bloques comparten botón, es que son uno */
.smx-block {
	background: var(--smx-surface);
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-radius-lg);
	padding: 28px 32px 12px;
	margin-bottom: 20px;
	max-width: 760px;
}

.smx-block h2 { margin: 0 0 4px; font-size: 1.1rem; }
.smx-block .hint { margin: 0 0 18px; color: var(--smx-ink-soft); font-size: .85rem; }

.smx-cards { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 25px; }

.smx-cards .card {
	background: var(--smx-surface);
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-radius-lg);
	padding: 20px 24px;
	min-width: 170px;
}

.smx-cards .num { display: block; font-size: 1.8rem; font-weight: 700; color: var(--smx-brand-dark); }
.smx-cards .label { color: var(--smx-ink-soft); font-size: .85rem; }

/* ----------------------------------------------------------- formularios */

.smx-form { display: flex; flex-wrap: wrap; gap: 0 16px; }

.smx-form .col { margin-bottom: 20px; }
.smx-form .col.full { width: 100%; }
.smx-form .col.half { width: calc(50% - 8px); }
.smx-form .col.third { width: calc(33.333% - 11px); }

/* Encerrado: el bloque se ve como una unidad, y la leyenda monta sobre el borde */
.smx-form fieldset {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-radius);
	margin: 4px 0 20px;
	padding: 20px 20px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.smx-form legend { padding: 0 8px; margin-left: -8px; font-weight: 600; font-size: 1rem; }
.smx-form fieldset .hint { width: 100%; margin: 4px 0 16px; color: var(--smx-ink-soft); font-size: .85rem; }

.smx-form .label { margin: 0 0 5px; font-size: .875rem; font-weight: 600; }
.smx-form .required > .label::after { content: " *"; color: var(--smx-error); }
.smx-form .desc { display: block; margin-top: 5px; color: var(--smx-ink-soft); font-size: .8rem; }

.smx-form input[type=text],
.smx-form input[type=email],
.smx-form input[type=password],
.smx-form input[type=number],
.smx-form input[type=tel],
.smx-form input[type=url],
.smx-form input[type=date],
.smx-form select,
.smx-form textarea {
	width: 100%;
	min-height: var(--smx-control);
	padding: 8px 14px;
	border: 1px solid var(--smx-line-strong);
	border-radius: var(--smx-radius);
	background: var(--smx-surface);
	font: inherit;
	font-size: .95rem;
	color: var(--smx-ink);
}

.smx-form textarea { min-height: 96px; }

/* Pesos: el signo es de la maqueta, no del texto, así que no se puede borrar */
.smx-money-wrap { position: relative; }
.smx-money-wrap .sym { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--smx-ink-soft); pointer-events: none; }
.smx-form .smx-money-wrap input { padding-left: 30px; }

/**
 * El desplegable se dibuja entero aquí, flecha incluida.
 *
 * **La hoja del plugin carga antes que las del tema**, y casi cualquier tema
 * pone `appearance: none` y su propia flecha de fondo. Dejando cualquiera de
 * las dos cosas sin declarar salen dos flechas, o ninguna, según el tema.
 */
.smx-form select {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--smx-surface);
	background-image: none;
	padding-right: 34px;
}

/**
 * La flecha, en un pseudo-elemento y no en el fondo del `select`.
 *
 * Como máscara, el SVG solo aporta la forma y **el color sale de la paleta**:
 * dentro de una URI de datos no se puede leer una variable CSS, así que
 * pintarla de fondo obligaba a repetir el color en hexadecimal.
 *
 * El envoltorio lo pone `smx_form_field()`. Envolver solo el control, y no el
 * campo entero, es lo que permite centrar la flecha sin depender de si el
 * campo lleva rótulo o nota.
 */
.smx-select-wrap {
	position: relative;
}

.smx-select-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
	width: 10px;
	height: 10px;
	transform: translateY(-50%);
	pointer-events: none;
	background-color: var(--smx-ink-soft);
	-webkit-mask: var(--smx-arrow) center / contain no-repeat;
	mask: var(--smx-arrow) center / contain no-repeat;
}

/**
 * El foco, y por qué lleva más de lo que parece necesario.
 *
 * **La hoja del plugin carga antes que las del tema**, así que a igualdad de
 * especificidad gana el tema. Y `select:focus` puntúa igual que
 * `.smx-form select`: cualquier cosa que el tema estilice en un estado vuelve a
 * ganar ahí aunque la regla base ya estuviera resuelta.
 *
 * Por eso el fondo y la flecha se repiten aquí. No es redundancia: sin esto, un
 * tema que dibuje su propia flecha en `select:focus` la devuelve al enfocar, y
 * salen dos.
 */
.smx-form input:focus, .smx-form select:focus, .smx-form textarea:focus {
	outline: 3px solid var(--smx-brand-soft);
	outline-offset: 0;
	border-color: var(--smx-brand);
	background-color: var(--smx-surface);
}

.smx-form select:focus {
	background-image: none;
}

.smx-form input[type=file] {
	width: 100%;
	box-sizing: border-box;
	padding: 14px;
	border: 1px dashed var(--smx-line-strong);
	border-radius: var(--smx-radius);
	background: var(--smx-surface);
	font: inherit;
	font-size: .9rem;
	color: var(--smx-ink-soft);
	cursor: pointer;
}

.smx-form input[type=file]::file-selector-button {
	margin-right: 14px;
	padding: 9px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--smx-brand-soft);
	color: var(--smx-brand-dark);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.smx-form input[readonly]:not(.smx-datepicker) { background: var(--smx-bg); color: var(--smx-ink-soft); }

/* El campo que el servidor señaló como incompleto o inválido */
.smx-form .error > input, .smx-form input.error, .smx-form .error > select, .smx-form .error > textarea {
	border-color: var(--smx-error);
}

.smx-form .option { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .9rem; }
.smx-form .option input { margin: 0; }
.smx-form .col.is-off { display: none; }

/* Las casillas en una fila, con el rótulo encima */
.smx-form .field-contributions { display: flex; flex-wrap: wrap; gap: 0 24px; }
.smx-form .field-contributions .label { width: 100%; }

.smx-toggle-pass { position: relative; }
.smx-toggle-pass .toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	padding: 6px;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--smx-ink-soft);
	cursor: pointer;
}
.smx-toggle-pass .toggle:hover { color: var(--smx-ink); }
.smx-toggle-pass .toggle svg + svg,
.smx-toggle-pass .toggle.is-visible svg:first-child { display: none; }
.smx-toggle-pass .toggle.is-visible svg + svg { display: block; }
.smx-toggle-pass input { padding-right: 44px !important; }

/* Buscador: la equis es nuestra, no la del navegador, que cada uno pinta a su
   manera. Se esconde mientras el campo está vacío —eso lo dice
   `:placeholder-shown`—, así que no hace falta JavaScript para mostrarla */
.smx-search { position: relative; }
.smx-search input { padding-right: 40px !important; }

.smx-search .clear {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	padding: 6px;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--smx-ink-soft);
	cursor: pointer;
}

.smx-search .clear:hover { color: var(--smx-ink); }
.smx-search input:placeholder-shown + .clear { display: none; }

.pass-rules { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: .8rem; }
.pass-rules li { padding: 4px 10px; border-radius: 999px; background: var(--smx-bg); color: var(--smx-ink-soft); }
.pass-rules li.ok { background: var(--smx-ok-bg); color: var(--smx-ok); }
.pass-rules li.ok::before { content: "✓ "; }

.cf-turnstile { width: 100%; margin-bottom: 16px; }

/**
 * Las tres librerías, ajustadas a la paleta.
 *
 * Traen su propio aspecto y **el suyo no es el de aquí**. Esto no las
 * reescribe: iguala borde, radio, tipografía y color con el resto de campos,
 * que es lo que hace que no parezcan pegadas.
 *
 * Van con `!important` en lo justo —las tres declaran alturas y colores con
 * selectores largos— y todo cuelga de `.smx-page`, así que no alcanza a lo que
 * el tema pueda tener con estas mismas librerías.
 */

/* select2 */
/* Solo el campo (`.select2`): la lista abierta también es `.select2-container`,
   cuelga del body, y a lo ancho de la ventana se salía de ella */
.smx-page .select2.select2-container { width: 100% !important; }

.smx-page .select2-container--default .select2-selection--single {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: auto;
	min-height: var(--smx-control);
	padding: 0 38px 0 14px;
	border: 1px solid var(--smx-line-strong);
	border-radius: var(--smx-radius);
	background: var(--smx-surface);
}

.smx-page .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--smx-ink);
	font-size: .95rem;
}

/* La flecha entera, porque el tema `bacata` también la redefine: ancho cero y
   el triángulo pegado arriba */
.smx-page .select2-container--default .select2-selection--single .select2-selection__arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	width: 20px;
	height: auto;
	margin: 0;
}

.smx-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -2px 0 0 -5px;
	border-style: solid;
	border-width: 5px 5px 0;
	border-color: var(--smx-ink-soft) transparent transparent;
}

.smx-page .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-width: 0 5px 5px;
	border-color: transparent transparent var(--smx-ink-soft);
}

.smx-page .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--smx-brand);
}

/* El desplegable se pinta al final del documento, fuera de `.smx-page`: se
   marca con `dropdownCssClass` para poder alcanzarlo */
.select2-dropdown.smx {
	border-color: var(--smx-line);
	border-radius: var(--smx-radius);
	overflow: hidden;
	font-family: var(--smx-font);
	font-size: .95rem;
}

.select2-dropdown.smx .select2-results__option--highlighted[aria-selected] {
	background: var(--smx-brand);
}

.select2-dropdown.smx .select2-search__field {
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-radius);
	padding: 7px 10px;
}

/* air-datepicker */
.smx-page .smx-datepicker { cursor: pointer; background: var(--smx-surface); }

.air-datepicker {
	--adp-font-family: var(--smx-font);
	--adp-accent-color: var(--smx-brand);
	--adp-color-current-date: var(--smx-brand);
	--adp-border-color: var(--smx-line);
	--adp-border-radius: var(--smx-radius);
	--adp-cell-border-radius: var(--smx-radius);
	--adp-day-name-color: var(--smx-ink-soft);
	/* Por encima de las ventanas emergentes (9999): sin esto el calendario se abre detrás */
	--adp-z-index: 10000;
}

/* intl-tel-input */
.smx-page .iti { width: 100%; display: block; }

.smx-page .iti__tel-input,
.smx-page input.smx-phone {
	width: 100%;
	min-height: var(--smx-control);
	padding: 8px 14px;
	border: 1px solid var(--smx-line-strong);
	border-radius: var(--smx-radius);
	background: var(--smx-surface);
	font: inherit;
	font-size: .95rem;
}

/* La bandera es un `<button>`: sin esto el tema le pone su fondo amarillo, su
   relleno y su desplazamiento al pasar el ratón, y el fondo se sale del borde redondeado */
.smx-page .iti { --iti-hover-color: var(--smx-line); }

.smx-page .iti .iti__selected-country,
.smx-page .iti .iti__selected-country:hover,
.smx-page .iti .iti__selected-country:focus {
	background: none;
	color: inherit;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	transform: none;
	transition: none;
}

.smx-page .iti .iti__selected-country-primary {
	border-radius: calc(var(--smx-radius) - 1px) 0 0 calc(var(--smx-radius) - 1px);
}

/* La lista de países se cuelga del `body`, fuera de `.smx-page` */
.iti__country-list, .iti__dropdown-content {
	font-family: var(--smx-font);
	font-size: .9rem;
	border-radius: var(--smx-radius);
	border-color: var(--smx-line);
}

/* El buscador de países lleva la lupa dibujada de fondo, y el texto se le monta
   encima. El hueco a la derecha es para la equis de limpiar */
input[type=search].iti__search-input {
	padding-left: 30px;
	padding-right: 28px;
}

/* --------------------------------------------------------------- botones */

.smx-page .button {
	background: var(--smx-brand);
	color: #fff;
	border: 0;
	border-radius: var(--smx-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--smx-control);
	padding: 8px 22px;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.smx-page .button:hover { background: var(--smx-brand-dark); }
.smx-page .button:disabled { opacity: .55; cursor: not-allowed; }

/* El icono va dentro del <span> del texto para que el giro de «cargando», que
   esconde el span, lo tape también */
.smx-page .button span:has(svg) { display: inline-flex; align-items: center; gap: 8px; }
.smx-page .button svg { width: 18px; height: 18px; flex: none; }

/* Secundario: mismo tamaño, menos peso. Se usa en «cancelar» y en acciones
   que acompañan a la principal sin competir con ella */
.smx-page a.button, .smx-page .button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	line-height: normal;
}

.smx-page .button.alt {
	background: var(--smx-surface);
	color: var(--smx-ink);
	border: 1px solid var(--smx-line-strong);
	font-weight: 500;
}

.smx-page .button.alt:hover { background: var(--smx-bg); color: var(--smx-ink); }

/* Los iconos de un botón de navegación, con aire respecto al texto */
.smx-page .button.nav svg { width: 22px; height: 22px; }
.smx-page .button.nav.prev svg { margin: 0 6px 0 -6px; }
.smx-page .button.nav.next svg { margin: 0 -6px 0 6px; }

/* Pares dato/valor de una ficha. Rejilla y no tabla: no son datos tabulares */
.smx-details { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 18px 0 0; font-size: .9rem; }
.smx-details dt { color: var(--smx-ink-soft); }
.smx-details dd { margin: 0; }

.tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--smx-bg);
	color: #454545;
	font-size: .78rem;
	font-weight: 600;
	white-space: nowrap;
}

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.smx-table .tags { margin-top: 6px; }
.smx-form .tags { width: 100%; margin: 0 0 16px; }

/* Una acción con el aspecto de una etiqueta: mismo tamaño, con borde y color de enlace */
.tag.link {
	background: var(--smx-surface);
	border: 1px solid var(--smx-line-strong);
	color: var(--smx-brand-dark);
	text-decoration: none;
}

.tag.link:hover { border-color: var(--smx-brand); background: var(--smx-brand-soft); }

/* El estado de una solicitud: en curso en azul, terminado en verde, y lo que
   espera a Sain en dorado */
/* En curso, en azul; terminado, en verde; lo que espera, en gris; y el fallo,
   en rojo. Un estado sin variante salía gris por defecto y no se distinguía */
.tag.status-importing, .tag.status-analyzing, .tag.status-processing, .tag.status-running { background: var(--smx-brand-soft); color: var(--smx-brand-dark); }
.tag.status-analyzed, .tag.status-done { background: var(--smx-ok-bg); color: var(--smx-ok); }
.tag.status-error { background: var(--smx-error-bg); color: var(--smx-error); }

/* Todavía no hay dato. Más apagado que el gris de una etiqueta con contenido */
.tag.muted { background: transparent; border: 1px solid var(--smx-line); color: var(--smx-ink-soft); font-weight: 500; }
.tag.ok { background: var(--smx-ok-bg); color: var(--smx-ok); }

/* Una novedad pide mirar, no es un fallo: amarillo suave, no rojo */
.tag.warn { background: var(--smx-accent-soft); color: var(--smx-accent-ink); }
.tag.pending { background: var(--smx-accent-soft); color: var(--smx-accent-ink); }

/* Acciones en pastilla: en texto plano se confundían con el contenido de la
   fila, y no se veía dónde se podía pulsar */
.smx-table .actions { white-space: nowrap; text-align: right; }
.smx-table .code, .smx-table .nowrap { white-space: nowrap; }

.smx-table .actions a, .smx-oc-informes a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 14px;
	margin-left: 8px;
	border: 1px solid var(--smx-line-strong);
	border-radius: 999px;
	background: var(--smx-surface);
	color: var(--smx-brand-dark);
	text-decoration: none;
	font-size: .85rem;
	font-weight: 600;
}

.smx-table .actions a:hover, .smx-oc-informes a:hover {
	border-color: var(--smx-brand);
	background: var(--smx-brand-soft);
}

.smx-table .actions a:first-child { margin-left: 0; }

/* Mientras se envía, el texto se sustituye por un giro: el botón sigue
   ocupando lo mismo y la pantalla no salta */
.smx-page .button.loading span { visibility: hidden; }
.smx-page .button.loading { position: relative; }
.smx-page .button.loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: smx-spin .7s linear infinite;
}

.col-submit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* En un filtro los campos no llevan etiqueta, así que el botón se alinea por
   arriba con ellos. Centrado, lo empujaba hacia abajo el margen de la columna */
.smx-filter .col-submit { align-self: flex-start; }

/* En un filtro: lo que se elige a la izquierda, la búsqueda a la derecha. El
   `auto` empuja el campo y arrastra consigo el botón, que va detrás */
.smx-form .col-right { margin-left: auto; }

/* ---------------------------------------------------------------- avisos */

.smx-msg { display: none; width: 100%; font-size: .875rem; border-radius: var(--smx-radius); }
.smx-msg.show { display: block; padding: 12px 16px; }
.smx-msg.ok { background: var(--smx-ok-bg); color: var(--smx-ok); }
.smx-msg.error { background: var(--smx-error-bg); color: var(--smx-error); }
.smx-msg.warning { background: var(--smx-accent-soft); color: var(--smx-accent-ink); }
.smx-msg.global.show { width: 100%; margin-bottom: 20px; }
.smx-msg a { color: inherit; text-decoration: underline; }

/* -------------------------------------------- resumen de una solicitud */

/* Los datos de la solicitud y lo que se puede hacer con ella. En párrafos
   sueltos no se distinguían del contenido de la pantalla */
.smx-oc-detalle {
	margin: 18px 0 24px;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-radius-lg);
	background: var(--smx-surface);
}

.smx-oc-detalle .datos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	padding: 14px 20px;
	font-size: .9rem;
}

.smx-oc-detalle .dato { display: inline-flex; align-items: center; gap: 8px; }
.smx-oc-detalle .datos svg { width: 18px; height: 18px; flex: none; color: var(--smx-ink-soft); }
.smx-oc-detalle .datos a.dato { color: var(--smx-brand-dark); font-weight: 600; text-decoration: none; }
.smx-oc-detalle .datos a.dato:hover { text-decoration: underline; }
.smx-oc-detalle .hint { margin: 0; padding: 0 20px 14px; }

/* La barra de acciones: a la izquierda lo que solo puede Sain, a la derecha
   los informes, que ve también el cliente */
.smx-oc-detalle .acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	padding: 14px 20px;
	border-top: 1px solid var(--smx-line);
	background: var(--smx-bg);
	border-radius: 0 0 var(--smx-radius-lg) var(--smx-radius-lg);
}

.smx-oc-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.smx-oc-informes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .9rem; }
.smx-oc-informes .etiqueta { color: var(--smx-ink-soft); }
.smx-oc-informes a { margin-left: 0; }
.smx-oc-informes a svg { width: 16px; height: 16px; margin-right: 7px; }

/* El historial de una persona: una entrada por consulta. En tabla, cinco
   columnas no cabían en la ventana y había que desplazarse */
.smx-oc-history-who { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; }
.smx-oc-history-who span { color: var(--smx-ink-soft); font-size: .9rem; }

.smx-oc-history-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-radius-lg);
}

.smx-oc-history-list li { padding: 14px 18px; border-bottom: 1px solid var(--smx-line); }
.smx-oc-history-list li:last-child { border-bottom: 0; }

.smx-oc-history-list .top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.smx-oc-history-list .date { color: var(--smx-ink-soft); font-size: .85rem; }
.smx-oc-history-list .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.smx-oc-history-list .cert { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0 0; font-size: .82rem; }
.smx-oc-history-list .cert span { color: var(--smx-ink-soft); }
.smx-oc-history-list .cert code { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }

/* Un bloque encerrado fuera de un formulario, con el aspecto de un fieldset.
   `min-width: 0` porque un fieldset no encoge por debajo de su contenido y la
   tabla de dentro desbordaba en móvil */
fieldset.smx-box {
	min-width: 0;
	margin: 24px 0 0;
	padding: 12px 20px 20px;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-radius);
	background: var(--smx-surface);
}
fieldset.smx-box > legend { padding: 0 8px; margin-left: -8px; font-weight: 600; font-size: 1rem; }

/* Nueva solicitud: los tres pasos. Todos con el alto de un botón, para que
   el del primero no descuadre la separación */
.smx-oc-pasos { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: paso; }
.smx-oc-pasos li {
	counter-increment: paso;
	display: grid;
	grid-template-columns: 28px 1fr;
	column-gap: 12px;
	align-items: center;
	min-height: var(--smx-control);
	line-height: 1.5;
}
.smx-oc-pasos li + li { margin-top: 6px; }
.smx-oc-pasos li::before { content: counter(paso); }
.smx-oc-pasos .button { margin-left: 10px; vertical-align: middle; }

/* El ejemplo imita la hoja de Excel: letras de columna y números de fila */
.smx-oc-ejemplo { max-width: 640px; overflow-x: auto; border: 1px solid var(--smx-line-strong); border-radius: var(--smx-radius); background: var(--smx-surface); }
.smx-oc-ejemplo table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.smx-oc-ejemplo th, .smx-oc-ejemplo td { padding: 6px 10px; border: 1px solid var(--smx-line); text-align: left; white-space: nowrap; }
.smx-oc-ejemplo tr > :first-child { border-left: 0; }
.smx-oc-ejemplo tr > :last-child { border-right: 0; }
.smx-oc-ejemplo thead th { border-top: 0; background: var(--smx-bg); color: var(--smx-ink-soft); font-weight: 600; text-align: center; }
.smx-oc-ejemplo tbody th { width: 1%; background: var(--smx-bg); color: var(--smx-ink-soft); font-weight: 600; text-align: center; }
.smx-oc-ejemplo tbody tr:last-child > * { border-bottom: 0; }
.smx-oc-ejemplo tr.cabecera td { background: var(--smx-brand-soft); font-weight: 700; }
.smx-oc-tipos { margin: 10px 0 24px; }

/* El resumen de la vista previa, una idea por línea */
.smx-oc-resumen p { margin: 0 0 6px; }
.smx-oc-resumen p:last-child { margin-bottom: 16px; }
.smx-oc-resumen .aviso { padding: 10px 14px; border-radius: var(--smx-radius); background: var(--smx-accent-soft); color: var(--smx-accent-ink); }
.smx-oc-resumen .aviso a { color: inherit; font-weight: 700; text-decoration: underline; }
.smx-oc-preview-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
#smx-oc-upload .smx-msg.show { margin-bottom: 16px; }

/* Créditos: el saldo en tarjetas, y lo que vence pronto en ámbar */
.smx-oc-sandbox { margin: 0 0 20px; padding: 10px 14px; border-radius: var(--smx-radius); background: var(--smx-accent-soft); color: var(--smx-accent-ink); font-size: .9rem; }
.smx-oc-saldo { margin-bottom: 8px; }
.smx-oc-saldo .num { font-size: 2.2rem; line-height: 1.1; }
.smx-oc-saldo .card.vencen { max-width: 280px; border-color: var(--smx-accent-soft); background: #fffbef; }
.smx-oc-saldo .card.vencen .num { color: var(--smx-accent-ink); }
.smx-oc-vencimiento { margin: 0 0 32px; }

/* Los pasos de la compra, numerados como los de Nueva solicitud */
.smx-oc-paso { display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 14px; font-size: 1.15rem; }
.smx-oc-paso span, .smx-oc-pasos li::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--smx-brand);
	color: #fff;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1;
}

/* Cada paquete es una tarjeta; el radio va escondido y la elegida se marca en azul */
.smx-oc-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; width: 100%; margin-bottom: 28px; }
.smx-oc-pack {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 20px;
	border: 2px solid var(--smx-line);
	border-radius: var(--smx-radius-lg);
	background: var(--smx-surface);
	cursor: pointer;
}
.smx-oc-pack:hover { border-color: var(--smx-line-strong); }
.smx-oc-pack:has(input:checked) { border-color: var(--smx-brand); background: var(--smx-brand-soft); }
.smx-oc-pack:has(input:focus-visible) { outline: 2px solid var(--smx-brand); outline-offset: 2px; }
.smx-oc-pack input { position: absolute; opacity: 0; pointer-events: none; }
.smx-oc-pack .credits { font-size: 1.8rem; font-weight: 700; line-height: 1.1; color: var(--smx-brand-dark); }
.smx-oc-pack .unit { color: var(--smx-ink-soft); font-size: .85rem; margin-bottom: 10px; }
.smx-oc-pack .price { font-size: 1.1rem; font-weight: 700; }
.smx-oc-pack .each { color: var(--smx-ink-soft); font-size: .8rem; }

/* La facturación guardada, en resumen. `hidden` necesita la regla: el
   fieldset de un formulario lleva display propio y lo pisaba */
.smx-oc-billing-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	width: 100%;
	margin-bottom: 20px;
	padding: 16px 20px;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-radius);
	background: var(--smx-surface);
	font-size: .9rem;
	line-height: 1.6;
}
.smx-oc-billing-summary p { margin: 0; }
.smx-oc-billing-summary[hidden], .smx-oc-billing[hidden] { display: none; }
#smx-oc-pay .smx-msg.show { margin-bottom: 16px; }
.smx-oc-billing-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* El desglose de los disponibles por fecha de vencimiento */
.smx-oc-saldo .bags { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--smx-line); color: var(--smx-ink-soft); font-size: .8rem; }
.smx-oc-historial { margin-top: 36px; }

/* Una lista vacía con el paso siguiente debajo */
.smx-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.smx-empty .hint { margin: 0; }

/* --------------------------------------------------------------- tablas */

.smx-table { width: 100%; border-collapse: collapse; background: var(--smx-surface); }
.smx-table th, .smx-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--smx-line); font-size: .9rem; }
.smx-table th { padding-top: 12px; padding-bottom: 12px; background: #fbfbfb; font-size: .8rem; font-weight: 600; color: var(--smx-ink-soft); }
.smx-table tr:last-child td { border-bottom: 0; }
.smx-table tbody tr:hover td { background: #fcfcfc; }

/* Una tabla ancha se desplaza dentro de su caja; la página nunca. La caja
   lleva el borde y el radio, para que el desplazamiento no los recorte */
.smx-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-radius-lg);
	background: var(--smx-surface);
}

/* ----------------------------------------------------------- paginación */

.smx-pagination { display: flex; gap: 5px; list-style: none; margin: 20px 0 0; padding: 0; }

/* El pie de una lista: el conteo a la izquierda, las páginas a la derecha */
.smx-list-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.smx-list-foot .count { margin: 0; color: var(--smx-ink-soft); font-size: .9rem; }
.smx-list-foot .smx-pagination { margin: 0; }
.smx-pagination a, .smx-pagination .current {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--smx-line);
	border-radius: var(--smx-radius);
	background: var(--smx-surface);
	color: var(--smx-ink);
	text-decoration: none;
	font-size: .9rem;
}
.smx-pagination a:hover { border-color: var(--smx-line-strong); }
.smx-pagination .current { background: var(--smx-brand); border-color: var(--smx-brand); color: #fff; font-weight: 600; }

/* ------------------------------------------------------------- ventanas */

.smx-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(28,28,28,.5);
	padding: 20px;
	overflow-y: auto;
}

.smx-popup.show { display: flex; align-items: flex-start; justify-content: center; }

.smx-popup .wrapper {
	background: var(--smx-surface);
	border-radius: var(--smx-radius-lg);
	/* La banda del título llega hasta el borde: sin esto asoman las esquinas */
	overflow: hidden;
	width: 100%;
	max-width: 560px;
	margin: auto;
}

/* La banda de color separa el título del formulario: en blanco sobre blanco los
   dos se leían como una sola cosa */
.smx-popup .head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	background: var(--smx-brand);
	border-bottom: 3px solid var(--smx-accent);
	border-radius: var(--smx-radius-lg) var(--smx-radius-lg) 0 0;
	color: #fff;
	font-size: .95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.smx-popup .head h2 {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	color: inherit;
}

.smx-popup .close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.smx-popup .close:hover { background: rgba(255, 255, 255, .28); }
.smx-popup .main { padding: 24px; }
.smx-popup .main p:first-child { margin-top: 0; }
.smx-popup .footer { padding: 0 24px 24px; }
.smx-popup .footer:has(.footer-content:empty) { padding: 0; }
.smx-popup .footer-content:empty { display: none; }

/* La ventana normal es estrecha y no da para columnas. La ancha sí, y ahí manda
   la regla general de media columna */
.smx-popup:not(.wide) .smx-form .col.half { width: 100%; }
.smx-popup.wide .wrapper { max-width: 760px; }
.smx-popup .smx-msg.show { margin-top: 12px; }
.smx-popup .smx-rh-labor-msg.show { margin: 0 0 16px; }

/* La ficha: quién es arriba, los números en tarjetas y los datos en pares.
   Todo seguido en párrafos se leía como un bloque de texto sin jerarquía */
/* Pagos por labor: el total respira bajo la lista, y el título del formulario es un subtítulo */
.smx-rh-labor-lista .hint { margin: 12px 0 0; }
.smx-popup #smx-rh-labor h3 { margin: 28px 0 16px; font-size: 1.05rem; font-weight: 700; }

.smx-popup .smx-oc-officer-head { margin-bottom: 20px; }
.smx-popup .smx-oc-officer-head h3 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; }
.smx-popup .smx-oc-officer-head .hint { margin: 0 0 10px; color: var(--smx-ink-soft); font-size: .875rem; }
.smx-popup .smx-cards { margin-bottom: 8px; }
.smx-popup .smx-cards .card { flex: 1; min-width: 140px; }
.smx-popup .smx-details dt { color: var(--smx-ink); font-weight: 600; }
.smx-popup .smx-oc-officer-body .button { margin-top: 20px; }

body.smx-popup-opened { overflow: hidden; }

/* ------------------------------------------------------------- responsive */

/* Por debajo de 1024 px el menú lateral se esconde: barra arriba y panel que se
   abre con el botón */
@media (max-width: 1023px) {

	.smx-main-account { grid-template-columns: 1fr; background: var(--smx-bg); }

	.smx-account-wrapper .bar {
		position: sticky;
		top: 0;
		z-index: 50;
		display: flex;
		align-items: center;
		gap: 4px;
		height: 60px;
		padding: 0 8px;
		background: var(--smx-surface);
		border-bottom: 1px solid var(--smx-line);
	}

	.smx-account-wrapper .bar .brand { flex: 1; padding: 0 4px; }
	.smx-account-wrapper .bar .brand img { width: 150px; }
	.smx-account-wrapper .bar .user { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
	.smx-account-wrapper .bar .avatar { flex-basis: 32px; width: 32px; height: 32px; }

	.smx-menu-open, .smx-account-menu-wrapper .close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: var(--smx-radius);
		background: transparent;
		color: var(--smx-ink);
		cursor: pointer;
	}

	.smx-account-menu-wrapper .close { font-size: 1.6rem; line-height: 1; }

	.smx-account-menu-wrapper {
		position: fixed;
		inset: 0 auto 0 0;
		width: min(310px, 85vw);
		height: auto;
		padding-top: 12px;
		z-index: 70;
		border-right: 0;
		border-radius: 0 18px 18px 0;
		transform: translateX(-100%);
		transition: transform .2s;
	}

	body.smx-menu-opened .smx-account-menu-wrapper { transform: none; }

	body.smx-menu-opened .smx-menu-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 65;
		background: rgba(28,28,28,.45);
	}

	.smx-account-content { padding: 32px 24px; }

}

@media (max-width: 900px) {

	/* minmax(0, …): con `1fr` a secas la columna crece hasta lo que pide su contenido y desborda */
	.smx-main-auth { grid-template-columns: minmax(0, 1fr); min-height: auto; }
	.smx-main-auth .main-info { padding: 60px 20px 0 20px; background-image: linear-gradient(rgba(4, 10, 36, .7), rgba(4, 10, 36, .7)), url('../img/login-bg.jpg'); }
	.smx-main-auth .form-box { padding: 32px 20px 48px; box-sizing: border-box; }

	.smx-account-content { padding: 24px 16px; }
	.smx-screen h1 { font-size: 1.6rem; }

}

/* Los formularios pasan a una columna */
@media (max-width: 600px) {
	.smx-form .col.half, .smx-form .col.third { width: 100%; }

	/* El buscador y su botón se quedan en la misma línea: partidos, el botón
	   parecía de otra cosa. El campo ocupa lo que sobra */
	.smx-filter .col.col-right { flex: 1; width: auto; min-width: 0; }

	/* La cabecera se apila, y la acción principal ocupa el ancho */
	.smx-screen-head { flex-direction: column; align-items: stretch; }
	.smx-screen-head .actions .button { flex: 1; }
	.smx-screen-head .actions .button.nav { white-space: nowrap; padding-left: 12px; padding-right: 12px; }

	/* El resumen de la solicitud, apilado: los botones a lo ancho y los
	   informes debajo, alineados a la izquierda */
	.smx-oc-detalle .datos { gap: 10px 18px; }
	.smx-oc-detalle .acciones { flex-direction: column; align-items: stretch; }
	.smx-oc-acciones .button { width: 100%; }

	/* El botón de la plantilla baja a su línea, bajo el texto del paso, y el
	   número se queda arriba cuando el texto ocupa varias líneas */
	.smx-oc-pasos li { align-items: start; }

	/* Créditos: los paquetes de dos en dos, y el botón de compra a lo ancho */
	.smx-oc-packs { grid-template-columns: 1fr 1fr; gap: 10px; }
	.smx-oc-pack { padding: 14px; }
	.smx-oc-pack .credits { font-size: 1.5rem; }
	.smx-oc-saldo .card { flex: 1; }
	#smx-oc-pay .smx-oc-buy { width: 100%; }
	.smx-oc-pasos .button { display: flex; width: fit-content; margin: 8px 0 0; }
}

/* El recuadro de Cloudflare no baja de 300 px: en pantallas estrechas el formulario usa todo el ancho */
@media (max-width: 400px) {
	.smx-main-auth .form-box { padding-left: 0; padding-right: 0; }
}

/* Tablas en móvil: cada fila es una ficha, y cada celda lleva delante el título
   de su columna, que `smx_label_tables()` copia a `data-title` */
@media (max-width: 767px) {

	.smx-table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; }

	.smx-table, .smx-table tbody, .smx-table tr, .smx-table td { display: block; width: 100%; box-sizing: border-box; }
	.smx-table { background: transparent; }
	.smx-table thead { display: none; }

	.smx-table tr {
		margin-bottom: 12px;
		padding: 4px 16px;
		background: var(--smx-surface);
		border: 1px solid var(--smx-line);
		border-radius: var(--smx-radius-lg);
	}

	/* El título flota a la izquierda y el valor queda a la derecha tal cual: con
	   flex, una celda con texto y etiqueta se partía en trozos */
	/* `:nth-child(n)` iguala la especificidad de `tr:last-child td`, que en
	   escritorio quita el borde a la última fila */
	.smx-table tr:nth-child(n) td {
		display: flow-root;
		padding: 12px 0;
		border-bottom: 1px solid var(--smx-line);
		text-align: right;
	}

	.smx-table tr td:last-child { border-bottom: 0; }
	.smx-table tbody tr:hover td { background: transparent; }

	.smx-table tr td::before {
		content: attr(data-title);
		float: left;
		max-width: 45%;
		margin-right: 16px;
		text-align: left;
		font-size: .8rem;
		font-weight: 600;
		line-height: 1.6;
		color: var(--smx-ink-soft);
	}

	/* Los pares dato/valor, apilados: en dos columnas una etiqueta larga
	   estrujaba el valor contra el borde */
	.smx-details { grid-template-columns: 1fr; gap: 0; }
	.smx-details dt { padding-top: 12px; }
	.smx-details dd { padding-bottom: 12px; border-bottom: 1px solid var(--smx-line); }
	.smx-details dd:last-child { border-bottom: 0; }

	/* La primera celda hace de título de la ficha */
	.smx-table tr td:first-child { font-weight: 700; }

	/* Las acciones no tienen título: a la derecha, con aire para el dedo */
	.smx-table tr td.actions { padding: 4px 0; white-space: normal; }
	.smx-table tr td.actions::before { display: none; }
	.smx-table tr td.actions a { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 0 20px; }

}

/* Vacaciones: el saldo y los festivos en el calendario */
.smx-vac-balance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 20px; }
@media (max-width: 600px) { .smx-vac-balance { grid-template-columns: repeat(2, 1fr); } }
.smx-vac-balance div { padding: 12px 16px; border: 1px solid var(--smx-line); border-radius: var(--smx-radius); background: var(--smx-surface); }
.smx-vac-balance strong { display: block; font-size: 1.5rem; line-height: 1.2; }
.smx-vac-balance span { font-size: .8rem; color: var(--smx-ink-soft); }
.smx-vac-balance div:first-child strong { color: var(--smx-brand-dark); }

.air-datepicker-cell.-day-.-holiday-:not(.-selected-):not(.-disabled-) { color: var(--smx-error); font-weight: 700; }