:root {
    --brand-orange: #f5921e;
    --brand-orange-dark: #d97d0a;
    --brand-blue: #1877f2;
    --brand-blue-dark: #0d5bc4;
    --brand-navy: #0b2447;
    /* Fondo del "shell" (barra lateral, encabezado y login): degradado navy -> azul
       profundo y apagado. Deliberadamente NO usa --brand-blue-dark (ese azul brillante
       queda solo para botones), para que el menú no se vea saturado. */
    --brand-shell-top: #0b2447;
    --brand-shell-bottom: #143257;
}

/* ---------- Tipografía estilo Velonic (punto medio) ----------
   Escala del template Velonic pero con raíz 15px como término medio: conserva el
   look amplio de Velonic (que usa 16px) y recupera algo de densidad frente a la
   comprimida de antes (13px). El resto de tamaños son rem, así que escalan solos.
   Peso 600 en encabezados como en el template. */
html {
    font-size: 15px;
}

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Escala de títulos contenida: es una app de gestión con mucha tabla y formulario, así
   que el encabezado de sección solo necesita destacar lo justo sobre el texto (0.875rem).
   Antes el h1 era 1.875rem y dominaba la pantalla. */
h1 { font-size: 1.25rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.9375rem; }
h6 { font-size: 0.875rem; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }

.content {
    padding-top: 0.75rem;
}

/* En pantallas chicas el padding lateral de Bootstrap (px-4) se come el ancho útil. */
@media (max-width: 640.98px) {
    .content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    h1 { font-size: 1.125rem; }
    h2 { font-size: 1.05rem; }
    h3 { font-size: 1rem; }
}

.card-body {
    padding: 0.75rem;
}

/* Filas de tabla más apretadas: es donde se gana la mayor parte del espacio. */
.table > :not(caption) > * > * {
    padding: 0.35rem 0.5rem;
}

.table-sm > :not(caption) > * > * {
    padding: 0.2rem 0.4rem;
}

/* Dígitos de ancho fijo: sin esto los montos de una columna no alinean entre sí
   (el "1" es más angosto que el "8") y las cifras bailan al comparar renglones. */
table,
.card .fs-5 {
    font-variant-numeric: tabular-nums;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--brand-blue);
}

.btn-primary {
    color: #fff;
    background-color: var(--brand-blue);
    border-color: var(--brand-blue-dark);
}

    .btn-primary:hover, .btn-primary:active {
        background-color: var(--brand-blue-dark) !important;
        border-color: var(--brand-blue-dark) !important;
    }

.btn-success {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange-dark);
}

    .btn-success:hover, .btn-success:active {
        background-color: var(--brand-orange-dark) !important;
        border-color: var(--brand-orange-dark) !important;
    }

.btn-outline-success {
    color: var(--brand-orange-dark);
    border-color: var(--brand-orange);
}

    .btn-outline-success:hover, .btn-outline-success:active {
        background-color: var(--brand-orange) !important;
        border-color: var(--brand-orange) !important;
        color: #fff !important;
    }

