/* =====================================================================================
   Diseño compacto y profesional para pantallas de 19" (1280x1024 / 1366x768)
   Se carga el último (App.razor), así que sobrescribe a MudBlazor, Bootstrap y Syncfusion.
   Para volver al diseño anterior basta con quitar el <link> de este fichero en App.razor.
   ===================================================================================== */

/* ---- Paleta: fondo azul-grisáceo suave en lugar de blanco; los campos de datos sí son blancos ---- */
:root {
    --drm-bg: #E6ECF3;          /* fondo de la aplicación */
    --drm-surface: #F7F9FC;     /* ventanas, tarjetas, diálogos, filas de tablas */
    --drm-surface-alt: #EEF2F8; /* filas alternas */
    --drm-head: #E1E8F1;        /* cabeceras de tablas */
    --drm-hover: #DDE7F7;       /* fila bajo el ratón */
    --drm-border: #D3DCE8;
    --drm-field: #FFFFFF;       /* campos de entrada */
    --drm-text: #0F172A;
    --drm-muted: #64748B;
}

/* ---- Escala general: en pantallas pequeñas todo (rem) se reduce ---- */
html { font-size: 16px; }
@media (max-width: 1599.98px) { html { font-size: 14.5px; } }
@media (max-width: 1399.98px) { html { font-size: 13.5px; } }

body {
    font-family: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--drm-bg);
    color: var(--drm-text);
    -webkit-font-smoothing: antialiased;
}

article.content { padding-top: 0.5rem; }

.drm-empresa { font-size: 1rem; letter-spacing: 0.02em; }

