/* ════════════════════════════════════════════════
   Floating Window System — Erp
   ════════════════════════════════════════════════

   CAPA DE VENTANAS Y z-index
   MudBlazor 7.14 reparte sus capas así (valores medidos en la app):
       drawer 1100 · popover 1200 (+3 al abrirse) · appbar 1300 ·
       dialog 1400 · snackbar 1500 · tooltip 1600.
   Las ventanas flotantes viven en 1310..1390 (ver WindowManagerService):
   POR ENCIMA del menú lateral y de la barra superior —para eso son
   flotantes— y por debajo de los diálogos modales, que siempre mandan.
   La barra de tareas va en 1392: sobre las ventanas, bajo los modales.

   GEOMETRÍA
   Blazor solo publica tres variables en cada ventana (--fw-left, --fw-top,
   --fw-width) y aquí se derivan left/top/width/max-height. Así el arrastre
   (que mueve las variables desde JS) recalcula todo en vivo y sin saltos.
   ════════════════════════════════════════════════ */

/* ─── Floating Window ─── */
.floating-window {
    position: fixed;
    left: var(--fw-left, 80px);
    top: var(--fw-top, 60px);
    /* El ancho NO depende de la posición: si dependiera, la ventana se iría
       encogiendo al arrastrarla hacia la derecha. Solo se limita a la pantalla. */
    width: min(var(--fw-width, 900px), calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    /* Alta como quepa desde su borde superior —así abre entera dentro de la
       pantalla— pero con piso de 280px para que al arrastrarla hacia abajo no
       se aplaste hasta desaparecer. «La pantalla» termina en la barra de tareas
       cuando está a la vista (--fw-area-bottom, lo mide window-manager.js):
       sin ese descuento la barra le tapaba el pie con los botones (Arturo,
       02-11-2026). */
    max-height: max(280px, calc(100vh - var(--fw-top, 60px) - 24px - var(--fw-area-bottom, 0px)));
    display: flex;
    flex-direction: column;
    min-width: 480px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
    /* Nace invisible: el centrado se calcula en el navegador (necesita el alto
       real ya dibujado), así que sin esto se vería el salto desde la posición de
       respaldo con que la mandó el servidor hasta el centro. windowManager.sync
       agrega .floating-window-ubicada en cuanto la deja en su sitio. */
    visibility: hidden;
    /* RED DE SEGURIDAD: si el JS no alcanza a correr (circuito caído, error en
       la consola), la ventana se muestra igual sola. Prefiero un salto visible
       a una ventana que nunca aparece. */
    animation: fw-mostrar-si-o-si 0s linear 0.4s forwards;
}

/* Ya centrada por windowManager.sync: recién ahora se muestra. */
.floating-window-ubicada {
    visibility: visible;
    animation: none;
}

@keyframes fw-mostrar-si-o-si {
    to { visibility: visible; }
}

/* Seguro contra el empujón del menú lateral.
   MudBlazor le mete a TODO div hermano del drawer
   (.mud-drawer.mud-drawer-mini.mud-drawer-pos-left.mud-drawer--open ~ div:not(.mud-main-content))
   un `margin-left: 280px` —el ancho del menú— con transición de 225ms. Ese
   margen era el que impedía mover la ventana sobre el menú: pidiera lo que
   pidiera left, arrancaba corrida 280px a la derecha. El host ya cuelga fuera
   de <MudLayout>, esto queda por si alguien lo vuelve a anidar ahí dentro. */
.floating-window,
.window-taskbar {
    margin-left: 0 !important;
}

/* Los desplegables (MudSelect, MudDatePicker, MudMenu, tooltips) no se dibujan
   donde está el campo: MudBlazor los cuelga de un contenedor propio en el
   <body> y les copia el z-index calculado del placeholder
   .mud-popover-cascading-value que sí queda junto al campo. Subiéndolo aquí, el
   desplegable de un campo de la ventana queda por encima de la ventana (1395) y
   aun así por debajo de los diálogos modales (1400). */
.floating-window .mud-popover-cascading-value {
    z-index: 1395;
}

.floating-window:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.16);
}

.floating-window-dragging {
    opacity: 0.92;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important;
    cursor: grabbing !important;
}

/* ─── Title Bar ─── */
.floating-window-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 6px 14px;
    background: var(--mud-palette-primary);
    color: white;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.floating-window-dragging .floating-window-titlebar {
    cursor: grabbing;
}

.floating-window-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-window-title .mud-icon-root {
    color: white !important;
    font-size: 18px !important;
}

