/* Estilos propios de la aplicación.
   MudBlazor aporta el sistema de diseño; aquí sólo lo que no cubre.
   Ver Components/Layout/AppTheme.cs para la paleta y la tipografía. */

html, body {
    font-family: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
   Sensación de aplicación en el teléfono (2026-10-15, skill mobile-native).
   --------------------------------------------------------------------------- */

html {
    /* Android y iOS pintan un velo gris/azul sobre lo que se toca: delata «web
       dentro del navegador». Los botones de MudBlazor ya tienen su propia
       respuesta al toque (la onda), así que el velo sobra. */
    -webkit-tap-highlight-color: transparent;
    /* Sin agrandar la letra al girar el teléfono en horizontal. */
    -webkit-text-size-adjust: 100%;
}

/* Sin la espera de ~300 ms que el navegador guarda tras un toque por si es un
   doble toque para hacer zoom: el botón responde al instante. El zoom con dos
   dedos sigue funcionando. */
a,
button,
[role="button"],
.mud-button-root,
.mud-nav-link,
.mud-tab,
.mud-table-row.cursor-pointer,
tr.cursor-pointer {
    touch-action: manipulation;
}

/* Una pulsación larga sobre un control no selecciona su texto ni abre el menú
   de copiar/compartir. Sólo en controles: los números de solicitud, importes y
   referencias tienen que poder copiarse. */
.mud-button-root,
.mud-nav-link,
.mud-tab,
.ssc-ficha {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Los importes se leen en columna: alineados a la derecha y con cifras de ancho fijo,
   para que las unidades queden verticalmente alineadas en las tablas. */
.importe {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* Identificadores de solicitud y referencias bancarias: se comparan carácter a
   carácter contra el extracto del banco, así que van en monoespaciada. */
/* Envoltorio de los botones de decisión del detalle: no añade caja propia, sus
   botones se colocan como siempre en la cabecera. En el teléfono se oculta y
   van en la barra fija de abajo (ver el bloque móvil). */
.ssc-acciones-escritorio {
    display: contents;
}

.codigo-solicitud,
.referencia-bancaria {
    font-family: 'IBM Plex Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.h-100 { height: 100%; }

/* Error de circuito de Blazor Server. Aparece si IIS recicla el Application Pool:
   ver docs/DEPLOYMENT.md §4.1, donde se explica por qué el reciclado va desactivado. */
#blazor-error-ui {
    color-scheme: light only;
    background: #FFF4CE;
    border-top: 1px solid #E0C97F;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1500;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Pantallas de cuenta: inicio de sesión, recuperación y cambio forzado.
   Se muestran sin barra lateral, centradas y sin nada más en pantalla. */
.login-fondo {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(0, 192, 248, 0.12), transparent 60%),
        var(--mud-palette-background);
}

.login-tarjeta {
    width: 100%;
    max-width: 420px;
}

/* Logotipo. El fichero es azul sobre blanco: se muestra siempre sobre una placa
   blanca para que en modo oscuro y en el cajón lateral conserve su contraste. */
.logo-placa {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-marca {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
}

/* La entrada activa del menú lateral se estiliza en «Sistema visual», más
   abajo, junto con el resto del cajón. */

/* La cabecera del cajón mide 64 px fijos en MudBlazor (regla más específica
   que ésta, de ahí el !important); con el logo necesita crecer. */
.mud-drawer .mud-drawer-header.logo-cabecera {
    height: auto !important;
    /* Es un elemento flex del cajón: cuando el menú no cabe en la altura del
       móvil, se encogería hasta su mínimo y el logo quedaría cortado. */
    flex-shrink: 0;
    min-height: 64px;
    padding-top: 14px;
    padding-bottom: 10px;
}

/* Logotipo en el cajón. En claro va sin marco, porque el fichero ya es azul
   sobre blanco; en oscuro, MainLayout le pone la placa. */
.logo-cajon {
    display: inline-flex;
    padding: 2px 0;
}

.logo-placa-cajon {
    padding: 8px 12px;
}

.logo-cajon .logo-marca,
.logo-placa-cajon .logo-marca {
    width: 170px;
}

.mud-drawer .mud-drawer-header.logo-cabecera {
    border-bottom: 1px solid var(--ssc-borde-suave);
}

/* Botón de envío de un formulario HTML plano al que se le da el aspecto de un
   MudButton a todo el ancho. Se usa donde el envío tiene que ser una navegación
   real del navegador y no un evento de Blazor (cerrar sesión). */
.ssc-boton-ancho {
    width: 100%;
    justify-content: center;
    cursor: pointer;
    border: 0;
    font: inherit;
}

/* Elemento de menú que en realidad es el submit de un formulario.
   Se usa para cerrar sesión, que va por POST para que no lo pueda disparar
   una página ajena. */
.ssc-menu-submit {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 16px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .ssc-menu-submit:hover {
        background-color: var(--mud-palette-action-default-hover);
    }
}

.ssc-menu-submit:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* ---------------------------------------------------------------------------
   Gráficos. Todo toma su color de los tokens del tema, para que funcionen igual
   en claro y en oscuro sin definir dos paletas.
   --------------------------------------------------------------------------- */

.barras { margin-bottom: 1.25rem; }

.barra-fila {
    display: grid;
    grid-template-columns: minmax(7rem, 26%) 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
}

.barra-nombre {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.barra-pista {
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
    height: 0.875rem;
    position: relative;
}

.barra-relleno {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px;
    background: var(--mud-palette-primary);
    min-width: 2px;
}

.barra-valor {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 5rem;
    text-align: right;
}

/* Colores de las series de los gráficos: la paleta categórica de referencia
   del skill dataviz, en su orden (es lo que la hace segura para daltonismo en
   barras apiladas), con los tonos claros y los oscuros de la misma guía. El
   color va con el MÓDULO, no con su posición: Viáticos es siempre la 1. */
:root {
    --ssc-serie-1: #2a78d6; /* Viáticos */
    --ssc-serie-2: #eb6834; /* Reembolsos */
    --ssc-serie-3: #1baf7a; /* Adelantos */
    --ssc-serie-4: #eda100; /* Visa */
    --ssc-serie-5: #e87ba4; /* Pagos directos */
    --ssc-serie-6: #008300; /* Compras */
    --ssc-serie-7: #4a3aa7; /* Combustible */
    --ssc-serie-8: #e34948; /* Planilla */
}

.ssc-oscuro {
    --ssc-serie-1: #3987e5;
    --ssc-serie-2: #d95926;
    --ssc-serie-3: #199e70;
    --ssc-serie-4: #c98500;
    --ssc-serie-5: #d55181;
    --ssc-serie-6: #008300;
    --ssc-serie-7: #9085e9;
    --ssc-serie-8: #e66767;
}

.grafico-mensual { margin-bottom: 1.25rem; }

.grafico-mensual svg { display: block; width: 100%; height: auto; }

.grafico-mensual .leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.75rem;
}

.grafico-mensual .leyenda span { display: inline-flex; align-items: center; gap: 0.375rem; }

.grafico-mensual .muestra { width: 0.7rem; height: 0.7rem; border-radius: 2px; flex: none; }

/* 12 px y no 11: es el mínimo que admite el skill ui-ux-pro-max para cualquier
   texto, y estas etiquetas son las cifras del eje, que es justo lo que se lee
   para interpretar la barra. */
.g-tick, .g-lbl {
    font-size: 12px;
    fill: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   SISTEMA VISUAL
   ===========================================================================

   MudBlazor trae el sistema de diseño de Material, que es correcto pero
   genérico: sombras grises y difusas, tarjetas sin borde, cabeceras de tabla
   iguales que las filas. Esta sección lo lleva a la identidad de Servicold sin
   tocar los componentes uno a uno, apoyándose en las variables del tema
   (Components/Layout/AppTheme.cs).

   Todo lo que hay aquí es presentación: si se borra el bloque entero, la
   aplicación sigue funcionando con el aspecto de MudBlazor por defecto.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Fichas de diseño propias.

   El selector es «html:root» y no «:root» a propósito: MudThemeProvider inyecta
   sus variables en un <style> que el navegador coloca DESPUÉS de esta hoja, así
   que con la misma especificidad ganaría él. Añadir el elemento sube la
   especificidad lo justo (0,1,1 frente a 0,1,0) sin recurrir a !important.
   --------------------------------------------------------------------------- */
html:root {
    /* Sombras. Las de Material son un solo desenfoque gris que ensucia el
       blanco; éstas son dos capas —un contacto corto y una difusión larga— y
       van teñidas del azul de la marca, que es lo que hace que una tarjeta
       parezca apoyada en el fondo y no pegada encima. */
    --mud-elevation-1: 0 1px 2px rgba(20, 24, 64, .05), 0 1px 3px rgba(20, 24, 64, .04);
    --mud-elevation-2: 0 1px 2px rgba(20, 24, 64, .05), 0 2px 6px rgba(20, 24, 64, .06);
    --mud-elevation-3: 0 2px 4px rgba(20, 24, 64, .05), 0 4px 12px rgba(20, 24, 64, .07);
    --mud-elevation-4: 0 2px 4px rgba(20, 24, 64, .05), 0 6px 16px rgba(20, 24, 64, .08);
    --mud-elevation-6: 0 4px 8px rgba(20, 24, 64, .06), 0 10px 24px rgba(20, 24, 64, .10);
    --mud-elevation-8: 0 6px 12px rgba(20, 24, 64, .07), 0 16px 36px rgba(20, 24, 64, .12);
    --mud-elevation-12: 0 8px 16px rgba(20, 24, 64, .08), 0 24px 48px rgba(20, 24, 64, .14);
    --mud-elevation-16: 0 10px 20px rgba(20, 24, 64, .09), 0 32px 64px rgba(20, 24, 64, .16);
    --mud-elevation-24: 0 12px 24px rgba(20, 24, 64, .10), 0 40px 80px rgba(20, 24, 64, .18);

    /* Tokens propios, para no repetir literales por toda la hoja.

       NINGUNO es un color literal, y no es por gusto: MudBlazor 9 no marca el
       modo oscuro con una clase —ni en <html>, ni en <body>, ni en el layout—,
       sólo cambia el VALOR de sus variables. Así que no hay selector al que
       colgar una segunda paleta, y unos literales claros dejarían las fichas
       invisibles sobre la tarjeta oscura, que es justo lo que pasaba.

       Derivándolo todo de las variables del tema, el modo oscuro sale solo. */
    --ssc-borde-tarjeta: var(--mud-palette-lines-default);
    --ssc-borde-suave: var(--mud-palette-divider);
    --ssc-tinte-marca: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    --ssc-tinte-marca-fuerte: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    --ssc-cabecera-tabla: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
    --ssc-fila-hover: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
    --ssc-radio-chico: 8px;
    --ssc-radio: 10px;
    --ssc-radio-grande: 14px;
    /* 150 ms: lo que recomienda el skill ui-ux-pro-max para herramientas de
       facturación. Lo bastante corto para que el cambio de estado se sienta
       inmediato y lo bastante largo para que se note que ha cambiado. */
    --ssc-transicion: 150ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------------------
   Barra superior.
   --------------------------------------------------------------------------- */

/* Filo celeste bajo la barra: es el detalle que ancla la marca en pantallas
   donde el logotipo queda fuera de vista (móvil con el cajón cerrado).

   Sólo el filo, sin sombra difusa debajo: diseño plano, como pide el skill
   ui-ux-pro-max para herramientas contables. La barra se separa del contenido
   por el borde, no por una sombra. */
.mud-appbar.mud-appbar-fixed-top {
    border-bottom: 1px solid var(--ssc-borde-tarjeta);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--mud-palette-secondary) 35%, transparent);
}

.mud-appbar .mud-toolbar {
    gap: 2px;
}

/* Distintivo de marca de la barra. Ver MainLayout.razor. */
.ssc-marca {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-radius: var(--ssc-radio-chico);
    padding: 4px 6px 4px 4px;
    transition: background-color var(--ssc-transicion);
}

@media (hover: hover) and (pointer: fine) {
    .ssc-marca:hover {
        background-color: var(--ssc-tinte-marca);
    }
}

.ssc-marca:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* El copo va sobre el degradado de los dos colores del logotipo, que es lo que
   lo hace reconocible a 28 px. Es el ÚNICO degradado que queda en la
   interfaz, y a propósito: es la marca, no decoración. */
.ssc-marca-copo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--ssc-radio-chico);
    background: linear-gradient(135deg, #333D96 0%, #00C6FF 100%);
    color: #FFFFFF;
}

.ssc-marca-texto {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Cajón lateral.
   --------------------------------------------------------------------------- */

/* Cajón claro: del color de las tarjetas, separado del contenido por un borde
   en lugar de por un bloque de color. Todo sale de las variables del tema, así
   que en oscuro es el mismo diseño con la paleta oscura.

   Antes era azul marino. Se cambió a petición del usuario: el logotipo tenía
   que ir en una placa blanca que quedaba como un parche, y los títulos de
   sección, en gris sobre azul, no llegaban a 2:1 de contraste. */
.mud-drawer {
    border-right: 1px solid var(--ssc-borde-tarjeta);
}

.mud-drawer .mud-navmenu {
    padding: 8px 12px 20px;
}

.mud-drawer .mud-nav-link {
    border-radius: var(--ssc-radio-chico);
    margin-bottom: 2px;
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
    transition: background-color var(--ssc-transicion), color var(--ssc-transicion);
}

@media (hover: hover) and (pointer: fine) {
    .mud-drawer .mud-nav-link:hover:not(.active):not(.mud-nav-link-disabled) {
        background-color: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
    }
}

/* El texto de la entrada ocupa todo el ancho que queda tras el icono, para que
   el contador pueda irse al extremo derecho. */
.mud-drawer .mud-nav-link-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Entrada activa: fondo azul suave, texto e icono en el azul de la marca y una
   barra a la izquierda que la localiza de un vistazo en una lista de quince. */
.mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text {
    color: var(--mud-palette-primary);
}

.mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--ssc-tinte-marca);
    font-weight: 600;
    position: relative;
}

/* Dentro del enlace y no pegada al borde del cajón: MudBlazor le pone
   overflow:hidden por el efecto de onda, y fuera de su caja quedaría recortada. */
.mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--mud-palette-primary);
}