.btn-outline-primary {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}

    .btn-outline-primary:hover, .btn-outline-primary:active {
        background-color: var(--brand-blue) !important;
        border-color: var(--brand-blue) !important;
        color: #fff !important;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-blue);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--brand-blue);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

@media print {
    /* Fuente más compacta para los reportes: todo el documento usa rem, así que bajar el
       tamaño base lo encoge uniformemente (títulos, tablas y notas). */
    html {
        font-size: 12px;
    }

    /* Nada de la app (barra lateral, barra superior, botones): solo el documento. */
    .sidebar, .app-topbar, .no-print {
        display: none !important;
    }

    main, .content, .main-col, .page {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        background: #fff !important;
        box-shadow: none !important;
        border: none !important;   /* .main-col tiene border-right (divisor del sidebar): fuera en papel */
    }

    /* El contenedor de cada documento no debe verse como una caja/div: solo el contenido.
       Sus tablas internas conservan sus propios bordes (el formato de la forma). */
    .req-doc, .oc-doc, .grp-doc {
        border: none !important;
        box-shadow: none !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Los colores de marca (naranja/navy) se imprimen tal cual, no en gris. */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* --- Documentos de varias hojas ---
       Una lista larga se parte en varias páginas, y sin esto la segunda hoja llega sin
       encabezado: columnas sin título y ninguna referencia del folio. */

    /* thead en <thead> se repite solo en cada página; hay que pedirlo explícitamente porque
       algunos navegadores no lo hacen si la tabla tiene position/overflow heredados. */
    .req-doc thead, .oc-doc thead, .grp-doc thead {
        display: table-header-group;
    }
    .req-doc tfoot, .oc-doc tfoot, .grp-doc tfoot {
        display: table-footer-group;
    }

    /* Un renglón no debe quedar cortado a la mitad entre dos hojas. */
    .req-doc tr, .oc-doc tr, .grp-doc tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Los bloques de cierre (observaciones, firmas, pie) no deben quedar solos en una hoja
       separados de la tabla que los sustenta. */
    .req-doc .req-box, .oc-doc .oc-box,
    .req-doc .req-copias, .oc-doc .oc-copias {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Folio y fecha en el pie de CADA hoja: en la segunda página el encabezado ya no está, y
       un documento suelto sin folio no se puede amarrar a nada. */
    .doc-folio-pie {
        display: block !important;
        position: fixed;
        /* Negativo: lo empuja al margen inferior extra del @page, fuera del flujo del texto. */
        bottom: -12mm;
        left: 0;
        right: 0;
        font-size: .62rem;
        color: #555;
        text-align: center;
        border-top: 1px solid #bbb;
        padding-top: 2px;
    }
}

/* En pantalla el pie de folio no se ve: es solo para el papel. */
.doc-folio-pie {
    display: none;
}

/* Todos los reportes imprimibles salen en tamaño CARTA con márgenes cómodos.
   El margen inferior es más ancho que los otros a propósito: ahí vive el pie con el folio
   que se repite en cada hoja (.doc-folio-pie), fuera del área donde fluye el contenido, para
   que no se encime con el último renglón de la página. */
@page {
    size: letter;
    margin: 12mm 12mm 20mm 12mm;
}

/* ---------- Pestañas (nav-tabs) ----------
   Las nav-tabs por defecto de Bootstrap se pierden sobre el fondo blanco. Este estilo les da
   una barra base marcada, la pestaña activa con subrayado naranja de marca y texto navy en
   negrita, y las inactivas atenuadas con hover. Aplica a todas las pantallas con pestañas. */
.nav-tabs {
    border-bottom: 2px solid #e3ddce;
    gap: .15rem;
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: .4rem .4rem 0 0;
    color: #5c6673;
    font-weight: 600;
    padding: .5rem 1rem;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

.nav-tabs .nav-link:hover:not(.active),
.nav-tabs .nav-link:focus:not(.active) {
    color: var(--brand-navy);
    background-color: #f4f1ea;
    border-bottom-color: #d8cfbc;
}

.nav-tabs .nav-link.active {
    color: var(--brand-navy);
    background-color: #fff;
    border-bottom-color: var(--brand-orange);
    box-shadow: inset 0 -1px 0 var(--brand-orange);
}

.nav-tabs .nav-link.active .badge {
    background-color: var(--brand-orange) !important;
    color: #fff !important;
}

/* ============================================================================
   Tema estilo "Velonic": shell (topbar + sidebar claro/oscuro) y superficies.
   Conserva la marca (navy + naranja). El tema del sidebar se controla con el
   atributo html[data-sidebar="light|dark"]; las variables --sb-* alimentan tanto
   a MainLayout como a NavMenu (CSS con ámbito), que solo leen var(--sb-*).
   ============================================================================ */
:root {
    /* Superficies y tarjetas */
    --vz-body-bg: #f5f6fa;
    --vz-surface: #ffffff;
    --vz-border: #e9ebf1;
    --vz-border-soft: #f0f2f6;
    --vz-card-radius: 0.5rem;
    --vz-card-shadow: 0 1px 2px rgba(11, 36, 71, 0.06), 0 1px 3px rgba(11, 36, 71, 0.04);
    --vz-heading: #0b2447;
    --vz-muted: #8a919e;

    /* Topbar */
    --tb-bg: #ffffff;
    --tb-border: #e9ebf1;
    --tb-text: #5d6673;
    --tb-height: 3.25rem;

    /* Sidebar — tema OSCURO (por defecto) */
    --sb-bg: #0b2447;
    --sb-text: rgba(255, 255, 255, 0.75);
    --sb-text-hover: #ffffff;
    --sb-icon: rgba(255, 255, 255, 0.65);
    --sb-active-text: #ffffff;
    --sb-active-bg: rgba(255, 255, 255, 0.10);
    --sb-hover-bg: rgba(255, 255, 255, 0.06);
    --sb-section: rgba(255, 255, 255, 0.40);
    --sb-brand-text: #ffffff;
    --sb-border: rgba(255, 255, 255, 0.08);
}

/* Sidebar — tema CLARO (la firma de Velonic) */
html[data-sidebar="light"] {
    --sb-bg: #ffffff;
    --sb-text: #5d6673;
    --sb-text-hover: var(--brand-navy);
    --sb-icon: #8a919e;
    --sb-active-text: var(--brand-navy);
    --sb-active-bg: rgba(245, 146, 30, 0.12);
    --sb-hover-bg: #f4f6fa;
    --sb-section: #aab0bc;
    --sb-brand-text: var(--brand-navy);
    --sb-border: #eceef3;
}

/* Fondo general suave: las tarjetas blancas resaltan sobre él. */
body {
    background-color: var(--vz-body-bg);
}

/* Tarjetas suaves: sin borde, esquinas redondeadas y sombra sutil. */
.card {
    border: 0;
    border-radius: var(--vz-card-radius);
    box-shadow: var(--vz-card-shadow);
    background-color: var(--vz-surface);
}

.card > .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--vz-border);
    font-weight: 600;
    color: var(--vz-heading);
}

/* Tablas: encabezado sobrio en mayúsculas, filas con hover, bordes tenues. */
.table {
    --bs-table-hover-bg: #f4f6fa;
}

.table > thead th {
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 0.72rem;
    color: var(--vz-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--vz-border);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--vz-border-soft);
}

/* Badges tipo píldora. */
.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: 0.32em 0.62em;
}

