/* C2R-32: día de inicio marcado en el calendario de RangoFechasUnico mientras se espera el fin. */
.mud-picker-calendar-day.rango-fechas-inicio {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/*
  Normalización de controles MudBlazor.

  MudGlobal de MudBlazor 7.12 sólo expone defaults para diálogos, tooltips,
  popovers y overlays — NO para Variant/Margin/Dense de inputs. Por eso el
  tamaño se venía definiendo prop por prop en cada página, con resultados
  inconsistentes. Esto lo resuelve por CSS: aplica pase lo que pase en las props.

  Todos los valores vienen de --shk-*, definidos por ShackletonTokens.
*/

.mud-input-control .mud-input-slot,
.mud-input-control .mud-select-input .mud-input-slot {
    min-height: var(--shk-control-height);
    padding-left: var(--shk-control-padding-x);
    padding-right: var(--shk-control-padding-x);
    font-size: var(--shk-control-font-size);
}

/* MudBlazor.min.css fija `box-sizing: content-box` en un selector compuesto:
   `.mud-input>input.mud-input-root, div.mud-input-slot.mud-input-root` — cubre
   TANTO el <input> de un campo de texto COMO el <div> que un MudSelect usa como su
   contenido visible (su <input> real es type="hidden", altura 0; lo que se ve y
   dibuja el borde es el div). Especificidad (0,2,1) en ambas ramas — un selector de
   clase sin el tipo de elemento pierde contra eso. Por content-box el padding se
   suma APARTE del min-height de arriba, así que el control terminaba en 61px en vez
   de los 40px que ese mismo token declara. Repetir el tipo de elemento acá iguala esa
   especificidad; gana por orden de carga (este archivo se linkea después de
   MudBlazor.min.css en _Host.cshtml). Las dos ramas son necesarias: cubrir sólo
   `input` deja los MudSelect en 61px mientras los MudTextField ya miden 40px. */
.mud-input-control input.mud-input-slot,
.mud-input-control div.mud-input-slot,
.mud-input-control .mud-select-input input.mud-input-slot,
.mud-input-control .mud-select-input div.mud-input-slot {
    box-sizing: border-box;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--shk-radius-sm);
    border-color: var(--shk-border);
}

.mud-input-control .mud-input-label {
    font-size: var(--shk-control-font-size);
}

.mud-button-root {
    min-height: var(--shk-control-height);
    border-radius: var(--shk-radius-sm);
}

.mud-picker .mud-input-control .mud-input-slot {
    min-height: var(--shk-control-height);
}

.mud-paper {
    border-radius: var(--shk-radius);
}


/* ───────────────────────────────────────────────────────────────────────────
   Menú lateral (MOB-001.6)
   El mismo menú sirve a un escritorio y a un teléfono en el aeropuerto. En
   escritorio se deja la densidad de siempre; por debajo de 960px los ítems
   pasan al alto táctil del proyecto y se agregan rótulos de sección, porque
   con 8 entradas planas no se distingue lo operativo de lo administrativo.
   ─────────────────────────────────────────────────────────────────────────── */

.shk-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* QA-SIDE-001 (footer perdido a mitad de página) — MudBlazor fija `.mud-layout{height:100%}`,
   un contenedor flex de altura DEFINIDA (la del viewport). `.mud-main-content` es `flex:1 1 auto`
   (flex-shrink:1 por default MudBlazor): en una pantalla cuya grilla real (Control Crew con
   muchos tripulantes) es más alta que un viewport, el algoritmo de flex comprime igual el
   contenedor a esa altura fija en vez de crecer con el contenido. El contenido sigue
   pintándose (`overflow:visible`) pero desborda por debajo de esa caja; el footer, que se
   posiciona según el flujo normal del flex (después de esa caja ya comprimida), termina a
   mitad de la página real en vez de al final, y todo lo que sigue de la grilla queda
   flotando por debajo de él. Verificado en el navegador contra /modulos/control-crew con una
   recalada real: `.mud-main-content` medía exactamente 100vh-40px (alto de un viewport menos
   el footer) sin importar que la grilla completa medía más del doble. `height:auto` +
   `flex-shrink:0` dejan que el contenedor real crezca con el contenido, como ya hacía antes de
   que el volumen de datos hiciera evidente el límite. */
