/* /Components/BarraFiltros.razor.rz.scp.css */
.controles[b-openc2ysw9] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.control-texto[b-openc2ysw9] {
    flex: 2 1 13rem;
    min-width: 10rem;
}

.control-lista[b-openc2ysw9] {
    flex: 1 1 9rem;
    min-width: 8rem;
    max-width: 16rem;
}

.control-rango[b-openc2ysw9] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 1 1 18rem;
    max-width: 20rem;
}

.activos[b-openc2ysw9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .45rem;
}

.chip-filtro[b-openc2ysw9] {
    border: 1px solid var(--bs-primary-border-subtle, #b6d4fe);
    background: var(--bs-primary-bg-subtle, #e7f1ff);
    color: var(--bs-primary-text-emphasis, #052c65);
    border-radius: 1rem;
    padding: .05rem .6rem;
    font-size: .78rem;
    line-height: 1.5;
}

.chip-filtro:hover[b-openc2ysw9] {
    border-color: var(--bs-primary, #0d6efd);
}

.chip-filtro span[b-openc2ysw9] {
    margin-left: .25rem;
    opacity: .7;
}

.resumen[b-openc2ysw9] {
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .control-lista[b-openc2ysw9], .control-rango[b-openc2ysw9] {
        max-width: none;
    }
}

/* El contador al final de la fila de filtros, pegado a la derecha (cuando no hay etiquetas). */
.resumen-en-fila[b-openc2ysw9] {
    margin-left: auto;
    padding-left: .25rem;
}
/* /Components/ColumnaOrdenable.razor.rz.scp.css */
.th-ordenable[b-5ds0ahl95u] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.th-ordenable:hover[b-5ds0ahl95u] {
    background-color: rgba(0, 0, 0, 0.04);
}

.orden-flecha[b-5ds0ahl95u] {
    margin-left: 0.3rem;
    font-size: 0.7em;
    opacity: 0.25;
}

.orden-flecha.activa[b-5ds0ahl95u] {
    opacity: 1;
    color: var(--brand-blue);
}
/* /Components/GaleriaFotos.razor.rz.scp.css */
.galeria-grid[b-9e2oz52oad] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.galeria-item[b-9e2oz52oad] {
    padding: 0;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    background: #eee;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.galeria-item:hover[b-9e2oz52oad] {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.galeria-item img[b-9e2oz52oad] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.galeria-placeholder[b-9e2oz52oad] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.galeria-visor[b-9e2oz52oad] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
}

.galeria-visor-barra[b-9e2oz52oad] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    color: #fff;
}

.galeria-visor-titulo[b-9e2oz52oad] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.galeria-visor-contador[b-9e2oz52oad] {
    opacity: 0.7;
    margin-left: 0.75rem;
    font-size: 0.875rem;
}

.galeria-visor-cuerpo[b-9e2oz52oad] {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0 1rem 1.5rem;
}

.galeria-visor-img[b-9e2oz52oad] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.galeria-nav[b-9e2oz52oad] {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.galeria-nav:hover[b-9e2oz52oad] {
    background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 576px) {
    .galeria-grid[b-9e2oz52oad] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .galeria-visor-cuerpo[b-9e2oz52oad] {
        padding: 0 0.25rem 1rem;
        gap: 0.25rem;
    }
}
/* /Components/NavegadorPartidas.razor.rz.scp.css */
/* Ruta del recorrido: siempre visible, aunque se esté en la raíz. Si apareciera solo al
   entrar, el salto movería de lugar la tabla de abajo. */
.ruta-capitulos[b-bbaaaco951] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem;
    padding: .1rem .25rem .35rem;
    font-size: .75rem;
}

.ruta-capitulos .miga[b-bbaaaco951] {
    background: none;
    border: none;
    padding: .1rem .3rem;
    border-radius: .2rem;
    color: var(--brand-navy);
    text-decoration: underline;
}

.ruta-capitulos .miga:hover:not(:disabled)[b-bbaaaco951] {
    background: #f0efe9;
}

/* El nivel en el que estás no es un enlace: va apagado y sin subrayado. */
.ruta-capitulos .miga.actual[b-bbaaaco951],
.ruta-capitulos .miga:disabled[b-bbaaaco951] {
    color: #6c757d;
    text-decoration: none;
    cursor: default;
}

.ruta-capitulos .separador[b-bbaaaco951] {
    color: #adb5bd;
}

.fila-capitulo[b-bbaaaco951] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    text-align: left;
    padding: .35rem .5rem;
}

/* La flecha marca que ese renglón lleva a algún lado. Los que no tienen subcapítulos no la
   traen y tampoco reaccionan al cursor: entrar mostraría lo mismo. */
.fila-capitulo .entrar[b-bbaaaco951] {
    color: var(--brand-orange);
    font-weight: 700;
}

.fila-capitulo.sin-entrada[b-bbaaaco951] {
    background: transparent;
}

.propios-capitulo[b-bbaaaco951] {
    border-top: 1px dashed #d8d5cc;
    margin-top: .25rem;
}
/* /Components/SectionMenu.razor.rz.scp.css */
/* En escritorio/tablet las secciones viven en la topbar; aquí no se muestra nada. */
.section-menu-inline[b-qmoaj9ify9] {
    display: none;
}

/* En móvil la topbar está oculta, así que se muestran en línea como una tira
   horizontal desplazable de botones. */
@media (max-width: 640.98px) {
    .section-menu-inline[b-qmoaj9ify9] {
        display: flex;
        gap: 0.25rem;
        overflow-x: auto;
        margin-bottom: 0.75rem;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }

        .section-menu-inline[b-qmoaj9ify9]::-webkit-scrollbar {
            display: none;
        }

    .section-menu-btn[b-qmoaj9ify9] {
        border: 1px solid var(--vz-border);
        background: #fff;
        color: var(--tb-text);
        font-size: 0.82rem;
        font-weight: 500;
        white-space: nowrap;
        padding: 0.3rem 0.7rem;
        border-radius: 999px;
        cursor: pointer;
    }

        .section-menu-btn.active[b-qmoaj9ify9] {
            background: var(--brand-navy);
            border-color: var(--brand-navy);
            color: #fff;
        }
}
/* /Components/SelectorBuscable.razor.rz.scp.css */
.selector-buscable[b-c9odtj4cfr] {
    position: relative;
}

/* Hueco a la derecha para la flecha y la equis, que van encima del cuadro. */
.selector-buscable > input[b-c9odtj4cfr] {
    padding-right: 3rem;
    text-overflow: ellipsis;
}

.selector-buscable.deshabilitado > input[b-c9odtj4cfr] {
    padding-right: 0.75rem;
}

.flecha[b-c9odtj4cfr] {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vz-muted);
    font-size: 0.7rem;
    pointer-events: none;
}

.limpiar[b-c9odtj4cfr] {
    position: absolute;
    right: 1.7rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--vz-muted);
    line-height: 1;
    font-size: 1.05rem;
    padding: 0 0.2rem;
}

.limpiar:hover[b-c9odtj4cfr] {
    color: #b02a37;
}

.lista[b-c9odtj4cfr] {
    position: absolute;
    z-index: 1090;              /* por encima del modal de Bootstrap, que llega a 1055 */
    top: calc(100% + 2px);
    left: 0;
    min-width: 100%;
    max-width: min(34rem, 92vw);
    max-height: 17rem;          /* ~8 renglones; lo demás se recorre con rueda o flechas */
    overflow-y: auto;
    background: var(--vz-surface);
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-card-radius);
    box-shadow: 0 6px 20px rgba(11, 36, 71, 0.14);
    padding: 0.25rem 0;
}

