/* Las pantallas de Tesorería usan `vc-page` como contenedor externo, no una clase propia. No es cosmética:
   verticalcrudlayout.css trae `.mainlayout-body-content:has(.vc-page) { padding: 0 }`, que anula el
   `padding: 1rem` que el layout le aplica a toda página. Una clase propia no matchea ese selector, el margen
   exterior se duplica —16px del layout más el propio— y la pantalla queda despegada del menú.
   Se carga después de verticalcrudlayout.css (_Host.cshtml), así que lo de acá gana sobre .vc-*. */

/* El panel es un shell TIGHT: sin padding ni gap propios, igual que el de Cuentas de tesorería. El scroll lo
   sigue manejando .tes-grid-wrap (flex:1 1 auto + min-height:0), así que .vc-panel conserva su overflow:hidden
   y scrollea la grilla, no la pantalla entera. */
.tes-panel { padding: 0; gap: 0; }

/* Todo el espaciado vive acá. La grilla queda AL RAS del borde del panel —como en Cuentas, donde el toolbar
   va dentro del propio MudDataGrid—; con padding alrededor de la grilla quedaba un recuadro dentro de otro. */
.tes-head { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 12px; }
/* Una sola fila mientras entre: título + empresas + centro de costo + el botón de acción.
   `wrap` en vez de `nowrap`: `nowrap` no evita el desborde, sólo cambia quién lo paga, y lo pagaban los
   hijos que NO se pueden encoger. Con `min-width: 0` en todos ellos, el botón partía su etiqueta en dos
   líneas (medido: 154x49 en vez de 210x36 en un área de contenido de 1110px, sobresaliendo 21px del panel)
   y de 1024px para abajo el ícono de ayuda quedaba ENCIMA del input y del label del selector de empresas.

   ⚠️ EL ITEM FLEX DE UN MudSelect NO ES EL ELEMENTO QUE LLEVA SU `Class`. MudSelect envuelve todo en un
   <div class="mud-select"> EXTERNO y manda el `Class` del desarrollador al `.mud-input-control` INTERNO
   —está documentado, con el decompilado como fuente, en verticalcrudlayout.css («Donde cae el Class del
   desarrollador»)—. O sea que `.tes-toolbar .tes-filter` acomoda al NIETO: el ancho se ve, pero el corte de
   línea lo decide el externo, que trae `flex-grow: 1` con base de contenido y ningún piso ni techo. Ese fue
   el defecto de la primera versión de este bloque: con 1900px de ancho la fila igual se partía en tres,
   cada selector solo en su línea y clavado en su `max-width`. Por eso el ancho va sobre el HIJO DIRECTO,
   vía `:has()`, y el default de abajo es que nada crezca — así un envoltorio que MudBlazor agregue mañana
   queda con el ancho de su contenido en vez de reventar la fila. */
.tes-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Default: ningún hijo crece ni se encoge; cada uno mide lo que mide su contenido. Es lo contrario del
   `min-width: 0` que había, y es lo que hace que el título, el botón de ayuda y el de acción no se rompan. */
.tes-toolbar > * { flex: 0 0 auto; }
/* Ni el título ni la etiqueta del botón se parten en dos líneas. `.mud-button-root` no trae `white-space`
   propio — verificado en el CSS del paquete. */
.tes-toolbar .mud-typography,
.tes-toolbar .mud-button-root { white-space: nowrap; }
/* El spacer es la única excepción que empuja: mantiene el botón contra el borde derecho. */
.tes-toolbar > .tes-spacer { flex: 1 1 auto; min-width: 0; }
/* Cuando la fila se parte, el spacer queda arriba y el botón bajaría pegado a la izquierda; el margen
   automático lo devuelve a la derecha. Se excluye el título porque en el workspace de conciliación el
   último hijo del toolbar ES el título, y ahí el margen lo mandaría a la derecha sin motivo. */
.tes-toolbar > *:last-child:not(.mud-typography) { margin-left: auto; }

/* El control interno llena su envoltorio en vez de aportar su propio ancho: el ancho es del item flex.
   Va ANTES que las reglas de abajo a propósito — misma especificidad, así que si algún día un selector
   quedara sin envoltorio y matchearan las dos, gana la de abajo, que es la que declara el ancho. */