/* Controles un poco más suaves.
   El tamaño es el compacto de Bootstrap (el mismo de .btn-sm, que es el que usa
   "Gestión de obras"): se define una sola vez aquí sobre .btn en lugar de repetir
   btn-sm en los ~150 botones del proyecto. Bootstrap 5.3 dimensiona por variables,
   así que basta redefinirlas; .btn-sm sigue dando exactamente lo mismo y no hay
   ningún .btn-lg en la app que se vería afectado. */
.btn {
    border-radius: 0.375rem;
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.75rem;
}

.form-control, .form-select {
    border-radius: 0.375rem;
}

/* Un solo tamaño de texto en toda la interfaz: los controles heredan el del cuerpo
   (0.75rem) en lugar del 1rem que trae Bootstrap, para que formularios, tablas,
   botones y etiquetas se lean como una sola pieza. */
.form-control,
.form-select,
.form-label,
.form-check-label,
.input-group-text,
.form-text {
    font-size: 0.75rem;
}

h1 {
    color: var(--vz-heading);
}

/* Tablas sueltas (fuera de una tarjeta) se ven como tarjeta: fondo blanco, esquinas
   redondeadas y sombra sutil. Dentro de una .card o un modal se anula para no duplicar.

   Además el scroll vive DENTRO de la tabla, no en toda la página: se acota el alto y el
   encabezado queda fijo arriba mientras se recorren los renglones. Solo aplica a estas
   tablas sueltas (las listas a página completa); las de dentro de una .card o un modal
   se resetean abajo, y en impresión se libera el alto. Sin top-padding para que el
   encabezado pegajoso quede a ras y ningún renglón se asome por encima de él. */
.table-responsive {
    background: var(--vz-surface);
    border-radius: var(--vz-card-radius);
    box-shadow: var(--vz-card-shadow);
    padding: 0 0.75rem 0.4rem;
    max-height: 70vh;
    overflow: auto;
}

.table-responsive > .table {
    margin-bottom: 0.25rem;
}

/* Encabezado fijo. Solo "se pega" cuando el contenedor realmente hace scroll (tabla larga);
   en las cortas no hay overflow y la regla es inofensiva. El fondo opaco evita que los
   renglones se transparenten detrás, y el box-shadow redibuja el borde inferior que el
   scroll se llevaría. */
.table-responsive > .table > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--vz-surface);
    box-shadow: inset 0 -1px 0 var(--vz-border);
}

.card .table-responsive,
.modal .table-responsive {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    /* Anidadas: sin techo de alto ni scroll propio; la tarjeta o el modal ya lo manejan. */
    max-height: none;
    overflow: visible;
}

