/**
 * App de reservas de Maracas — piezas propias.
 *
 * El sistema de diseño NO está aquí: viene de `tokens.css`, `reset.css`,
 * `base.css` y `utilities.css`, copiados literales de la app de obras
 * (`obras-gestion/plugin/app-src/src/styles/`). De ahí salen `.qw-app`,
 * `.qw-main`, `.qw-card`, `.qw-row`, `.qw-stack`, `.qw-text-muted` y los 155
 * tokens `--qw-*`.
 *
 * Este fichero sólo añade lo que la app de obras tiene como componentes de
 * React y aquí hacen falta en CSS plano: cabecera, barra inferior, chips de
 * estado, la cifra grande y el estado vacío. Cada bloque dice de qué módulo
 * de la app de obras copia su forma.
 */

/* `[hidden]` tiene que ganar siempre.
   El navegador lo aplica con `[hidden]{display:none}`, que es especificidad
   (0,1,0): cualquier clase nuestra que fije `display` lo pisa. Pasó dos
   veces — con `.mrc-done` en la web y con `.mrcapp-skelcard` aquí, que se
   quedaba pintando esqueletos DEBAJO del contenido ya cargado. */
.qw-app [hidden] {
	display: none !important;
}

/* ========================================================== CABECERA
   Forma de `ui/AppHeader.module.css`. */

.mrcapp-header {
	position: sticky;
	top: 0;
	z-index: var( --qw-z-sticky, 100 );
	background: color-mix( in srgb, var( --qw-surface ) 96%, transparent );
	backdrop-filter: saturate( 180% ) blur( 10px );
	-webkit-backdrop-filter: saturate( 180% ) blur( 10px );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .08 ), 0 1px 3px rgba( 0, 0, 0, .04 );
}

.mrcapp-header__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: var( --qw-sp-3 ) var( --qw-sp-4 );
	display: flex;
	align-items: center;
	gap: var( --qw-sp-3 );
	min-height: 56px;
}

.mrcapp-header__title {
	margin: 0;
	font-size: var( --qw-fs-lg );
	font-weight: 700;
	line-height: var( --qw-lh-tight );
	color: var( --qw-text );
}

.mrcapp-header__sub {
	margin: 2px 0 0;
	font-size: var( --qw-fs-xs );
	color: var( --qw-text-muted );
}

.mrcapp-header__spacer {
	flex: 1;
}

/* ========================================================= BARRA INFERIOR
   Forma de `ui/BottomNav.module.css`: fija, superficie translúcida, sombra
   hacia arriba en vez de borde, y la pestaña activa con un filete verde
   colgando del borde superior. Cuatro pestañas y sin botón central: en la app
   de obras el círculo es «apuntar parte», la acción diaria; aquí la acción
   diaria es DECIDIR sobre lo que ya ha entrado, no crear. */

.mrcapp-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: var( --qw-z-sticky, 100 );
	background: color-mix( in srgb, var( --qw-surface ) 96%, transparent );
	backdrop-filter: saturate( 180% ) blur( 10px );
	-webkit-backdrop-filter: saturate( 180% ) blur( 10px );
	border-top: none;
	padding-bottom: env( safe-area-inset-bottom );
	box-shadow: 0 -2px 8px rgba( 0, 0, 0, .08 ), 0 -1px 3px rgba( 0, 0, 0, .04 );
}

.mrcapp-nav__inner {
	max-width: 720px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	align-items: stretch;
}

.mrcapp-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 8px 4px 6px;
	color: var( --qw-text-muted );
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	min-height: var( --qw-touch, 56px );
	position: relative;
	font: inherit;
	transition: color 160ms var( --qw-ease, ease );
	-webkit-tap-highlight-color: transparent;
}

.mrcapp-tab:hover {
	color: var( --qw-text );
}

.mrcapp-tab.is-active {
	color: var( --qw-green-deep );
}

.mrcapp-tab.is-active::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX( -50% );
	width: 28px;
	height: 3px;
	background: var( --qw-green );
	border-radius: 0 0 3px 3px;
}

.mrcapp-tab:focus-visible {
	outline: 2px solid var( --qw-green );
	outline-offset: -4px;
	border-radius: var( --qw-radius-md );
}

.mrcapp-tab__icon {
	display: block;
	width: 22px;
	height: 22px;
}

