/* =========================================================
   mud-carwash.css — ajustes finos de MudBlazor para el rediseño.

   Se aplica SOLO a componentes .mud-* => es independiente del CSS
   legado (site.css/theme.css) y sobrevive a su retiro en F7.
   Theme-aware: usa variables --mud-palette-* que MudBlazor
   recalcula al cambiar entre claro y oscuro.
   ========================================================= */

/* --- Encabezado de tabla (estilo elegido en el taller) -----------------
   Slate #2c3e50 (el mismo gris-azulado que la marca usa en los textos, por
   eso "pertenece" al sistema) + texto blanco + línea celeste de 4px.
   Contraste blanco sobre slate = 10.4:1, muy por encima del 4.5:1 de WCAG AA.
   Fijo (no adaptativo): legible en claro y en oscuro. Solo la PRIMERA fila
   del thead (el título), para no pintar la fila de filtros de los grids en
   memoria. Fondo opaco -> correcto con FixedHeader sticky. */
.mud-table-root .mud-table-head tr:first-child .mud-table-cell {
    background-color: #2c3e50;
    color: #ffffff;
    font-weight: 600;
    border-bottom: 4px solid #aad0f8;
}
/* Íconos del encabezado (flecha de orden, opciones de columna) en blanco
   para que sigan visibles sobre el marino. */
.mud-table-root .mud-table-head tr:first-child .mud-table-cell .mud-icon-root {
    color: #ffffff;
}

/* --- Tipografía de la grid: compacta para POS de datos densos ----------
   13px es el estándar de los sistemas administrativos/POS: compacto pero
   legible (NO bajamos de ahí; sub-13px fue el hallazgo ilegible de la
   auditoría). En rem para escapar del hack heredado del .content legado. */
.mud-table-root {
    font-size: 0.8125rem;   /* 13px */
}

/* =======================================================================
   MENÚ LATERAL — "vida" (hover y página actual)

   Recupera el lenguaje del menú anterior, que el dueño pidió conservar:
   barra de acento celeste a la izquierda, texto lima en el item activo,
   deslizamiento corto a la derecha y transición suave.

   Por qué colores FIJOS y no --mud-palette-primary: el drawer es oscuro
   (#0c1525) en AMBOS temas (ver CarWashTheme.cs), así que un acento vivo
   se lee igual en claro y en oscuro; el primario azul de la paleta, en
   cambio, se pierde sobre ese fondo.

   LOS DOS COLORES SON CONFIGURABLES desde Ajustes → Apariencia. Estos son
   los valores por DEFECTO; si el negocio guarda los suyos, MainLayout los
   pisa con un style inline sobre el MudDrawer (un valor inline le gana a
   la hoja de estilos, y por eso aquí no llevan !important: solo las
   PROPIEDADES que consumen las variables lo necesitan, no las variables).
   Todo lo demás —fondos, brillos, sombra del icono— se DERIVA del acento
   con color-mix: hay un solo color que cambiar, no seis.

   Regla de oro heredada de la auditoría: nada de esto puede mover el
   layout. Todo el movimiento va por `transform` (no empuja a los vecinos,
   y lo pinta la GPU), nunca por padding/margin/width.
   ======================================================================= */
.mud-drawer {
    --cw-nav-acento: #f39c12;          /* barra, iconos y fondos */
    --cw-nav-activo-texto: #4DD0E1;    /* texto de la página actual */
    --cw-nav-desliz: 14px;             /* cuánto se corre a la derecha */
    --cw-nav-barra: 3px;               /* grosor de la barra izquierda */
    --cw-nav-brillo: 0px;              /* halo de la barra y del icono (0 = sin halo) */
    --cw-nav-icono-activo: 1.25;       /* cuánto crece el icono activo */
    --cw-nav-curva: cubic-bezier(.4, 0, .2, 1);
}