/* En papel el alto acotado cortaría la lista a una hoja: se libera para imprimir completa. */
@media print {
    .table-responsive {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Modales estilo Velonic: sin borde, esquinas suaves y sombra difusa. */
.modal-content {
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(11, 36, 71, 0.18);
}

.modal-header {
    border-bottom: 1px solid var(--vz-border);
}

.modal-title {
    color: var(--vz-heading);
    font-weight: 600;
}

/* Barras de desplazamiento delgadas (firma visual de Velonic). */
* {
    scrollbar-width: thin;
    scrollbar-color: #c7ccd6 transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #c7ccd6;
    border-radius: 8px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #aeb4c0;
    }

::-webkit-scrollbar-track {
    background: transparent;
}

/* Botón de acción con icono en tablas densas: cuadrado y siempre del mismo ancho, para que la
   columna de acciones no baile de renglón a renglón y la fila no crezca. El texto de la acción
   va en title/aria-label, no visible.

   Estaba definido dos veces en este archivo y la segunda copia le ponía 1.9rem de ancho contra
   1.75rem de alto: el botón dejaba de ser cuadrado, que es justo lo que ambas pedían. */
.btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    line-height: 1;
    text-align: center;
}

/* Menú desplegable simple (sin JS de Bootstrap): un botón que alterna un panel de
   opciones, con un fondo invisible que lo cierra al tocar fuera. Reutilizable en
   cualquier página que necesite agrupar varias acciones bajo un solo botón. */
.action-dropdown {
    position: relative;
    display: inline-block;
}

.action-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
}

.action-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.3rem);
    min-width: 13rem;
    background: var(--vz-surface);
    border-radius: var(--vz-card-radius);
    box-shadow: 0 10px 40px rgba(11, 36, 71, 0.18);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    z-index: 1036;
}

/* Variante para disparadores del lado izquierdo (p. ej. Configuración en la topbar):
   el panel cuelga hacia la derecha en vez de alinearse al borde derecho. */
.action-dropdown-menu-start {
    right: auto;
    left: 0;
}

.action-dropdown-item {
    display: block;
    border: 0;
    background: transparent;
    text-align: left;
    text-decoration: none;
    padding: 0.5rem 0.6rem;
    border-radius: 0.35rem;
    font-size: 0.85rem;
    color: var(--vz-heading);
    cursor: pointer;
    width: 100%;
}

.action-dropdown-item:hover {
    background-color: #f4f6fa;
}

.action-dropdown-item:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ============================================================================
   Sistema visual compartido (rediseño 2026-09). Clases reutilizables para dar
   una imagen consistente a todas las pantallas: tiles de métrica, puntos y
   chips de estado, toggle segmentado, banda de grupo y barras/fila de
   agrupación. No pisan estilos existentes; se aplican donde se usen.
   ============================================================================ */

/* Tile de métrica: etiqueta chica arriba, número grande abajo. */
.tile { background: var(--vz-surface); border-radius: var(--vz-card-radius); box-shadow: var(--vz-card-shadow); padding: .75rem 1rem; }
.tile .tile-lbl { font-size: .72rem; color: var(--vz-muted); }
.tile .tile-val { font-size: 1.5rem; font-weight: 600; color: var(--vz-heading); letter-spacing: -.01em; line-height: 1.15; }
.tile .tile-val small { font-size: .72rem; color: var(--vz-muted); font-weight: 500; }
.tile.tile-alerta { background: #fbe9e9; }
.tile.tile-alerta .tile-lbl, .tile.tile-alerta .tile-val { color: #a32d2d; }

/* ---------- Pantalla de lista: una sola barra de scroll ----------
   Antes había dos: la de la página y la de la tabla (.table-responsive trae su propio
   max-height de 70vh). Con dos barras nunca sabes cuál mover, y la de la tabla ni siquiera
   se ve hasta que llegas abajo del todo.

   Con esta clase la página no scrollea: el bloque ocupa exactamente el alto libre bajo la
   barra superior, y lo que sobra después del título y los filtros se lo queda la tabla. La
   única barra que aparece es la suya, con el encabezado de columnas fijo arriba.

   Se pone SOLO en pantallas cuyo contenido principal es una tabla larga. En una página con
   varias secciones (gráficas, tarjetas, pestañas con contenido distinto) el alto fijo corta
   lo de abajo en vez de ayudar. */
.pantalla-lista {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--tb-height) - 1.5rem);
    min-height: 22rem;   /* en una ventana muy baja, mejor que la página scrollee */
}