/* La coloca el JS a partir del cuadro; aquí solo se le quita el anclaje al contenedor. */
/* Fijada al viewport, el "min-width: 100%" de arriba dejaría de medir el input y pasaría a
   medir la VENTANA: en CSS min-width le gana a max-width, así que la lista se estiraba a lo
   ancho de la pantalla. Con ese ancho, el cálculo de la posición la mandaba al borde izquierdo
   —aparecía sobre el menú— y solo se acomodaba al escribir, cuando el JS ya le había puesto
   un min-width en píxeles. El ancho real lo fija colocar() a partir del input. */
.lista.flotante[b-c9odtj4cfr] {
    position: fixed;
    top: auto;
    left: auto;
    min-width: 0;
}

.opcion[b-c9odtj4cfr] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.3;
}

.opcion .texto[b-c9odtj4cfr] {
    flex: 1 1 auto;
    min-width: 0;
}

.opcion .nota[b-c9odtj4cfr] {
    flex: 0 0 auto;
    color: var(--vz-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.opcion.vacia[b-c9odtj4cfr] {
    color: var(--vz-muted);
    font-style: italic;
    border-bottom: 1px solid var(--vz-border-soft);
    margin-bottom: 0.2rem;
    padding-bottom: 0.35rem;
}

/* La marcada es la que se lleva el Enter; la elegida es la que ya estaba puesta. Se distinguen
   a propósito: al abrir el selector hay que poder ver cuál estaba sin perder de vista dónde
   se está parado con las flechas. */
.opcion.opcion-marcada[b-c9odtj4cfr] {
    background: var(--brand-blue);
    color: #fff;
}

.opcion.opcion-marcada .nota[b-c9odtj4cfr] {
    color: rgba(255, 255, 255, 0.75);
}

.opcion.opcion-elegida[b-c9odtj4cfr] {
    font-weight: 600;
}

.opcion.opcion-elegida:not(.opcion-marcada)[b-c9odtj4cfr] {
    background: var(--vz-border-soft);
}

.sin-resultados[b-c9odtj4cfr] {
    padding: 0.5rem 0.75rem;
    color: var(--vz-muted);
    font-size: 0.85rem;
}
/* /Layout/AppTopbar.razor.rz.scp.css */
.app-topbar[b-9fhmtmif77] {
    height: var(--tb-height);
    background-color: var(--tb-bg);
    border-bottom: 1px solid var(--tb-border);
    box-shadow: 0 1px 2px rgba(11, 36, 71, 0.04);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.topbar-menu[b-9fhmtmif77] {
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    height: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

/* Cuando conviven dos tiras —el submenú del área (dónde estoy) y las pestañas de la página
   (qué estoy viendo)—, una línea las separa. Sin ella se leen como una sola fila revuelta:
   en Limpieza salían "Obras · Respaldos · Correo · Lectura con IA…" de corrido, mezclando
   las pestañas de esa pantalla con los catálogos de Configuración. */
.topbar-menu + .topbar-menu[b-9fhmtmif77] {
    border-left: 1px solid var(--tb-border);
    margin-left: .45rem;
    padding-left: .55rem;
}

    .topbar-menu[b-9fhmtmif77]::-webkit-scrollbar {
        display: none;
    }

/* Sirve para <button> (secciones que cambian de pestaña in-situ, p. ej. Reportes) y para
   <a> (catálogos de Configuración, que navegan). Se fija display/alineación y se quita el
   subrayado para que ambos se vean idénticos: el enlace, por defecto, va subrayado y con
   el texto pegado arriba en vez de centrado. */
.topbar-menu-item[b-9fhmtmif77] {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--tb-text);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0 0.7rem;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.topbar-menu-item:hover[b-9fhmtmif77] {
    text-decoration: none;
}

    .topbar-menu-item:hover[b-9fhmtmif77] {
        color: var(--brand-navy);
    }

    .topbar-menu-item.active[b-9fhmtmif77] {
        color: var(--brand-navy);
        font-weight: 600;
        border-bottom-color: var(--brand-orange);
    }

/* Catálogos de Configuración desplegados en línea. Se separan de las secciones propias
   de la página con una línea divisoria para que no se lean como una sola fila. */
.topbar-config-menu[b-9fhmtmif77] {
    border-left: 1px solid var(--tb-border);
    padding-left: 0.5rem;
    margin-left: 0.25rem;
}

/* Etiqueta de grupo dentro del submenú de Configuración (Catálogos, Acceso, Sistema…) y la
   línea que separa un grupo del siguiente, para que temas distintos no se lean como una sola
   fila revuelta. */
.topbar-group-label[b-9fhmtmif77] {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tb-text);
    opacity: 0.55;
    font-weight: 600;
    padding: 0 0.1rem 0 0.4rem;
    white-space: nowrap;
}

.topbar-group-sep[b-9fhmtmif77] {
    display: inline-block;
    align-self: center;
    width: 1px;
    height: 1.1rem;
    background: var(--tb-border);
    margin: 0 0.2rem;
    flex: none;
}

.topbar-config-menu:first-child[b-9fhmtmif77] {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
}

.topbar-spacer[b-9fhmtmif77] {
    flex: 1;
    min-width: 0;
}

.topbar-actions[b-9fhmtmif77] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.topbar-btn[b-9fhmtmif77] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    background: transparent;
    color: var(--tb-text);
    border-radius: 0.4rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.topbar-btn:hover[b-9fhmtmif77] {
    background-color: #f1f3f7;
    color: var(--brand-navy);
}

.topbar-dot[b-9fhmtmif77] {
    position: absolute;
    top: 0.15rem;
    right: 0.1rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--brand-orange);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topbar-user[b-9fhmtmif77] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.5rem 0.2rem 0.3rem;
    border: 0;
    background: transparent;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.topbar-user:hover[b-9fhmtmif77] {
    background-color: #f1f3f7;
}

.topbar-user-chevron[b-9fhmtmif77] {
    color: var(--vz-muted);
    font-size: 0.7rem;
}

.topbar-avatar[b-9fhmtmif77] {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--brand-orange);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.topbar-username[b-9fhmtmif77] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--brand-navy);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640.98px) {
    .topbar-username[b-9fhmtmif77] {
        display: none;
    }

    /* En móvil la barra de marca del sidebar (con hamburguesa) ya hace de encabezado;
       ocultamos la topbar para no apilar dos barras. */
    .app-topbar[b-9fhmtmif77] {
        display: none;
    }
}
/* /Layout/LoginLayout.razor.rz.scp.css */
.login-layout[b-tyq2p6n0k3] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(180deg, var(--brand-shell-top) 0%, var(--brand-shell-bottom) 100%);
    padding: 1rem;

    /* La marca de agua se sale del encuadre a propósito; sin esto asomaría por los bordes y
       aparecerían barras de desplazamiento en una pantalla que no debe tener ninguna. */
    position: relative;
    overflow: hidden;
}

/* "IC" gigante y sólido detrás de la tarjeta, corrido del centro a propósito: así se recorta
   contra el borde y se lee como parte del fondo, no como un logo centrado compitiendo con la
   tarjeta —que además está justo en el centro. */
.marca-agua[b-tyq2p6n0k3] {
    position: absolute;
    /* Anclada abajo a la izquierda y salida del encuadre: el negativo en em hace que lo que se
       sale sea proporcional al tamaño de la letra, así se ve igual en cualquier pantalla.
       El bottom negativo chico la asoma apenas por el borde de abajo: se recorta un poco, sin
       quedar cortada a la mitad. */
    left: -0.07em;
    bottom: -0.13em;

    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    /* "IC" mide casi lo mismo de ancho que su font-size. */
    font-size: max(26vw, 30vh);
    line-height: 0.8;
    letter-spacing: -0.04em;

    /* Blanco muy tenue: sobre el azul marino tiene que insinuarse, no competir con la tarjeta.
       Sólido, sin desenfoque: el filo de la letra es justo lo que la hace reconocible. */
    color: rgba(255, 255, 255, 0.07);

    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
}