/* --- Base: la barra de acento vive siempre, apagada -------------------
   Es un ::before con scaleY(0), no un border-left: así puede CRECER de
   adentro hacia afuera en vez de aparecer de golpe, y al no ocupar caja
   no corre el texto ni un píxel. */
.mud-drawer .mud-nav-link {
    position: relative;
    border-radius: 8px;                /* el radio único del sistema */
    transition: background .22s var(--cw-nav-curva),
                color .22s var(--cw-nav-curva),
                transform .22s var(--cw-nav-curva);
}
.mud-drawer .mud-nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--cw-nav-barra);
    height: 62%;
    border-radius: 0 3px 3px 0;
    background: var(--cw-nav-acento);
    transform: translateY(-50%) scaleY(0);
    transition: transform .22s var(--cw-nav-curva), box-shadow .22s var(--cw-nav-curva);
    pointer-events: none;
}
/* El icono acompaña: crece un pelo y se enciende. transform-origin al
   centro para que crezca en su sitio y no empuje al texto. */
.mud-drawer .mud-nav-link .mud-icon-root {
    transition: color .22s var(--cw-nav-curva), transform .22s var(--cw-nav-curva),
                filter .22s var(--cw-nav-curva);
}

/* --- Al pasar el mouse: insinuar, no gritar ---------------------------
   OJO con los !important de este bloque y del siguiente: NO son pereza.
   MudBlazor 7.16 trae reglas propias MÁS específicas que las nuestras
   (`.mud-navmenu.mud-navmenu-primary .mud-nav-link.active` = 0,5,0) y
   además una con !important (`font-weight:500 !important`). Como el
   MudNavMenu está declarado con Color="Color.Primary", sin esto el color
   y el fondo se quedan en el azul del framework y no se ve el cambio.
   Solo van marcadas las propiedades que chocan de verdad; transform y
   ::before no compiten con nadie y van limpias. */
.mud-drawer .mud-nav-link:hover {
    background: linear-gradient(90deg,
                color-mix(in srgb, var(--cw-nav-acento) 12%, transparent) 0%,
                color-mix(in srgb, var(--cw-nav-acento) 2%, transparent) 100%) !important;
    transform: translateX(4px);
}
.mud-drawer .mud-nav-link:hover::before {
    transform: translateY(-50%) scaleY(.55);
}
.mud-drawer .mud-nav-link:hover .mud-icon-root {
    color: var(--cw-nav-acento) !important;
    transform: scale(1.08);
}

/* --- La página actual: se ve de un vistazo desde el otro lado del local -
   Cuatro señales a la vez, y a propósito: color (lima), peso, posición
   (corrida a la derecha) y la barra encendida con brillo. Si el usuario
   distingue mal los colores, la barra y la posición siguen diciéndolo. */
.mud-drawer .mud-nav-link.active {
    background: linear-gradient(90deg,
                color-mix(in srgb, var(--cw-nav-acento) 25%, transparent) 0%,
                color-mix(in srgb, var(--cw-nav-acento) 4%, transparent) 70%,
                transparent 100%) !important;
    color: var(--cw-nav-activo-texto) !important;
    font-weight: 600 !important;
    transform: translateX(var(--cw-nav-desliz));
}
.mud-drawer .mud-nav-link.active::before {
    height: 72%;
    transform: translateY(-50%) scaleY(1);
    /* el "algo que resalta" a la izquierda; con --cw-nav-brillo:0 el halo
       desaparece y queda la barra limpia */
    box-shadow: 0 0 var(--cw-nav-brillo) 0 var(--cw-nav-acento);
}
.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--cw-nav-acento) !important;
    transform: scale(var(--cw-nav-icono-activo));
    filter: drop-shadow(0 0 calc(var(--cw-nav-brillo) / 2)
            color-mix(in srgb, var(--cw-nav-acento) 55%, transparent));
}

/* --- La SECCIÓN que contiene la página actual también se marca ---------
   Con el acordeón cerrado, o con la lista larga, el item activo puede
   quedar fuera de pantalla: la cabecera del grupo hereda el lima para que
   siempre se sepa en qué módulo se está parado. `:has()` lee el estado
   real del DOM, así que no hay que llevar la cuenta en C#. */