/* min-height:0 es lo que permite que un hijo flex se encoja por debajo de su contenido; sin
   él la tabla crece hasta su alto natural y vuelve a empujar la página. */
.pantalla-lista > .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

/* En pantallas chicas no hay alto que repartir: vale más dejar que la página scrollee
   normalmente que encerrar la tabla en una ventanita. */
@media (max-width: 640.98px) {
    .pantalla-lista {
        height: auto;
        display: block;
    }
}

/* En papel nunca: el alto fijo cortaría la lista a una hoja. */
@media print {
    .pantalla-lista { height: auto !important; display: block !important; }
}

/* ---------- Resumen en una línea ----------
   La alternativa compacta a una fila de .tile cuando lo que importa de la pantalla es la
   tabla. Tres tarjetas se comen un tercio del alto útil para mostrar tres cifras. */
.resumen-linea {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    background: var(--vz-surface);
    border-radius: var(--vz-card-radius);
    box-shadow: var(--vz-card-shadow);
    padding: .4rem .9rem;
    font-size: .82rem;
    color: var(--vz-muted);
}

.resumen-linea strong {
    font-size: 1.05rem;
    color: var(--vz-heading);
    margin-right: .15rem;
}

.resumen-linea .resaltado strong { color: var(--brand-orange-dark); }
.resumen-linea .alerta strong { color: #a32d2d; }
.resumen-linea .sep { width: 1px; height: 1.1rem; background: var(--vz-border); }

/* Punto de estado (verde ok · gris sin actividad · rojo alerta/sobregiro). */
.dot-estado { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.dot-ok { background: #1d9e75; } .dot-idle { background: #c7ccd6; } .dot-bad { background: #e24b4a; }

/* Chip neutro ("sin ejercer", "sin reportar"). */
.chip-suave { font-size: .68rem; color: #8a919e; background: var(--vz-body-bg); border: 1px solid var(--vz-border); padding: .1rem .55rem; border-radius: 20px; white-space: nowrap; }

/* Toggle segmentado (p. ej. Por obra / Por grupo). */
.seg-toggle { display: inline-flex; background: var(--vz-surface); border: 1px solid var(--vz-border); border-radius: 9px; padding: 3px; box-shadow: var(--vz-card-shadow); }
.seg-toggle button { border: none; background: none; font: inherit; font-size: .75rem; color: var(--vz-muted); padding: .35rem .8rem; border-radius: 7px; cursor: pointer; }
.seg-toggle button.active { background: var(--brand-navy); color: #fff; font-weight: 500; }
/* Versión chica, para cuando va en la línea del contador de una lista (Requisiciones). */
.seg-toggle-sm { padding: 2px; box-shadow: none; }
.seg-toggle-sm button { font-size: .7rem; padding: .15rem .6rem; }

/* Banda de encabezado de un grupo. */
.grupo-band { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; background: var(--vz-body-bg); border: 1px solid var(--vz-border); border-radius: 10px; padding: .55rem .9rem; margin-bottom: .75rem; }
.grupo-band .gname { font-weight: 600; color: var(--vz-heading); }
.grupo-band .gname .dotp { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand-orange); margin-right: .5rem; vertical-align: 1px; }

/* Barra apilada de distribución (cartera por grupo). */
.stack-bar { display: flex; height: 34px; border-radius: 8px; overflow: hidden; gap: 2px; }
.stack-bar .seg { display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 500; min-width: 0; padding: 0 4px; color: var(--brand-blue-dark); background: #dbe6f7; overflow: hidden; white-space: nowrap; }
.stack-bar .seg.gasto { background: #e24b4a; color: #fff; }

/* Fila de grupo (roll-up) e hija dentro de una tabla agrupada. */
tr.fila-grupo > td { background: var(--vz-body-bg); border-bottom: 1px solid #d6d9e3; font-weight: 600; cursor: pointer; }
tr.fila-grupo.alerta > td { background: #fbe9e9; }
tr.fila-hija.alerta > td { background: #fbe9e9; }
.chev { display: inline-block; width: .8rem; color: var(--vz-muted); font-size: .65rem; }

/* ---------- Ficha en modo consulta (FichaEditable) ----------
   Un formulario bloqueado no debe verse "roto": en consulta los campos se leen como datos
   (etiqueta + valor con una línea sutil), no como controles grises apagados. El deshabilitado
   real lo hace <fieldset disabled>; esto es solo la apariencia. */
.ficha-bloqueada .form-control:disabled,
.ficha-bloqueada .form-select:disabled,
.ficha-bloqueada .input-group > .form-control:disabled {
    background-color: transparent;
    color: var(--vz-body-color);
    opacity: 1;
    border-color: transparent;
    border-bottom: 1px solid var(--vz-border);
    border-radius: 0;
    padding-left: 0;
    box-shadow: none;
    cursor: default;
}

/* La flecha del select sobra si no se puede desplegar. */
.ficha-bloqueada .form-select:disabled { background-image: none; }

.ficha-bloqueada .input-group-text { background: transparent; border-color: transparent; padding-left: 0; }
.ficha-bloqueada .form-label { color: var(--vz-muted); font-size: .78rem; margin-bottom: .1rem; }
.ficha-bloqueada .form-check-input:disabled { opacity: .7; }
.ficha-bloqueada .form-check-label { opacity: 1; }

/* Los textos de ayuda son instrucciones para capturar: en consulta estorban. */
.ficha-bloqueada .form-text { display: none; }

.ficha-acciones { margin-top: 1rem; }

/* Botón de acción con icono en tablas densas: cuadrado y del mismo ancho, para que la columna
   de acciones no baile de renglón a renglón. */
.btn-icono { width: 1.9rem; padding-left: 0; padding-right: 0; line-height: 1.2; text-align: center; }

/* ---------- Menú lateral de Configuración (ConfigLayout) ---------- */
.config-menu { display: flex; flex-direction: column; background: var(--vz-surface); border: 1px solid var(--vz-border); border-radius: var(--vz-card-radius); box-shadow: var(--vz-card-shadow); padding: .4rem; position: sticky; top: calc(var(--tb-height) + .75rem); }

/* Encabezado del grupo: marca el corte entre temas distintos sin pesar como un renglón más. */
.config-grupo { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vz-muted); font-weight: 600; padding: .7rem .6rem .25rem; }
.config-grupo:first-child { padding-top: .3rem; }

.config-item { display: block; padding: .4rem .6rem; border-radius: 7px; color: var(--vz-body-color); text-decoration: none; font-size: .85rem; border-left: 2px solid transparent; transition: background-color .12s ease, color .12s ease; }
.config-item:hover { background: var(--vz-body-bg); color: var(--brand-navy); text-decoration: none; }
.config-item.active { background: var(--vz-body-bg); color: var(--brand-navy); font-weight: 600; border-left-color: var(--brand-orange); }

/* Cuántos catálogos trae el grupo. Discreto: informa del tamaño sin competir con el nombre,
   que es lo que se busca al recorrer la columna. */
.config-conteo {
    float: right;
    font-size: .7rem;
    color: var(--vz-muted);
    background: var(--vz-body-bg);
    border-radius: 10px;
    padding: 0 .4rem;
    line-height: 1.35;
    margin-left: .4rem;
}

.config-item.active .config-conteo { color: var(--brand-navy); }

/* En fila (pantalla angosta) el float descoloca: ahí va pegado al texto. */
@media (max-width: 991.98px) {
    .config-conteo { float: none; }
}

/* En pantalla angosta la columna va arriba y en fila, no como una torre que empuja el contenido. */
@media (max-width: 991.98px) {
    .config-menu { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .15rem; }
    .config-grupo { padding: .25rem .4rem; width: 100%; }
}

/* ---------- Hallazgos de supervisión: historia del seguimiento ---------- */
/* Una línea vertical con un punto por paso; el color del punto dice qué pasó. */
.hallazgo-historia { border-left: 2px solid var(--vz-border); margin-left: .35rem; padding-left: .85rem; }
.hallazgo-paso { position: relative; padding: .2rem 0 .45rem; }
.hallazgo-paso::before { content: ""; position: absolute; left: calc(-.85rem - 6px); top: .45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--vz-muted); border: 2px solid var(--vz-surface); }
.hallazgo-paso-correccion::before { background: #3b82f6; }
.hallazgo-paso-cierre::before { background: #1d9e75; }
.hallazgo-paso-reapertura::before { background: #e24b4a; }