/* ===== Helpers UI ===== */
.cursor-pointer { cursor: pointer; }

/* Selector de empresa (appbar): el botón no debe hacer wrap vertical ni empujar hacia
   arriba cuando el appbar está angosto. Forzamos una sola línea + ellipsis (#58). */
.empresa-selector-btn,
.empresa-selector-btn .mud-button-root {
    max-width: 320px;
    min-width: 0;
    white-space: nowrap;
    flex-shrink: 1;
}
/* inline-block (no flex) para que text-overflow:ellipsis funcione y corte SOLO a la derecha. */
.empresa-selector-btn .mud-button-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 250px;
    vertical-align: middle;
}

/* ===== RichTextInput (Quill) — integra el editor con el tema MudBlazor (claro/oscuro) ===== */
.rich-text-input { width: 100%; }
.rich-text-input .rich-text-label {
    display: block;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}
.rich-text-input .ql-toolbar.ql-snow,
.rich-text-input .ql-container.ql-snow {
    border-color: var(--mud-palette-lines-inputs);
}
.rich-text-input .ql-toolbar.ql-snow {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: var(--mud-palette-background-grey);
}
.rich-text-input .ql-container.ql-snow {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-family: inherit;
    font-size: .95rem;
}
.rich-text-input .ql-editor {
    min-height: 120px;
    color: var(--mud-palette-text-primary);
}
.rich-text-input .ql-editor.ql-blank::before {
    color: var(--mud-palette-text-disabled);
}
/* Íconos de la toolbar: usar el color de texto del tema (en oscuro quedan claros) */
.rich-text-input .ql-snow .ql-stroke { stroke: var(--mud-palette-text-primary); }
.rich-text-input .ql-snow .ql-fill   { fill: var(--mud-palette-text-primary); }
.rich-text-input .ql-snow .ql-picker { color: var(--mud-palette-text-primary); }
.rich-text-input .ql-snow.ql-toolbar button:hover .ql-stroke,
.rich-text-input .ql-snow .ql-toolbar button:hover .ql-stroke,
.rich-text-input .ql-snow.ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--mud-palette-primary);
}
.rich-text-input .ql-snow.ql-toolbar button:hover .ql-fill,
.rich-text-input .ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--mud-palette-primary);
}

/* ===== LegajoDialog: dialog con altura fija, sin resize al cambiar de tab =====
   mud-tabs-panels = contenedor de todos los panels (hermano del tab-bar).
   Fijar su altura aquí NO afecta los botones del tab-bar.
   El panel individual recibe sólo padding; la restricción de altura la pone el padre. */
.legajo-dialog-content { overflow: hidden; }
.legajo-tabs .mud-tabs-panels { height: 57vh; overflow-y: auto; }
.legajo-tabs .mud-tab-panel  { padding: 12px 0 4px; }

/* Resalta el campo con error al navegar desde el mensaje de validación (#48). */
.campo-error-flash {
    animation: campo-error-flash-kf 1.6s ease-out;
    border-radius: 6px;
}
@keyframes campo-error-flash-kf {
    0%   { box-shadow: 0 0 0 3px rgba(var(--mud-palette-error-rgb, 239,83,80), .55); }
    100% { box-shadow: 0 0 0 3px rgba(var(--mud-palette-error-rgb, 239,83,80), 0); }
}

/* ===== MudDataGrid: embudo de filtro más visible =====
   Por defecto MudBlazor oculta el ícono de filtro/opciones (opacity:0) salvo en
   hover del header → quedaba "poco visible". Lo dejamos siempre visible, más
   marcado al hover, y resaltado en color de acento cuando el filtro está
   aplicado (MudBlazor le pone opacity inline para mantenerlo visible). */
.mud-data-grid .column-header .column-options .mud-menu .mud-icon-button-label { opacity: .5; }
.mud-data-grid .column-header:hover .column-options .mud-menu .mud-icon-button-label { opacity: .9; }
.mud-data-grid .column-header .column-options .mud-menu .mud-icon-button-label[style*="opacity"] {
    color: var(--mud-palette-secondary) !important;
    opacity: 1 !important;
}
.mud-data-grid .column-header .column-options .mud-menu .mud-icon-button-root[aria-expanded="true"] .mud-icon-button-label {
    color: var(--mud-palette-primary) !important;
    opacity: 1 !important;
}
/* Compacta los íconos de opciones/filtro del header: más chicos y pegados al título. */
.mud-data-grid .column-header .column-options { gap: 0; margin-left: 2px; }
.mud-data-grid .column-header .column-options .mud-icon-button {
    width: 24px; height: 24px; padding: 3px;
}
.mud-data-grid .column-header .column-options .mud-icon-button .mud-icon-root {
    font-size: 1rem;
}
.mud-data-grid .column-header .sortable-column-header { gap: 2px; }