/* La tarjeta va encima de la marca de agua. */
.login-contenido[b-tyq2p6n0k3] {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* En teléfono la tarjeta ocupa casi toda la pantalla, así que la marca se achica y se atenúa
   para no quedar justo debajo del texto de los campos. */
@media (max-width: 640.98px) {
    .marca-agua[b-tyq2p6n0k3] {
        font-size: max(40vw, 20vh);
        color: rgba(255, 255, 255, 0.05);
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-1tjuudvmf1] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-1tjuudvmf1] {
    flex: 1;
    /* Sin esto, un hijo flex no puede encogerse por debajo del ancho de su contenido:
       una tabla ancha empujaría el layout entero en vez de hacer scroll dentro de su
       propio contenedor .table-responsive. */
    min-width: 0;
}

/* Columna derecha: topbar (sticky) + contenido. */
.main-col[b-1tjuudvmf1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar[b-1tjuudvmf1] {
    background-color: var(--sb-bg);
    border-right: 1px solid var(--sb-border);
    transition: width 0.2s ease-in-out, background-color 0.15s ease;
    /* Ancla del panel: .sidebar-inner se posiciona contra esta caja. */
    position: relative;
}

/* En móvil el menú es un desplegable normal y esto no debe estorbar: el panel solo se despega
   de la columna en escritorio, dentro de la consulta de 992px de abajo. */
.sidebar-inner[b-1tjuudvmf1] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Aquí solo se decide el ANCHO de la barra. Cómo se ve por dentro en modo riel
   (iconos con etiqueta corta) lo resuelve NavMenu.razor.css, que es el dueño de
   esos elementos: el CSS con ámbito de Blazor no cruza de un componente a otro. */
@media (min-width: 641px) {
    .page[b-1tjuudvmf1] {
        flex-direction: row;
    }

    .sidebar[b-1tjuudvmf1] {
        /* Tablet: riel permanente. 250px se comerían un tercio de un iPad vertical. */
        width: 5.5rem;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        /* El sticky ya crea un contexto de apilado propio, así que el z-index del panel
           flotante quedaba encerrado dentro y las tarjetas del contenido se le encimaban al
           abrirse. El orden se decide aquí, en la barra. Queda encima del contenido y por
           debajo de los modales (1050), que sí deben taparla. */
        z-index: 1031;
    }

    article[b-1tjuudvmf1] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 992px) {
    /* De aquí en adelante sí sobra ancho para las etiquetas completas. */
    .sidebar[b-1tjuudvmf1] {
        width: 205px;
    }

    .sidebar.collapsed[b-1tjuudvmf1] {
        width: 5.5rem;
    }

    /* ---- Riel que se abre al pasar el mouse ----
       El hueco se queda en 5.5rem y solo crece el panel, que va por encima del contenido.

       La clase .abierto la pone MainLayout cuando el cursor lleva un rato encima. Aquí NO hay
       transition-delay: la espera ya la hizo el temporizador, y el retardo del CSS solo
       alcanzaba al ancho —las etiquetas cambian con display, que no se anima—, así que el menú
       se abría en dos tiempos. La guardia de hover se queda: en una pantalla táctil el panel
       flotante no tiene sentido. */
    @media (hover: hover) and (pointer: fine) {
        .sidebar.collapsed .sidebar-inner[b-1tjuudvmf1] {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 5.5rem;
            overflow: hidden;
            background-color: var(--sb-bg);
            border-right: 1px solid var(--sb-border);
            z-index: 1030;
            transition: width 0.13s ease-out, box-shadow 0.13s ease-out;
        }

        .sidebar.collapsed.abierto .sidebar-inner[b-1tjuudvmf1] {
            width: 205px;
            box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.35);
        }
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-3cqujjqc2d] {
    background-color: var(--sb-hover-bg);
}

/* ===================== MODO RIEL =====================
   Icono + etiqueta corta debajo. Se activa en tres situaciones:

     1. Móvil (<641px): el riel se despliega superpuesto desde la hamburguesa.
     2. Tablet (641–991px): la barra vive siempre como riel; 250px se comerían
        un tercio de la pantalla y ahí no hay hamburguesa que la esconda.
     3. Escritorio (≥992px): solo cuando el usuario colapsa la barra a mano.

   El bloque se repite tal cual en las tres: CSS no deja reutilizar un conjunto de
   reglas entre media queries distintas sin un preprocesador, y aquí no hay ninguno.
   Si tocas uno, toca los tres.

   Ojo: estas reglas viven aquí y no en MainLayout.razor.css porque el CSS con ámbito
   de Blazor solo alcanza elementos del propio componente. El selector `.sidebar.collapsed`
   sí funciona desde aquí: el ámbito se agrega al último elemento del selector, no al
   ancestro. */

/* La etiqueta corta solo existe en modo riel. */
.nav-short[b-3cqujjqc2d] {
    display: none;
    font-size: 0.58rem;
    line-height: 1.05;
    text-align: center;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.nav-backdrop[b-3cqujjqc2d] {
    display: none;
}

/* ---------- 1. Móvil: riel superpuesto, abierto desde la hamburguesa ---------- */
@media (max-width: 640.98px) {
    .sidebar-collapse-btn[b-3cqujjqc2d] {
        display: none;
    }

    .nav-backdrop[b-3cqujjqc2d] {
        display: block;
        position: fixed;
        inset: 3.5rem 0 0 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1040;
    }

    .nav-scrollable[b-3cqujjqc2d] {
        position: fixed;
        top: 3.5rem;
        left: 0;
        width: 5.5rem;
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
        z-index: 1050;
        background-color: var(--sb-bg);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.35);
    }

    .nav-label[b-3cqujjqc2d] { display: none; }
    .nav-short[b-3cqujjqc2d] { display: block; }
    .nav-item[b-3cqujjqc2d] { padding-bottom: 0.15rem; }
    .nav-item.px-3[b-3cqujjqc2d] { padding-left: 0.35rem !important; padding-right: 0.35rem !important; }
    .nav-item .nav-section-label[b-3cqujjqc2d] { display: none; }

    .nav-item:has(.nav-section-label)[b-3cqujjqc2d] {
        height: 1px;
        margin: 0.5rem 0.75rem;
        padding: 0 !important;
        overflow: hidden;
        background: var(--sb-border);
    }

    .nav-item[b-3cqujjqc2d]  a,
    .nav-item[b-3cqujjqc2d]  span.nav-link {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.15rem;
        height: auto;
        min-height: 3.25rem;
        padding: 0.4rem 0.1rem;
        line-height: 1.1;
    }

    .nav-icon[b-3cqujjqc2d] { margin-right: 0 !important; top: 0; }
}

/* ---------- 2. Tablet: la barra es un riel permanente ---------- */
@media (min-width: 641px) and (max-width: 991.98px) {
    .sidebar-collapse-btn[b-3cqujjqc2d] {
        display: none;
    }

    .brand-full[b-3cqujjqc2d] { display: none; }
    /* Dos selectores para ganarle al `.brand-mark { display: none }` de más abajo,
       que con la misma especificidad se impondría por orden de aparición. */
    .navbar-brand .brand-mark[b-3cqujjqc2d] { display: block; }
    .navbar-brand[b-3cqujjqc2d] { text-align: center; padding: 0; }

    .container-fluid[b-3cqujjqc2d] {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.5rem 0 !important;
    }

    .nav-label[b-3cqujjqc2d] { display: none; }
    .nav-short[b-3cqujjqc2d] { display: block; }
    .nav-item[b-3cqujjqc2d] { padding-bottom: 0.15rem; }
    .nav-item.px-3[b-3cqujjqc2d] { padding-left: 0.35rem !important; padding-right: 0.35rem !important; }
    .nav-item .nav-section-label[b-3cqujjqc2d] { display: none; }

    .nav-item:has(.nav-section-label)[b-3cqujjqc2d] {
        height: 1px;
        margin: 0.5rem 0.75rem;
        padding: 0 !important;
        overflow: hidden;
        background: var(--sb-border);
    }

    .nav-item[b-3cqujjqc2d]  a,
    .nav-item[b-3cqujjqc2d]  span.nav-link {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.15rem;
        height: auto;
        min-height: 3.25rem;
        padding: 0.4rem 0.1rem;
        line-height: 1.1;
    }

    .nav-icon[b-3cqujjqc2d] { margin-right: 0 !important; top: 0; }
}

/* ---------- 3. Escritorio: solo si el usuario colapsa la barra ---------- */
@media (min-width: 992px) {
    /* Barra completa: se ve la flecha del grupo y los catálogos van sangrados. */
    .sidebar:not(.collapsed) .nav-chevron[b-3cqujjqc2d] { display: inline; }
    .sidebar:not(.collapsed) .nav-subitem[b-3cqujjqc2d]  a { padding-left: 2.6rem; }

    .sidebar.collapsed .brand-full[b-3cqujjqc2d] { display: none; }
    .sidebar.collapsed .brand-mark[b-3cqujjqc2d] { display: block; }
    .sidebar.collapsed .navbar-brand[b-3cqujjqc2d] { text-align: center; padding: 0; }

    .sidebar.collapsed .container-fluid[b-3cqujjqc2d] {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.5rem 0 !important;
    }

    .sidebar.collapsed .nav-label[b-3cqujjqc2d] { display: none; }
    .sidebar.collapsed .nav-short[b-3cqujjqc2d] { display: block; }
    .sidebar.collapsed .nav-item[b-3cqujjqc2d] { padding-bottom: 0.15rem; }
    .sidebar.collapsed .nav-item.px-3[b-3cqujjqc2d] { padding-left: 0.35rem !important; padding-right: 0.35rem !important; }
    .sidebar.collapsed .nav-item .nav-section-label[b-3cqujjqc2d] { display: none; }

    .sidebar.collapsed .nav-item:has(.nav-section-label)[b-3cqujjqc2d] {
        height: 1px;
        margin: 0.5rem 0.75rem;
        padding: 0 !important;
        overflow: hidden;
        background: var(--sb-border);
    }

    .sidebar.collapsed .nav-item[b-3cqujjqc2d]  a,
    .sidebar.collapsed .nav-item[b-3cqujjqc2d]  span.nav-link {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.15rem;
        height: auto;
        min-height: 3.25rem;
        padding: 0.4rem 0.1rem;
        line-height: 1.1;
    }

    .sidebar.collapsed .nav-icon[b-3cqujjqc2d] { margin-right: 0 !important; top: 0; }

    /* ===================== MODO RIEL QUE SE ABRE CON EL MOUSE =====================
       Mientras el cursor está encima, el panel crece a 205px (eso lo hace
       MainLayout.razor.css) y aquí se DESHACE el riel: si no, el menú se ensanchaba pero
       por dentro seguía con los iconos chiquitos, la etiqueta corta debajo y un hueco a los
       lados. Abierto tiene que verse igual que la barra completa de toda la vida.

       Va detrás de la misma guardia que el ensanchado —solo donde hay mouse de verdad—:
       en una pantalla táctil el panel flotante no tiene sentido, y el texto largo aparecería
       dentro de un riel de 5.5rem y saldría cortado.

       La clase .abierto la pone MainLayout tras sostener el cursor, y es la MISMA que ensancha
       el panel: por eso el menú se abre de una pieza y no en dos tiempos. */
    @media (hover: hover) and (pointer: fine) {
        .sidebar.collapsed.abierto .brand-full[b-3cqujjqc2d] { display: block; }
        .sidebar.collapsed.abierto .brand-mark[b-3cqujjqc2d] { display: none; }
        .sidebar.collapsed.abierto .navbar-brand[b-3cqujjqc2d] { text-align: left; }

        .sidebar.collapsed.abierto .container-fluid[b-3cqujjqc2d] {
            flex-direction: row;
            gap: 0;
            padding: 0.5rem 0.75rem !important;
        }

        .sidebar.collapsed.abierto .nav-label[b-3cqujjqc2d] { display: inline; }
        .sidebar.collapsed.abierto .nav-short[b-3cqujjqc2d] { display: none; }
        .sidebar.collapsed.abierto .nav-item[b-3cqujjqc2d] { padding-bottom: 0.5rem; }

        .sidebar.collapsed.abierto .nav-item.px-3[b-3cqujjqc2d] {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

        .sidebar.collapsed.abierto .nav-item .nav-section-label[b-3cqujjqc2d] { display: block; }

        /* Los títulos de sección vuelven a ser texto y dejan de ser la rayita divisoria
           que los sustituye en el riel. */
        .sidebar.collapsed.abierto .nav-item:has(.nav-section-label)[b-3cqujjqc2d] {
            height: auto;
            margin: 0;
            padding: 0.5rem 1rem 0.25rem !important;
            overflow: visible;
            background: none;
        }

        .sidebar.collapsed.abierto .nav-item[b-3cqujjqc2d]  a,
        .sidebar.collapsed.abierto .nav-item[b-3cqujjqc2d]  span.nav-link {
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            gap: 0;
            min-height: 2.75rem;
            padding: 0.35rem 0.75rem;
            line-height: 1.3;
        }

        .sidebar.collapsed.abierto .nav-icon[b-3cqujjqc2d] { margin-right: 0.75rem !important; top: -1px; }

        /* La flecha del grupo y el sangrado de los catálogos son de barra completa. */
        .sidebar.collapsed.abierto .nav-chevron[b-3cqujjqc2d] { display: inline; }
        .sidebar.collapsed.abierto .nav-subitem[b-3cqujjqc2d]  a { padding-left: 2.6rem; }
    }
}

.top-row[b-3cqujjqc2d] {
    min-height: 3.5rem;
    background-color: transparent;
    border-bottom: 1px solid var(--sb-border);
}

/* La barra mide 205px y "INTERIORISMO" en Montserrat 800 no cabía a 1.1rem (pedía 136px
   de los 129px disponibles y se cortaba). A 1rem entra con holgura. */
.navbar-brand[b-3cqujjqc2d] {
    font-size: 1rem;
    line-height: 1.15;
    overflow: hidden;
}

/* El logotipo usa Montserrat; el resto de la app, Inter. */
.brand-title[b-3cqujjqc2d] {
    display: block;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 800;
    color: var(--brand-orange);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.brand-subtitle[b-3cqujjqc2d] {
    display: block;
    font-family: 'Montserrat', 'Inter', sans-serif;
    /* Iba justo al límite del ancho por su letter-spacing amplio; 0.6rem le da aire. */
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--sb-section);
    letter-spacing: 0.15em;
    white-space: nowrap;
}

.brand-mark[b-3cqujjqc2d] {
    display: none;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--brand-orange);
}

.sidebar-collapse-btn[b-3cqujjqc2d] {
    color: var(--sb-text);
    background-color: var(--sb-hover-bg);
    border: none;
    line-height: 1;
    padding: 0.25rem 0.5rem;
}

    .sidebar-collapse-btn:hover[b-3cqujjqc2d] {
        background-color: var(--sb-active-bg);
        color: var(--sb-text-hover);
    }

.nav-icon[b-3cqujjqc2d] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    /* Los iconos se pintan como máscara para poder teñirlos según el tema del
       sidebar (claro/oscuro). El color viene de --sb-icon. */
    background-color: var(--sb-icon);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    flex-shrink: 0;
    transition: background-color 0.12s ease;
}

.icon-obras[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.icon-reporte[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Crect x='1' y='9' width='3' height='6'/%3E%3Crect x='6.5' y='5' width='3' height='10'/%3E%3Crect x='12' y='2' width='3' height='13'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Crect x='1' y='9' width='3' height='6'/%3E%3Crect x='6.5' y='5' width='3' height='10'/%3E%3Crect x='12' y='2' width='3' height='13'/%3E%3C/svg%3E");
}

.icon-gestion[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5A1.5 1.5 0 0 1 6.5 2h3A1.5 1.5 0 0 1 11 3.5V4h3.5A1.5 1.5 0 0 1 16 5.5v6a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 11.5v-6A1.5 1.5 0 0 1 1.5 4H5v-.5zM6 4h4v-.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5V4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5A1.5 1.5 0 0 1 6.5 2h3A1.5 1.5 0 0 1 11 3.5V4h3.5A1.5 1.5 0 0 1 16 5.5v6a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 11.5v-6A1.5 1.5 0 0 1 1.5 4H5v-.5zM6 4h4v-.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5V4z'/%3E%3C/svg%3E");
}

.icon-compra[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 14a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm7 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 14a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm7 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z'/%3E%3C/svg%3E");
}

.icon-inventario[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z'/%3E%3C/svg%3E");
}

.icon-areas[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 3.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-2zM3 7.5h4.5V13H3.5a.5.5 0 0 1-.5-.5V7.5zm5.5 0H13v5a.5.5 0 0 1-.5.5H8.5V7.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 3.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-2zM3 7.5h4.5V13H3.5a.5.5 0 0 1-.5-.5V7.5zm5.5 0H13v5a.5.5 0 0 1-.5.5H8.5V7.5z'/%3E%3C/svg%3E");
}

.icon-empresas[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 1h7v14H6v-3.5H5V15H2V1zm1.5 1.5v1.5H5V2.5H3.5zm2.5 0v1.5h1.5V2.5H6zm-2.5 3v1.5H5V5.5H3.5zm2.5 0v1.5h1.5V5.5H6zm-2.5 3v1.5H5V8.5H3.5zm2.5 0v1.5h1.5V8.5H6z'/%3E%3Cpath d='M10 5h4v10h-4V5zm1.25 1.5V8h1.5V6.5h-1.5zm0 3v1.5h1.5V9.5h-1.5zm0 3V15h1.5v-2.5h-1.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 1h7v14H6v-3.5H5V15H2V1zm1.5 1.5v1.5H5V2.5H3.5zm2.5 0v1.5h1.5V2.5H6zm-2.5 3v1.5H5V5.5H3.5zm2.5 0v1.5h1.5V5.5H6zm-2.5 3v1.5H5V8.5H3.5zm2.5 0v1.5h1.5V8.5H6z'/%3E%3Cpath d='M10 5h4v10h-4V5zm1.25 1.5V8h1.5V6.5h-1.5zm0 3v1.5h1.5V9.5h-1.5zm0 3V15h1.5v-2.5h-1.5z'/%3E%3C/svg%3E");
}

.icon-tipos[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h5v5H2V2zm7 0h5v5H9V2zM2 9h5v5H2V9zm7 0h5v5H9V9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h5v5H2V2zm7 0h5v5H9V2zM2 9h5v5H2V9zm7 0h5v5H9V9z'/%3E%3C/svg%3E");
}

.icon-clientes[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6 2.5A1.5 1.5 0 0 1 7.5 1h1A1.5 1.5 0 0 1 10 2.5V3h3.5A1.5 1.5 0 0 1 15 4.5v8A1.5 1.5 0 0 1 13.5 14h-11A1.5 1.5 0 0 1 1 12.5v-8A1.5 1.5 0 0 1 2.5 3H6v-.5zM7.25 3h1.5v-.5a.25.25 0 0 0-.25-.25h-1a.25.25 0 0 0-.25.25V3zM2.5 4.5v8h11v-8h-11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6 2.5A1.5 1.5 0 0 1 7.5 1h1A1.5 1.5 0 0 1 10 2.5V3h3.5A1.5 1.5 0 0 1 15 4.5v8A1.5 1.5 0 0 1 13.5 14h-11A1.5 1.5 0 0 1 1 12.5v-8A1.5 1.5 0 0 1 2.5 3H6v-.5zM7.25 3h1.5v-.5a.25.25 0 0 0-.25-.25h-1a.25.25 0 0 0-.25.25V3zM2.5 4.5v8h11v-8h-11z'/%3E%3C/svg%3E");
}

.icon-crm[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .374.83L10 6.855V13.5a.5.5 0 0 1-.276.447l-2 1A.5.5 0 0 1 7 14.5V6.855L1.626 1.83A.5.5 0 0 1 1.5 1.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .374.83L10 6.855V13.5a.5.5 0 0 1-.276.447l-2 1A.5.5 0 0 1 7 14.5V6.855L1.626 1.83A.5.5 0 0 1 1.5 1.5z'/%3E%3C/svg%3E");
}

.icon-gastos[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z'/%3E%3Cpath d='M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.998-2.418-2.986-2.876l-.692-.166V4.15c1.147.129 1.863.745 2.02 1.628h1.043c-.121-1.616-1.415-2.756-3.063-2.874V1.5H7.591V2.9c-1.9.158-3.257 1.28-3.257 2.913 0 1.483.984 2.339 2.641 2.775l.616.157V13.31c-1.257-.15-2.16-.9-2.271-2.13H4Zm3.591-4.917c-1.239-.291-2.006-.766-2.006-1.687 0-.94.733-1.612 2.006-1.72v3.407Zm1.043 3.107c1.469.353 2.303.848 2.303 1.907 0 1.045-.888 1.784-2.303 1.913V9Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z'/%3E%3Cpath d='M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.998-2.418-2.986-2.876l-.692-.166V4.15c1.147.129 1.863.745 2.02 1.628h1.043c-.121-1.616-1.415-2.756-3.063-2.874V1.5H7.591V2.9c-1.9.158-3.257 1.28-3.257 2.913 0 1.483.984 2.339 2.641 2.775l.616.157V13.31c-1.257-.15-2.16-.9-2.271-2.13H4Zm3.591-4.917c-1.239-.291-2.006-.766-2.006-1.687 0-.94.733-1.612 2.006-1.72v3.407Zm1.043 3.107c1.469.353 2.303.848 2.303 1.907 0 1.045-.888 1.784-2.303 1.913V9Z'/%3E%3C/svg%3E");
}

.icon-requisiciones[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1z'/%3E%3Cpath d='M4 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-.5a.5.5 0 0 0 0 1H12v11H4V3h.5a.5.5 0 0 0 0-1H4z'/%3E%3Cpath d='M11.354 6.354l-3.5 3.5a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l3.146-3.147a.5.5 0 0 1 .708.708z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1z'/%3E%3Cpath d='M4 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-.5a.5.5 0 0 0 0 1H12v11H4V3h.5a.5.5 0 0 0 0-1H4z'/%3E%3Cpath d='M11.354 6.354l-3.5 3.5a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l3.146-3.147a.5.5 0 0 1 .708.708z'/%3E%3C/svg%3E");
}

.icon-transferencias[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z'/%3E%3C/svg%3E");
}

.icon-usuarios[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Ccircle cx='5.5' cy='5' r='2.3'/%3E%3Ccircle cx='11.2' cy='6' r='1.8'/%3E%3Cpath d='M1 14.2c0-2.6 2.1-4.7 4.7-4.7h.2c2.4 0 4.4 1.9 4.5 4.3l.02.4H1v-.2z'/%3E%3Cpath d='M11 10.2c1.9.2 3.3 1.8 3.3 3.7v.3h-2.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Ccircle cx='5.5' cy='5' r='2.3'/%3E%3Ccircle cx='11.2' cy='6' r='1.8'/%3E%3Cpath d='M1 14.2c0-2.6 2.1-4.7 4.7-4.7h.2c2.4 0 4.4 1.9 4.5 4.3l.02.4H1v-.2z'/%3E%3Cpath d='M11 10.2c1.9.2 3.3 1.8 3.3 3.7v.3h-2.6'/%3E%3C/svg%3E");
}

.icon-reportes[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.414A2 2 0 0 0 13.414 3L11 0.586A2 2 0 0 0 9.586 0H4Zm0 1h5.5v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M4.5 8a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.414A2 2 0 0 0 13.414 3L11 0.586A2 2 0 0 0 9.586 0H4Zm0 1h5.5v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M4.5 8a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5Z'/%3E%3C/svg%3E");
}

/* Engrane (gear-fill de Bootstrap Icons): el mismo que usa el resto de la app, en vez
   del dibujo simplificado anterior que a 1.25rem se leía como una mancha. */
.icon-config[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

/* Flecha del grupo desplegable. Solo se ve en modo barra completa (≥992 sin colapsar);
   en el riel angosto estorba y se oculta. */
.nav-chevron[b-3cqujjqc2d] {
    display: none;
    margin-left: auto;
    font-size: 0.7em;
    opacity: 0.75;
}

/* Contador rojo de pendientes, arriba a la derecha del enlace (sirve en barra y en riel).
   Con ::deep: los enlaces de NavLink los pinta otro componente y el CSS aislado de este archivo
   no los alcanza sin él. Sin esa posición, su contador se iba hasta arriba, junto al logo. */
.nav-item[b-3cqujjqc2d]  .nav-link {
    position: relative;
}
.nav-count[b-3cqujjqc2d] {
    position: absolute;
    top: 0.3rem;
    right: 0.55rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-autorizaciones[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 0l6 2.5v4.2c0 3.6-2.5 6.9-6 8.3-3.5-1.4-6-4.7-6-8.3V2.5L8 0zm2.9 5.3L7.2 9 5.1 6.9l-1 1L7.2 11l4.7-4.7-1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 0l6 2.5v4.2c0 3.6-2.5 6.9-6 8.3-3.5-1.4-6-4.7-6-8.3V2.5L8 0zm2.9 5.3L7.2 9 5.1 6.9l-1 1L7.2 11l4.7-4.7-1-1z'/%3E%3C/svg%3E");
}

.icon-ayuda[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/%3E%3C/svg%3E");
}

.icon-logout[b-3cqujjqc2d] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z'/%3E%3Cpath fill-rule='evenodd' d='M11.354 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L9.793 7.5H1.5a.5.5 0 0 0 0 1h8.293l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z'/%3E%3Cpath fill-rule='evenodd' d='M11.354 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L9.793 7.5H1.5a.5.5 0 0 0 0 1h8.293l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
}

.nav-section-label[b-3cqujjqc2d] {
    display: block;
    color: var(--sb-section);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 0.72rem;
}

.nav-item[b-3cqujjqc2d] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-3cqujjqc2d] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-3cqujjqc2d] {
        padding-bottom: 1rem;
    }

    .nav-item[b-3cqujjqc2d]  a,
    .nav-item[b-3cqujjqc2d]  span.nav-link {
        color: var(--sb-text);
        border-radius: 6px;
        /* Alto MÍNIMO, no fijo, y un interlineado normal. Con `height` y
           `line-height: 2.75rem` una etiqueta que no cupiera en el ancho de la barra
           —«Solicitudes de gasto» a 205px— partía en dos renglones de 2.75rem cada uno:
           el texto se salía de la caja y empujaba al icono fuera de su sitio. */
        min-height: 2.75rem;
        display: flex;
        align-items: center;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        line-height: 1.3;
        transition: background-color 0.12s ease, color 0.12s ease;
    }

/* Activo: fondo tenue + texto de énfasis + barra naranja de acento a la izquierda
   (estilo Velonic). El icono se tiñe de naranja. */
.nav-item[b-3cqujjqc2d]  a.active {
    background-color: var(--sb-active-bg);
    color: var(--sb-active-text);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand-orange);
}

