/* Services encima de sistema.css: armazón, portada, acceso y la piel de DevExpress, Radzen y Syncfusion
   con los colores de la casa. Los temas de terceros se tiñen por sus variables; solo se pisan reglas donde no hay variable. */

/* ---------------------------------------------------------------- variables de los temas de terceros */
:root {
    /* DevExpress (tema bootstrap-external: sin Bootstrap cargado, estas variables iban vacías) */
    --bs-primary: #16707E; --bs-primary-rgb: 22, 112, 126;
    --bs-secondary: #52666A; --bs-secondary-rgb: 82, 102, 106;
    --bs-success: #2F7A3A; --bs-success-rgb: 47, 122, 58;
    --bs-danger: #B42318; --bs-danger-rgb: 180, 35, 24;
    --bs-warning: #D97706; --bs-warning-rgb: 217, 119, 6;
    --bs-info: #2BADC0; --bs-info-rgb: 43, 173, 192;
    --bs-light: #F6F4EF; --bs-light-rgb: 246, 244, 239;
    --bs-dark: #0B2E33; --bs-dark-rgb: 11, 46, 51;
    --bs-white: #FFFFFF;
    --bs-body-color: #0B2E33; --bs-body-bg: #FFFFFF;
    --bs-border-color: #E8E5DE;
    --bs-gray: #5A6B6E; --bs-gray-200: #ECE9E2; --bs-gray-300: #E8E5DE; --bs-gray-400: #D9D5CB; --bs-gray-600: #52666A; --bs-gray-900: #0B2E33;
    --bs-blue: #16707E; --bs-cyan: #2BADC0; --bs-teal: #2BADC0; --bs-green: #2F7A3A; --bs-yellow: #D97706; --bs-orange: #D97706; --bs-red: #B42318;
    --bs-body-font-family: var(--fuente);
    --bs-border-radius: var(--r-s);
    --dxbl-pager-active-page-btn-bg: var(--acento-suave);

    /* Radzen */
    --rz-primary: #0B2E33; --rz-primary-light: #16414A; --rz-primary-lighter: rgba(22, 112, 126, .14); --rz-primary-dark: #061A1E; --rz-on-primary: #FFFFFF;
    --rz-secondary: #16707E; --rz-info: #16707E; --rz-info-light: #2BADC0; --rz-info-lighter: rgba(43, 173, 192, .14); --rz-info-dark: #0E5561; --rz-on-info: #FFFFFF;
    --rz-success: #2F7A3A; --rz-success-light: #3F8F4B; --rz-success-dark: #2F5E22;
    --rz-warning: #D97706; --rz-danger: #B42318; --rz-danger-light: #C53A2F; --rz-danger-dark: #9F1D14;
    --rz-base-100: #F6F4EF; --rz-base-200: #ECE9E2; --rz-base-300: #E8E5DE; --rz-base-500: #9AA7A9; --rz-base-700: #52666A; --rz-base-800: #0B2E33; --rz-base-900: #0B2E33;
    --rz-text-font-family: var(--fuente);
    --rz-body-font-size: .8125rem;
    --rz-border-radius: var(--r-s);
    --rz-button-border-radius: 999px;
    --rz-grid-header-background-color: var(--fondo-deep);
    --rz-grid-header-color: var(--texto-suave);
    --rz-dialog-title-background-color: var(--fondo-alt);
    --rz-dialog-border-radius: 22px;
    --rz-tabs-tab-selected-color: var(--texto);
    --rz-series-1: #16707E; --rz-series-2: #8FC97A; --rz-series-3: #2BADC0;
}

/* El aviso de licencia de Syncfusion */
div[style*="z-index: 99999;"], div[style*="z-index: 999999999;"] { display: none !important; }

/* ---------------------------------------------------------------- armazón */
#capture { height: 100%; }
.barra-app { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.75rem; border-bottom: 1px solid var(--linea); flex: none; min-width: 0; }
.barra-app-nombre { font-family: var(--fuente-titulo); font-weight: 600; font-size: 1rem; white-space: nowrap; }
.barra-app .pestana { text-decoration: none; }
/* Si no caben las áreas, se desplazan ellas; la barra no recorta el menú de la cuenta */
.rail-areas { min-height: 0; overflow-y: auto; scrollbar-width: none; }
.rail-nombre { max-width: 100%; overflow-wrap: anywhere; }
/* Pantallas bajas (portátil de 768 px): menos aire para que quepan todas las áreas */
@media (min-width: 768px) and (max-height: 820px) {
    .rail { padding: .6rem 0; }
    .rail-marca { margin-bottom: .4rem; height: 2.5rem; }
    .rail-area { padding: .2rem 0; gap: .2rem; }
    .rail-chip { height: 2.125rem; }
}
@media (max-width: 767px) {
    .barra-app { padding: .6rem 1rem; }
    .barra-app-nombre { display: none; }
    .rail-areas { overflow-x: auto; justify-content: flex-start; }
    .rail-area { flex: 0 0 4.25rem; }
}