/* ---- Tarjetas ---- */
.drm-card.mud-paper {
    background: var(--drm-surface);
    border: 1px solid var(--drm-border);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ---- Campos de formulario (MudBlazor): altura ~32 px, etiqueta pequeña ---- */
.mud-input.mud-input-outlined:not(.mud-input-multiline) .mud-input-slot.mud-input-root-outlined {
    padding: 7px 10px !important;
}
.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined {
    transform: translate(10px, 8px) scale(1);
}
.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-shrink {
    transform: translate(10px, -6px) scale(0.78);
}
.mud-input.mud-input-outlined { background: var(--drm-field); border-radius: 5px; }
.mud-input-outlined .mud-input-outlined-border { border-color: #BCC8D8; border-radius: 5px; }
.mud-input-outlined:hover .mud-input-outlined-border { border-color: #94A3B8; }
.mud-input-adornment-end { margin-left: 2px; }
.mud-input-helper-text, .mud-input-control-helper-container { min-height: 0; }
.mud-input-control { margin-top: 0; }
/* Flechas arriba/abajo de los campos numéricos: ocupan sitio y no se usan */
.mud-input-numeric-spin { display: none !important; }
/* Los campos de solo lectura se distinguen sin necesidad de color de aviso */
.mud-input.mud-disabled .mud-input-slot, .mud-input-slot[readonly] { color: #475569; }

/* ---- Tablas MudBlazor ---- */
.mud-table-cell { padding: 4px 10px !important; }
.mud-table-head .mud-table-cell {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--drm-muted);
    background: var(--drm-head);
    border-bottom: 1px solid var(--drm-border);
}
.mud-table-dense * .mud-table-row .mud-table-cell { padding: 3px 8px !important; }

/* ---- Botones ---- */
.mud-button-root { border-radius: 5px; }
.mud-button-root.mud-button-size-medium { padding: 4px 14px; }
.mud-button-root.mud-button-size-small { padding: 2px 10px; }
.mud-icon-button.mud-button-size-small { padding: 3px; }

/* ---- Diálogos ---- */
.mud-dialog .mud-dialog-title { padding: 10px 16px; }
.mud-dialog .mud-dialog-content { padding: 6px 16px; }
.mud-dialog .mud-dialog-actions { padding: 8px 16px; }

/* ---- Menús desplegables ---- */
.mud-list-item { padding-top: 4px; padding-bottom: 4px; }

/* ---- Rejillas Syncfusion: misma fuente y tamaño que las ventanas de documentos ---- */
.e-grid, .e-grid .e-rowcell, .e-grid .e-headercell, .e-grid .e-gridpager, .e-grid .e-toolbar,
.e-control, .e-css {
    font-family: inherit;
}
.e-grid { border-color: var(--drm-border); background: var(--drm-surface); font-size: 0.85rem; }
.e-grid .e-headercell {
    background: var(--drm-head);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--drm-muted);
}
.e-grid .e-row { height: 30px !important; background-color: var(--drm-surface); }
.e-grid .e-altrow { background-color: var(--drm-surface-alt); }
.e-grid .e-rowcell { font-size: 0.85rem; color: var(--drm-text); }
.e-grid .e-row:hover .e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) { background-color: var(--drm-hover); }
/* fila de filtros de la rejilla */
.e-grid .e-filterbarcell { padding: 2px 6px !important; background: var(--drm-surface); }
.e-grid .e-filterbarcell input.e-input, .e-grid .e-filterbarcell .e-input-group { height: 24px; font-size: 0.8rem; background: var(--drm-field); }
.e-grid .e-filterbarcell .e-input-group .e-input-group-icon { min-height: 22px; min-width: 22px; font-size: 0.7rem; }
/* barra de herramientas y paginador */
.e-grid .e-toolbar { min-height: 32px; background: var(--drm-head); }
.e-grid .e-toolbar .e-toolbar-items { min-height: 32px; background: var(--drm-head); }
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn { min-height: 28px; font-size: 0.8rem; }
.e-grid .e-gridpager { font-size: 0.8rem; background: var(--drm-head); padding: 2px 6px; min-height: 0; }
.e-grid .e-gridpager .e-pagercontainer .e-numericitem, .e-grid .e-gridpager .e-pagercontainer .e-currentitem { min-width: 26px; padding: 4px 6px; }
/* botones y campos de Syncfusion */
.e-btn, .e-css.e-btn { font-size: 0.8rem; padding: 3px 12px; line-height: 1.5; }
.e-input-group, .e-input-group.e-control-wrapper { font-size: 0.85rem; }

/* ---- Páginas de listado (Bootstrap + MudBlazor): mismo aspecto que las ventanas de documentos ---- */
h3 { font-size: 1.15rem; font-weight: 600; margin: 0.15rem 0 0.5rem; letter-spacing: -0.005em; }
h4 { font-size: 1.05rem; font-weight: 600; }
.container-fluid { padding-left: 0; padding-right: 0; }
.container-fluid .row.mb-3 { margin-bottom: 0.5rem !important; }
.container-fluid .row { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.5rem; }
/* tarjetas de resumen */
.card { background: var(--drm-surface); border-color: var(--drm-border); border-radius: 6px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.card[style*="min-width"] { min-width: 190px !important; }
.card .card-body { padding: 0.35rem 0.7rem !important; }
.card .fs-5 { font-size: 0.95rem !important; }
.card .fs-6 { font-size: 0.85rem !important; }
.card .small, .card .text-muted { font-size: 0.75rem !important; }
/* filtros: chips y etiquetas */
.mud-chip { font-size: 0.78rem; }
.mud-chip.mud-chip-size-medium { height: 24px; }
.mud-chip.mud-chip-size-medium .mud-icon-root { font-size: 1rem; }
.fw-semibold { font-size: 0.85rem; }
/* botones y campos de Bootstrap */
.btn { font-size: 0.85rem; padding: 0.2rem 0.65rem; }
.form-control, .form-select { font-size: 0.85rem; padding: 0.2rem 0.5rem; background-color: var(--drm-field); }
label, .form-label { font-size: 0.85rem; margin-bottom: 0.15rem; }

/* ---- Barras de desplazamiento finas ---- */
* { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #94A3B8; }