.mrcapp-tab__label {
	font-size: var( --qw-fs-xs, 10px );
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
}

/* El contador de pendientes va sobre el icono, como una notificación. */
.mrcapp-tab__count {
	position: absolute;
	top: 4px;
	left: 50%;
	margin-left: 4px;
	min-width: 18px;
	padding: 0 4px;
	border-radius: var( --qw-radius-pill );
	background: var( --qw-warning );
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.mrcapp-tab__count:empty,
.mrcapp-tab__count[data-count="0"] {
	display: none;
}

/* ============================================================ PANTALLAS */

.mrcapp-screen {
	display: none;
}

.mrcapp-screen.is-active {
	display: grid;
	gap: var( --qw-sp-3 );
}

/* Las tarjetas de una pantalla, separadas de verdad. Sin esto se apilaban
   pegadas y dos clases parecían un solo bloque con una raya en medio. */
.mrcapp-screen [data-body] {
	display: grid;
	gap: var( --qw-sp-3 );
}

.mrcapp-screen__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --qw-sp-3 );
	margin-bottom: var( --qw-sp-1 );
}

.mrcapp-screen__title {
	margin: 0;
	font-size: var( --qw-fs-xl );
	font-weight: 700;
	line-height: var( --qw-lh-tight );
	color: var( --qw-text );
}

.mrcapp-screen__note {
	margin: 0;
	font-size: var( --qw-fs-sm );
	color: var( --qw-text-muted );
}

/* ============================================================== TARJETAS
   `.qw-card` ya viene de utilities.css (blanco + sombra negra difuminada,
   sin borde gris: es la doctrina de la casa). Aquí sólo su contenido. */

.mrcapp-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var( --qw-sp-3 );
	flex-wrap: wrap;
}

.mrcapp-card__title {
	margin: 0;
	font-size: var( --qw-fs-lg );
	font-weight: 700;
	line-height: var( --qw-lh-tight );
	color: var( --qw-text );
}

.mrcapp-card__title em {
	font-style: normal;
	color: var( --qw-green-deep );
}

.mrcapp-card__meta {
	margin: 2px 0 0;
	width: 100%;
	font-size: var( --qw-fs-sm );
	color: var( --qw-text-muted );
}

.mrcapp-card__contact {
	margin: var( --qw-sp-2 ) 0 0;
	font-size: var( --qw-fs-sm );
	display: flex;
	flex-wrap: wrap;
	gap: var( --qw-sp-1 ) var( --qw-sp-3 );
}

.mrcapp-card__contact a {
	color: var( --qw-celeste-deep );
	font-weight: 600;
	text-underline-offset: .18em;
	/* Objetivo de toque: el encargado llama desde aquí. 44 px de la casa
	   (medía 32); el margen negativo evita que la fila crezca. */
	display: inline-flex;
	align-items: center;
	min-height: var( --qw-touch, 44px );
	margin-block: -6px;
}

.mrcapp-card__note {
	margin: var( --qw-sp-2 ) 0 0;
	padding: var( --qw-sp-2 ) var( --qw-sp-3 );
	background: var( --qw-bg-muted );
	border-radius: var( --qw-radius-md );
	font-size: var( --qw-fs-sm );
	color: var( --qw-text );
}

/* La oferta de lista de espera y su cuenta atrás, en la tarjeta y en la
   fila. Ámbar como «pendiente»; la que dejó caducar, apagada. */
.mrcapp-offer {
	display: block;
	margin: var( --qw-sp-2 ) 0 0;
	font-size: var( --qw-fs-xs );
	font-weight: 700;
	letter-spacing: .02em;
	color: var( --qw-warning );
}

.mrcapp-offer--missed {
	color: var( --qw-text-muted );
	font-weight: 600;
}

.mrcapp-list__row .mrcapp-offer {
	flex-basis: 100%;
	margin-top: 2px;
}

/* Vales: una tira con el nombre, tres cifras y el botón de canjear a la
   derecha. Se apila por debajo de 480. */
.mrcapp-vales {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --qw-sp-3 );
	padding-top: var( --qw-sp-3 );
	padding-bottom: var( --qw-sp-3 );
}

.mrcapp-vales__text {
	min-width: 0;
}