/* Títulos de sección («Solicitudes», «Contabilidad»). En el marcado van en
   minúscula; las versalitas las pone el CSS para que un lector de pantalla no
   los deletree. 12 px: el mínimo del skill ui-ux-pro-max. */
.ssc-nav-seccion {
    padding: 18px 12px 6px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Separador antes de Administración, que no lleva título propio. */
.ssc-nav-separador {
    height: 1px;
    margin: 14px 4px 10px;
    background: var(--ssc-borde-suave);
}

/* Etiqueta y contador en la misma línea, el contador al extremo derecho. */
.ssc-nav-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.ssc-nav-fila > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* Contador de pendientes. Relleno sólido del azul principal: es el único
   elemento del menú que pide atención, y debe ser lo primero que se ve. */
.ssc-nav-contador {
    flex: none;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Texto sólo para lectores de pantalla: invisible, pero presente en el árbol de
   accesibilidad. display:none o visibility:hidden lo ocultarían también a
   ellos. */
.ssc-solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   Tarjetas.

   Se limita al contenido de la página: el cajón, la barra, los diálogos y los
   popovers también son .mud-paper y no deben heredar el borde de tarjeta.
   --------------------------------------------------------------------------- */

.mud-main-content .mud-paper {
    border: 1px solid var(--ssc-borde-tarjeta);
    border-radius: var(--ssc-radio);
    background-clip: padding-box;
}

/* Un contenedor de tabla dentro de una tarjeta no necesita su propio marco. */
.mud-main-content .mud-paper .mud-paper,
.mud-main-content .mud-paper .mud-table {
    border: 0;
}

.mud-main-content .mud-paper.mud-elevation-0 {
    border-color: var(--ssc-borde-suave);
}

/* ---------------------------------------------------------------------------
   Cabecera de página.
   --------------------------------------------------------------------------- */

.ssc-page-header {
    margin-bottom: 1.5rem;
}

.ssc-page-header .mud-breadcrumbs {
    font-size: .8125rem;
}

/* Barra de marca a la izquierda del título: da pie a la cabecera sin necesidad
   de meter el logotipo en cada página. Color plano, no degradado: el skill
   ui-ux-pro-max pide diseño plano para herramientas contables, y el degradado
   en cada cabecera era decoración repetida cincuenta veces. */
.ssc-page-titulo {
    position: relative;
    padding-left: .875rem;
}

.ssc-page-titulo::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    bottom: .15em;
    width: 4px;
    border-radius: 4px;
    background: var(--mud-palette-primary);
}

/* ---------------------------------------------------------------------------
   Fichas de cifra.

   Un patrón que estaba repetido, con tres nombres distintos y tres aspectos
   distintos, en el panel, en métricas y en reportes. Ahora es uno solo.
   --------------------------------------------------------------------------- */

.ssc-fichas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: .875rem;
}