.floating-window-controls {
    display: flex;
    gap: 2px;
    margin-left: 8px;
}

.floating-window-btn {
    color: rgba(255, 255, 255, 0.8) !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 2px !important;
}

.floating-window-btn:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.floating-window-btn-close:hover {
    background: #e53935 !important;
    color: white !important;
}

/* ─── Window Body ───
   Es un flex-item de .floating-window y a la vez un flex-container de su contenido.
   El `min-height: 0` es obligatorio: sin él, un flex-item NO se deja encoger por
   debajo de su contenido, así que un diálogo con 171 líneas empujaba el alto hacia
   abajo y sacaba sus botones fuera de la ventana. El `overflow-y: auto` queda de red
   de seguridad para los diálogos que no manejan su propio scroll. */
.floating-window-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

/* Override MudDialog styles when inside floating window.
   OJO: acá había también un `overflow: visible !important` que le ganaba —por el
   !important— al overflow en línea que pone DialogShell, y con eso ningún diálogo
   podía scrollear su propio contenido. El scroll ahora vive en .mud-dialog-content. */
.floating-window-body .mud-dialog-content {
    max-height: none !important;
}

.floating-window-body .mud-dialog-actions {
    padding: 8px 16px;
}

/* ─── Tabla larga con encabezado y totales fijos ───
   OJO: el nombre viene del comprobante contable (je = journal entry), pero ESA
   pantalla ya no lo usa —tiene su propia hoja, journal-entry.css—. Hoy lo usan
   nueve pantallas de Remuneraciones (PayrollBook, EmployeeDetailDialog,
   PayrollParameters…). Borrarlo les apaga en silencio el encabezado fijo. */
.je-lines-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
    box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default);
}

.je-lines-scroll tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--mud-palette-background-gray);
}


/* ════════════════════════════════════════════════
   Window Taskbar
   ════════════════════════════════════════════════ */
.window-taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 4px 8px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    /* Sobre las ventanas (1310..1390) y bajo los desplegables de una ventana (1395) y los diálogos modales (1400):
       con 9999 tapaba el pie de un diálogo alto o de pantalla completa, y su velo no la cubría. */
    z-index: 1392;
    min-height: 42px;
    overflow-x: auto;
}

.taskbar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 12px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 160px;
    max-width: 240px;
}

.taskbar-item:hover {
    background: var(--mud-palette-primary);
    color: white;
    border-color: var(--mud-palette-primary);
}

.taskbar-item:hover .taskbar-item-icon {
    color: white !important;
}