.mrcapp-vales__title {
	margin: 0;
	font-weight: 700;
	color: var( --qw-text );
}

.mrcapp-vales__stats {
	margin: 2px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var( --qw-sp-4 );
	font-size: var( --qw-fs-sm );
	color: var( --qw-text-muted );
}

.mrcapp-vales__stats strong {
	color: var( --qw-text );
	font-variant-numeric: tabular-nums;
}

.mrcapp-vales .mrcapp-btn {
	flex: none;
}

@media ( max-width: 480px ) {
	.mrcapp-vales {
		flex-direction: column;
		align-items: stretch;
	}
}

/* El embudo de la web: una tira más, sin botón. La cifra de 7 días va en
   pequeño detrás de la de hoy. */
.mrcapp-sitio {
	padding-top: var( --qw-sp-3 );
	padding-bottom: var( --qw-sp-3 );
}

.mrcapp-sitio__week,
.mrcapp-sitio em {
	font-style: normal;
	font-weight: 400;
	font-size: var( --qw-fs-xs );
	color: var( --qw-text-muted );
}

/* El campo del código: seis letras grandes y espaciadas, como en el vale. */
.mrcapp-code {
	font-family: var( --qw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace );
	font-size: var( --qw-fs-2xl );
	letter-spacing: .3em;
	text-transform: uppercase;
	text-align: center;
	padding-left: .3em;
}

.mrcapp-vale {
	margin-top: var( --qw-sp-3 );
	padding: var( --qw-sp-3 ) var( --qw-sp-4 );
	border-radius: var( --qw-radius-md );
	background: var( --qw-bg-muted );
	border-left: 4px solid var( --qw-green-deep );
}

.mrcapp-vale--redeemed,
.mrcapp-vale--void,
.mrcapp-vale--expired {
	border-left-color: var( --qw-border-strong );
	opacity: .8;
}

.mrcapp-vale__title {
	margin: 0;
	font-weight: 700;
	color: var( --qw-text );
}

.mrcapp-vale__who {
	margin: 2px 0 0;
	font-size: var( --qw-fs-sm );
	color: var( --qw-text );
}

.mrcapp-vale__who em {
	font-style: normal;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --qw-warning );
}

.mrcapp-vale__state {
	margin: 4px 0 0;
	font-size: var( --qw-fs-xs );
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --qw-text-muted );
}

.mrcapp-card__demo {
	margin: var( --qw-sp-2 ) 0 0;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var( --qw-warning );
}

/* La cifra que se lee de un vistazo desde el otro lado de la barra. */
.mrcapp-stat {
	margin: var( --qw-sp-3 ) 0 0;
	font-size: var( --qw-fs-sm );
	color: var( --qw-text-muted );
}

.mrcapp-stat strong {
	font-size: var( --qw-fs-2xl );
	line-height: 1;
	margin-right: 2px;
	color: var( --qw-text );
	font-variant-numeric: tabular-nums;
}

/* ================================================================= LISTA */

.mrcapp-list {
	list-style: none;
	margin: var( --qw-sp-3 ) 0 0;
	padding: 0;
	display: grid;
	gap: var( --qw-sp-1 );
}

.mrcapp-list__row {
	display: flex;
	align-items: center;
	gap: var( --qw-sp-2 );
	flex-wrap: wrap;
	padding: var( --qw-sp-2 ) var( --qw-sp-3 );
	border-radius: var( --qw-radius-md );
	background: var( --qw-bg-muted );
}

.mrcapp-list__main {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	color: var( --qw-text );
}

.mrcapp-list__main em {
	font-style: normal;
	color: var( --qw-green-deep );
}

.mrcapp-list__note {
	width: 100%;
	font-size: var( --qw-fs-xs );
	color: var( --qw-text-muted );
}

/* El teléfono de la lista de una clase se pulsa para llamar: 44 px tocables
   (medía 16), sin que la fila crezca. */
.mrcapp-list__note a {
	display: inline-flex;
	align-items: center;
	min-height: var( --qw-touch, 44px );
	margin-block: -12px;
	color: var( --qw-celeste-deep );
}

/* ================================================================= CHIPS
   Forma de `.og-chip` (utilities.css) con los colores de estado de tokens. */

.mrcapp-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var( --qw-radius-pill );
	font-size: var( --qw-fs-xs );
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	background: var( --qw-bg-muted );
	color: var( --qw-text-muted );
}

