/* ============================================================================
   Clases estructurales compartidas sobre MudBlazor (RCL).
   Contiene SOLO estructura agnóstica de marca (anchos, alto de ventana,
   alineación). Los colores se resuelven siempre vía tema (var(--mud-palette-*)
   o var(--gesta-*)); las clases de marca de cada frontal viven en su CSS.
   Este fichero se enlaza en el index.html de cada frontal DESPUÉS de
   MudBlazor.min.css para poder sobreescribirlo.
   ============================================================================ */

/* Alto bajo el AppBar denso (3/4 de --mud-appbar-height, como MudBlazor) menos el my-6 del MudContainer,
   sin subbarra ni otro cromo encima. La tarjeta lo usa como min-height y los marcos inmersivos como height;
   bajo cromo, el marco cede su alto (vop--flexible). */
:root {
    --gesta-alto-ventana: calc(100dvh - var(--mud-appbar-height, 64px) * 3 / 4 - 48px);
}

/* Alineación a la derecha de inputs numéricos y de sus cabeceras de tabla. */
.text-right input {
    text-align: right;
}

.th-right {
    text-align: right;
}

/* Alineación a la derecha de celdas de acción en tablas. Sustituye al style="text-align:right" inline de las celdas de acción. */
.text-end {
    text-align: right;
}

/* Anchos de contenido oficiales. Sustituyen a los max-width inline por página: mantienen líneas legibles en desktop y un ancho 
    coherente entre pantallas. Se combinan con la superficie (p. ej. <AppPaper Class="pa-6 gesta-w-form" Outlined>). */
.gesta-w-form {
    max-width: 640px;
}

.gesta-w-detalle {
    max-width: 720px;
}

.gesta-w-ancho {
    max-width: 960px;
}

/* ===== Foco visible de un control propio =====
   El reset de MudBlazor quita el contorno a todo <button>: un control a medida (o una región que desplaza y se
   enfoca) lo recupera con esta clase. «Dentro» lo dibuja hacia dentro, para lo que toca el borde de un
   contenedor que recorta. */
.gesta-foco:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.gesta-foco--dentro:focus-visible {
    outline-offset: -2px;
}

/* ===== Página ancha =====
   MainLayout pone el contenido en un MudContainer MaxWidth.Large (1280px). Una página que pide más ancho en
   pantallas grandes lleva esta clase y el tope se levanta solo mientras está montada; el ancho final lo acota la
   propia página. Va aquí porque el contenedor no pertenece a la página. */
.mud-main-content:has(.gesta-pagina-ancha) > .mud-container {
    max-width: none;
}

/* ===== Barra de scroll de la página: fina y con hueco fijo =====
   Reserva siempre el ancho de la barra: la página no salta de lado al ganar o perder el scroll. Va en
   html porque scrollbar-gutter no se propaga desde body. */
html {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

/* Al bloquear el scroll de un diálogo, MudBlazor compensa la barra con padding: con el hueco ya
   reservado, ese padding movería el contenido. */
.scroll-locked {
    padding-right: 0;
}

/* Altura mínima de una tarjeta de una fila de tarjetas hermanas: evita que las de contenido breve
   queden como una franja. Es un suelo, no una altura fija: la tarjeta crece con su contenido, y con
   MudItem Class="d-flex" + AppPaper Class="flex-grow-1" las hermanas se igualan a la más alta.
   Va aquí y no en CSS aislado porque una clase scoped no alcanza la raíz de un componente Mud. */
.gesta-h-tarjeta {
    min-height: 230px;
}

/* ===== Buscador compacto de un listado =====
   Ancho fijo y sin crecer, para que el MudSpacer (o el título) lo empuje contra el margen; el campo
   llena el ancho del envoltorio. Va aquí y no en CSS aislado porque lo comparten varios listados y
   porque el `.mud-input-control` lo renderiza el propio componente, fuera del scope del `.razor`. */
.gesta-buscador {
    width: 220px;
    flex: 0 0 auto;
}

.gesta-buscador .mud-input-control {
    width: 100%;
}

/* ===== Etiqueta flotante de los inputs =====
   MudBlazor le da la tipografía Subtitle1, que los temas bajan a 0.8rem para el texto del input: encogida
   (scale .75) se quedaría en 9,6px y más corta que la muesca del outlined, cuyo legend va fijo a .75rem.
   A 1rem mide 12px y cuadra con la muesca. Misma especificidad que la regla de Mud, que carga antes. */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .00938em;
    text-transform: inherit;
}