/* Mientras se abre una pantalla (ensamblados diferidos): una línea fina arriba */
.precarga-ruta { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1500; background: linear-gradient(90deg, var(--marca), var(--marca-2)); animation: latido 1.2s ease-in-out infinite; }

/* ---------------------------------------------------------------- portada: una tarjeta con foto por servicio */
.portada { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .portada { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .portada { grid-template-columns: minmax(0, 1fr); } }
.app-tarjeta, .app-tarjeta:hover { display: flex; flex-direction: column; overflow: hidden; color: var(--texto); text-decoration: none; }
.app-tarjeta-foto { display: block; height: clamp(6.5rem, 17vh, 11rem); overflow: hidden; background: var(--fondo-deep); }
.app-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform var(--t-lento) var(--curva); }
.app-tarjeta:hover .app-tarjeta-foto img { transform: scale(1.04); }
.app-tarjeta-cuerpo { display: flex; flex-direction: column; gap: .45rem; padding: .85rem 1.1rem 1rem; }
.app-tarjeta-cabeza { display: flex; align-items: center; gap: .65rem; }
.app-tarjeta-chip { width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; background: var(--fondo-deep); --icono-tinte: color-mix(in srgb, var(--marca) 55%, transparent); }
.app-tarjeta-chip .icono { width: 1.25rem; height: 1.25rem; }
.app-tarjeta b { font-family: var(--fuente-titulo); font-size: 1.0625rem; font-weight: 600; }
.app-tarjeta p { color: var(--texto-suave); font-size: .8125rem; line-height: 1.45; }
.app-tarjeta-flecha { margin-left: auto; width: 1rem; height: 1rem; color: var(--texto-tenue); transition: transform var(--t) var(--curva), color var(--t-rapido); }
.app-tarjeta:hover .app-tarjeta-flecha { transform: translateX(3px); color: var(--acento); }
/* Las portadas caben en la pantalla: sin el aire extra de abajo de la lámina */
main.lamina-contenido:has(.portada) { padding-bottom: 1.25rem; }
.cabecera-pagina:has(+ .portada) { margin-bottom: 1rem; }
.pie-soporte { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1.25rem; padding-top: .85rem; border-top: 1px solid var(--linea); font-size: .8125rem; color: var(--texto-suave); }
.pie-soporte .enlace { display: inline-flex; align-items: center; gap: .35rem; }
.pie-soporte .icono { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------------- acceso */
.acceso-form { display: flex; flex-direction: column; gap: .85rem; margin-top: 1.5rem; }
.acceso-marca { width: 3rem; margin-bottom: 1rem; }
.acceso-texto { margin-top: .4rem; font-size: .875rem; line-height: 1.5; color: var(--texto-suave); }
.acceso-pie { display: flex; justify-content: center; margin-top: 1rem; font-size: .8125rem; }
.acceso-pie button.enlace { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.validation-message { margin-top: .3rem; font-size: .75rem; color: var(--rojo-texto); }

/* ---------------------------------------------------------------- DevExpress */
.dxbl-text, .dxbl-grid, .dxbl-tabs, .dxbl-btn, .dxbl-fl, .dxbl-text-edit, .dxbl-dropdown { font-family: var(--fuente); }

/* Rejilla: caja de la casa, cabecera suave y filas compactas */
.dxbl-grid { border: 1px solid var(--linea) !important; border-radius: var(--r-l) !important; overflow: hidden; background: var(--fondo-alt); font-size: .8125rem; }
.dxbl-grid .dxbl-scroll-viewer { border-radius: 0 !important; box-shadow: none !important; }
.dxbl-grid-table thead, .dxbl-grid-header-row { background: var(--fondo-deep) !important; color: var(--texto-suave) !important; }
.dxbl-grid-table thead th, .dxbl-grid-header { font-size: .75rem !important; font-weight: 600; color: var(--texto-suave) !important; border-color: var(--linea) !important; }
.dxbl-grid-table tbody > tr { background: transparent; transition: background-color var(--t-rapido); }
.dxbl-grid-table tbody > tr:hover { background: var(--fondo-deep); }
.dxbl-grid-table tr td { padding: .5rem .75rem !important; border-color: var(--linea) !important; }
.dxbl-grid-table .dxbl-grid-footer-row td { padding: .5rem .75rem !important; background: var(--fondo-deep) !important; color: var(--texto) !important; font-weight: 600; }
.dxbl-grid-bottom-panel * { color: var(--texto-suave) !important; border-color: var(--linea) !important; }
.dxbl-grid-top-panel, .dxbl-grid-bottom-panel { background: var(--fondo-alt); }
.dxbl-grid-empty-data-area { color: var(--texto-suave); }

/* Pestañas de DevExpress con el segmentado de la casa */
.dxbl-tabs > .dxbl-scroll-viewer, .dxbl-tabs-tablist { border: 0 !important; }
ul[role="tablist"] { display: inline-flex !important; gap: .125rem !important; padding: .25rem !important; margin-bottom: 1rem !important; border-radius: 999px; background: var(--fondo-hundido); border: 0 !important; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dxbl-tabs-item {
    margin: 0 !important; padding: .35rem .95rem !important; min-height: 2rem; border: 0 !important; border-radius: 999px !important;
    background: transparent !important; color: var(--texto-suave) !important; font-size: .8125rem; font-weight: 500; white-space: nowrap;
    transition: background-color var(--t) var(--curva), color var(--t-rapido), box-shadow var(--t) var(--curva);
}
.dxbl-tabs-item:hover { background: transparent !important; color: var(--texto) !important; }
.dxbl-tabs-item.dxbl-active, .dxbl-scroll-viewer-content .dxbl-active {
    background: var(--fondo-elevado) !important; color: var(--texto) !important; font-weight: 600;
    box-shadow: 0 1px 2px rgba(11, 46, 51, .08), 0 2px 8px rgba(11, 46, 51, .06);
}
.dxbl-tabs-item::after, .dxbl-tabs-item::before { display: none !important; }

/* Botones de DevExpress */
.dxbl-btn { border-radius: 999px !important; font-size: .8125rem; font-weight: 500; }
.dxbl-btn.dxbl-btn-primary { background: var(--accion); border-color: var(--accion); color: var(--accion-texto); }
.dxbl-btn.dxbl-btn-primary:hover:not(:disabled) { background: var(--accion-hover); border-color: var(--accion-hover); }

/* Campos de DevExpress con la forma de .campo */
.dxbl-text-edit, .dxbl-dropdown-edit { border-radius: var(--r-s) !important; border-color: var(--linea) !important; background: var(--campo-fondo) !important; }
.dxbl-text-edit:focus-within { border-color: var(--acento) !important; box-shadow: 0 0 0 3px var(--foco) !important; background: var(--fondo-alt) !important; }

/* Gráficos */
.dx-chart, .dx-chart-legend { font-family: var(--fuente) !important; }

/* ---------------------------------------------------------------- Radzen */
.rz-button { border-radius: 999px !important; font-weight: 600; box-shadow: none !important; }
.rz-button.rz-info { background-color: var(--accion) !important; color: var(--accion-texto) !important; }
.rz-button.rz-info:not(.rz-state-disabled):hover { background-color: var(--accion-hover) !important; }
.rz-dropdown, .rz-textbox, .rz-datepicker > .rz-inputtext, .rz-inputtext, .rz-multiselect {
    border-radius: var(--r-s) !important; background-color: var(--campo-fondo) !important; box-shadow: inset 0 0 0 1px var(--linea) !important; border: 0 !important;
}
.rz-dropdown:hover, .rz-textbox:hover { box-shadow: inset 0 0 0 1px var(--linea-fuerte) !important; }
.rz-dropdown.rz-state-focused, .rz-textbox:focus, .rz-inputtext:focus { background-color: var(--fondo-alt) !important; box-shadow: 0 0 0 1px var(--acento), 0 0 0 4px var(--foco) !important; outline: none; }
.rz-dropdown-panel, .rz-popup, .rz-datepicker-popup-container .rz-calendar { border-radius: var(--r-m) !important; box-shadow: var(--sombra-flotante) !important; border: 0 !important; }
.rz-chkbox-box.rz-state-active { background-color: var(--accion) !important; border-color: var(--accion) !important; }
.rz-card { border: 1px solid var(--linea); border-radius: var(--r-l) !important; box-shadow: none !important; }

/* Rejilla de Radzen */
.rz-data-grid { border: 0 !important; font-family: var(--fuente); }
.rz-data-grid-data { border: 1px solid var(--linea) !important; border-radius: var(--r-l) !important; }
.rz-grid-table thead tr th { background-color: var(--fondo-deep) !important; border-color: var(--linea) !important; }
.rz-grid-table thead tr th span { color: var(--texto-suave) !important; font-weight: 600; }
.rz-grid-table .rz-data-row td { border-color: var(--linea) !important; }
.rz-grid-table .rz-data-row:hover > td { background-color: var(--fondo-deep) !important; }
.rz-pager .rz-pager-page.rz-state-active { background-color: var(--acento-suave) !important; color: var(--acento-hover) !important; }

/* Diálogos de Radzen con la forma del modal de la casa */
.rz-dialog-mask { background: rgba(6, 26, 30, .42) !important; backdrop-filter: blur(3px); opacity: 1 !important; }
.rz-dialog { border-radius: 22px !important; box-shadow: var(--sombra-alta) !important; overflow: hidden; animation: dialogo-entra var(--t-lento) var(--curva); }
.rz-dialog-titlebar { padding: 1.25rem 1.25rem .5rem 1.75rem !important; border: 0 !important; background: var(--fondo-alt) !important; }
.rz-dialog-title { font-family: var(--fuente-titulo); font-size: 1.25rem !important; font-weight: 600 !important; letter-spacing: -.02em; color: var(--texto) !important; }
.rz-dialog-titlebar-close { display: inline-flex !important; align-items: center; justify-content: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50% !important; background: var(--fondo-hundido) !important; color: var(--texto) !important; transition: background-color var(--t-rapido); }
.rz-dialog-titlebar-close:hover { background: color-mix(in srgb, var(--texto) 12%, var(--fondo-hundido)) !important; }
.rz-dialog-content { padding: .5rem 1.75rem 1.5rem !important; }

/* Pestañas de Radzen con el segmentado de la casa */
.rz-tabview-nav { display: inline-flex !important; gap: .125rem; padding: .25rem; border-radius: 999px; background: var(--fondo-hundido); border: 0 !important; }
.rz-tabview-nav li { border: 0 !important; border-radius: 999px !important; background: transparent !important; }
.rz-tabview-nav li a { padding: .35rem .95rem !important; color: var(--texto-suave) !important; font-size: .8125rem; text-transform: none !important; }
.rz-tabview-nav li.rz-tabview-selected { background: var(--fondo-elevado) !important; box-shadow: 0 1px 2px rgba(11, 46, 51, .08), 0 2px 8px rgba(11, 46, 51, .06); }
.rz-tabview-nav li.rz-tabview-selected a { color: var(--texto) !important; font-weight: 600; }
.rz-tabview-nav li::after { display: none !important; }
.rz-tabview-panels { border: 0 !important; padding: 1rem 0 0 !important; background: transparent !important; }

/* Avisos de Radzen */
.rz-notification-item-wrapper { border-radius: var(--r-m) !important; box-shadow: var(--sombra-flotante) !important; }

/* ---------------------------------------------------------------- Syncfusion (tabla dinámica y mapas) */
/* Menos los iconos, que van con su propia fuente (e-icons) */
.e-pivotview, .e-pivotview *:not(.e-icons), .e-maps { font-family: var(--fuente) !important; }
.e-pivotview { border-radius: var(--r-l); overflow: hidden; border-color: var(--linea) !important; }
.e-pivotview .e-headercell, .e-pivotview .e-columnsheader, .e-pivotview .e-rowsheader { background: var(--fondo-deep) !important; color: var(--texto) !important; }
.e-pivotview .e-grouping-bar, .e-pivotview .e-group-rows, .e-pivotview .e-group-columns { background: var(--fondo-alt) !important; border-color: var(--linea) !important; }
.e-pivotview .e-pvt-button, .e-pivotview .e-pill { border-radius: 999px !important; background: var(--fondo-hundido) !important; border: 0 !important; color: var(--texto) !important; }
/* Configuración de la tabla dinámica (ventana fuera de .e-pivotview) */
.e-pivotfieldlist-container, .e-pivotfieldlist-container *:not(.e-icons) { font-family: var(--fuente) !important; }
.e-pivotfieldlist-container { border-radius: var(--r-l) !important; border-color: var(--linea) !important; }
.e-pivotfieldlist-container .e-btn { border-radius: 999px !important; font-weight: 600; }
.e-pivotfieldlist-container .e-icons.e-selected { color: var(--acento) !important; }
.e-pivotfieldlist-container .e-btn.e-primary, .e-pivotfieldlist-container .e-cancel-btn { background: var(--accion) !important; border-color: var(--accion) !important; color: var(--accion-texto) !important; }
.e-pivotfieldlist-container .e-btn.e-primary:hover, .e-pivotfieldlist-container .e-cancel-btn:hover { background: var(--accion-hover) !important; }

/* ---------------------------------------------------------------- piezas heredadas de las pantallas
   Sus <style> en línea traen el azul antiguo; aquí se reescriben con más especificidad sin tocar la pantalla. */
.lamina-contenido .card-container { gap: .75rem; margin-top: 1rem; }
.lamina-contenido .card-incidencia {
    background: var(--fondo-alt) !important; background-image: none !important; border: 1px solid var(--linea);
    border-radius: var(--r-l); padding: .8rem 1.1rem !important; color: var(--texto); box-shadow: none;
}
.lamina-contenido .card-incidencia * { color: var(--texto); }
.lamina-contenido .card-incidencia h2 { font-family: var(--fuente); font-size: .75rem !important; font-weight: 600; color: var(--texto-suave) !important; }
.lamina-contenido .card-incidencia p { font-family: var(--fuente-titulo); font-size: 1.75rem !important; font-weight: 600 !important; line-height: 1.2; margin-top: .2rem !important; color: var(--texto) !important; font-variant-numeric: tabular-nums; }
.lamina-contenido .card-incidencia span { font-family: var(--fuente); font-size: .75rem !important; font-weight: 500; color: var(--texto-suave) !important; }
.lamina-contenido .card-incidencia svg { color: var(--texto-tenue); }

.lamina-contenido .title-section {
    background: var(--fondo-deep) !important; color: var(--texto) !important; text-align: left;
    padding: .6rem 1rem !important; font-family: var(--fuente-titulo); font-size: .875rem; font-weight: 600; border-bottom: 1px solid var(--linea);
}
.lamina-contenido .form-control { background-color: var(--campo-fondo) !important; color: var(--texto) !important; }
.lamina-contenido .inc-empleados-container, .lamina-contenido [style*="solid #27475E"] { border-color: var(--linea) !important; border-radius: var(--r-l) !important; }
.lamina-contenido .line { background-color: var(--marca) !important; }
.lamina-contenido #table-pais thead { background: var(--fondo-deep) !important; color: var(--texto-suave) !important; }
.lamina-contenido .dxbl-grid-header-row { background: var(--fondo-deep) !important; text-align: left; }
.lamina-contenido .dxbl-grid-header { padding: .5rem .75rem !important; font-size: .75rem !important; }
.lamina-contenido .alt-item > td { background-color: transparent !important; }
.lamina-contenido .dxbl-grid-table .rz-variant-filled { background-color: var(--fondo-deep) !important; }
.lamina-contenido .dxbl-grid { border: 1px solid var(--linea) !important; }

/* DxButton con las clases antiguas (barra de la rejilla: guardar vista, restaurar, columnas) */
.dxbl-btn.btn-blanco { background: var(--fondo-hundido) !important; color: var(--texto) !important; border: 0 !important; box-shadow: none !important; }
.dxbl-btn.btn-blanco:hover { background: color-mix(in srgb, var(--texto) 11%, var(--fondo-hundido)) !important; }
.dxbl-btn.btn-azul { background: var(--accion) !important; color: var(--accion-texto) !important; border: 0 !important; }
.section-custom-btn .dxbl-btn svg { width: 1.125rem; height: 1.125rem; }

/* Cifras clave en una fila (antes, una tarjeta oscura por línea por debajo de 1600 px) */
.lamina-contenido .card-container:has(> .card-incidencia) { flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start !important; }
.lamina-contenido .card-container > .card-incidencia { flex: 1 1 15rem; width: auto !important; height: auto !important; max-height: none; min-height: 5.5rem; }

/* Paneles lado a lado de los cuadros de mando: que encojan con la lámina en lugar de salirse */
.lamina-contenido #geografico-container > div, .lamina-contenido #sector-container > div, .lamina-contenido #sociedades-container > div,
.lamina-contenido #evolucion-container > div, .lamina-contenido #documentacion-container > div, .lamina-contenido #incidencias-container > div { min-width: 0; }
.lamina-contenido #geografico-container > div:last-child { flex: 1 1 0; }

/* ---------------------------------------------------------------- cuadros de mando a pantalla completa
   La pestaña ocupa lo que queda de la lámina y su bloque principal (.maindiv) se reparte ese alto:
   no hay scroll de lámina, cada rejilla o leyenda hace scroll por dentro. En tablet y móvil se apila. */
@media (min-width: 1024px) {
    main.lamina-contenido:has(.maindiv) { display: flex; flex-direction: column; overflow: hidden; padding: 1rem 1.5rem 1.25rem; }
    main.lamina-contenido:has(.maindiv) > .pagina > div:has(.dxbl-tabs) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    main.lamina-contenido:has(.maindiv) .dxbl-tabs { flex: 1 1 auto; min-height: 0; display: flex !important; flex-direction: column; }
    main.lamina-contenido:has(.maindiv) .dxbl-tabs > .dxbl-tabs-content-panel { flex: 1 1 auto; min-height: 0; }
    main.lamina-contenido:has(.maindiv) .dxbl-tabs-content.dxbl-active { flex: 1 1 auto; min-height: 0; display: flex !important; flex-direction: column; gap: .75rem; }
    main.lamina-contenido:has(.maindiv) .dxbl-tabs-content.dxbl-active > .m-3 { margin: 0 !important; flex: none; }
    main.lamina-contenido:has(.maindiv) ul[role="tablist"] { margin-bottom: .75rem !important; }
    main.lamina-contenido .dxbl-tabs-content.dxbl-active > .maindiv {
        flex: 1 1 0; min-height: 0; height: auto !important; margin: 0 !important; gap: .75rem !important; justify-content: flex-start !important;
    }
    /* Los paneles lado a lado llenan el alto del bloque */
    main.lamina-contenido .maindiv > [id$="-container"], main.lamina-contenido .maindiv > .mejora-container { flex: 1 1 0; min-height: 0; height: auto !important; }
    main.lamina-contenido .maindiv > [id$="-container"] > div { height: 100% !important; min-height: 0; }
}

/* Filtros: la fila tenía margen negativo (de Bootstrap) y se salía por la derecha */
.lamina-contenido .filters-container.row { margin-left: 0; margin-right: 0; }

@media (min-width: 1024px) {
    /* Bloques del cuadro de mando que envuelven a otro contenedor (Resumen de Audit) */
    main.lamina-contenido .maindiv > div:not(.card-container):not([id$="-container"]):not(.dxbl-grid) { flex: 1 1 0; min-height: 0; height: auto !important; }
    main.lamina-contenido .maindiv > div:not(.card-container) > [id$="-container"] { height: 100% !important; margin-top: 0 !important; min-height: 0; }
    main.lamina-contenido .maindiv > div:not(.card-container) > [id$="-container"] > div { height: 100% !important; min-height: 0; }
    /* Fila de paneles sin id (Categoría de gasto): cada panel, al alto de la fila */
    main.lamina-contenido .maindiv > div:not(.card-container):not([id]) > div { height: 100% !important; min-height: 0; }
    main.lamina-contenido .maindiv > .card-container { flex: none; margin-top: 0 !important; }
    /* El mapa se adapta al panel; no lo empuja */
    main.lamina-contenido #geografico-container > div:last-child { overflow: hidden; position: relative; }

    /* Pantallas de rejilla (la tabla traía min-height: 80vh): la tabla ocupa el hueco que dejan filtros y botones */
    main.lamina-contenido:has(.dxbl-grid[style*="vh"]):not(:has(.maindiv)) { display: flex; flex-direction: column; overflow: hidden; padding: 1rem 1.5rem 1.25rem; }
    main.lamina-contenido:has(.dxbl-grid[style*="vh"]):not(:has(.maindiv)) > .pagina > div:has(.dxbl-grid[style*="vh"]),
    main.lamina-contenido:has(.dxbl-grid[style*="vh"]):not(:has(.maindiv)) .dxbl-tabs:has(.dxbl-grid[style*="vh"]),
    main.lamina-contenido:has(.dxbl-grid[style*="vh"]):not(:has(.maindiv)) .dxbl-tabs-content.dxbl-active:has(.dxbl-grid[style*="vh"]) {
        flex: 1 1 auto; min-height: 0; display: flex !important; flex-direction: column;
    }
    main.lamina-contenido:has(.dxbl-grid[style*="vh"]):not(:has(.maindiv)) .dxbl-tabs-content-panel { flex: 1 1 auto; min-height: 0; }
    main.lamina-contenido:has(.dxbl-grid[style*="vh"]):not(:has(.maindiv)) > .pagina > .m-3,
    main.lamina-contenido:has(.dxbl-grid[style*="vh"]):not(:has(.maindiv)) > .pagina > div > .m-3 { margin: 0 0 .5rem !important; flex: none; }
    main.lamina-contenido .dxbl-grid[style*="vh"] { flex: 1 1 0; min-height: 0 !important; max-height: none !important; height: auto; }

    /* Cuenta: datos a la izquierda y alertas a la derecha, cada una con su scroll */
    main.lamina-contenido:has(> .pagina > .rz-card.m-3 + .rz-card.m-3) { display: grid; grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); gap: 1rem; overflow: hidden; padding-bottom: 1.25rem; }
    main.lamina-contenido > .pagina > .rz-card.m-3 { margin: 0 !important; min-height: 0; max-height: 100%; overflow: auto; }
}

/* Presentación de servicio no contratado, más compacta para que quepa */
main.lamina-contenido:has(.section-container) { padding-bottom: 1rem; }
main.lamina-contenido:has(.section-container) .pie-soporte { margin-top: .75rem; }
.lamina-contenido .section-container-col1 { gap: .75rem; }

/* Una sola línea de filtros: los campos encogen y los botones se quedan a la derecha */
@media (min-width: 1024px) {
    .lamina-contenido .filters-container.row { display: flex; flex-wrap: nowrap; align-items: center; gap: .75rem; }
    .lamina-contenido .f-input-container { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: .5rem; flex-direction: row !important; align-items: center !important; }
    .lamina-contenido .f-input-container > .rz-dropdown, .lamina-contenido .f-input-container > .rz-textbox { flex: 1 1 11rem; min-width: 5.5rem; width: auto !important; margin-left: 0 !important; }
    .lamina-contenido .f-input-container > .rz-text-align-center { flex: none; margin-left: 0 !important; }
    .lamina-contenido .f-input-container > label, .lamina-contenido .f-input-container > .rz-label { flex: none; white-space: nowrap; }
    .lamina-contenido .buttons-container { flex: none; align-items: center !important; gap: .5rem !important; }
}
.lamina-contenido .f-input-container > .rz-dropdown:first-child { flex: 1.6 1 15rem; min-width: 10.5rem; }
.lamina-contenido .f-input-container .rz-dropdown-chips-wrapper { flex-wrap: nowrap; overflow: hidden; }
.lamina-contenido .f-input-container .rz-chip { min-width: 0; }
.lamina-contenido .f-input-container .rz-chip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxbl-grid-table tbody > tr:has(> .dxbl-grid-empty-data-area):hover { background: transparent; }

/* Geográfico: tabla y mapa nunca más anchos que la lámina (en móvil traían 437–580 px fijos) */
.lamina-contenido #geografico-container > div { min-width: 0 !important; max-width: 100%; }
.lamina-contenido #geografico-container > div:last-child { overflow: hidden; position: relative; }

/* Filtros en móvil y tablet: uno debajo de otro, a lo ancho y con su alto natural */
@media (max-width: 1023px) {
    .lamina-contenido .f-input-container { width: 100%; }
    .lamina-contenido .f-input-container > .rz-dropdown, .lamina-contenido .f-input-container > .rz-textbox { flex: none !important; width: 100% !important; max-width: 100%; margin-left: 0 !important; }
    .lamina-contenido .f-input-container > .rz-text-align-center { margin-left: 0 !important; }
}

/* La fila de filtros alineada con el contenido (traía margen de 1rem) */
.lamina-contenido .m-3:has(> form .filters-container) { margin: 0 0 1rem !important; }

/* ---------------------------------------------------------------- Requerimientos y recursos (tarea 1914)
   Trae su propio armazón (.rr-app) medido para la cabecera antigua: aquí ocupa la lámina entera,
   sin segunda hoja dentro de la hoja, y su barra de secciones queda como navegación secundaria. */
main.lamina-contenido:has(.rr-app) { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.lamina-contenido .rr-app { flex: 1 1 auto; min-height: 0; height: auto; border-radius: 0; background: var(--fondo-alt); }
.lamina-contenido .rr .rail { width: auto; height: auto; padding: .75rem 0; background: var(--fondo-deep); border-right: 1px solid var(--linea); }
.lamina-contenido .rr .lamina { margin: 0; border-radius: 0; box-shadow: none; }

/* ---------------------------------------------------------------- Grid de 60dias.BlazorComponents (Theme="vars")
   Las rejillas son el Grid del nuget con Theme="vars" y CssClass="svc-grid", como en el CRM y el gestor de tareas.
   Sus colores salen de estas variables y estas, de los tokens de sistema.css. */
:root {
    --grid-surface: var(--fondo-alt);
    --grid-surface-alt: var(--fondo-alt);
    --grid-surface-muted: var(--fondo-deep);
    --grid-header-bg: var(--fondo-deep);
    --grid-header-text: var(--texto-suave);
    --grid-header-weight: 500;
    --grid-header-transform: none;
    --grid-header-font-size: .75rem;
    --grid-header-py: .6rem;
    --grid-cell-px: .625rem;
    --grid-cell-py: .4375rem;
    --grid-font-size: .8125rem;
    --grid-text: var(--texto);
    --grid-foggy: var(--texto-suave);
    --grid-border: var(--linea);
    --grid-border-strong: var(--linea-fuerte);
    --grid-row-border: color-mix(in srgb, var(--linea) 60%, transparent);
    --grid-row-hover: var(--fondo-deep);
    --grid-row-selected: var(--acento-suave);
    --grid-primary: var(--acento);
    --grid-primary-soft: var(--acento-suave);
    --grid-primary-border: color-mix(in srgb, var(--acento) 35%, transparent);
    --grid-primary-strong: var(--texto);
    --grid-primary-text: #FFFFFF;
    --grid-midnight: var(--texto);
    --grid-input-bg: var(--campo-fondo);
    --grid-focus: var(--foco);
    --grid-danger: var(--rojo);
    --grid-radius: var(--r-l);
    --grid-shadow: none;
    --grid-shadow-pop: var(--sombra-flotante);
}
.svc-grid.grid-theme-vars { font-family: var(--fuente); }
.svc-grid .grid-toolbar { padding: .5rem .75rem; }
.svc-grid .grid-toolbar-btn { border-radius: 999px; font-size: .75rem; padding: .3rem .7rem; }
.svc-grid .grid-filter-panel, .svc-grid .grid-group-panel { border-radius: 999px; }
.svc-grid .grid-filter-panel-label, .svc-grid .grid-group-panel-label { border-radius: 999px 0 0 999px; }
.svc-grid .filter-chip { border-radius: 999px; }
.svc-grid .grid-dropdown { border-radius: var(--r-m); box-shadow: var(--sombra-flotante); border-color: transparent; }
.svc-grid .grid-dropdown-item { border-radius: var(--r-s); }
.svc-grid td, .svc-grid th { font-variant-numeric: tabular-nums; }
.svc-grid .mono { font-family: var(--fuente-mono); font-size: .75rem; }
/* Rejilla dentro de un panel del cuadro de mando: sin marco propio */
.svc-grid-panel.grid-theme-vars.shadow-md { border: 0; border-radius: 0; box-shadow: none; }

/* Pantalla de rejilla: filtros arriba y el Grid con el resto del alto; el scroll va dentro del Grid */
.pantalla-rejilla { display: flex; flex-direction: column; gap: .75rem; min-height: 0; }
.pantalla-rejilla .m-3:has(> form .filters-container) { margin: 0 !important; }
@media (min-width: 1024px) {
    main.lamina-contenido:has(.pantalla-rejilla) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 1.25rem; }
    main.lamina-contenido .pantalla-rejilla { flex: 1 1 auto; height: 100%; }
}
/* Botones de icono dentro de una fila: no la hacen más alta que una línea de texto */
.svc-grid tbody td .btn-icono { width: 1.75rem; height: 1.75rem; margin-block: -.3rem; }
.svc-grid tbody td .btn-icono svg { width: 1rem; height: 1rem; }
@media (max-width: 1023px) {
    /* En móvil la página sí baja, pero la rejilla conserva su scroll y no se estira con todas sus filas */
    .pantalla-rejilla .svc-grid:not(.svc-grid-panel) { flex: none !important; height: 75dvh !important; }
}

/* Avisos y confirmaciones (NotificationDialog) */
.aviso-velo { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(6, 26, 30, .42); backdrop-filter: blur(3px); }
.aviso-caja { width: 100%; max-width: 24rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1.75rem 1.5rem 1.5rem; border-radius: 22px; background: var(--fondo-alt); box-shadow: var(--sombra-alta); text-align: center; animation: dialogo-entra var(--t-lento) var(--curva); }
.aviso-icono { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; }
.aviso-icono .icono { width: 1.5rem; height: 1.5rem; }
.aviso-success { background: var(--verde-fondo); color: var(--verde-texto); }
.aviso-warning { background: var(--ambar-fondo); color: var(--ambar-texto); }
.aviso-error { background: var(--rojo-fondo); color: var(--rojo-texto); }
.aviso-confirm { background: var(--acento-suave); color: var(--acento); }
.aviso-texto { margin: 0; color: var(--texto); font-size: .875rem; line-height: 1.5; }
.aviso-acciones { display: flex; gap: .5rem; justify-content: center; margin-top: .25rem; }