/* =====================================================================
   gth-ui.css  -  Estilos compartidos GTH (filtros + grids)
   RCL: Common.Web.Assets   ->   _content/Common.Web.Assets/css/gth-ui.css
   Usa las variables de tema por dominio: --brand-primary, --brand-primary-darken
   ---------------------------------------------------------------------
   Como usar en cualquier pagina:
     - Filtros:  envolver la fila de filtros en <MudPaper Class="... filtros-brand">
     - Grid:     <MudDataGrid Class="grid-bordered">
   Las etiquetas de la vista movil (td:nth-child(n)::before) y el layout
   page-no-scroll quedan por pagina porque dependen de cada grid.
   ===================================================================== */

/* =========================  FILTROS  ================================= */
/* Borde + etiqueta + iconos en color de marca; fondo morado bajito.
   El control ENFOCADO (donde esta el cursor) se distingue con fondo
   blanco + glow morado + borde mas grueso. */

.filtros-brand .mud-input.mud-input-outlined {
    background-color: color-mix(in srgb, var(--brand-primary) 12%, white) !important;
    border-radius: 4px;
    transition: box-shadow .15s ease, background-color .15s ease;
}
.filtros-brand .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--brand-primary) !important;
    border-width: 1.5px !important;
}
.filtros-brand .mud-input-label,
.filtros-brand .mud-input-label-inputcontrol { color: var(--brand-primary) !important; }
.filtros-brand .mud-input-adornment .mud-icon-root,
.filtros-brand .mud-select-input .mud-input-adornment-end .mud-icon-root { color: var(--brand-primary) !important; }
.filtros-brand .mud-input-slot,
.filtros-brand .mud-select-input { color: #1e293b !important; font-weight: 600 !important; }

/* Control enfocado */
.filtros-brand .mud-input.mud-input-outlined:focus-within {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 30%, transparent) !important;
}
.filtros-brand .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-width: 2.5px !important;
}

/* Card de tipo "KPI/info" dentro de filtros (mismo morado bajito que los inputs) */
.filtros-brand .filtro-card {
    background: color-mix(in srgb, var(--brand-primary) 12%, white);
    border: 1.5px solid var(--brand-primary);
    border-radius: 4px;
}

/* Popover de los MudSelect / MudAutocomplete a ancho automatico */
.mud-popover-auto-width { width: auto !important; min-width: unset !important; }

/* =========================  GRID  =================================== */
/* Bordes, header sticky morado en mayusculas, filas alternadas lila,
   borde morado del contenedor, paginador y tipografia por breakpoint. */

.grid-bordered .mud-table-cell { border-right: 1px solid var(--mud-palette-table-lines); }
.grid-bordered .mud-table-cell:last-child { border-right: none; }
.grid-bordered th.mud-table-cell { border-right: 1px solid var(--mud-palette-table-lines); }
.grid-bordered th.mud-table-cell:last-child { border-right: none; }
.grid-bordered thead th.mud-table-cell {
    background: linear-gradient(90deg, var(--brand-primary-darken) 0%, var(--brand-primary) 100%) !important;
    color: #ffffff !important; font-weight: 800 !important;
    text-transform: uppercase; letter-spacing: 0.4px;
    border-right-color: rgba(255, 255, 255, 0.15) !important;
    position: sticky; top: 0; z-index: 2;
}
.grid-bordered thead th.mud-table-cell:last-child { border-right: none !important; }