.nav-item[b-3cqujjqc2d]  a.active .nav-icon {
    background-color: var(--brand-orange);
}

.nav-item[b-3cqujjqc2d]  a:hover,
.nav-item[b-3cqujjqc2d]  span.nav-link:hover {
    background-color: var(--sb-hover-bg);
    color: var(--sb-text-hover);
}

.nav-item[b-3cqujjqc2d]  a:hover .nav-icon,
.nav-item[b-3cqujjqc2d]  span.nav-link:hover .nav-icon {
    background-color: var(--sb-text-hover);
}

@media (min-width: 641px) {
    /* De tablet en adelante la barra siempre está a la vista: no hay hamburguesa
       ni fondo oscurecido que cerrar. */
    .navbar-toggler[b-3cqujjqc2d] {
        display: none;
    }

    .collapse[b-3cqujjqc2d] {
        display: block;
    }

    .nav-scrollable[b-3cqujjqc2d] {
        /* La barra hace su propio scroll si el menú no cabe a lo alto. */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Grupos de Configuración colgando de su ítem: sangrados y algo más chicos, para que se lean
   como lo que son —un nivel abajo— y no como secciones más del menú. Sin icono a propósito:
   la sangría ya dice que dependen del renglón de arriba. */
.nav-sub[b-3cqujjqc2d] {
    padding-left: 2.6rem !important;
    font-size: .8rem;
    opacity: .85;
}

.nav-sub.active[b-3cqujjqc2d] {
    opacity: 1;
    font-weight: 600;
}

/* En riel la barra mide 5.5rem: con la sangría el nombre no cabe y se sale por la derecha
   ("Catál", "Sisten"). Aquí no hay nivel que marcar con espacio, así que se centra igual que
   los demás y se usa el texto corto. Las dos condiciones son las mismas que usa el resto del
   menú para entrar en modo riel: ancho de tablet, o la barra colapsada a mano. */
@media (min-width: 641px) and (max-width: 991.98px) {
    .nav-sub[b-3cqujjqc2d] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center;
        justify-content: center;
    }
}

.sidebar.collapsed .nav-sub[b-3cqujjqc2d] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
    justify-content: center;
}
/* /Pages/Inicio.razor.rz.scp.css */
/* El fondo de la caja "Espera tu firma" es el azul de la marca —no un semáforo amarillo—
   y su borde reforzado con el naranja de acento, para que se lea como "aquí decides tú" en
   vez de "cuidado". */