.taskbar-item-content {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.taskbar-item-icon {
    color: var(--mud-palette-primary) !important;
    font-size: 18px !important;
    flex-shrink: 0;
}

.taskbar-item-title {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.taskbar-item-close {
    opacity: 0;
    transition: opacity 0.15s;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 2px !important;
}

.taskbar-item:hover .taskbar-item-close,
.taskbar-item:focus-within .taskbar-item-close {
    opacity: 1;
}

.taskbar-item:hover .taskbar-item-close {
    color: white !important;
}

/* El icono y el título de la pastilla son un <button> (WindowTaskbar.razor, como en GNL): se ve como antes, sin el
   aspecto de botón del navegador, y con el foco del teclado la pastilla entera se marca como al pasar el mouse. */
button.taskbar-item-content {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    align-self: stretch;
}

button.taskbar-item-content:focus-visible {
    outline: none;
}

.taskbar-item:has(.taskbar-item-content:focus-visible) {
    background: var(--mud-palette-primary);
    color: white;
    border-color: var(--mud-palette-primary);
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.taskbar-item:has(.taskbar-item-content:focus-visible) .taskbar-item-icon {
    color: white !important;
}

/* ════════════════════════════════════════════════
   Ventana maximizada (window-manager.js, «Ventana maximizada»)
   ════════════════════════════════════════════════
   Arturo, 01-11-2026: el «maximizar» de GNL en todas las ventanas. Ocupa el área de trabajo —donde se dibujan las
   pantallas—: a la derecha del menú, bajo la barra de arriba y sobre la barra de tareas. Las tres medidas las pone el
   JS en la página porque cambian con el menú (abierto, plegado, compacto) y con la barra de tareas. Se anclan los
   cuatro bordes en vez de dar ancho y alto: 100vw cuenta la barra de desplazamiento de la página y la ventana quedaría
   debajo de ella. --fw-left, --fw-top y --fw-width no se tocan: son el lugar al que vuelve al restaurarla. */
.floating-window[data-maximizada] {
    left: var(--fw-area-left, 0px);
    top: var(--fw-area-top, 0px);
    right: 0;
    bottom: var(--fw-area-bottom, 0px);
    width: auto;
    max-width: none;
    min-width: 0;
    max-height: none;
    border-radius: 0;
}

/* La maximizada no se arrastra (ver window-manager.js, _onMouseDown): la barra de título no ofrece la mano. */
.floating-window[data-maximizada] .floating-window-titlebar {
    cursor: default;
}

/* ════════════════════════════════════════════════
   La miniatura de una ventana minimizada (window-manager.js, «Miniaturas»)
   ════════════════════════════════════════════════
   Arturo, 01-11-2026: «que muestre la miniatura», como en GNL. Es la tarjeta de GNL Facturación
   (wwwroot/css/floating-windows.css, .gnl-miniatura) con sus mismas clases; reemplaza a la de ERA (.taskbar-preview),
   que sólo repetía el título. Al pasar el mouse o llegar con Tab a una pastilla: el título, la copia escalada de cómo
   estaba la ventana y «Clic para restaurar». La tarjeta es un <div> propio colgado del <body> (fuera del árbol de
   Blazor), decorativa (aria-hidden e inerte) y sin eventos del mouse. Va fija sobre la barra de tareas, sobre las
   ventanas (1310..1390) y bajo los desplegables de una ventana (1395), y el script la centra en su pastilla sin dejarla
   salirse de la pantalla. Los colores son los del tema (claro y oscuro); la cabecera, los de la barra de título de las
   ventanas de ERA. La copia usa las mismas hojas que la ventana, así que sale con el tema que haya al mirarla. */
.gnl-miniatura {
    position: fixed;
    left: 8px;
    bottom: 52px;
    z-index: 1393;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: calc(100vw - 16px);
    padding-bottom: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    pointer-events: none;
    animation: gnl-miniatura-aparece 0.15s ease;
}

.gnl-miniatura[hidden] {
    display: none;
}

@keyframes gnl-miniatura-aparece {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gnl-miniatura { animation: none; }
}

/* El título, con los colores de la barra de título de las ventanas. */
.gnl-miniatura-cabecera {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 10px;
    background: var(--mud-palette-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.gnl-miniatura-icono {
    display: flex;
    flex-shrink: 0;
}

.gnl-miniatura-cabecera .mud-icon-root {
    color: inherit !important;
    font-size: 14px !important;
}

/* El título completo, en hasta tres líneas: es el único lugar donde se lee entero (la pastilla lo corta con «…»), y
   lo que distingue una ventana de otra suele ir al final («… corrige la factura N° 1.234»). En una sola línea con «…»
   se perdía justo eso. */
.gnl-miniatura-titulo {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* El marco de la copia: el script le da el tamaño de la copia ya escalada. */
.gnl-miniatura-lienzo {
    position: relative;
    flex-shrink: 0;
    margin-top: 8px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
    contain: strict;
}

/* La copia del cuerpo de la ventana, a su tamaño real y achicada desde la esquina. */
.gnl-miniatura-lienzo > .gnl-miniatura-cuerpo {
    position: absolute;
    left: 0;
    top: 0;
    flex: none;
    max-height: none;
    transform-origin: 0 0;
    pointer-events: none;
}

.gnl-miniatura-pie {
    max-width: 100%;
    margin-top: 6px;
    padding: 0 10px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sin copia (no se pudo tomar): el ícono, qué es y el título. */
.gnl-miniatura-lienzo.sin-copia {
    border-style: dashed;
}

.gnl-miniatura-sin {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    text-align: center;
    font-size: 0.8rem;
}

.gnl-miniatura-sin .mud-icon-root {
    color: var(--mud-palette-primary) !important;
    font-size: 28px !important;
}

.gnl-miniatura-clase {
    padding: 1px 8px;
    border: 1px solid var(--mud-palette-info);
    border-radius: 12px;
    color: var(--mud-palette-info);
    font-size: 0.7rem;
}

/* El visor de PDF en la copia: un iframe no se clona (volvería a cargar el PDF y por dentro no se puede mirar), así que
   va un recuadro del mismo tamaño con el ícono y el nombre del PDF. Las medidas son de la ventana sin achicar: en la
   miniatura queda como un tercio. */
.gnl-miniatura-pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    min-height: 240px;
    padding: 32px;
    background: var(--mud-palette-background-gray);
    border: 2px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.gnl-miniatura-pdf svg {
    width: 150px;
    height: 150px;
    fill: var(--mud-palette-error);
}