/* Variante estrecha, para rejillas de muchos recuentos pequeños. */
.ssc-fichas-densas {
    grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr));
    gap: .75rem;
}

.ssc-ficha {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .875rem 1rem;
    border: 1px solid var(--ssc-borde-tarjeta);
    border-radius: var(--ssc-radio);
    /* Un tono por dentro de la tarjeta que la contiene, no el mismo: en claro
       separa la ficha del blanco y en oscuro la levanta del fondo. */
    background: color-mix(in srgb, var(--mud-palette-text-primary) 2.5%, var(--mud-palette-surface));
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color var(--ssc-transicion), background-color var(--ssc-transicion);
}

/* Filo de color en el canto superior. Aparece al pasar por encima en las que
   son enlace, y está siempre en las de sólo lectura. */
.ssc-ficha::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--mud-palette-primary);
    opacity: 0;
    transition: opacity var(--ssc-transicion);
}

/* Al pasar por encima cambia de color, no se eleva. Antes subía un píxel con
   sombra: en una rejilla de ocho fichas, la que se movía al rozarla con el
   ratón de camino a otra distraía más de lo que informaba. El skill
   ui-ux-pro-max lo resume para herramientas contables: cambio de color en el
   hover, sin sombras. */
@media (hover: hover) and (pointer: fine) {
    a.ssc-ficha:hover {
        border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--ssc-borde-tarjeta));
        background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
    }

    a.ssc-ficha:hover::after {
        opacity: 1;
    }
}