.mrcapp-chip--confirmed { background: var( --qw-green-soft );    color: var( --qw-green-deep ); }
.mrcapp-chip--pending   { background: var( --qw-warning-soft );  color: var( --qw-warning ); }
.mrcapp-chip--waitlist  { background: var( --qw-celeste-soft );  color: var( --qw-celeste-deep ); }
.mrcapp-chip--declined,
.mrcapp-chip--cancelled { background: var( --qw-danger-soft );   color: var( --qw-danger ); }
.mrcapp-chip--new       { background: var( --qw-green-soft );    color: var( --qw-green-deep ); }

/* =============================================================== BOTONES
   Forma de `ui/Button.module.css`: relleno de marca con texto blanco
   (brand-locked, la identidad por encima de AA — decisión del dueño). */

.mrcapp-actions {
	display: flex;
	gap: var( --qw-sp-2 );
	margin-top: var( --qw-sp-3 );
	flex-wrap: wrap;
	align-items: flex-end;
}

.mrcapp-btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --qw-sp-2 );
	min-height: var( --qw-touch, 44px );
	padding: 10px 18px;
	border-radius: var( --qw-radius-pill );
	background: var( --qw-green-deep );
	color: var( --qw-green-on );
	font: inherit;
	font-size: var( --qw-fs-sm );
	font-weight: 700;
	text-decoration: none;
	box-shadow: var( --qw-shadow-sm );
	transition: filter 160ms var( --qw-ease, ease ), box-shadow 160ms var( --qw-ease, ease );
}

.mrcapp-btn:hover {
	filter: brightness( .93 );
}

/* Cuando el botón es un <a> (Log in), el tema pinta los enlaces con el acento
   rosa vía `theme.json` —`:root :where(a)`, (0,1,0)— y empata con
   `.mrcapp-btn`. Rosa sobre amarillo: 1.4:1. Dos clases y se acabó el empate. */
.qw-app a.mrcapp-btn,
.qw-app a.mrcapp-btn:hover,
.qw-app a.mrcapp-btn:focus-visible {
	color: var( --qw-green-on );
	text-decoration: none;
}

.qw-app a.mrcapp-btn--ghost,
.qw-app a.mrcapp-btn--ghost:hover {
	color: var( --qw-text );
}

.mrcapp-btn:focus-visible {
	outline: 2px solid var( --qw-green );
	outline-offset: 2px;
}

.mrcapp-btn[disabled] {
	opacity: .55;
	cursor: progress;
}

.mrcapp-btn--ghost {
	background: var( --qw-surface );
	color: var( --qw-text );
	box-shadow: inset 0 0 0 1px var( --qw-border-strong );
}

.mrcapp-btn--celeste {
	background: var( --qw-celeste-fill );
	color: var( --qw-celeste-fill-on );
}

.mrcapp-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var( --qw-fs-xs );
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --qw-text-muted );
}

.mrcapp-field input {
	width: 4.75rem;
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	/* 16px exactos: por debajo, iOS hace zoom al enfocar. */
	font-size: var( --qw-fs-base );
	font-family: inherit;
	min-height: var( --qw-touch, 44px );
	padding: 8px 10px;
	border-radius: var( --qw-radius-md );
	border: 1px solid var( --qw-border-strong );
	background: var( --qw-surface );
	color: var( --qw-text );
}

/* ========================================================= ESTADOS
   Forma de `ui/EmptyState.module.css`. */

.mrcapp-empty {
	margin: 0;
	padding: var( --qw-sp-8 ) var( --qw-sp-4 );
	text-align: center;
	color: var( --qw-text-muted );
	font-size: var( --qw-fs-sm );
}

.mrcapp-loading {
	margin: 0;
	padding: var( --qw-sp-8 ) var( --qw-sp-4 );
	text-align: center;
	color: var( --qw-text-muted );
	font-size: var( --qw-fs-sm );
}

.mrcapp-error {
	margin: 0 0 var( --qw-sp-3 );
	padding: var( --qw-sp-3 );
	border-radius: var( --qw-radius-md );
	background: var( --qw-danger-soft );
	color: var( --qw-danger );
	font-size: var( --qw-fs-sm );
	font-weight: 600;
}