/* Filtro de columna fecha: ocultar el time-picker (reloj). Las fechas de nómina no tienen
   hora, así que el filtro debe ser solo por fecha, no por hora (evita el reloj confuso). */
.mud-data-grid-filter .mud-time-picker,
.mud-data-grid-filter .mud-picker-time,
.mud-data-grid-filter .mud-picker-time-toolbar,
.filters-panel .mud-time-picker { display: none !important; }

/* ===== Dashboard cards ===== */
.stat-card {
    transition: box-shadow 0.2s, transform 0.15s;
    border-radius: 8px;
}
.stat-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.18) !important;
    transform: translateY(-2px);
}
.quick-link-card {
    border-radius: 8px;
    transition: box-shadow 0.2s, background 0.15s;
}
.quick-link-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.14) !important;
}
.tabla-card { transition: box-shadow 0.2s, transform 0.15s; }
.tabla-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.14) !important; transform: translateY(-1px); }

/* ===== Recibo Costo Total Empleador ===== */
.recibo-wrap { display: flex; justify-content: center; }
.recibo {
    background: #fff;
    color: #000;
    width: 800px;
    max-width: 100%;
    padding: 16px 22px;
    border: 1px solid #cfcfcf;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
}
.recibo .recibo-header { text-align: center; margin-bottom: 10px; }
.recibo .empresa { font-size: 16px; font-weight: 700; }
.recibo .linea { font-size: 11px; }
.recibo table { width: 100%; border-collapse: collapse; }
.recibo .info td { border: 1px solid #999; padding: 3px 6px; }
.recibo .info .labels td { background: #f0f0f0; font-weight: 600; font-size: 10px; }
.recibo .right { text-align: right; }
.recibo .bar {
    display: flex; justify-content: space-between;
    background: #1565c0; color: #fff; font-weight: 700;
    padding: 4px 8px; margin-top: 8px;
}
.recibo .bar.sub { background: #5c6bc0; }
.recibo .bar.neto { background: #2e7d32; font-size: 14px; }
.recibo .detalle th {
    background: #e8e8e8; border: 1px solid #999; padding: 3px 6px; font-size: 10px; text-align: left;
}
.recibo .detalle td { border: 1px solid #ccc; padding: 3px 6px; }
.recibo .detalle .concepto { width: 50%; }
.recibo .composicion { display: flex; gap: 12px; margin-top: 10px; }
.recibo .composicion > div {
    flex: 1; border: 1px solid #ccc; padding: 6px; text-align: center;
}
.recibo .composicion .lbl { font-size: 10px; color: #555; }
.recibo .composicion .val { font-weight: 700; }
.recibo .panel-final { display: flex; gap: 18px; margin-top: 14px; align-items: center; }
.recibo .panel-final .col { flex: 1; }
.recibo .panel-final h4 { margin: 0 0 6px; font-size: 12px; }
.recibo .segmentos td { padding: 2px 4px; }
.recibo .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.recibo .pie-wrap { display: flex; align-items: center; gap: 12px; }
.recibo .pie { width: 120px; height: 120px; border-radius: 50%; }
.recibo .legend { font-size: 11px; }
.recibo .legend > div { margin-bottom: 4px; }

/* ===== blazor-error-ui: movemos al top para que no tape botones del footer ===== */
#blazor-error-ui {
    position: fixed;
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #b32121;
    color: white;
    padding: 0.5rem 1rem;
    display: none; /* se muestra solo cuando hay error real */
}
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ===== Impresión ===== */
@media print {
    .no-print, .mud-appbar, .mud-drawer, #blazor-error-ui { display: none !important; }
    .mud-main-content { padding: 0 !important; margin: 0 !important; }
    .recibo { border: none; width: 100%; }
    /* Padrón General: no cortar una ficha entre páginas; salto opcional por legajo. */
    .padron-card { break-inside: avoid; page-break-inside: avoid; }
    .padron-salto { break-after: page; page-break-after: always; }
}

/* ===== Dos defectos de MudBlazor 9.5 que no se pueden corregir desde el markup =====

   Las dos reglas de acá abajo son correcciones de comportamiento de la librería, no diseño: MudBlazor
   no expone ningún parámetro para arreglarlas y la alternativa era editar 60 controles en 40 archivos.
   Ambas están medidas en el navegador, no deducidas. Revisar al actualizar MudBlazor: si la librería
   las corrige, esto sobra. */

/* 1. EL CONTENIDO DE UNA PESTAÑA ARRANCABA PEGADO A LA BARRA DE PESTAÑAS (0 px de separación).

   El parámetro PanelClass de MudTabs —que es lo que uno usaría, y lo que estaba puesto— NO LLEGA A
   NINGÚN ELEMENTO: se comprobó que la clase no aparece en el DOM y que el padding del contenedor de
   paneles queda en 0 px igual. Aunque llegara, MudBlazor tiene una regla más específica que lo anula.
   Poner el aire acá es lo único que funciona, y de paso arregla las 21 pantallas con pestañas de una
   vez en lugar de repetir un margen en el primer hijo de cada panel. */
.mud-tabs-panels > .mud-tab-panel {
    padding-top: 24px;
}

/* La excepción: pestañas cuyo contenido tiene que arrancar pegado al borde, como los resultados de
   la liquidación —van dentro de un MudPaper y su primera fila es una barra propia—. Se pide con
   Class="tabs-sin-aire" en el MudTabs. */
.tabs-sin-aire .mud-tabs-panels > .mud-tab-panel {
    padding-top: 0;
}

/* 2. EL CALENDARIO SE ABRÍA APLASTADO Y NO SE PODÍA LEER.

   MudBlazor le copia al desplegable el ancho del campo que lo abre. Como los pickers del sistema
   acotan el campo con max-width (170 px es lo típico), el calendario —que necesita 310 px— quedaba
   metido en 170 y recortado. No era invisible: era ilegible, que desde afuera es lo mismo.

   Se libera SÓLO el panel desplegable. El ancho del campo no se toca: sigue mandando el max-width de
   cada pantalla, que es lo que hace que los filtros de fecha entren en una línea.

   NO BORRAR esos max-width de los pickers pensando que sobran ahora. Se midió: sin ellos el campo
   pasa de 170 px a 552 px, los cuatro filtros de fecha dejan de entrar en una fila y se apilan. El
   max-width hace falta; lo que estaba mal era que MudBlazor se lo copiara al calendario, y eso es lo
   que corrige la regla de acá abajo. */
.mud-picker-inline-paper,
.mud-picker-inline-paper > .mud-picker,
.mud-picker-inline-paper .mud-picker-container,
.mud-popover-provider .mud-popover:has(.mud-picker-inline-paper) {
    /* !important porque el ancho se lo pone MudBlazor por JAVASCRIPT, como estilo inline: mide el
       campo que abre el calendario y se lo copia al desplegable. Un estilo inline le gana a cualquier
       regla de hoja de estilos por especificidad, sin importar el orden — así que sin !important esto
       se aplica y no se ve, que fue exactamente lo que pasó: la regla estaba bien y el calendario
       seguía cortado por la mitad. */
    width: max-content !important;
    max-width: none !important;
}

/* ── DIÁLOGO ALTO ────────────────────────────────────────────────────────────────────────────────

   MudBlazor deja pedir el ANCHO de un diálogo (MaxWidth) pero no el ALTO: el paper se estira sólo
   hasta donde llega su contenido. Para el diálogo de tomar un pedido eso no alcanza — tiene mapa, y
   un mapa aplastado sigue aplastado por más ancho que se le dé, así que la dirección se marcaba en
   una franja de tres centímetros.

   El alto se fija acá y el que scrollea es el CUERPO, no el diálogo entero: si scrolleara todo, el
   botón "Tomar el pedido" se iría de la pantalla y habría que bajar hasta el fondo para confirmar. */
.nexe-dialog-alto {
    height: 92vh;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

.nexe-dialog-alto .mud-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
}