.textfieldsecondary * {
    color: white;
}

.selectsecondary {
    color: white;
}

.fullscreen-bg {
    width: auto;
    background-color: var(--mud-palette-background);
    height: 100vh;
}

.page-background {
    background-color: var(--mud-palette-background);
    padding: 20px;
    padding-bottom: 60px;
}

.cuerpoficha {
    height: 90vh;
}

.paneles {
    background-color: var(--mud-palette-surface);
    width: 100%
}

.panelmaestro {
    height: 70vh;
}

.panelintro {
    height: contain;
}

@media (max-width: 800px) {
    .cuerpoficha {
        height: 75vh;
    }

    .panelmaestro {
        height: auto;
    }

    .panelintro {
        height: auto;
    }
}

.elementocentrado {
    margin: auto;
    text-align: center;
}

.menutoolbar {
    margin-top: 5px;
    margin-right: 5px;
    margin-left: 5px;
}

.footer {
    position: center;
    bottom: 0;
    width: auto;
    text-align: center;
}

.colapsetitles {
    background-color:;
}

.dialogos {
    height: 70vh;
}

.columna-dinero {
    text-align: right;
}

.columna-centrada {
    text-align: center;
}

.columna-izquierda {
    text-align: start;
}

.centered-element-vertical {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.tabla-densa .mud-table-cell {
    padding: 2px 6px; /* vertical, horizontal */
}

/* Detalle de documentos (Movimiento/Preventa/Compras): con FixedHeader el scroll
   vertical vive en .mud-table-container, no en el root .mud-table. El max-height
   del Style (root .mud-table) no basta: hay que darle el límite al container
   scrolleable, si no el cuerpo empuja la tabla fuera de su tarjeta en vez de
   hacer scroll interno. */
.tabla-densa .mud-table-container {
    max-height: inherit;
    overflow-y: auto;
}

/* Grilla del detalle del documento: alto FIJO relativo a la pantalla (height, no
   max-height). Con max-height la grilla nacía del tamaño de su contenido y crecía
   con cada línea, empujando la página hacia abajo — obligando a scrollear la página
   en cada agregado hasta tocar el tope. Con height fijo nace ya con su tamaño final:
   el scroll es siempre interno desde la primera línea y el auto-scroll a la última
   funciona sin mover la página. El alto se calcula sobre 100vh menos lo de arriba
   (header fijo + tabs + área de agregar); el mínimo evita colapso en pantallas bajas. */
.tabla-densa.tabla-detalle-doc {
    height: max(220px, calc(100vh - 400px));
}
.tabla-densa.tabla-detalle-doc .mud-table-container {
    height: max(220px, calc(100vh - 400px));
    overflow-y: auto;
}

/* Destello de la fila recién agregada: el fondo parte con un tinte del color primario
   y se desvanece a transparente en ~2s. Puramente visual (no bloquea nada); la clase
   la agrega/quita el JS de scroll al agregar una línea. Se aplica sobre las celdas
   porque el rayado (striped) de MudTable pinta el fondo en td. */
@keyframes flash-fila-agregada {
    from { background-color: rgba(var(--mud-palette-primary-rgb), 0.35); }
    to   { background-color: transparent; }
}
/* MudTable pinta el fondo en las celdas (td); las grillas custom (POS) en la fila (div). */
.fila-recien-agregada > td {
    animation: flash-fila-agregada 2s ease-out;
}
.fila-recien-agregada.pv-item-row {
    animation: flash-fila-agregada 2s ease-out;
}

/* Kardex: grilla compacta.
   Clave: la tabla NO se estira al ancho del contenedor (width:auto). Con
   width:100% el navegador reparte el espacio sobrante entre todas las
   columnas, y en pantallas anchas eso las separa muchisimo. Con auto cada
   columna se ajusta a su contenido real y la tabla queda alineada a la
   izquierda, sin aire entre columnas. */
.tabla-cardex table {
    table-layout: auto;
    width: auto;
    max-width: 100%;
}

.tabla-cardex .mud-table-container {
    overflow-x: auto;
}

.tabla-cardex .mud-table-cell {
    font-size: 0.75rem;
    padding: 1px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

/* La fecha nunca debe partirse en varias lineas */
.tabla-cardex .col-fecha {
    white-space: nowrap;
}

/* Descripcion: se corta con puntos suspensivos si es muy larga */
.tabla-cardex .col-descripcion {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabla-cardex .col-accion {
    width: 1%;
    text-align: center;
}

/* El boton de accion no debe inflar el alto de la fila */
.tabla-cardex .col-accion .mud-icon-button {
    padding: 2px;
}

.tabla-cardex .col-accion .mud-icon-root {
    font-size: 1rem;
}

/* Encabezados a la par con el cuerpo */
.tabla-cardex .mud-table-head .mud-table-cell {
    font-size: 0.72rem;
    padding: 3px 4px;
    white-space: nowrap;
}

.blue-chart {
  --mud-palette-chart-1: #0D47A1;
  --mud-palette-chart-2: #1565C0;
  --mud-palette-chart-3: #1976D2;
  --mud-palette-chart-4: #1E88E5;
  --mud-palette-chart-5: #2196F3;
  --mud-palette-chart-6: #42A5F5;
  --mud-palette-chart-7: #64B5F6;
  --mud-palette-chart-8: #90CAF9;
  --mud-palette-chart-9: #BBDEFB;
  --mud-palette-chart-10: #E3F2FD;
  --mud-palette-chart-11: #B3E5FC;
  --mud-palette-chart-12: #81D4FA;
}

.mud-table thead.mud-table-head th,
.mud-table thead.mud-table-head th.mud-table-cell,
.mud-table thead th,
.mud-table thead th.mud-table-cell {
    background-color: var(--mud-palette-primary) !important;
    color: white !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}

/* Botones: ALL CAPS y peso 600 */
.mud-button-root .mud-button-label {
    text-transform: uppercase;
    font-weight: 600;
}

/* Ocultar íconos decorativos a la izquierda de campos en stacks de formulario */
.d-flex.align-center > .mud-typography[style*="width:20px"][style*="text-align:center"] {
    display: none !important;
}