.mrcapp-foot {
	margin-top: var( --qw-sp-6 );
	font-size: var( --qw-fs-xs );
	color: var( --qw-text-muted );
	text-align: center;
}

.mrcapp-foot a {
	color: var( --qw-celeste-deep );
	/* Objetivo de toque: 16 px de alto no es un botón. */
	display: inline-flex;
	align-items: center;
	min-height: var( --qw-touch, 44px );
	padding: 0 var( --qw-sp-2 );
}

/* ========================================================= ACCESO
   Pantalla para quien no es del equipo. */

.mrcapp-locked {
	max-width: 24rem;
	margin: var( --qw-sp-12 ) auto;
	padding: var( --qw-sp-6 );
	text-align: center;
}

/* El login propio de la app. Misma forma que `PasswordScreenLayout` de
   obras: tarjeta estrecha, logo arriba, campos a lo ancho, botón lleno. */
.mrcapp-login {
	max-width: min( 26rem, calc( 100% - 2 * var( --qw-sp-4 ) ) );
	margin-top: max( var( --qw-sp-8 ), 8vh );
}

.mrcapp-login__logo {
	width: 72px;
	height: 72px;
	border-radius: 20px;
	margin: 0 auto var( --qw-sp-3 );
	display: block;
	box-shadow: var( --qw-shadow-sm );
}

.mrcapp-login__sub {
	margin: 2px 0 var( --qw-sp-5 );
}

.mrcapp-login__form {
	display: grid;
	gap: var( --qw-sp-4 );
	text-align: left;
}

.mrcapp-input__wrap {
	position: relative;
	display: block;
}

.mrcapp-input__wrap input {
	padding-right: 52px;
}

/* El ojo: dentro del campo, tocable (44 px), sin robar el foco al tabular
   antes de tiempo — va DESPUÉS del campo en el DOM. */
.mrcapp-login__eye {
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY( -50% );
	width: var( --qw-touch, 44px );
	height: var( --qw-touch, 44px );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var( --qw-text-muted );
	cursor: pointer;
	border-radius: var( --qw-radius-pill );
}

.mrcapp-login__eye[aria-pressed="true"] {
	color: var( --qw-green );
}

.mrcapp-login__eye:focus-visible {
	outline: 2px solid var( --qw-green );
	outline-offset: -4px;
}

.mrcapp-login__eye .mrcapp-tab__icon {
	width: 22px;
	height: 22px;
}

.mrcapp-check {
	display: flex;
	align-items: center;
	gap: var( --qw-sp-3 );
	min-height: var( --qw-touch, 44px );
	font-size: var( --qw-fs-sm );
	color: var( --qw-text );
	cursor: pointer;
}

.mrcapp-check input {
	width: 22px;
	height: 22px;
	accent-color: var( --qw-green );
	margin: 0;
	flex: none;
}

.mrcapp-login__submit {
	width: 100%;
}

.mrcapp-login__lost {
	margin: 0;
	text-align: center;
	font-size: var( --qw-fs-sm );
}

/* 44 px tocables también en el enlace de «olvidé la contraseña»: medía 19. */
.mrcapp-login__lost a {
	display: inline-flex;
	align-items: center;
	min-height: var( --qw-touch, 44px );
	padding: 0 var( --qw-sp-2 );
}

/* Botón de sólo icono en la cabecera (salir): cuadrado y tocable. */
.mrcapp-btn--icon {
	padding: 0;
	width: var( --qw-touch, 44px );
	min-width: var( --qw-touch, 44px );
}

.mrcapp-btn--icon .mrcapp-tab__icon {
	width: 22px;
	height: 22px;
}

/* ==========================================================================
   AISLAMIENTO DEL TEMA

   La app vive dentro de una página de WordPress, y el tema `maracas` impone
   por `theme.json` su tipografía de marca a TODO el documento: Anton en
   mayúsculas para cualquier `h1…h6` y Oswald en el cuerpo. Dentro de la app
   eso no vale — es otro sistema de diseño, el de la app de obras, y los
   titulares salían en Anton con versalitas.

   Se reponen aquí con selectores de DOS partes (`.qw-app h1` = 0,1,1) porque
   las reglas de `theme.json` llegan como `:root :where(h1)` (0,1,0): con una
   sola clase se empata y decide el orden de carga, que no controlamos.
   ========================================================================== */