.header-firma[b-tyl6gs2z9r] {
    background-color: var(--brand-navy);
    color: #fff;
    border-bottom: 3px solid var(--brand-orange);
}

.tarjeta-firma[b-tyl6gs2z9r] { border: 1px solid #d3ccb8; }

.placeholder-foto[b-tyl6gs2z9r] {
    width: 100%;
    height: 100%;
    min-height: 96px;
    background: #f0efe9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.placeholder-foto.sin-foto[b-tyl6gs2z9r] { border: 1px dashed #d3ccb8; }

/* Imagen genérica para las obras que aún no tienen foto. Es un SVG puesto como fondo con máscara:
   así se colorea con el navy de la marca y no se pinta de la nada un edificio realista que se
   vería fuera de sitio. La opacidad baja lo separa visualmente de las fotos reales. */
.obra-sin-foto[b-tyl6gs2z9r] {
    width: 100%;
    height: 100%;
    min-height: 96px;
    background:
        linear-gradient(135deg, #f0efe9 0%, #e6e2d3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
    color: var(--brand-navy);
    opacity: 0.55;
}
.obra-sin-foto svg[b-tyl6gs2z9r] { width: 46%; max-width: 60px; height: auto; }

/* Cuadrícula de fotos recientes: ancho fijo para que se acomoden en filas parejas. */
.miniatura[b-tyl6gs2z9r] {
    width: 148px;
    border: 1px solid #e3ddce;
    border-radius: .375rem;
    overflow: hidden;
    background: white;
}
.miniatura img[b-tyl6gs2z9r] { width: 148px; height: 100px; object-fit: cover; display: block; }
.miniatura .placeholder-foto[b-tyl6gs2z9r] { width: 148px; height: 100px; min-height: 0; border-radius: 0; }
.miniatura .pie[b-tyl6gs2z9r] { padding: .35rem .5rem; }
/* /Pages/Login.razor.rz.scp.css */
/* El cuerpo de la app está en 0.75rem porque las pantallas de trabajo son tablas densas donde
   caben cientos de renglones. El login no tiene nada de eso: es una tarjeta con dos campos, y
   a ese tamaño se lee apretado sin ganar nada a cambio. Aquí se sube a una medida cómoda, sin
   tocar el resto del sistema.

   Va con ::deep porque los campos los renderiza <InputText>, que es un componente hijo: el CSS
   con alcance de Blazor no le pone el atributo a lo que dibuja otro componente, así que una
   regla normal no lo alcanzaría. Con ::deep el atributo queda en la tarjeta y la regla aplica
   a cualquier descendiente. */
.tarjeta-login[b-3uh05l7seo] {
    font-size: 0.9rem;
}

.tarjeta-login[b-3uh05l7seo]  .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

/* Los controles heredan 0.75rem de app.css; en el login se les da aire —también en alto, que
   es lo que hace que un campo se sienta cómodo al escribir. */
.tarjeta-login[b-3uh05l7seo]  .form-control {
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
}

.tarjeta-login[b-3uh05l7seo]  .btn {
    --bs-btn-font-size: 0.95rem;
    --bs-btn-padding-y: 0.5rem;
    font-weight: 600;
}

.tarjeta-login[b-3uh05l7seo]  .alert {
    font-size: 0.85rem;
}
/* /Pages/Obras/Dashboard.razor.rz.scp.css */
/* Tarjetas del tablero: una por paso del flujo. Son enlaces, así que tienen que verse
   pulsables sin gritar —conviven con el panel de presupuesto, que es lo que manda—. */
.tarjeta-modulo[b-efck0ww19e] {
    border: 1px solid #e3ddce;
    color: inherit;
    transition: border-color .12s ease, transform .12s ease;
}

.tarjeta-modulo:hover[b-efck0ww19e] {
    border-color: var(--brand-orange);
    transform: translateY(-1px);
}

/* Con algo esperando a alguien, la tarjeta se marca por el costado. El color no es la única
   señal: la cifra también cambia de peso, para que se distinga sin depender de verlo. */
.tarjeta-modulo.tiene-pendiente[b-efck0ww19e] {
    border-left: 4px solid var(--brand-orange);
}

/* Conceptos clicables: el cursor y un realce suave avisan que abren su detalle. */
.concepto-click[b-efck0ww19e] {
    cursor: pointer;
    border-radius: .35rem;
    transition: background-color .12s ease;
}

.concepto-click:hover[b-efck0ww19e] {
    background-color: rgba(11, 36, 71, 0.05);
}
/* /Pages/Obras/Lista.razor.rz.scp.css */
/* Fichas de lo que espera acción. Son enlaces: deben verse pulsables sin competir con el
   panel de presupuesto, que es la otra mitad de la pantalla. */
.pendiente-chip[b-s8rgaa4h2s] {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .3rem .6rem;
    border: 1px solid #e3ddce;
    border-left: 3px solid var(--brand-orange);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, transform .12s ease;
}

.pendiente-chip:hover[b-s8rgaa4h2s] {
    border-color: var(--brand-orange);
    transform: translateY(-1px);
}

.pendiente-chip .cifra[b-s8rgaa4h2s] {
    font-size: 1.15rem;
    font-weight: 700;
}

.pendiente-chip .texto[b-s8rgaa4h2s] {
    font-size: .65rem;
    color: #6c757d;
}

/* Tarjeta de obra */
.tarjeta-obra[b-s8rgaa4h2s] {
    border: 1px solid #e3ddce;
    transition: border-color .12s ease;
}

.tarjeta-obra:hover[b-s8rgaa4h2s] {
    border-color: var(--brand-orange);
}

/* El gasto ya rebasó el presupuesto: se marca por el costado, y además la cifra va en rojo.
   El color no es la única señal. */
.tarjeta-obra.sobregirada[b-s8rgaa4h2s] {
    border-left: 4px solid var(--bs-danger);
}

/* Enlaces menudos a cada pendiente de la obra. */
.chip-mini[b-s8rgaa4h2s] {
    font-size: .62rem;
    padding: .1rem .4rem;
    border: 1px solid #e3ddce;
    border-radius: 4px;
    text-decoration: none;
    color: #6c757d;
    background: #fbf9f4;
}

.chip-mini:hover[b-s8rgaa4h2s] {
    border-color: var(--brand-orange);
    color: var(--brand-navy);
}
/* /Pages/Obras/NuevaRequisicion.razor.rz.scp.css */
/* Toda la pantalla cabe en una vista, sin scroll de página: la tarjeta se acota al alto
   disponible y la tabla —el único elemento que crece sin límite— absorbe lo que sobre. Así la
   nota y el botón de enviar quedan siempre visibles, aunque la obra traiga cientos de insumos. */
.tarjeta-pedido[b-ob9ckp74ah] {
    display: flex;
    flex-direction: column;
    /* Lo que descuenta: barra superior (3.25rem) + padding de .content (0.75rem) +
       encabezado de la página con su botón (~2.8rem) + aire inferior. */
    max-height: calc(100vh - 8.5rem);
    max-height: calc(100dvh - 8.5rem); /* dvh: en móvil la barra del navegador se recoge */
}

.tarjeta-pedido .card-body[b-ob9ckp74ah] {
    display: flex;
    flex-direction: column;
    /* Sin min-height:0 un hijo flex no encoge por debajo de su contenido y la tabla
       desbordaría la tarjeta en vez de hacer scroll dentro. */
    min-height: 0;
    overflow: hidden;
}

/* La tarjeta se lee como tres zonas: arriba los filtros, en medio los datos, abajo el envío.
   Las dos de los extremos van sobre el gris de la app —el mismo del fondo de página— para que
   destaquen contra el blanco de la tabla, y una línea naranja de marca marca dónde empieza y
   dónde termina el bloque de datos. Ambas sangran al borde de la tarjeta (los -0.75rem
   compensan el padding de .card-body) para que se lean como bandas completas y no como cajas
   flotando dentro. */
.barra-filtros[b-ob9ckp74ah] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin: -0.75rem -0.75rem 0.5rem;
    padding: 0.75rem;
    background-color: var(--vz-body-bg, #f5f6fa);
    border-bottom: 2px solid var(--brand-orange, #f5921e);
    border-radius: var(--vz-card-radius, 0.5rem) var(--vz-card-radius, 0.5rem) 0 0;
}

.filtro-capitulo[b-ob9ckp74ah] {
    flex: 1 1 22rem;
    min-width: 0;
}

.filtro-buscar[b-ob9ckp74ah] {
    flex: 1 1 14rem;
    min-width: 0;
}

/* La casilla se alinea con el alto del control de al lado, no con su etiqueta. */
.filtro-check[b-ob9ckp74ah] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: calc(1.5em + 0.5rem + 2px); /* alto de un control -sm */
    margin: 0;
    padding-left: 0;
}

.filtro-check .form-check-input[b-ob9ckp74ah] {
    margin: 0;
    float: none;
}

.filtro-check .form-check-label[b-ob9ckp74ah] {
    margin: 0;
    white-space: nowrap;
}

/* Ocupa el ancho completo bajo los controles, sin romper su alineación. Va en letra chica
   porque se lee una vez y después estorba. */
.nota-filtros[b-ob9ckp74ah] {
    flex: 1 0 100%;
    font-size: 0.68rem;
    line-height: 1.3;
    color: var(--vz-muted, #8a919e);
    margin-top: -0.15rem;
}

.tabla-materiales[b-ob9ckp74ah] {
    flex: 1 1 auto;
    min-height: 6rem;
    overflow-y: auto;
}

/* Anchos fijos para el bloque numérico: sin esto cada columna se estira distinto y las
   cifras quedan regadas lejos del nombre del material. */
.tabla-materiales .col-num[b-ob9ckp74ah] {
    width: 7rem;
}

.tabla-materiales .col-pedir[b-ob9ckp74ah] {
    width: 11rem;
    /* Línea que separa la información (lo que hay) de la acción (lo que se pide). */
    border-left: 1px solid var(--bs-border-color, #dee2e6);
}

/* Notas al pie de una celda: unidad sobrante, stock en almacén, sugerencia comercial. */
.tabla-materiales .nota-fila[b-ob9ckp74ah] {
    font-size: 0.65rem;
    line-height: 1.3;
    display: block;
}

/* El encabezado se queda fijo al recorrer: sin esto se pierde de vista cuál columna es cuál
   justo cuando hay muchos renglones, que es cuando más falta hace. */
.tabla-materiales thead th[b-ob9ckp74ah] {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Fondo opaco propio: el thead por defecto es transparente y los renglones se verían
       pasar por debajo al recorrer. Va del blanco de la tarjeta, NO del gris de las bandas:
       si también fuera gris se fundiría con la barra de filtros que tiene justo encima y se
       perdería la separación entre las tres zonas. */
    background-color: var(--vz-surface, #fff);
    color: var(--vz-heading, #0b2447);
    /* La línea va por box-shadow y no por border: con border-collapse el borde de una celda
       sticky se queda atrás al recorrer y la línea desaparece. */
    box-shadow: inset 0 -1px 0 var(--vz-border, #e9ebf1);
}

/* Pie del pedido: nota y acciones. No encoge, y cierra el bloque de datos con la misma línea
   naranja con que lo abre el encabezado. */
.pie-pedido[b-ob9ckp74ah] {
    flex: 0 0 auto;
    margin: 0.5rem -0.75rem -0.75rem;
    padding: 0.75rem;
    background-color: var(--vz-body-bg, #f5f6fa);
    border-top: 2px solid var(--brand-orange, #f5921e);
    /* Redondea las esquinas de abajo para no desbordar el radio de la tarjeta. */
    border-radius: 0 0 var(--vz-card-radius, 0.5rem) var(--vz-card-radius, 0.5rem);
}

/* En teléfono, encerrar todo en una pantalla deja la tabla inservible de tan corta: ahí
   conviene que la página fluya y sea la tabla la que tenga un tope propio. */
@media (max-width: 640.98px) {
    .tarjeta-pedido[b-ob9ckp74ah] {
        max-height: none;
    }

    .tarjeta-pedido .card-body[b-ob9ckp74ah] {
        overflow: visible;
    }

    .tabla-materiales[b-ob9ckp74ah] {
        max-height: 60vh;
    }
}
/* /Pages/Obras/Recepciones.razor.rz.scp.css */
/* Miniatura de foto de recepción. Se ve al clic en grande a través del modal. */
.miniatura-foto[b-crw6eymjgn] {
    position: relative;
    width: 120px;
    height: 90px;
    border: 1px solid #e3ddce;
    border-radius: 6px;
    overflow: hidden;
    background: #f7f6f2;
}

.miniatura-foto img[b-crw6eymjgn] { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }

.miniatura-foto .placeholder-foto[b-crw6eymjgn] {
    width: 100%;
    height: 100%;
    background: #f0efe9;
}

/* Bote de basura dentro de la miniatura (abajo a la derecha): antes era una ✕ roja que se salía
   por la esquina, quedaba medio cortada y se leía como "cerrar". */
.miniatura-foto .btn-quitar[b-crw6eymjgn] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: rgba(255, 255, 255, .92);
    color: #b02a37;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.miniatura-foto .btn-quitar:hover[b-crw6eymjgn] { background: #fff; color: #dc3545; }

/* "¿Quitar? Sí / No" encima de la propia foto. */
.miniatura-foto .confirmar-quitar[b-crw6eymjgn] {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 50, .82);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 600;
}

/* Caja "+ Foto" con el mismo tamaño que las miniaturas, para que la fila se vea pareja. */
.agregar-foto[b-crw6eymjgn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 90px;
    border: 1px dashed #b8b092;
    border-radius: 6px;
    color: var(--brand-navy);
    background: #fbfaf5;
    cursor: pointer;
    font-weight: 600;
    font-size: .85rem;
}

.agregar-foto:hover[b-crw6eymjgn] { background: #f0efe9; }
.agregar-foto[b-crw6eymjgn]  .input-oculto { display: none; }

/* Modal para ver la foto en grande: click afuera cierra. Sin bibliotecas: es solo dos capas. */
.modal-foto[b-crw6eymjgn] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    cursor: zoom-out;
    padding: 1rem;
}

.modal-foto img[b-crw6eymjgn] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    box-shadow: 0 6px 30px rgba(0,0,0,.5);
}
/* /Pages/Oficina/ObraDetalle.razor.rz.scp.css */
/* Menú de capítulos (pestaña Partidas): alto acotado con scroll propio, y pegado
   arriba en pantallas grandes para que las partidas de la derecha se recorran solas. */
.capitulos-menu[b-w4kruj9s9l] {
    max-height: 70vh;
    overflow-y: auto;
}

@media (min-width: 992px) {
    .capitulos-menu[b-w4kruj9s9l] {
        position: sticky;
        top: 0.5rem;
    }
}

.capitulos-menu .list-group-item[b-w4kruj9s9l] {
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
}

/* El subtotal bajo cada capítulo, un punto más chico todavía. */
.capitulos-menu .list-group-item .small[b-w4kruj9s9l] {
    font-size: 0.72rem;
}

/* Las tablas de material de la obra heredan el tamaño del cuerpo (0.75rem); el encabezado
   un punto más chico para separarlo de los datos. */
.tabla-material-obra thead th[b-w4kruj9s9l] {
    font-size: 0.7rem;
}