.mud-drawer .mud-nav-group:has(.mud-nav-link.active) > .mud-nav-link {
    color: var(--cw-nav-activo-texto);
    font-weight: 600;
}
.mud-drawer .mud-nav-group:has(.mud-nav-link.active) > .mud-nav-link .mud-icon-root {
    color: var(--cw-nav-acento);
}

/* --- Modo mini (drawer colapsado a 60px) ------------------------------
   Ahí solo se ven iconos: correr el link a la derecha lo descentraría del
   riel. Se anula el desplazamiento y manda la barra + el brillo del icono,
   que en mini se leen mejor todavía. */
.mud-drawer.mud-drawer--closed .mud-nav-link,
.mud-drawer.mud-drawer--closed .mud-nav-link:hover {
    transform: none;
}

/* --- Respeto a quien pidió menos movimiento ---------------------------
   Se apagan los desplazamientos y las escalas; el color y la barra
   quedan (son información, no adorno). */
@media (prefers-reduced-motion: reduce) {
    .mud-drawer .mud-nav-link,
    .mud-drawer .mud-nav-link::before,
    .mud-drawer .mud-nav-link .mud-icon-root {
        transition: none;
    }
    .mud-drawer .mud-nav-link:hover,
    .mud-drawer .mud-nav-link.active {
        transform: none;
    }
    .mud-drawer .mud-nav-link:hover .mud-icon-root,
    .mud-drawer .mud-nav-link.active .mud-icon-root {
        transform: none;
    }
}

/* --- Color del icono por tipo de accion en el menu ---------------------
   Verde = crear/registrar, azul = consultar. Ayuda a distinguir de un
   vistazo sin leer, y el texto sigue siendo el que manda. */
.cw-nav-crear .mud-nav-link .mud-icon-root {
    color: var(--mud-palette-success);
}
.cw-nav-consultar .mud-nav-link .mud-icon-root {
    color: var(--mud-palette-info);
}
/* Al pasar el mouse o estando activo, el icono toma el acento del menú para
   no competir con la barra de la izquierda. */
.cw-nav-crear .mud-nav-link:hover .mud-icon-root,
.cw-nav-consultar .mud-nav-link:hover .mud-icon-root,
.cw-nav-crear .mud-nav-link.active .mud-icon-root,
.cw-nav-consultar .mud-nav-link.active .mud-icon-root {
    color: var(--cw-nav-acento);
}

/* --- Grids con anchos de columna definidos ----------------------------
   Se activa poniendo Class="cw-grid-fixed" en el MudDataGrid, y SOLO en las
   páginas donde definimos anchos por columna (HeaderStyle="width:...").
   Con table-layout:fixed el navegador respeta esos anchos al pie de la letra
   y reparte el sobrante entre las columnas sin ancho: la tabla jamás excede
   el 100%, así que desaparece la barra horizontal que salía por los ~15px
   que roba la barra vertical. El texto que no quepa se corta con "...". */
.cw-grid-fixed table {
    table-layout: fixed;
    width: 100%;
}
/* Solo recortar el desbordamiento; el "..." NO va aquí de forma global porque
   se dispara en celdas que llevan chips (Estado, Vehículos) aunque el texto
   quepa de sobra. Se aplica por columna, únicamente en las de texto libre. */
.cw-grid-fixed .mud-table-cell {
    overflow: hidden;
}

/* --- Filas ceñidas y en una sola línea --------------------------------
   Padding vertical mínimo + nowrap: el teléfono y demás campos ya no
   saltan a dos líneas (era lo que inflaba la altura de la fila). */
.mud-table-dense .mud-table-cell {
    padding-top: 2px;
    padding-bottom: 2px;
    white-space: nowrap;
}