/* Sólo el contenedor. Los controles de formulario NO se listan aquí, aunque
   la tentación sea grande: `reset.css` ya hace `input, button, textarea,
   select { font: inherit; color: inherit }`, así que heredan solos.
   Listarlos convertía un valor HEREDADO en una declaración directa con más
   peso (`.qw-app button` = 0,1,1) que la del propio componente
   (`.mrcapp-btn` = 0,1,0) — y el texto de TODOS los botones rellenos pasaba
   a `--qw-text`: blanco sobre amarillo, 1,31:1. Lo cazó el barrido de
   contraste sobre el render, no la vista. */
.qw-app {
	font-family: var( --qw-font-sans );
	font-size: var( --qw-fs-base );
	line-height: var( --qw-lh-base );
	color: var( --qw-text );
	letter-spacing: normal;
}

.qw-app h1,
.qw-app h2,
.qw-app h3,
.qw-app h4,
.qw-app h5,
.qw-app h6 {
	font-family: var( --qw-font-sans );
	font-weight: 700;
	line-height: var( --qw-lh-tight );
	letter-spacing: normal;
	text-transform: none;
	color: var( --qw-text );
}

/* Los TAMAÑOS también: `base.css` los pone con selector de elemento
   (`h1 {}` = 0,0,1) y las reglas de `theme.json` llegan como
   `:root :where(h1)` (0,1,0), así que ganaban ellas y el titular de la app
   salía a tamaño de portada. Se repiten aquí los valores de `base.css`. */
.qw-app h1 { font-size: var( --qw-fs-2xl ); }
.qw-app h2 { font-size: var( --qw-fs-xl ); font-weight: 600; }
.qw-app h3 { font-size: var( --qw-fs-lg ); font-weight: 600; }

/* Y los componentes, por encima de lo anterior (0,2,1). */
.qw-app .mrcapp-header__title { font-size: var( --qw-fs-lg ); font-weight: 700; }
.qw-app .mrcapp-screen__title { font-size: var( --qw-fs-xl ); font-weight: 700; }
.qw-app .mrcapp-card__title   { font-size: var( --qw-fs-lg ); font-weight: 700; }

.qw-app a {
	color: var( --qw-celeste-deep );
}

/* ==========================================================================
   FAB CENTRAL DE LA BARRA
   Forma de `.tab--primary` de `ui/BottomNav.module.css`: círculo verde que
   sobresale por encima de la barra, con la sombra teñida de su propio verde.
   En obras es «apuntar parte»; aquí es apuntar a quien llama al bar.
   ========================================================================== */

.mrcapp-nav__inner {
	grid-template-columns: repeat( 5, 1fr );
}

.mrcapp-tab--primary {
	position: relative;
}

.mrcapp-fab {
	position: absolute;
	top: -22px;
	left: 50%;
	transform: translateX( -50% );
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var( --qw-green-deep );
	color: var( --qw-green-on );
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 6px 16px rgba( var( --qw-green-rgb, 21, 172, 18 ), .32 ),
		0 2px 4px rgba( var( --qw-green-rgb, 21, 172, 18 ), .18 );
	transition: transform 200ms var( --qw-ease, ease ), box-shadow 200ms var( --qw-ease, ease ), filter 160ms var( --qw-ease, ease );
}

.mrcapp-tab--primary:hover .mrcapp-fab,
.mrcapp-tab--primary:focus-visible .mrcapp-fab {
	filter: brightness( .92 );
	box-shadow:
		0 8px 22px rgba( var( --qw-green-rgb, 21, 172, 18 ), .42 ),
		0 2px 6px rgba( var( --qw-green-rgb, 21, 172, 18 ), .24 );
}

.mrcapp-tab--primary:active .mrcapp-fab {
	transform: translateX( -50% ) scale( .94 );
}

.mrcapp-tab--primary .mrcapp-tab__label {
	margin-top: 38px;
	font-weight: 700;
	color: var( --qw-green-deep );
}

.mrcapp-fab svg {
	width: 26px;
	height: 26px;
}