/* Filas alternadas (tinte claro derivado del color fuerte) */
.grid-bordered tbody tr.mud-table-row { background: #ffffff !important; }
.grid-bordered tbody tr.mud-table-row:nth-of-type(even) { background: color-mix(in srgb, var(--brand-primary) 12%, white) !important; }
.grid-bordered tbody tr.mud-table-row:hover { background: color-mix(in srgb, var(--brand-primary) 20%, white) !important; }

/* Borde morado del contenedor */
.grid-bordered .mud-table-container { border: 3px solid var(--brand-primary); border-radius: 10px; }

/* Paginador / footer */
.grid-bordered .mud-table-pagination, .grid-bordered tfoot, .grid-bordered tfoot tr, .grid-bordered tfoot td {
    background: linear-gradient(90deg, var(--brand-primary-darken) 0%, var(--brand-primary) 100%) !important; color: #ffffff !important;
}
.grid-bordered .mud-table-pagination-toolbar {
    background: linear-gradient(90deg, var(--brand-primary-darken) 0%, var(--brand-primary) 100%) !important; color: #ffffff !important;
}
.grid-bordered .mud-table-pagination-caption, .grid-bordered .mud-table-pagination-select,
.grid-bordered .mud-select, .grid-bordered .mud-select-input, .grid-bordered .mud-input-root {
    color: rgba(255, 255, 255, 0.85) !important;
}
.grid-bordered .mud-table-pagination .mud-icon-button, .grid-bordered tfoot .mud-icon-button {
    color: rgba(255, 255, 255, 0.85) !important;
}
.grid-bordered .mud-table-pagination .mud-icon-button:hover, .grid-bordered tfoot .mud-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
.grid-bordered .mud-table-pagination .mud-icon-button:disabled, .grid-bordered tfoot .mud-icon-button:disabled {
    color: rgba(255, 255, 255, 0.35) !important;
}
.grid-bordered .mud-select-icon { color: rgba(255, 255, 255, 0.7) !important; }
.grid-bordered table { table-layout: auto !important; }
.col-auto { width: 1px !important; white-space: nowrap !important; }
.hdr-2line { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }

/* Selector del paginador compacto + icono blanco */
.grid-bordered .mud-table-pagination-select .mud-input-root {
    min-width: unset !important; max-width: unset !important; width: 100% !important;
    text-overflow: clip !important; overflow: visible !important;
}
.grid-bordered .mud-table-pagination-select .mud-input-slot {
    text-overflow: clip !important; overflow: visible !important;
}
.grid-bordered .mud-table-pagination-select { width: auto !important; min-width: 60px !important; }
.grid-bordered .mud-table-pagination .mud-select .mud-svg-icon,
.grid-bordered .mud-table-pagination .mud-input-adornment-end svg {
    fill: #ffffff !important; color: #ffffff !important;
}

/* === Tipografia del grid - 5 breakpoints MudBlazor (mobile-first) === */
.grid-bordered .mud-table-cell { padding: 1px 4px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; }
.grid-bordered th.mud-table-cell { padding: 8px 4px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; }
.grid-bordered .mud-typography { font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; }
@media (min-width: 600px) {
    .grid-bordered .mud-table-cell { font-size: 14px !important; padding: 2px 4px !important; }
    .grid-bordered th.mud-table-cell { font-size: 14px !important; padding: 10px 4px !important; }
    .grid-bordered .mud-typography { font-size: 14px !important; }
}
@media (min-width: 960px) {
    .grid-bordered .mud-table-cell { font-size: 14px !important; }
    .grid-bordered th.mud-table-cell { font-size: 14px !important; }
    .grid-bordered .mud-typography { font-size: 14px !important; }
}
@media (min-width: 1280px) {
    .grid-bordered .mud-table-cell { font-size: 15px !important; }
    .grid-bordered th.mud-table-cell { font-size: 15px !important; }
    .grid-bordered .mud-typography { font-size: 15px !important; }
}
@media (min-width: 1920px) {
    .grid-bordered .mud-table-cell { font-size: 17px !important; }
    .grid-bordered th.mud-table-cell { font-size: 17px !important; }
    .grid-bordered .mud-typography { font-size: 17px !important; }
}

/* === Layout: pagina sin scroll, grid con scroll interno (md+) === */
@media (min-width: 960px) {
    .page-no-scroll {
        height: calc(100dvh - 64px - 1rem); overflow: hidden;
        display: flex; flex-direction: column;
    }
    .grid-scroll-container {
        flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    }
    .grid-scroll-container .mud-table { flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .grid-scroll-container .mud-table-container { flex: 1; overflow-y: auto !important; min-height: 0; }
}

/* Escala de botones de accion del grid por breakpoint */
@media (min-width: 1280px) {
    .grid-bordered .mud-table-cell .mud-button-root,
    .grid-bordered .mud-table-cell .mud-icon-button { transform: scale(1.05); }
}
@media (min-width: 1920px) {
    .grid-bordered .mud-table-cell .mud-button-root,
    .grid-bordered .mud-table-cell .mud-icon-button { transform: scale(1.15); }
}