.tes-toolbar .tes-filter,
.tes-toolbar .tes-empresa-multiselect { min-width: 0; max-width: 100%; }

/* Los dos elásticos, con piso y techo, sobre el hijo directo del toolbar (el envoltorio, o el control
   mismo si algún día no lo hubiera). `flex-basis` igual al `min-width` a propósito: el corte de línea de
   flexbox se calcula con el BASIS y no con el ancho ya encogido, así que un basis mayor que el piso
   adelanta el wrap a pantallas donde la fila todavía entraba. El piso de 300px del centro de costo es el
   ancho FIJO que tenía antes: nunca queda más angosto que como estaba, y crece hasta 420px cuando sobra.
   Ojo: la regla de ancho de más abajo es `.tes-filters .tes-filter`, o sea la SEGUNDA fila de filtros; el
   selector de centro de costo vive en el toolbar y aquella nunca lo alcanza. */
.tes-toolbar > .tes-filter,
.tes-toolbar > *:has(.tes-filter) { flex: 1 1 300px; min-width: 300px; max-width: 420px; }
.tes-toolbar > .tes-empresa-multiselect,
.tes-toolbar > *:has(.tes-empresa-multiselect) { flex: 1 1 180px; min-width: 180px; max-width: 340px; }
.tes-spacer { flex: 1 1 auto; }
.tes-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tes-filters .tes-filter { min-width: 160px; }
.tes-cards { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 12px; }
.tes-card { border-radius: 8px; padding: 12px 16px; border: 1px solid var(--mud-palette-lines-default); }
.tes-card-label { font-size: .8rem; opacity: .75; }
.tes-card-value { font-size: 1.25rem; font-weight: 600; text-align: right; }
.tes-card-ingreso { color: var(--mud-palette-success); }
.tes-card-egreso { color: var(--mud-palette-error); }
.tes-card-ok { color: var(--mud-palette-success); }
.tes-card-warn { color: var(--mud-palette-error); }
/* Nota DESCRIPTIVA: aclara qué es el número de arriba ("Saldo calculado según tildes", "Caja completa, no
   filtra por centro"). Es letra chica a propósito — el usuario no tiene que hacer nada con esto. */
.tes-card-note { font-size: .7rem; font-style: italic; opacity: .65; text-align: right; }

/* INSTRUCCIÓN, que no es lo mismo. Con `.tes-card-note` una instrucción quedaba en 0.7rem, itálica, al 65% de
   opacidad y alineada a la DERECHA — o sea despegada del título y del input de su propia caja, que van a la
   izquierda. El estilo decía "esto se puede saltear" mientras el texto decía "hacé esto".
   No fija alineación a propósito: hereda la de su caja, así que en el extracto queda a la izquierda con el
   resto y en la de Diferencia —que es align-items: center— sigue centrada. */
.tes-card-hint {
    font-size: .8rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    gap: .35rem;
}
/* El motivo por el que un movimiento no se puede anular es un texto LARGO y de largo variable (hasta ~215
   caracteres — ver AnulacionMovimientoHelper.MotivoNoAnulable). `.mud-tooltip` del paquete NO trae `max-width`,
   así que sin este tope el popover se arma como UNA sola línea de ~886px: media pantalla.

   Pero el tope no está acá por estética. El ancho de un popover `position:absolute` es shrink-to-fit, o sea que
   sin `max-width` lo decide el `left` que MudBlazor le acabe de poner — y eso realimenta la posición con el
   tamaño. Con el `max-width` puesto y el placement correcto (`Placement.Left`, en MovimientoTesoreria.razor),
   el ancho pasa a ser independiente de la posición y el bucle no arranca. Las DOS cosas hacen falta: el tope
   solo, con el placement por default, empeora el cuadro. El detalle medido está en ese .razor.

   Se aplica por `TooltipContent` (un div propio) y no por el `Class` de MudTooltip: ver el comentario allá. */