/* ==========================================================================
   HOJA / MODAL
   Forma de `ui/Modal.module.css`: en móvil es una HOJA INFERIOR a todo lo
   ancho, con asa de arrastre y esquinas redondeadas sólo arriba; a partir de
   600 px pasa a tarjeta centrada. Cabecera, cuerpo con scroll y pie de
   acciones que nunca se recorta.
   ========================================================================== */

.mrcapp-sheet {
	margin: 0;
	border: 0;
	padding: 0;
	border-radius: var( --qw-radius-lg ) var( --qw-radius-lg ) 0 0;
	background: var( --qw-surface-elev );
	color: var( --qw-text );
	box-shadow: var( --qw-shadow-lg );
	width: 100%;
	max-width: 100%;
	/* `vh` primero como respaldo: iOS Safari viejo descarta la regla `dvh`
	   entera por unidad desconocida y el diálogo se quedaría sin tope. */
	max-height: calc( 100vh - 24px );
	max-height: calc( 100dvh - 24px );
	overflow: hidden;
	position: fixed;
	inset: auto 0 0 0;
	padding-bottom: env( safe-area-inset-bottom, 0 );
	animation: mrcapp-slide-up 240ms var( --qw-ease, ease-out );
}

.mrcapp-sheet[open] {
	display: flex;
	flex-direction: column;
}

.mrcapp-sheet:not( [open] ) {
	display: none;
}

.mrcapp-sheet:focus,
.mrcapp-sheet:focus-visible {
	outline: none;
}

/* Asa: la afordancia de que esto se desliza. Sólo en móvil. */
.mrcapp-sheet::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 50%;
	transform: translateX( -50% );
	width: 40px;
	height: 4px;
	border-radius: var( --qw-radius-pill );
	background: var( --qw-border-strong );
	z-index: 2;
}

@media ( min-width: 600px ) {
	.mrcapp-sheet {
		inset: 0;
		margin: auto;
		width: min( 560px, calc( 100vw - 32px ) );
		/* Repone el `max-width: 100%` del bloque de móvil para que el ancho
		   no dependa de dos declaraciones distintas. (Los 540 px que medí al
		   principio NO eran esto: era la animación `pop` a medio camino,
		   scale(.965) × 560. Medir durante una animación miente.) */
		max-width: min( 560px, calc( 100vw - 32px ) );
		max-height: calc( 100vh - 32px );
		max-height: calc( 100dvh - 32px );
		border-radius: var( --qw-radius-lg );
		padding-bottom: 0;
		animation: mrcapp-pop 200ms var( --qw-ease, ease-out );
	}

	.mrcapp-sheet::before {
		display: none;
	}
}

.mrcapp-sheet::backdrop {
	background: rgba( 12, 22, 18, .6 );
	backdrop-filter: blur( 6px ) saturate( 1.05 );
	-webkit-backdrop-filter: blur( 6px ) saturate( 1.05 );
	animation: mrcapp-fade 220ms var( --qw-ease, ease-out );
}

@keyframes mrcapp-slide-up { from { transform: translateY( 28px ); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mrcapp-pop      { from { transform: scale( .965 ); opacity: 0; } to { transform: scale( 1 ); opacity: 1; } }
@keyframes mrcapp-fade     { from { opacity: 0; } to { opacity: 1; } }

.mrcapp-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --qw-sp-3 );
	padding: var( --qw-sp-4 ) var( --qw-sp-4 ) var( --qw-sp-3 );
	border-bottom: 1px solid var( --qw-border );
	flex-shrink: 0;
}

@media ( max-width: 599px ) {
	.mrcapp-sheet__head {
		padding-top: calc( var( --qw-sp-4 ) + 6px );
	}
}

.qw-app .mrcapp-sheet__title {
	margin: 0;
	font-size: var( --qw-fs-lg );
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.2;
}

.mrcapp-sheet__close {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var( --qw-text-muted );
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	transition: background .15s ease, color .15s ease, transform .2s var( --qw-ease, ease );
}

.mrcapp-sheet__close:hover {
	background: var( --qw-celeste-soft );
	color: var( --qw-text );
	transform: rotate( 90deg );
}

.mrcapp-sheet__close:focus-visible {
	outline: 2px solid var( --qw-celeste );
	outline-offset: 2px;
}

.mrcapp-sheet__body {
	padding: var( --qw-sp-4 );
	overflow: auto;
	overscroll-behavior: contain;
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	gap: var( --qw-sp-3 );
	align-content: start;
}