/* ===== Mensaje de ValidationMessage =====
   El componente del framework ancla el error de un campo sin For (los pickers sobre DateOnly?) y sale sin estilo:
   toma el aspecto del texto de ayuda en error de un campo Mud outlined. Global porque se pinta sin el atributo de
   scope de quien lo usa. */
.validation-message {
    margin: 3px 8px 0;
    color: var(--mud-palette-error);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.66;
    letter-spacing: 0.03333em;
}

/* ===== Subbarra de migas de navegación =====
   Barra fina y fija (sticky) bajo el AppBar. Vive dentro de MudMainContent (proyectada vía
   SectionContent por CabeceraPagina y por la previsualización de la ficha), por lo que hereda el margin-left del drawer y queda a la
   derecha del menú sin solaparlo. El offset sticky = altura del AppBar Dense: MudBlazor da al
   main-content padding-top = 3/4 de --mud-appbar-height (regla .mud-appbar-dense ~ .mud-main-content),
   así que la barra se ancla justo bajo la barra superior. Colores solo por variables de tema. */
.gesta-subbarra {
    position: sticky;
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4);
    z-index: 100; /* sobre el contenido; AppBar y drawer quedan por encima y no se solapan en horizontal */
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 6px 16px;
}

/* Migas discretas: el tamaño se fija en el <ol> (.gesta-migas) y hereda a ítems y separadores. */
.gesta-migas {
    font-size: 0.8125rem;
}

/* ===== h1 de CabeceraPagina =====
   Un título sin espacios (un tipo de excepción, un nombre de usuario) se parte en vez de dar scroll
   horizontal a la página en anchos estrechos. Tiene que ser anywhere y no break-word: el h1 es ítem flex
   y solo anywhere rebaja su ancho mínimo. Va aquí porque una clase scoped no alcanza el h1 de MudText. */
.gesta-titulo-pagina {
    overflow-wrap: anywhere;
}

/* FocusOnNavigate enfoca el h1 al navegar para que el lector de pantalla anuncie la página; no es un control, así
   que el contorno de foco que le pinta el navegador solo despista. */
h1:focus {
    outline: none;
}

/* ===== Botón de cerrar del diálogo, en tamaño Small =====
   MudDialogContainer renderiza ese botón por dentro y no expone Size, y su banda de título se pinta
   portaleada, fuera del árbol del componente que declara el diálogo: no la alcanza el CSS aislado. Se
   activa poniendo esta clase en el TitleClass del MudDialog. Los valores son los de la propia MudBlazor
   para Size.Small (.mud-icon-button-size-small + .mud-icon-size-small): 3px + 20px + 3px = 26px. */
.gesta-dialogo-cierre-small .mud-button-close {
    padding: 3px;
    font-size: 1.125rem;
}

.gesta-dialogo-cierre-small .mud-button-close .mud-icon-root {
    font-size: 1.25rem;
}

/* ===== Banda de título del diálogo acotada a una línea =====
   Para diálogos cuyo alto se calcula descontando el cromo: .mud-dialog-title trae overflow-wrap: anywhere,
   así que un título largo pasa a dos líneas, el diálogo se pasa de su max-height y aparece el scroll que
   ese cálculo pretendía evitar. Va aquí y no en CSS aislado porque la banda se pinta portaleada, y cae
   sobre el texto y no sobre la banda porque la elipsis la resuelve el bloque que contiene el texto. El
   hueco del botón de cerrar ya lo reserva MudBlazor (padding-inline-end: 64px). Deja el texto íntegro en
   el title del elemento. */
.gesta-dialogo-titulo-linea .mud-typography {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Los botones de la banda («Descargar») no encogen ni parten su rótulo: heredan el overflow-wrap: anywhere
   de .mud-dialog-title y, al encoger como ítem flex junto a un título largo, el texto se rompía letra a letra. */
.gesta-dialogo-titulo-linea .mud-button-root {
    flex: none;
    white-space: nowrap;
}