/* --- La paginación SIEMPRE a la vista ---------------------------------
   Cada página tiene un encabezado de distinto alto (filtros, KPIs), así que
   el Height="calc(100vh - 200px)" de las grids no siempre acierta: cuando el
   encabezado es más alto, el pie de la tabla queda por debajo del pliegue y
   hay que hacer scroll para cambiar de página o ver el total de registros.
   Con sticky se ancla al borde inferior de la ventana mientras la tabla esté
   en pantalla, sin importar cuánto ocupe lo de arriba.

   OJO con el display: MudBlazor trae `.mud-table-pagination{display:initial}`
   y `initial` en display significa INLINE. Sobre una caja inline el fondo solo
   se pinta detrás de los fragmentos de texto, no del bloque completo — por eso
   el primer intento se veía transparente y las filas se leían por debajo del
   pie. Hay que forzar block para que el fondo cubra y el sticky sea fiable.
   El fondo va sobre .mud-table-pagination-toolbar, que es la barra real de
   52px (la que ya trae el borde superior de MudBlazor). */
.mud-table .mud-table-pagination {
    display: block;
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 3;
}
.mud-table .mud-table-pagination .mud-table-pagination-toolbar {
    /* Opaco de verdad: --mud-palette-surface lo emite MudThemeProvider en
       tiempo de ejecución y cambia solo entre claro y oscuro. */
    background-color: var(--mud-palette-surface);
    /* La sombra hacia arriba deja claro que es una barra fija y no una fila
       más de la tabla, en los momentos en que sí tapa contenido. */
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .10);
}

/* --- Banner de MODO PRUEBA sin tapar la barra superior -----------------
   El banner se dibuja antes del MudLayout, pero MudAppBar es position:fixed
   en top:0, asi que un banner sticky con z-index alto le queda ENCIMA y se
   traga todos sus clics: menu, volver, buscar, notificaciones, tema y menu de
   usuario quedaban muertos mientras se probaba contra la copia del cliente.
   La solucion no es bajarle el z-index (quedaria oculto detras de la barra),
   sino correr TODO el shell hacia abajo su misma altura. */
:root {
    --cw-alto-banner-prueba: 32px;
}
.cw-banner-prueba {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3000;
    height: var(--cw-alto-banner-prueba);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #b91c1c;
    color: #fff;
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
/* Con el banner presente, la barra, el menu lateral y el contenido arrancan
   debajo de el. Se usa :has() para que aplique SOLO en modo prueba: en
   produccion el banner no existe y el shell queda intacto. */
body:has(.cw-banner-prueba) .mud-appbar,
body:has(.cw-banner-prueba) .mud-drawer {
    top: var(--cw-alto-banner-prueba);
}
body:has(.cw-banner-prueba) .mud-main-content {
    padding-top: calc(var(--mud-appbar-height) + var(--cw-alto-banner-prueba));
}

/* --- Modal de autorización de supervisor (único Bootstrap que queda) ----
   Un modal Bootstrap con z-index 1060 era correcto contra el layout viejo, pero
   en el shell de MudBlazor queda DEBAJO del menú lateral (1100) y de la barra
   superior (1300). Este además SIEMPRE aparece encima de otro diálogo (el de
   anular, que es un MudDialog en 1400), así que necesita 1450.

   Tope en 1450 y no más: por debajo del Snackbar (1500), que tiene que poder
   avisar si la clave está mal aunque el modal esté abierto.

   Va con !important porque el z-index de estos modales heredados vive inline en
   su atributo style, y una declaración !important de hoja de estilo es lo único
   que le gana a un inline.

   Aquí había además una regla general .modal.show.d-block para BuscarClienteModal
   y AcercaDeModal. Los dos ya son MudDialog, así que se borró. Cuando este último
   se migre, esta regla se va con él y el CSS deja de saber que existió Bootstrap. */
.modal.show.d-block.cw-modal-supervisor {
    z-index: 1450 !important;
    background-color: rgba(0, 0, 0, .5);
}