.mrcapp-sheet__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --qw-sp-2 );
	justify-content: flex-end;
	padding: var( --qw-sp-3 ) var( --qw-sp-4 );
	border-top: 1px solid var( --qw-border );
	background: var( --qw-surface-elev );
	flex-shrink: 0;
}

/* Campos dentro de la hoja. */
.mrcapp-input {
	display: grid;
	gap: 4px;
	font-size: var( --qw-fs-sm );
	font-weight: 600;
	color: var( --qw-text );
}

.mrcapp-input small {
	font-weight: 400;
	color: var( --qw-text-muted );
}

.mrcapp-input input,
.mrcapp-input select,
.mrcapp-input textarea {
	width: 100%;
	/* 16px exactos: por debajo, iOS hace zoom al enfocar. */
	font-size: var( --qw-fs-base );
	font-family: inherit;
	font-weight: 400;
	min-height: var( --qw-touch, 44px );
	padding: 10px 12px;
	border-radius: var( --qw-radius-md );
	border: 1px solid var( --qw-border-strong );
	background: var( --qw-surface );
	color: var( --qw-text );
}

.mrcapp-input textarea {
	min-height: 72px;
	resize: vertical;
}

.mrcapp-input input:focus-visible,
.mrcapp-input select:focus-visible,
.mrcapp-input textarea:focus-visible {
	outline: 2px solid var( --qw-celeste );
	outline-offset: 1px;
}

.mrcapp-hint {
	margin: 0;
	font-size: var( --qw-fs-xs );
	color: var( --qw-text-muted );
}

.mrcapp-row2 {
	display: grid;
	gap: var( --qw-sp-3 );
	grid-template-columns: 1fr 1fr;
}

@media ( max-width: 480px ) {
	.mrcapp-row2 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   AVISOS
   Los pinta `assets/css/toast.css`, el sistema de la casa compartido con la
   web pública (misma pila, mismos colores, mismo cierre). Aquí no hay nada:
   un aviso tiene que ser el mismo aviso en los dos sitios.
   ========================================================================== */

/* La pila vive en el <body>, fuera de .qw-app, y heredaría la Oswald del tema.
   En la app los avisos van en la letra de la app. */
.mrc-toasts {
	font-family: var( --qw-font-sans, inherit );
}

@media ( prefers-reduced-motion: reduce ) {
	.mrcapp-sheet,
	.mrcapp-sheet::backdrop { animation: none; }

	.mrcapp-sheet__close { transition: none; }
	.mrcapp-sheet__close:hover { transform: none; }
}

/* ==========================================================================
   ESQUELETOS
   Forma de `ui/Skeleton.module.css`: bloques que laten mientras carga. Dicen
   la FORMA de lo que viene, cosa que un texto de «cargando» no hace.
   ========================================================================== */

.mrcapp-skel {
	border-radius: var( --qw-radius-md );
	background: linear-gradient( 90deg, var( --qw-bg-muted ) 25%, rgba( 14, 165, 233, .16 ) 37%, var( --qw-bg-muted ) 63% );
	background-size: 400% 100%;
	animation: mrcapp-shimmer 1.4s ease-in-out infinite;
}

@keyframes mrcapp-shimmer {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mrcapp-skel { animation: none; }
}

.mrcapp-skel--title { height: 20px; width: 55%; }
.mrcapp-skel--line  { height: 13px; width: 80%; }
.mrcapp-skel--stat  { height: 30px; width: 40%; }
.mrcapp-skel--row   { height: 38px; width: 100%; }

.mrcapp-skelcard {
	display: grid;
	gap: var( --qw-sp-3 );
}

/* ============================================================== DESTACADO */

.qw-card.is-focused {
	box-shadow: 0 0 0 3px var( --qw-green-soft ), var( --qw-card-shadow );
}

/* Una tarjeta de clase se pulsa para ver quién viene. */
.mrcapp-card--tappable {
	cursor: pointer;
}

.mrcapp-card--tappable:focus-visible {
	outline: 2px solid var( --qw-celeste );
	outline-offset: 2px;
}

/* Cabecera de grupo dentro de la hoja de una clase. */
.mrcapp-group {
	margin: 0;
	font-size: var( --qw-fs-xs );
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --qw-text-muted );
}