/* En el teléfono no hay hover: la ficha responde al tocarla, no al soltar. */
a.ssc-ficha:active {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

a.ssc-ficha:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.ssc-ficha-valor {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.ssc-ficha-valor-chico {
    font-size: 1.25rem;
}

.ssc-ficha-nombre {
    font-size: .75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

/* Punto de color del estado, en las fichas de recuento por estado. */
.ssc-ficha-punto {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    margin-right: .375rem;
    vertical-align: middle;
    flex: none;
}

/* ---------------------------------------------------------------------------
   Estados vacíos. Ver Components/Shared/Vacio.razor.
   --------------------------------------------------------------------------- */

.ssc-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.75rem 1.5rem;
    /* Dentro de NoRecordsContent la celda de MudTable hereda negrita, y sin
       esto la pista sale en 700 y pesa más que el título al que acompaña. */
    font-weight: 400;
}

/* El icono va dentro de un disco teñido de la marca. Suelto y en gris se
   confunde con un icono de acción desactivado; dentro del disco se lee como
   una ilustración, que es lo que es. */
.ssc-vacio-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .875rem;
    border-radius: 50%;
    background: var(--ssc-tinte-marca);
    color: var(--mud-palette-primary);
}

.ssc-vacio-titulo {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.ssc-vacio-pista {
    margin: .25rem 0 0;
    max-width: 30rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.ssc-vacio-accion {
    margin-top: 1.125rem;
}

/* ---------------------------------------------------------------------------
   Tablas.

   La cabecera se distingue de las filas: en una tabla de doce columnas y
   cincuenta filas, si la cabecera se lee igual que el contenido hay que
   contarlas para saber qué se está mirando.
   --------------------------------------------------------------------------- */

/* Los selectores repiten los de MudBlazor —«.mud-simple-table table * tr > th»
   pesa (0,2,3)— porque una clase suelta pierde contra ellos y la cabecera se
   quedaba con el tamaño y la caja del subtítulo. Misma razón que en el bloque
   de relleno denso, más abajo. */
.mud-table .mud-table-head .mud-table-cell,
.mud-simple-table table thead * tr > th,
.mud-simple-table table thead tr > th,
.mud-table-head .mud-table-cell,
.mud-simple-table thead th {
    background: var(--ssc-cabecera-tabla);
    /* 12 px: el mínimo del skill ui-ux-pro-max. Estaba en 11, y en mayúsculas
       espaciadas es lo que más cuesta leer de una tabla. */
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-table-lines);
    white-space: nowrap;
}

/* Las cabeceras ordenables son un MudButton dentro del th: sin esto conservan
   su propia tipografía y la columna ordenable se lee distinta de las demás. */
.mud-table .mud-table-head .mud-table-cell .mud-button-root,
.mud-table-head .mud-table-cell .mud-button-root {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

/* Fila de totales. Va en <tfoot> con celdas <th>, así que la regla de arriba se
   limita a <thead> a propósito: un total en versalitas de 11 px es la cifra que
   más se mira de la tabla escrita con el cuerpo más pequeño de la pantalla. */
.mud-simple-table table tfoot tr > th,
.mud-simple-table tfoot th {
    background: var(--ssc-cabecera-tabla);
    font-size: .875rem;
    font-weight: 600;
    border-top: 2px solid var(--mud-palette-table-lines);
    border-bottom: 0;
}

.mud-simple-table tbody tr:last-child td,
.mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
    .mud-table-hover .mud-table-row:hover,
    .mud-simple-table tbody tr:hover {
        background-color: var(--ssc-fila-hover);
    }
}

/* Al tocar una fila que abre algo, se marca mientras el dedo está encima. */
.mud-simple-table tbody tr.cursor-pointer:active,
.mud-table-row.cursor-pointer:active {
    background-color: var(--ssc-fila-hover);
}

/* Listado de Solicitudes (2026-10-15). El número es un enlace de verdad (otra
   pestaña, teclado) y no se parte: «ADV-2026-000052» se leía en tres líneas. */
.ssc-enlace-solicitud {
    white-space: nowrap;
    color: var(--mud-palette-primary);
    font-weight: 500;
    text-decoration: none;
}

.ssc-enlace-solicitud:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .ssc-enlace-solicitud:hover {
        text-decoration: underline;
    }
}

/* La descripción, a dos líneas como mucho: las filas quedan parejas. */
.ssc-descripcion-fila {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Una fila que navega al pulsarla tiene que parecerlo. */
.mud-simple-table tbody tr.cursor-pointer,
.mud-table-row.cursor-pointer {
    cursor: pointer;
}

/* Los importes y los códigos ya van en cifras de ancho fijo; aquí se les da el
   peso que pide una columna que se compara de arriba abajo. */
.mud-table-cell .importe,
td.importe {
    font-variant-numeric: tabular-nums;
}

/* Cifras alineadas a la derecha en las tablas simples, igual que su título.

   MudBlazor alinea TODA celda de MudSimpleTable al inicio con
   «.mud-simple-table table * tr > td», que pesa (0,2,3). La regla «.importe»
   del principio de este fichero pesa (0,1,0) y perdía siempre: el título de
   la columna, alineado a la derecha con un style en línea, quedaba en un sitio
   y las cifras en otro. Pasaba en 96 celdas de 13 pantallas —combustible,
   métricas, salarios, cierre, detalle de solicitud…—.

   Mismo selector que MudBlazor, así que empatan en peso y gana éste por venir
   después. Si algún día MudBlazor lo endurece, esto vuelve a romperse: el
   síntoma es ése, títulos y cifras desalineados en las columnas de importes. */
.mud-simple-table table * tr > td.importe,
.mud-simple-table table * tr > th.importe,
.mud-simple-table table * tr > td.text-right,
.mud-simple-table table * tr > th.text-right {
    text-align: right;
}

/* Un importe que se TECLEA dentro de una tabla, bajo un título alineado a la
   derecha: el texto del campo también a la derecha, para que la cifra quede
   debajo de su título y en columna con las de las otras filas. */
.campo-importe .mud-input-slot {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Botones.
   --------------------------------------------------------------------------- */

.mud-button-root {
    border-radius: var(--ssc-radio-chico);
    transition: box-shadow var(--ssc-transicion), background-color var(--ssc-transicion), border-color var(--ssc-transicion);
}

/* Botones planos. El principal llevaba un halo azul debajo para destacar
   entre seis botones; ya destaca por ser el único relleno de color sólido, y
   el halo era justo lo que el skill ui-ux-pro-max señala como antipatrón en
   herramientas contables («sombras complejas»). Se quita también la elevación
   que MudBlazor pone por defecto a los rellenos, que es otra sombra.

   El hover se marca oscureciendo el relleno, no levantándolo. */
.mud-button-filled {
    box-shadow: none;
}

.mud-button-filled:active,
.mud-button-filled:focus-visible {
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    .mud-button-filled:hover {
        box-shadow: none;
    }

    .mud-button-filled.mud-button-filled-primary:hover {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 86%, #000);
    }
}

.mud-button-outlined {
    border-width: 1px;
}

.mud-icon-button {
    border-radius: var(--ssc-radio-chico);
}

/* ---------------------------------------------------------------------------
   Etiquetas de estado.

   MudBlazor las pinta como texto suelto del color del estado, que sobre blanco
   se lee como un texto más. Aquí son pastillas con fondo teñido: se reconocen
   por la forma antes de leerlas.
   --------------------------------------------------------------------------- */

.mud-chip.mud-chip-text {
    background-color: currentColor;
    border: 1px solid;
    font-weight: 600;
}

/* El fondo se consigue tiñendo el propio color del chip; el texto vuelve a él
   con color-mix para no tener que declarar doce parejas de colores a mano. */
.mud-chip.mud-chip-text.mud-chip-color-success,
.mud-chip.mud-chip-text.mud-chip-color-warning,
.mud-chip.mud-chip-text.mud-chip-color-error,
.mud-chip.mud-chip-text.mud-chip-color-info,
.mud-chip.mud-chip-text.mud-chip-color-primary,
.mud-chip.mud-chip-text.mud-chip-color-secondary,
.mud-chip.mud-chip-text.mud-chip-color-tertiary,
.mud-chip.mud-chip-text.mud-chip-color-default {
    background-color: color-mix(in srgb, currentColor 11%, transparent);
    border-color: color-mix(in srgb, currentColor 22%, transparent);
}

/* ---------------------------------------------------------------------------
   Campos de formulario.
   --------------------------------------------------------------------------- */

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--ssc-radio-chico);
}

/* Anillo de foco visible. El de MudBlazor sólo engorda el borde, que con luz
   de oficina y una pantalla mate cuesta de ver. */
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    /* Derivado del tema y no escrito a mano: el azul literal del modo claro
       apenas se veía sobre el fondo oscuro. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

/* Etiqueta de un par etiqueta-valor en las fichas de detalle. 12 px, no 11:
   el mínimo del skill ui-ux-pro-max. */
.ssc-dato-etiqueta {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    display: block;
    margin-bottom: .1rem;
}

.ssc-dato-valor {
    font-size: .875rem;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   Diálogos y avisos.
   --------------------------------------------------------------------------- */

.mud-dialog {
    border-radius: var(--ssc-radio-grande);
}

.mud-dialog .mud-dialog-title {
    border-bottom: 1px solid var(--ssc-borde-suave);
    padding-bottom: 12px;
}

.mud-dialog .mud-dialog-actions {
    border-top: 1px solid var(--ssc-borde-suave);
    padding-top: 12px;
}

.mud-alert {
    border-radius: var(--ssc-radio);
}

/* Un aviso delineado con el fondo del papel se pierde sobre la tarjeta que lo
   contiene; con el fondo teñido de su propio color se lee como lo que es. */
.mud-alert.mud-alert-outlined {
    background-color: color-mix(in srgb, currentColor 6%, var(--mud-palette-surface));
}

.mud-snackbar {
    border-radius: var(--ssc-radio);
}

/* ---------------------------------------------------------------------------
   Cajas flex que no dejaban encoger a su contenido.

   Un elemento flex vale por defecto «min-width: auto», o sea: no se encoge por
   debajo del ancho natural de lo que lleva dentro. Con una tabla dentro, eso
   deja de ser un detalle: la tabla impone su ancho, el flex se niega a
   encogerse y la PÁGINA ENTERA se ensancha, con la barra superior desplazada y
   scroll horizontal en el móvil. Poner el mínimo a cero devuelve el desborde a
   donde corresponde, que es el contenedor de la tabla (ya tiene overflow-x).
   --------------------------------------------------------------------------- */

/* El aviso de adelantos sin liquidar lleva una tabla dentro. */
.mud-alert-position,
.mud-alert-message {
    min-width: 0;
}

/* La cabecera de un panel desplegable lleva el nombre y sus etiquetas. */
.mud-expand-panel-text {
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Móvil. MudBlazor resuelve lo grueso (drawer responsive, tablas apiladas con
   Breakpoint.Sm, rejilla con xs); aquí va lo que no cubre.
   --------------------------------------------------------------------------- */

/* Una tabla densa de diez o doce columnas no cabe en un portátil de 1280 px:
   MudBlazor reserva 16 px a cada lado de CADA celda, que en doce columnas son
   384 px de puro aire, y las últimas columnas —que aquí son «Planilla» y
   «Total», las que se miran— se van fuera de la pantalla. Por debajo de 1500 px
   se aprieta el relleno a la mitad. Los selectores repiten los de MudBlazor
   porque los suyos pesan más que una clase suelta. */
@media (max-width: 1499.98px) {

    .mud-simple-table.mud-table-dense * tr td,
    .mud-simple-table.mud-table-dense * tr th,
    .mud-table.mud-table-dense .mud-table-cell {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Las tablas simples (resúmenes, desgloses, detalle) no se apilan: en pantallas
   estrechas se desplazan en horizontal en vez de desbordar la página. */
.mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tablas APILADAS en el móvil (Breakpoint de MudTable): cada fila es una
   tarjeta «etiqueta: valor». La tabla conservaba su ancho automático, y un
   correo largo o una fila de chips la estiraba a 440-560 px en una pantalla
   de 317: los valores quedaban cortados a la derecha y «Empleado» o «Último
   acceso» parecían vacíos (Usuarios, 2026-09-30). Aquí la tabla se ajusta al
   ancho, el texto largo parte línea y los chips bajan a otra fila. Cada regla
   sólo actúa por debajo del punto en que MudBlazor apila esa tabla. */
@media (max-width: 599.98px) {
    .mud-xs-table .mud-table-root { width: 100%; table-layout: fixed; }
    .mud-xs-table .mud-table-root .mud-table-cell { flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; overflow-wrap: anywhere; text-align: right; }
    .mud-xs-table .mud-table-root .mud-table-cell[data-label]::before { margin-right: auto; }
}

@media (max-width: 959.98px) {
    .mud-sm-table .mud-table-root { width: 100%; table-layout: fixed; }
    .mud-sm-table .mud-table-root .mud-table-cell { flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; overflow-wrap: anywhere; text-align: right; }
    .mud-sm-table .mud-table-root .mud-table-cell[data-label]::before { margin-right: auto; }
}

@media (max-width: 1279.98px) {
    .mud-md-table .mud-table-root { width: 100%; table-layout: fixed; }
    .mud-md-table .mud-table-root .mud-table-cell { flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; overflow-wrap: anywhere; text-align: right; }
    .mud-md-table .mud-table-root .mud-table-cell[data-label]::before { margin-right: auto; }
}

/* Popover de la campana: nunca más ancho que la pantalla. */
.ssc-popover-notificaciones {
    min-width: min(340px, calc(100vw - 32px));
    max-width: min(420px, calc(100vw - 32px));
}

/* Instalada como PWA en un móvil con muesca: la barra superior y el cajón no
   quedan debajo de la barra de estado. */
.mud-appbar {
    padding-top: env(safe-area-inset-top);
}

.mud-drawer {
    padding-top: env(safe-area-inset-top);
}

@media (max-width: 599.98px) {

    /* Menos aire alrededor del contenido: en 375 px cada píxel cuenta. */
    .mud-main-content > .mud-container {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 16px;
    }

    /* Los diálogos ocupan toda la pantalla, como una vista propia: un formulario
       de varias secciones dentro de una tarjeta flotante de 320 px es inusable. */
    .mud-dialog-container .mud-dialog {
        margin: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .mud-dialog-container .mud-dialog .mud-dialog-content {
        flex: 1 1 auto;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mud-dialog-container .mud-dialog .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    /* Acciones de cabecera: a todo el ancho y en columna, en vez de un botón
       de 40 px al lado de un título de tres líneas. */
    .ssc-page-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .ssc-page-actions .mud-button-root {
        width: 100%;
    }

    /* Detalle de solicitud: las decisiones van en la barra de abajo. */
    .ssc-acciones-escritorio {
        display: none;
    }

    /* Barra fija de acciones del detalle (2026-10-15): la decisión al alcance
       del pulgar. La principal ocupa el espacio; el resto, en «Más acciones»,
       lejos de ella: antes «Rechazar» estaba pegado a «Aprobar». */
    .ssc-barra-acciones {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        gap: 8px;
        align-items: center;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-lines-default);
        box-shadow: 0 -2px 8px rgba(20, 24, 64, .08);
    }

    .ssc-barra-acciones .ssc-barra-principal {
        flex: 1 1 auto;
        min-height: 48px;
    }

    .ssc-barra-acciones .ssc-barra-mas .mud-button-root {
        min-height: 48px;
        width: auto;
    }

    .ssc-hueco-barra {
        height: calc(72px + env(safe-area-inset-bottom));
    }

    /* Los avisos salen por encima de la barra, no debajo de ella. */
    body:has(.ssc-barra-acciones) .mud-snackbar-provider {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    /* Paginador de tabla: cabe en dos líneas en vez de desbordar. */
    .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        height: auto;
        padding: 8px;
        justify-content: center;
    }

    /* iOS hace zoom al enfocar un campo con letra menor de 16 px. */
    .mud-input,
    .mud-select-input,
    .mud-input-slot {
        font-size: 16px;
    }

    /* Títulos de página algo más contenidos. */
    .mud-typography-h1 {
        font-size: 1.375rem;
    }

    /* Etiquetas largas («Empleado al que corresponde el gasto») no pisan la
       flecha del desplegable ni el icono del campo: se recortan con puntos. */
    .mud-input-label {
        max-width: calc(100% - 48px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* La barra superior: el chip de usuario sin nombre no necesita relleno. */
    .mud-appbar .mud-chip {
        padding: 0 4px;
    }

    /* Fila apilada de MudTable: etiqueta y valor con espacio suficiente para
       importes largos y códigos de solicitud. */
    .mud-table-root .mud-table-cell[data-label]::before {
        min-width: 40%;
        padding-right: 8px;
    }

    /* Los avisos (snackbar) no tapan la barra inferior del móvil. */
    .mud-snackbar-provider {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* -----------------------------------------------------------------------
       Zona táctil. Un icono de 26 px se falla con el dedo; la guía de Apple y
       la de Android piden 44 px, y MudBlazor dimensiona sus botones pequeños
       para el ratón.

       Lo que crece es la CAJA del botón, no el icono —que se sigue dibujando a
       20 px—, así que el aspecto no cambia. Y se hace con tamaño real en vez de
       un recuadro invisible a propósito: dos botones contiguos se separan solos
       en la maquetación en lugar de solaparse y robarse el toque, que es lo que
       pasaba en Auditoría con los dos iconos de cada fila.
       ----------------------------------------------------------------------- */

    .mud-icon-button-size-small {
        min-width: 40px;
        min-height: 40px;
    }

    .mud-button-outlined-size-small,
    .mud-button-text-size-small,
    .mud-button-filled-size-small {
        min-height: 40px;
    }

    .mud-pagination-item > .mud-button-root {
        min-width: 40px;
        min-height: 40px;
    }

    /* Las flechas de un campo numérico miden 20 px y van una encima de la otra
       dentro de un campo de 40: no hay hueco para agrandarlas sin que se pisen.
       Y aquí casi todos esos campos son importes —monto, subtotal, ITBMS,
       tarifa—, donde un toque de más cambia la cifra de una factura sin que se
       note. En el móvil el campo ya abre el teclado numérico (inputmode), así
       que se teclea; las flechas sobran. En el escritorio siguen estando. */
    .mud-input-control.mud-input-number-control .mud-input-numeric-spin {
        display: none;
    }
}

/* ===========================================================================
   ACCESIBILIDAD
   Reglas de severidad alta del skill ui-ux-pro-max que la interfaz no cumplía.
   =========================================================================== */

/* Foco visible en todo lo que se puede accionar con el teclado.

   MudBlazor marca el foco de sus botones con un velo de fondo casi
   imperceptible, y en un botón de texto sobre blanco no se ve. Quien trabaja
   con el teclado —o con un lector de pantalla— no sabía dónde estaba. Sólo se
   dibuja con :focus-visible, así que al hacer clic con el ratón no aparece.

   Los campos de texto no van aquí: MudBlazor ya les engrosa y colorea el borde
   al enfocarlos, y un segundo contorno encima sería ruido.

   .mud-button-root cubre también los botones de icono, las casillas y los
   interruptores: MudBlazor los construye todos sobre esa misma clase. */
.mud-button-root:focus-visible,
.mud-nav-link:focus-visible,
.mud-chip:focus-visible,
.mud-table-sort-label:focus-visible,
.mud-tab:focus-visible,
.mud-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Dentro del cajón el anillo va por dentro del enlace: por fuera chocaría con
   el borde derecho del cajón y con la entrada de al lado. Mantiene el azul
   principal; cuando el cajón era azul marino iba en celeste, pero sobre el
   blanco actual el celeste no llega ni a 2:1. */
.mud-drawer .mud-nav-link:focus-visible,
.mud-drawer .mud-button-root:focus-visible {
    outline-offset: -2px;
}

/* Movimiento reducido.

   Quien ha pedido al sistema operativo menos animación —por mareo, migraña o
   trastorno vestibular— lo ha pedido para todo, también para esta página. Se
   reducen las transiciones a casi cero en lugar de quitarlas: algunos
   componentes de MudBlazor esperan el evento transitionend para terminar de
   abrirse, y con «none» un diálogo podía quedarse a medio mostrar. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Columnas secundarias de una tabla que sobran en el telefono (programacion de pagos, 2026-10-15). */
@media (max-width: 599.98px) {
    .ssc-ocultar-movil {
        display: none;
    }
}