.mud-layout {
    height: auto;
    min-height: 100%;
}

.mud-main-content {
    flex-shrink: 0;
}

.shk-nav-lista {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: var(--shk-space-4);
}

.shk-nav-cerrar {
    display: flex;
    justify-content: flex-end;
    padding: var(--shk-space-1) var(--shk-space-2) 0;
    flex-shrink: 0;
}

.shk-nav-grupo {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--shk-ink-muted);
    padding: var(--shk-space-3) var(--shk-space-3) var(--shk-space-1);
}

/* El pendiente del día, a la vista sin abrir ningún submenú. */
.shk-nav-pendientes {
    display: inline-block;
    margin-left: var(--shk-space-2);
    background: var(--shk-warning);
    color: #fff;
    border-radius: var(--shk-radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0 var(--shk-space-2);
}

@media (max-width: 959px) {
    .shk-nav .mud-nav-link,
    .shk-nav .mud-nav-group > .mud-nav-link {
        min-height: 52px;
    }
}

/* QA-SIDE-001 — MudTooltip envuelve cada MudNavLink suelto (Inicio, Recaladas, los módulos de
   trabajo…) en un `.mud-tooltip-root.mud-tooltip-inline`, que por defecto de MudBlazor es
   `display:inline-block; width:fit-content`. El MudNavLink de adentro pide `width:100%`, pero
   ese 100% se resuelve contra un contenedor que ya se achicó a su propio contenido: el resultado
   es que cada ítem mide sólo lo que ocupa su texto, así que dos ítems cortos (Inicio + Recaladas)
   flotan uno al lado del otro como palabras en vez de apilarse, y el fondo de estado activo/hover
   de un ítem largo (Control Crew) no llega al borde derecho del drawer como sí le pasa a un
   MudNavGroup (que no está envuelto en tooltip). Se fuerza bloque + 100% sólo dentro del menú —
   el resto de los MudTooltip del sistema no se toca. */
.shk-nav .mud-tooltip-root.mud-tooltip-inline {
    display: block;
    width: 100%;
}

/* SIDE-003 — íconos del rail colapsado desalineados entre sí (reportado en vivo). Un MudNavLink
   suelto es una <a> que ya ocupa el 100% del rail con padding 8px 16px, así que su ícono queda a
   16px del borde. El trigger de un grupo colapsado (MudMenu Icon="...") es en cambio un
   MudIconButton: <div class="mud-menu"> con display:inline-flex se achica a su propio contenido
   (48px) y el <button> adentro centra el ícono con padding 12px parejo — su ícono queda a 12px del
   borde. Dos cajas distintas para el mismo rol visual. Verificado midiendo ambos con
   getBoundingClientRect() en el navegador: iconLeft 16px vs 12px. Se fuerza el menú y el botón al
   mismo anch/padding que el nav-link para que la columna de íconos quede recta; border-radius:0
   porque el hover circular de MudIconButton no tiene sentido en un botón que ahora ocupa todo el
   ancho del rail. */
.shk-nav .mud-menu {
    display: flex;
    width: 100%;
}

.shk-nav .mud-menu .mud-icon-button {
    width: 100%;
    justify-content: flex-start;
    padding: 8px 16px;
    border-radius: 0;
}

/* QA-SIDE-001 — al cambiar de Variant del MudDrawer en caliente (Mini en escritorio ↔
   Temporary en móvil, SIDE-001), la variable `--mud-drawer-width-left` que MudBlazor usa para
   el `margin-left` de `.mud-main-content` puede quedar en el valor del render anterior (240 o
   64) durante la transición: un Temporary NUNCA empuja contenido, así que se fuerza a 0 pase lo
   que pase con esa variable. Confirmado una vez en el navegador (escritorio con el rail
   colapsado → resize a móvil): el contenido quedaba corrido 64px con una franja en blanco a la
   izquierda hasta el próximo re-render. */
.mud-drawer-temporary ~ .mud-main-content {
    margin-left: 0 !important;
}

/* QA-SIDE-001 — ítems anidados (dentro de Dashboard/Reportes/Liquidación/Configuración ya
   expandidos): un escalón menos que el nivel raíz para que títulos largos ("Proveedores de
   Transporte", "Exportación de Base de Datos") no queden pegados al borde del drawer ni fuercen
   el wrap a dos líneas tan seguido. */
.shk-nav .mud-nav-group .mud-nav-link .mud-nav-link-icon {
    font-size: 1.25rem;
}

.shk-nav .mud-nav-group .mud-nav-link .mud-nav-link-text {
    font-size: 0.8125rem;
    padding-right: var(--shk-space-2);
}

/* SIDE-004 — reportado en vivo: al abrir un grupo colapsado con muchos ítems (Configuración, 21
   ítems) el scroll se lo llevaba la página entera, no el flyout. El popover de MudMenu es
   `position:absolute` (no `fixed`) y por default `max-height:none; overflow-y:visible` —
   verificado midiendo el elemento en el navegador: con Configuración abierto,
   `document.documentElement.scrollHeight` pasaba de 900px (el viewport) a 1277px. Como el popover
   participa del flujo/tamaño del documento, un flyout más alto que la pantalla estira la página en
   vez de recortarse y scrollear él solo. `PopoverClass="shk-nav-menu-popover"` en los 4 MudMenu del
   rail (Dashboard/Reportes/Liquidación/Configuración) engancha esta regla en el popover real,
   dondequiera que MudBlazor lo porte en el DOM (siempre al final de `<body>`, fuera de `.shk-nav`,
   por eso no alcanza un selector descendiente). `calc(100vh - ...)` en vez de un píxel fijo: se
   adapta al alto real de cada pantalla en vez de asumir uno.

   Reusada tal cual (2026-09-15) por el menú "Columnas" de `Pages/Modulos/Asistencias.razor`: mismo
   síntoma con 27 checkboxes en vez de 21 ítems de nav. El nombre quedó del primer lugar donde
   apareció el bug; la regla no depende de nada de `.shk-nav`, así que no hace falta una copia. */
.shk-nav-menu-popover {
    max-height: calc(100vh - (var(--shk-space-4) * 2));
    overflow-y: auto;
}

/* SIDE-002 — subtítulos de subgrupo DENTRO de un MudNavGroup ya expandido (Configuración) o
   dentro del flyout colapsado. Reusa .shk-nav-grupo con menos aire arriba: a diferencia de los
   separadores de primer nivel (Operación/Módulos/Consulta), éstos ya están dentro de un grupo con
   su propio padding, así que el mismo respiro se ve doble. */
.shk-nav-grupo--anidado {
    padding-top: var(--shk-space-2);
}

/* Reset DB (DEV): mismo rojo que ya usaba el ícono (IconColor="Color.Error"), ahora en el texto
   también, sin la calle inline que traía antes. */
.shk-nav-dev {
    color: var(--mud-palette-error);
}

/* SIDE-001 — flecha de colapso pegada al borde del drawer (patrón Notion/Linear). Fixed y no
   relativa al drawer (que es position:fixed de MudBlazor y no ofrece un borde en flujo normal
   para anclar un hijo): el offset horizontal sigue el mismo ancho que Width/MiniWidth de
   MudDrawer, así que --shk-drawer-width* es la única fuente para los tres lugares que necesitan
   el valor (el drawer, este botón, y el token). z-index por debajo de popovers/diálogos (1500,
   site.css) y por encima del contenido de la página. */
.shk-drawer-toggle {
    position: fixed;
    top: 84px;
    left: calc(var(--shk-drawer-width-mini) - 12px);
    z-index: 1200;
    background: var(--shk-surface);
    border: 1px solid var(--shk-border);
    border-radius: 50%;
    box-shadow: var(--shk-shadow-sm);
    transition: left 225ms cubic-bezier(0, 0, 0.2, 1);
}

.shk-drawer-toggle--open {
    left: calc(var(--shk-drawer-width) - 12px);
}

.shk-drawer-toggle:hover,
.shk-drawer-toggle:focus-visible {
    box-shadow: var(--shk-shadow-md);
}

/* Técnica estándar de accesibilidad (DESIGN.md regla 2 la exceptúa de la escala visual):
   texto para lector de pantalla que no ocupa lugar. Vive acá y no en cada página porque
   lo usan el menú lateral y las vistas de terreno por igual. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* VEH-002.1 — celda de vehículo del reporte de Transporte, con su lápiz de edición.

   El lápiz aparece en :hover, pero también en :focus-within y en pantallas sin hover
   (DESIGN.md regla 8): quien navega con teclado y quien usa un dedo no tienen hover, y una
   afordancia que sólo existe ahí es una función que para ellos no existe. */
.celda-vehiculo {
    display: inline-flex;
    align-items: center;
    gap: var(--shk-space-1);
}

.celda-vehiculo .btn-editar-vehiculo {
    opacity: 0;
    transition: opacity 120ms ease-in-out;
}

.celda-vehiculo:hover .btn-editar-vehiculo,
.celda-vehiculo:focus-within .btn-editar-vehiculo {
    opacity: 1;
}

@media (hover: none) {
    .celda-vehiculo .btn-editar-vehiculo {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .celda-vehiculo .btn-editar-vehiculo {
        transition: none;
    }
}

/* C2R-05: reporte de Transporte — fila de conexión ON/OFF en PUQ/WPU sin transporte. Se lee como una
   tarjeta continua: borde punteado arriba/abajo en todas las celdas y esquinas redondeadas en los
   extremos. El color no es lo único que la distingue (WCAG 1.4.1): lleva la etiqueta del tipo bajo
   "Desde" y la insignia SIN TRANSPORTE. */
.mud-table-row.transporte-fila-conexion > td {
    background: var(--shk-warning-soft);
    border-top: 1.5px dashed var(--shk-warning);
    border-bottom: 1.5px dashed var(--shk-warning);
}
.mud-table-row.transporte-fila-conexion > td:first-child {
    border-left: 1.5px dashed var(--shk-warning);
    border-top-left-radius: var(--shk-radius-sm);
    border-bottom-left-radius: var(--shk-radius-sm);
}
.mud-table-row.transporte-fila-conexion > td:last-child {
    border-right: 1.5px dashed var(--shk-warning);
    border-top-right-radius: var(--shk-radius-sm);
    border-bottom-right-radius: var(--shk-radius-sm);
}
.transporte-tipo-conexion {
    display: block;
    font-size: var(--shk-grid-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
}
.transporte-sin-transporte {
    display: inline-block;
    padding: 0 var(--shk-space-2);
    border-radius: var(--shk-radius-sm);
    background: var(--shk-warning);
    color: var(--shk-surface);
    font-size: var(--shk-grid-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.transporte-anfitrion-vacio {
    display: inline-block;
    min-width: 90px;
    min-height: 22px;
    border: 1px dashed var(--shk-border);
    border-radius: var(--shk-radius-sm);
}
.transporte-leyenda-muestra {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--shk-border);
    border-radius: var(--shk-radius-sm);
    vertical-align: middle;
}
.transporte-leyenda-muestra.conexion {
    background: var(--shk-warning-soft);
    border: 1.5px dashed var(--shk-warning);
}