.tes-tooltip-motivo { max-width: 360px; }
.tes-table-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.tes-workspace-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.tes-grid-wrap { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.tes-grid-wrap .mud-data-grid { flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; display: flex; flex-direction: column; }
.tes-grid-wrap .mud-data-grid-toolbar,
.tes-grid-wrap .mud-table-pagination { flex-shrink: 0; min-width: 0; }
.tes-grid-wrap .mud-table-container { flex: 1 1 auto; min-height: 0; min-width: 0; }
.tes-empty { padding: 24px; text-align: center; opacity: .7; }

/* ---------------------------------------------------------------------------
   Botón "Nuevo" y su menú: mismo ancho, y el menú se lee como una extensión
   del botón en vez de como una superficie neutra.
   --------------------------------------------------------------------------- */

/* El ancho se declara UNA sola vez, acá, sobre el activador. Del otro lado no
   hace falta ningún ancho en CSS: el menú declara `RelativeWidth="Adaptive"`,
   que le pone al popover un min-width igual al del activador. Es `Adaptive` y
   no `Relative` a propósito — `Relative` le fija el ancho del botón como
   MÁXIMO, así que un ítem más largo que el botón se partiría en dos líneas;
   `Adaptive` lo fija como MÍNIMO y lo deja crecer. Mientras el botón sea el
   más ancho de los dos (200px contra ~192px del ítem más largo, "Gasto
   compartido"), miden exactamente igual.
   Selector por descendencia y no por hijo directo: el activador vive DENTRO
   del .mud-menu, y así no depende de cuántos envoltorios meta MudBlazor.
   Es el único MudMenu dentro de un .tes-toolbar en todo el repo. */
.tes-toolbar .mud-menu .mud-button-root { min-width: 200px; }

/* El color del menú NO está acá: es `vc-menu-primary`, en verticalcrudlayout.css,
   porque ya lo usan dos módulos. Este archivo sólo aporta el ancho, que sí es de
   esta pantalla. */

/* ---------------------------------------------------------------------------
   Barra de cierre de la conciliación bancaria.
   Tres cajas en una línea, en el orden en que se lee la operación:
   cálculo (de qué saldo parto + lo tildado) = ... → diferencia → extracto.
   Los colores separan los tres roles: la del medio es la que decide, y por eso
   es la única que cambia de color según el resultado (.tes-card-ok/.warn).
   --------------------------------------------------------------------------- */
.tes-concilia-bar { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; margin-top: 1rem; }

.tes-concilia-box {
    display: flex; flex-direction: column; gap: .35rem; justify-content: center;
    padding: .75rem 1rem; border-radius: 8px; border: 1px solid var(--mud-palette-lines-default);
}

/* Cálculo y extracto son los dos extremos de la MISMA igualdad, así que miden igual: `flex: 1 1 0` reparte el
   sobrante en partes iguales sin que el ancho del contenido desempate (con `flex-basis` en rem, la caja del
   cálculo —que tiene más texto— quedaba más grande). La diferencia va al medio con su ancho propio. */
.tes-concilia-calculo { flex: 1 1 0; flex-direction: row; align-items: center; gap: 1rem; background: var(--mud-palette-info-hover); }
.tes-concilia-diferencia { flex: 0 0 14rem; align-items: center; text-align: center; background: var(--mud-palette-warning-hover); }
.tes-concilia-extracto { flex: 1 1 0; background: var(--mud-palette-success-hover); }

.tes-concilia-operandos { display: flex; flex-direction: column; gap: .25rem; }
.tes-concilia-operando { display: flex; flex-direction: column; }
.tes-concilia-op-label { font-size: .7rem; opacity: .7; }
.tes-concilia-op-valor { font-size: .9rem; font-weight: 500; }

.tes-concilia-signo { font-size: 1.1rem; font-weight: 600; opacity: .6; }
.tes-concilia-igual { font-size: 1.4rem; }

.tes-concilia-titulo { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; opacity: .8; }
.tes-concilia-monto { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.tes-concilia-resultado { display: flex; flex-direction: column; }

/* El input del extracto se lee como el monto de su caja, no como un campo de formulario más. */
.tes-concilia-input .mud-input-slot { font-size: 1.5rem; font-weight: 700; }