/* _content/ContabilidadApp/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-lajgqfwlvs] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-lajgqfwlvs] {
    flex: 1;
}

.sidebar[b-lajgqfwlvs] {
    background-color: var(--luque-espresso);
}

.top-row[b-lajgqfwlvs] {
    background-color: var(--surface);
    border-bottom: 1px solid var(--line);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-lajgqfwlvs]  a, .top-row[b-lajgqfwlvs]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-lajgqfwlvs]  a:hover, .top-row[b-lajgqfwlvs]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-lajgqfwlvs]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-lajgqfwlvs] {
        justify-content: space-between;
    }

    .top-row[b-lajgqfwlvs]  a, .top-row[b-lajgqfwlvs]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-lajgqfwlvs] {
        flex-direction: row;
    }

    .sidebar[b-lajgqfwlvs] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-lajgqfwlvs] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-lajgqfwlvs]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-lajgqfwlvs], article[b-lajgqfwlvs] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-lajgqfwlvs] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px var(--shadow-lg-color);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-lajgqfwlvs] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/ContabilidadApp/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-d0linaep9r] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--surface);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--sidebar-line-soft);
    /* El blanco del icono va dentro de un data URI y ahí las variables CSS no se resuelven:
       el navegador no interpreta el contenido del SVG como hoja de estilo. Es el único literal
       de color que queda en el proyecto, y no se puede tokenizar sin sacar el SVG a un archivo. */
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--sidebar-line-soft);
}

.navbar-toggler:checked[b-d0linaep9r] {
    background-color: var(--sidebar-activo);
}

.top-row[b-d0linaep9r] {
    height: 3.5rem;
    background-color: var(--overlay);
}

.navbar-brand[b-d0linaep9r] {
    font-size: 1.1rem;
}

.bi[b-d0linaep9r] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-d0linaep9r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' 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");
}

.bi-plus-square-fill-nav-menu[b-d0linaep9r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-d0linaep9r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

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

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

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

    .nav-item[b-d0linaep9r]  .nav-link {
        color: var(--line-strong);
        background: none;
        border: none;
        border-radius: 4px;
        min-height: 3rem;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        line-height: 1.3;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
        width: 100%;
    }

    .nav-item[b-d0linaep9r]  .nav-link .ico {
        opacity: 0.85;
    }

.nav-group-toggle[b-d0linaep9r] {
    cursor: pointer;
    justify-content: space-between;
    padding-right: 0.75rem;
}

.nav-group-label[b-d0linaep9r] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.nav-group-caret[b-d0linaep9r] {
    font-size: 0.75rem;
    opacity: 0.75;
}

.nav-sub-item[b-d0linaep9r] {
    position: relative;
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--sidebar-line);
}

    .nav-sub-item[b-d0linaep9r]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 1.4rem;
        width: 0.75rem;
        height: 2px;
        background: var(--sidebar-line);
    }

    .nav-sub-item[b-d0linaep9r]  .nav-link {
        font-size: 0.82rem;
        color: var(--ink-faint);
        min-height: 2.5rem;
    }

.nav-item[b-d0linaep9r]  a.active {
    background-color: var(--info-soft);
    /* Cognac de texto: el de marca da 2.39:1 sobre este fondo. Es el indicador de en qué
       pantalla estás, así que tiene que leerse. */
    color: var(--color-primario-fuerte);
}

.nav-item[b-d0linaep9r]  .nav-link:hover {
    background-color: var(--sidebar-hover);
    color: var(--surface);
}

.nav-scrollable[b-d0linaep9r] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-d0linaep9r] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-d0linaep9r] {
        display: none;
    }

    .nav-scrollable[b-d0linaep9r] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/ContabilidadApp/Components/Pages/Compras/NuevaCompra.razor.rz.scp.css */
/*
    Solo lo que es propio de esta pantalla. El subtítulo de grupo, la ficha de datos y el estado
    inválido de un campo viven en app.css: los usan todos los formularios de captura.
*/

/*
    Anchos de las columnas editables. Vivían como style="" en cada <th>: acá se ajustan en un solo
    lugar y el marcado deja de llevar números sueltos.
*/
.nc-col-cantidad[b-cem1o1xpd0] { width: 90px; }
.nc-col-costo[b-cem1o1xpd0] { width: 120px; }
.nc-col-descuento[b-cem1o1xpd0] { width: 180px; }

/*
    El pie de totales. Era una pila de <p> con el mismo peso salvo la clase del último; acá el
    desglose se separa del total por tamaño y color, no solo por la negrita.
*/
.nc-totales[b-cem1o1xpd0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    margin-top: var(--space-4);
}

.nc-totales-linea[b-cem1o1xpd0] {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
/* _content/ContabilidadApp/Components/Pages/Contabilidad/BalanceComprobacion.razor.rz.scp.css */
/*
    Balance de comprobación.

    Todo el color sale de los tokens de app.css; no hay un solo literal acá.
*/

/* El código de cuenta es un identificador, no prosa: en monoespaciada y con cifras de ancho fijo
   las jerarquías se alinean y se comparan de un vistazo. */
.bc-codigo[b-xhqpt2fqzi] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* _content/ContabilidadApp/Components/Pages/Contabilidad/NuevoArqueoCaja.razor.rz.scp.css */
/*
    El arqueo son cinco campos cortos: a ancho completo quedan perdidos en pantallas grandes, con la
    etiqueta y el valor separados por medio metro de vacío. El ancho vivía como style="" en el marcado.
*/
.aq-panel[b-y0fcted6f8] {
    max-width: 700px;
}
/* _content/ContabilidadApp/Components/Pages/Home.razor.rz.scp.css */
/*
    Panel principal.

    Todo el color sale de los tokens de app.css; no hay un solo literal acá.

    El estado "sin cambio" usa --ink-soft porque el proyecto no tiene un token de información
    fuerte, solo --info-soft, que es un fondo y no un color de texto legible. Queda anotado como
    decisión pendiente en DESIGN-BRAND.md, no como un hex inventado.
*/

/* Etiqueta de sección: reemplaza a los h5/h6 sueltos que había, para que la jerarquía
   de encabezados sea real (h1 de página, h2 de panel) y no dependa del tamaño. */
.panel-etiqueta[b-0ul072h5tu] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-3);
}

/* ---------- Utilidad, la cifra que manda ---------- */

.panel-utilidad[b-0ul072h5tu] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.panel-cifra[b-0ul072h5tu] {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.panel-cifra.es-positiva[b-0ul072h5tu] {
    color: var(--success);
}

.panel-cifra.es-negativa[b-0ul072h5tu] {
    color: var(--danger);
}

.panel-delta[b-0ul072h5tu] {
    font-size: 0.875rem;
    font-weight: 600;
    margin: var(--space-2) 0 0;
}

.panel-delta.es-mejor[b-0ul072h5tu] {
    color: var(--success);
}

.panel-delta.es-peor[b-0ul072h5tu] {
    color: var(--danger);
}

.panel-delta.es-neutra[b-0ul072h5tu] {
    color: var(--ink-soft);
    font-weight: 400;
}

.panel-nota[b-0ul072h5tu] {
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

/* ---------- El desglose de la resta ---------- */

.panel-desglose[b-0ul072h5tu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.panel-termino[b-0ul072h5tu] {
    display: flex;
    flex-direction: column;
    flex: 1 1 8rem;
    min-width: 8rem;
}

.panel-termino-etiqueta[b-0ul072h5tu] {
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.panel-termino-cifra[b-0ul072h5tu] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: var(--space-1);
}

.panel-termino-pie[b-0ul072h5tu] {
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-top: var(--space-1);
}

.panel-operador[b-0ul072h5tu] {
    font-size: 1.25rem;
    color: var(--ink-soft);
    flex: 0 0 auto;
    align-self: center;
    padding-top: 1rem;
}

/* ---------- Pendiente de cobro ---------- */

.panel-pendiente[b-0ul072h5tu] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0 0 var(--space-3);
}

.panel-pendiente-cifra[b-0ul072h5tu] {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
}

/* En pantallas angostas la resta se apila y el operador estorba: se oculta y cada término
   queda como una línea propia, que sigue leyéndose de arriba abajo. */
@media (max-width: 575.98px) {
    .panel-operador[b-0ul072h5tu] {
        display: none;
    }

    .panel-termino[b-0ul072h5tu] {
        flex-basis: 100%;
    }
}
/* _content/ContabilidadApp/Components/Pages/Inventario/Productos.razor.rz.scp.css */
.producto-card[b-oxtpf0ucmn] {
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    box-shadow: 0 0.125rem 0.5rem var(--shadow-sm-color);
    transition: box-shadow 0.2s ease;
}

.producto-card .card-title[b-oxtpf0ucmn] {
    color: var(--color-primario-fuerte);
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.calculo-precios[b-oxtpf0ucmn] {
    text-align: left;
}

.producto-form[b-oxtpf0ucmn]  .form-control:read-only {
    background-color: var(--paper);
    color: var(--ink);
}

.producto-form[b-oxtpf0ucmn]  .form-select:disabled,
.producto-form[b-oxtpf0ucmn]  .form-control:disabled {
    background-color: var(--paper) !important;
    color: var(--ink-soft) !important;
    opacity: 1 !important;
}

.rentabilidad-indicador[b-oxtpf0ucmn] {
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    background: var(--paper);
    transition: background-color 0.35s ease;
}

.rentabilidad-dot[b-oxtpf0ucmn] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.rentabilidad-danger[b-oxtpf0ucmn] {
    background: var(--danger-soft);
}

.rentabilidad-warning[b-oxtpf0ucmn] {
    background: var(--warning-soft);
}

.rentabilidad-success[b-oxtpf0ucmn] {
    background: var(--success-soft);
}

.rentabilidad-barra-fondo[b-oxtpf0ucmn] {
    width: 100%;
    height: 0.6rem;
    /* Mismo canal que las barras del reporte de gastos: es una pista de progreso, no una sombra. */
    background: var(--line);
    border-radius: 1rem;
    overflow: hidden;
}

.rentabilidad-barra-relleno[b-oxtpf0ucmn] {
    height: 100%;
    border-radius: 1rem;
    transition: width 0.35s ease, background-color 0.35s ease;
}

.rentabilidad-barra-danger[b-oxtpf0ucmn] {
    background-color: var(--danger);
}

.rentabilidad-barra-warning[b-oxtpf0ucmn] {
    background-color: var(--warning);
}

.rentabilidad-barra-success[b-oxtpf0ucmn] {
    background-color: var(--success);
}

@media (max-width: 640.98px) {
    .calculo-precios > div[b-oxtpf0ucmn] {
        margin-bottom: 0.5rem;
    }
}

/* El modal de esta pantalla se retiró: ya no hay ninguno en su marcado. */

/* Miniatura de la foto en el listado. Antes iba con style en línea en cada fila. */
.producto-foto[b-oxtpf0ucmn] {
    height: 40px;
    width: 40px;
    object-fit: cover;
}
/* _content/ContabilidadApp/Components/Pages/Reportes/BalanceGeneral.razor.rz.scp.css */
/*
    Balance General.

    No es un tablero sino un estado financiero: la consulta exacta importa más que la detección de
    patrones, así que las tablas se quedan y no hay nada que graficar. Lo que sí se resuelve acá es
    que los tres totales se vean juntos, que era la única comparación que el documento pide.

    Todo el color sale de los tokens de app.css; no hay un solo literal.
*/

.bg-etiqueta[b-tybgc43fxw] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-4);
}

/* ---------- La ecuación contable ---------- */

.bg-ecuacion[b-tybgc43fxw] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.bg-termino[b-tybgc43fxw] {
    display: flex;
    flex-direction: column;
    flex: 1 1 9rem;
    min-width: 9rem;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--paper);
}

.bg-termino-etiqueta[b-tybgc43fxw] {
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.bg-termino-cifra[b-tybgc43fxw] {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    margin-top: var(--space-1);
}

.bg-operador[b-tybgc43fxw] {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: var(--ink-soft);
    flex: 0 0 auto;
}

/* ---------- Estado del cuadre ---------- */

.bg-estado[b-tybgc43fxw] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 12rem;
    min-width: 12rem;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-weight: 600;
}

.bg-estado.es-cuadrado[b-tybgc43fxw] {
    background-color: var(--success-soft);
    color: var(--success);
}

.bg-estado.es-descuadrado[b-tybgc43fxw] {
    background-color: var(--danger-soft);
    color: var(--danger);
}

/* ---------- Tablas del estado ---------- */

/*
    La columna de código va estrecha y en monoespaciada: es un identificador jerárquico
    (1.1.03.01.01) y alinearlo hace legible la estructura del plan de cuentas de un vistazo.
    Antes iba con style="width:100px" en línea, repetido en las tres tablas.
*/
.bg-codigo[b-tybgc43fxw] {
    width: 8rem;
    white-space: nowrap;
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
}

/* El total de cada sección se separa de las filas: es un cierre, no una fila más. */
.bg-total[b-tybgc43fxw] {
    text-align: right;
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line-strong);
    color: var(--ink);
}

@media (max-width: 767.98px) {
    .bg-operador[b-tybgc43fxw] {
        display: none;
    }

    .bg-termino[b-tybgc43fxw],
    .bg-estado[b-tybgc43fxw] {
        flex-basis: 100%;
    }
}
/* _content/ContabilidadApp/Components/Pages/Reportes/ReporteCompras.razor.rz.scp.css */
/*
    Reporte de compras.

    La cifra que manda es una proporción, no un monto: el reporte existe para decir qué parte de la
    compra va sin respaldo. Por eso el porcentaje toma el tamaño y la barra lo hace comparable de un
    vistazo. Todo el color sale de los tokens de app.css; no hay un solo literal acá.
*/

.rc-etiqueta[b-2dzqtsm7vn] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-3);
}

/* ---------- La proporción, la cifra que manda ---------- */

.rc-principal[b-2dzqtsm7vn] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rc-cifra[b-2dzqtsm7vn] {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

/* Pasado el umbral el color acompaña a la frase que lo explica; nunca la reemplaza. */
.rc-cifra.es-alta[b-2dzqtsm7vn] {
    color: var(--warning);
}

.rc-sub[b-2dzqtsm7vn] {
    font-size: 0.875rem;
    color: var(--ink-soft);
    margin: var(--space-2) 0 0;
}

.rc-nota[b-2dzqtsm7vn] {
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

.rc-nota.es-alerta[b-2dzqtsm7vn] {
    color: var(--warning);
    font-weight: 600;
}

/* ---------- La barra de reparto ---------- */

.rc-barra[b-2dzqtsm7vn] {
    position: relative;
    display: flex;
    height: 1.25rem;
    background-color: var(--line);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.rc-barra-sin[b-2dzqtsm7vn] {
    background-color: var(--ink-soft);
}

.rc-barra-sin.es-alta[b-2dzqtsm7vn] {
    background-color: var(--warning);
}

.rc-barra-con[b-2dzqtsm7vn] {
    background-color: var(--success);
}

/* La marca del umbral va sobre la barra para no tener que comparar el porcentaje de memoria.
   Es un tono oscuro que se distingue sobre los dos tramos, sean cuales sean sus anchos. */
.rc-barra-umbral[b-2dzqtsm7vn] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--ink);
}

/* ---------- La leyenda ---------- */

.rc-leyenda[b-2dzqtsm7vn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.rc-leyenda-item[b-2dzqtsm7vn] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: var(--space-2);
    flex: 1 1 9rem;
    min-width: 9rem;
}

.rc-punto[b-2dzqtsm7vn] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-pill);
    grid-row: 1;
}

.rc-punto-sin[b-2dzqtsm7vn] {
    background-color: var(--ink-soft);
}

.rc-punto-sin.es-alta[b-2dzqtsm7vn] {
    background-color: var(--warning);
}

.rc-punto-con[b-2dzqtsm7vn] {
    background-color: var(--success);
}

.rc-leyenda-etiqueta[b-2dzqtsm7vn] {
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.rc-leyenda-cifra[b-2dzqtsm7vn] {
    grid-column: 2;
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: var(--space-1);
}

.rc-leyenda-pie[b-2dzqtsm7vn] {
    grid-column: 2;
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-top: var(--space-1);
}

/* El total no es una porción de la barra: sin punto de color, para no leerse como un tercer tramo. */
.rc-leyenda-item.es-total[b-2dzqtsm7vn] {
    grid-template-columns: 1fr;
}

.rc-leyenda-item.es-total .rc-leyenda-cifra[b-2dzqtsm7vn],
.rc-leyenda-item.es-total .rc-leyenda-pie[b-2dzqtsm7vn] {
    grid-column: 1;
}

/* ---------- El filtro de la tabla ---------- */

.rc-filtro[b-2dzqtsm7vn] {
    max-width: 16rem;
}

.rc-aviso[b-2dzqtsm7vn] {
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin: var(--space-3) 0 0;
}
/* _content/ContabilidadApp/Components/Pages/Reportes/ReporteGastos.razor.rz.scp.css */
/*
    Barras de composición del gasto por categoría.

    Es una comparación ordenada: la longitud se decodifica de un vistazo, cosa que una columna de
    números no permite. Todo el color sale de los tokens de app.css.
*/

.gastos-categorias[b-od99dcolmp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.gastos-categoria-fila[b-od99dcolmp] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.gastos-categoria-monto[b-od99dcolmp] {
    white-space: nowrap;
    font-weight: 600;
}

.gastos-barra[b-od99dcolmp] {
    height: 0.5rem;
    background-color: var(--line);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.gastos-barra-relleno[b-od99dcolmp] {
    height: 100%;
    background-color: var(--color-primario);
    border-radius: var(--radius-pill);
}

/* ---------- El total, la cifra que manda ---------- */

.gastos-etiqueta[b-od99dcolmp] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-3);
}

.gastos-principal[b-od99dcolmp] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gastos-cifra[b-od99dcolmp] {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

.gastos-sub[b-od99dcolmp] {
    font-size: 0.875rem;
    color: var(--ink-soft);
    margin: var(--space-2) 0 0;
}

.gastos-nota[b-od99dcolmp] {
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}
/* _content/ContabilidadApp/Components/Pages/Reportes/ReporteRentabilidadReal.razor.rz.scp.css */
/*
    Ganancias declaradas vs no declaradas.

    Mismo lenguaje visual que el desglose del panel principal: la ecuación se lee de izquierda a
    derecha con los operadores a la vista, en vez de tres tarjetas sueltas que el lector tiene que
    relacionar por su cuenta. Todo el color sale de los tokens de app.css.
*/

.rr-etiqueta[b-osmj0bdroo] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-4);
}

.rr-ecuacion[b-osmj0bdroo] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.rr-termino[b-osmj0bdroo] {
    display: flex;
    flex-direction: column;
    flex: 1 1 11rem;
    min-width: 11rem;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--paper);
}

.rr-termino-etiqueta[b-osmj0bdroo] {
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.rr-termino-cifra[b-osmj0bdroo] {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    margin-top: var(--space-1);
}

.rr-termino-pie[b-osmj0bdroo] {
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-top: var(--space-1);
}

/* El impuesto se marca porque es lo que hay que restar, no porque sea un error:
   fondo suave, sin gritar. */
.rr-termino.es-impuesto[b-osmj0bdroo] {
    background-color: var(--warning-soft);
}

.rr-termino.es-impuesto .rr-termino-cifra[b-osmj0bdroo] {
    color: var(--warning);
}

/* El resultado es la cifra que el reporte existe para dar: lleva el peso. */
.rr-termino.es-resultado[b-osmj0bdroo] {
    background-color: var(--success-soft);
    box-shadow: inset 3px 0 0 0 var(--success);
}

.rr-termino.es-resultado .rr-termino-cifra[b-osmj0bdroo] {
    color: var(--success);
    font-size: 1.75rem;
}

.rr-operador[b-osmj0bdroo] {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: var(--ink-soft);
    flex: 0 0 auto;
}

/* Apilado, el operador entre bloques deja de orientar y estorba. */
@media (max-width: 767.98px) {
    .rr-operador[b-osmj0bdroo] {
        display: none;
    }

    .rr-termino[b-osmj0bdroo] {
        flex-basis: 100%;
    }
}

/* ---------- Comparación con el período anterior ---------- */

.rr-comparacion[b-osmj0bdroo] {
    font-size: 0.875rem;
    font-weight: 600;
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

.rr-comparacion.es-mejor[b-osmj0bdroo] {
    color: var(--success);
}

.rr-comparacion.es-peor[b-osmj0bdroo] {
    color: var(--danger);
}

/* Sin token de información fuerte en el proyecto: el estado neutro usa el gris cálido
   que ya existe, en vez de inventar un hex. */
.rr-comparacion.es-neutra[b-osmj0bdroo] {
    color: var(--ink-soft);
    font-weight: 400;
}

.rr-comparacion-periodo[b-osmj0bdroo] {
    font-weight: 400;
    color: var(--ink-soft);
}
/* _content/ContabilidadApp/Components/Pages/Reportes/ReporteVentas.razor.rz.scp.css */
/*
    Reporte de ventas.

    Mismo lenguaje que el panel principal y el reporte de rentabilidad: la cifra que manda toma
    tamaño y el resto se escribe como la operación que la produce, con los operadores a la vista.
    Todo el color sale de los tokens de app.css; no hay un solo literal acá.
*/

.rv-etiqueta[b-h7va2hco57] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-3);
}

/* ---------- El total, la cifra que manda ---------- */

.rv-total[b-h7va2hco57] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rv-cifra[b-h7va2hco57] {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

.rv-sub[b-h7va2hco57] {
    font-size: 0.875rem;
    color: var(--ink-soft);
    margin: var(--space-2) 0 0;
}

.rv-nota[b-h7va2hco57] {
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

/* Lo pendiente se marca porque es plata que todavía no entró, no porque sea un error. */
.rv-nota.es-pendiente strong[b-h7va2hco57] {
    color: var(--warning);
}

/* ---------- El desglose de la suma ---------- */

.rv-desglose[b-h7va2hco57] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.rv-termino[b-h7va2hco57] {
    display: flex;
    flex-direction: column;
    flex: 1 1 9rem;
    min-width: 9rem;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--paper);
}

.rv-termino-etiqueta[b-h7va2hco57] {
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.rv-termino-cifra[b-h7va2hco57] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: var(--space-1);
}

.rv-termino-pie[b-h7va2hco57] {
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-top: var(--space-1);
}

/* El resultado cierra la suma y por eso lleva el peso del bloque. */
.rv-termino.es-resultado .rv-termino-cifra[b-h7va2hco57] {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
}

.rv-operador[b-h7va2hco57] {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: var(--ink-soft);
    flex: 0 0 auto;
}

/* Apilado, el operador entre bloques deja de orientar y estorba. */
@media (max-width: 767.98px) {
    .rv-operador[b-h7va2hco57] {
        display: none;
    }

    .rv-termino[b-h7va2hco57] {
        flex-basis: 100%;
    }
}
/* _content/ContabilidadApp/Components/Pages/Tiendas/Tiendas.razor.rz.scp.css */
/*
    Marco del logo. Reserva su alto aunque la tienda no tenga logo cargado, para que la tarjeta no
    salte de tamaño al subir o quitar uno. Las medidas vivían como style="" en el marcado.
*/
.tiendas-logo[b-3cikrpdu2w] {
    min-height: 100px;
}

.tiendas-logo-img[b-3cikrpdu2w] {
    max-height: 100px;
    max-width: 100%;
}
/* _content/ContabilidadApp/Components/Shared/AsistenteContable.razor.rz.scp.css */
.asistente[b-5w4wvwxbay] {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1055;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.asistente-burbuja[b-5w4wvwxbay] {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: none;
    background: var(--color-primario-fuerte);
    color: var(--surface);
    font-size: 1.35rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.35rem 1rem var(--shadow-lg-color);
    align-self: flex-end;
    flex: none;
}

.asistente-burbuja:hover[b-5w4wvwxbay] {
    background: var(--color-primario-fuerte-hover);
}

.asistente-panel[b-5w4wvwxbay] {
    width: min(24rem, calc(100vw - 2.5rem));
    height: min(32rem, calc(100vh - 8rem));
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 2rem var(--shadow-lg-color);
    overflow: hidden;
}

.asistente-cabecera[b-5w4wvwxbay] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.asistente-subtitulo[b-5w4wvwxbay] {
    display: block;
    font-size: 0.7rem;
    color: var(--ink-soft);
}

.asistente-cerrar[b-5w4wvwxbay] {
    background: none;
    border: none;
    color: var(--ink-soft);
    line-height: 1;
    padding: 0.125rem;
    flex: none;
}

.asistente-cerrar:hover[b-5w4wvwxbay] {
    color: var(--ink);
}

.asistente-mensajes[b-5w4wvwxbay] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.asistente-vacio[b-5w4wvwxbay] {
    color: var(--ink-soft);
    font-size: 0.8125rem;
    margin: auto 0;
    text-align: center;
}

.asistente-vacio p[b-5w4wvwxbay] {
    margin-bottom: 0.5rem;
}

.asistente-ejemplos[b-5w4wvwxbay] {
    font-style: italic;
    font-size: 0.75rem;
}

.asistente-mensaje[b-5w4wvwxbay] {
    max-width: 88%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.es-usuario[b-5w4wvwxbay] {
    align-self: flex-end;
    background: var(--color-primario-fuerte);
    color: var(--surface);
    border-bottom-right-radius: 0.25rem;
    /* Lo que escribe el usuario va sin interpretar, así que sus saltos hay que respetarlos. */
    white-space: pre-wrap;
}

.es-asistente[b-5w4wvwxbay] {
    align-self: flex-start;
    background: var(--paper);
    color: var(--ink);
    border-bottom-left-radius: 0.25rem;
}

/* La respuesta del asistente entra como HTML ya generado desde markdown. Va con ::deep porque
   el aislamiento de CSS no marca el contenido inyectado con MarkupString. */
.es-asistente[b-5w4wvwxbay]  p {
    margin: 0 0 0.5rem;
}

.es-asistente[b-5w4wvwxbay]  p:last-child,
.es-asistente[b-5w4wvwxbay]  ul:last-child,
.es-asistente[b-5w4wvwxbay]  ol:last-child,
.es-asistente[b-5w4wvwxbay]  table:last-child {
    margin-bottom: 0;
}

/* El modelo usa # y ## para separar pasos; en una burbuja de chat un h1 gigante desentona. */
.es-asistente[b-5w4wvwxbay]  h1,
.es-asistente[b-5w4wvwxbay]  h2,
.es-asistente[b-5w4wvwxbay]  h3,
.es-asistente[b-5w4wvwxbay]  h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.75rem 0 0.35rem;
}

.es-asistente[b-5w4wvwxbay]  h1:first-child,
.es-asistente[b-5w4wvwxbay]  h2:first-child,
.es-asistente[b-5w4wvwxbay]  h3:first-child {
    margin-top: 0;
}

.es-asistente[b-5w4wvwxbay]  ul,
.es-asistente[b-5w4wvwxbay]  ol {
    margin: 0 0 0.5rem;
    padding-left: 1.15rem;
}

.es-asistente[b-5w4wvwxbay]  li {
    margin-bottom: 0.15rem;
}

/* Los asientos vienen como tabla. Sin scroll propio, una tabla ancha estira la burbuja. */
.es-asistente[b-5w4wvwxbay]  table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
}

.es-asistente[b-5w4wvwxbay]  th,
.es-asistente[b-5w4wvwxbay]  td {
    border: 1px solid var(--line);
    padding: 0.2rem 0.4rem;
    text-align: left;
    vertical-align: top;
}

.es-asistente[b-5w4wvwxbay]  th {
    background: var(--line);
    font-weight: 600;
    white-space: nowrap;
}

.es-asistente[b-5w4wvwxbay]  code {
    background: var(--line);
    border-radius: 0.2rem;
    padding: 0.05rem 0.25rem;
    font-size: 0.9em;
}

.es-asistente[b-5w4wvwxbay]  pre {
    background: var(--line);
    border-radius: 0.35rem;
    padding: 0.4rem 0.5rem;
    overflow-x: auto;
    margin: 0 0 0.5rem;
}

.es-asistente[b-5w4wvwxbay]  pre code {
    background: none;
    padding: 0;
}

.es-asistente[b-5w4wvwxbay]  a {
    color: var(--color-primario-fuerte);
}

.es-asistente[b-5w4wvwxbay]  blockquote {
    margin: 0 0 0.5rem;
    padding-left: 0.6rem;
    border-left: 3px solid var(--line-strong);
    color: var(--ink);
}

.asistente-pensando[b-5w4wvwxbay] {
    color: var(--ink-soft);
    font-style: italic;
}

.asistente-error[b-5w4wvwxbay] {
    align-self: stretch;
    background: var(--danger-soft);
    color: var(--danger);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

.asistente-entrada[b-5w4wvwxbay] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--line);
}

.asistente-entrada input[b-5w4wvwxbay] {
    flex: 1 1 auto;
}

@media (max-width: 575.98px) {
    .asistente[b-5w4wvwxbay] {
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .asistente-panel[b-5w4wvwxbay] {
        width: calc(100vw - 1.5rem);
        height: min(30rem, calc(100vh - 6rem));
    }
}
/* _content/ContabilidadApp/Components/Shared/DataTableLuque.razor.rz.scp.css */
/*
    Estilos de DataTableLuque.

    Todo el color sale de los tokens de app.css; no hay un solo literal acá.

    Las celdas que pone la pantalla (th, td) se declaran en el archivo del consumidor, así que
    llevan SU identificador de scope y no el nuestro. Por eso se llega a ellas con ::deep.
*/

/*
    Sin overflow: hidden a propósito. Recortaría el anillo de foco, que es un box-shadow de
    0.25rem hacia afuera, en los botones pegados al borde de la tarjeta. El redondeo de las
    esquinas superiores se resuelve más abajo, solo cuando la tabla es lo primero de la tarjeta.
*/
.dtl[b-gf3wygl4ta] {
    position: relative;
}

/* ---------- Cabecera ---------- */

.dtl-cabecera[b-gf3wygl4ta] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4);
}

.dtl-titulo[b-gf3wygl4ta] {
    margin: 0;
}

.dtl-cabecera-acciones[b-gf3wygl4ta] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ---------- Filtros ---------- */

.dtl-filtros[b-gf3wygl4ta] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    padding: var(--space-4);
}

/* Si vienen debajo de la cabecera, esta ya puso el aire de arriba. */
.dtl-cabecera + .dtl-filtros[b-gf3wygl4ta] {
    padding-top: 0;
}

/*
    Los controles del filtro no se estiran a todo el ancho: una caja de búsqueda de 1200px es
    incómoda de leer. Así las pantallas no necesitan un style="max-width" en línea.
*/
.dtl-filtros[b-gf3wygl4ta]  .form-control,
.dtl-filtros[b-gf3wygl4ta]  .form-select {
    max-width: 20rem;
}

/* ---------- Tabla ---------- */

.dtl-scroll[b-gf3wygl4ta] {
    overflow-x: auto;
}

.dtl-tabla[b-gf3wygl4ta] {
    width: 100%;
    border-collapse: collapse;
}

.dtl-tabla[b-gf3wygl4ta]  thead th {
    background-color: var(--paper);
    /* --ink y no --ink-soft: sobre --paper, el gris atenuado da 3.4:1 y no llega al 4.5:1 de AA. */
    color: var(--ink);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line-strong);
}

.dtl-tabla[b-gf3wygl4ta]  tbody td {
    color: var(--ink);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
}

/* La última fila no dibuja borde: ya lo pone el borde de la tarjeta. */
.dtl-tabla[b-gf3wygl4ta]  tbody tr:last-child td {
    border-bottom: 0;
}

.dtl-tabla[b-gf3wygl4ta]  tbody tr.dtl-fila:hover {
    background-color: var(--paper);
}

/*
    Fila de totales. Cierra la tabla con el mismo peso que la abre el encabezado, para que se lea
    como el resumen de la columna que tiene encima y no como una fila más del listado.

    El separador lo pone su propio borde superior: la última fila del cuerpo no dibuja borde, así
    que no hay línea doble.
*/
.dtl-tabla[b-gf3wygl4ta]  tfoot td {
    background-color: var(--paper);
    color: var(--ink);
    font-weight: 700;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line-strong);
}

/* Cuando la tabla es lo primero de la tarjeta, la cabecera hereda el redondeo y suelta su
   borde superior, que si no se duplicaría con el de la tarjeta. */
.dtl-scroll:first-child[b-gf3wygl4ta]  thead th {
    border-top: 0;
}

.dtl-scroll:first-child[b-gf3wygl4ta]  thead th:first-child {
    border-top-left-radius: var(--radius-md);
}

.dtl-scroll:first-child[b-gf3wygl4ta]  thead th:last-child {
    border-top-right-radius: var(--radius-md);
}

/* Las cifras alineadas a la derecha ya reciben la monoespaciada desde app.css. */

/* ---------- Columna de acciones ---------- */

.dtl-col-acciones[b-gf3wygl4ta] {
    /* 1% obliga a la columna a encogerse a su contenido. */
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.dtl-acciones[b-gf3wygl4ta] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-1);
}

/* ---------- Columna de despliegue ---------- */

.dtl-col-desplegar[b-gf3wygl4ta] {
    width: 1%;
    white-space: nowrap;
}

.dtl-desplegar[b-gf3wygl4ta] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--ink-soft);
}

.dtl-desplegar:hover[b-gf3wygl4ta] {
    /* La flecha es texto sobre fondo claro: necesita el cognac accesible, no el decorativo. */
    border-color: var(--color-primario-fuerte);
    color: var(--color-primario-fuerte);
}

.dtl-caret[b-gf3wygl4ta] {
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translate(-1px, -1px);
    transition: transform 0.15s ease;
}

.dtl-caret-abierto[b-gf3wygl4ta] {
    transform: rotate(45deg) translate(-1px, -1px);
}

/*
    La fila abierta se marca con una barra lateral, no solo con fondo: el fondo coincidiría con
    el del hover y el estado dejaría de distinguirse al pasar el mouse.
*/
.dtl-fila-abierta[b-gf3wygl4ta] {
    background-color: var(--paper);
}

.dtl-fila-abierta .dtl-col-desplegar[b-gf3wygl4ta] {
    box-shadow: inset 3px 0 0 0 var(--color-primario);
}

.dtl-detalle-fila > .dtl-detalle[b-gf3wygl4ta] {
    padding: var(--space-4);
    background-color: var(--paper);
    border-bottom: 1px solid var(--line);
}

/* ---------- Estado vacío y carga ---------- */

.dtl-vacio[b-gf3wygl4ta],
.dtl-estado[b-gf3wygl4ta] {
    padding: var(--space-7) var(--space-4);
    text-align: center;
    margin: 0;
}

/* --ink y no --ink-soft: es el único texto de la pantalla, tiene que leerse. */
.dtl-vacio-texto[b-gf3wygl4ta],
.dtl-estado[b-gf3wygl4ta] {
    color: var(--ink);
    margin: 0;
}

.dtl-vacio-accion[b-gf3wygl4ta] {
    margin-top: var(--space-4);
}

/* ---------- Pie con paginación ---------- */

.dtl-pie[b-gf3wygl4ta] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line);
}

.dtl-pagina[b-gf3wygl4ta] {
    color: var(--ink);
}

.dtl-pie-botones[b-gf3wygl4ta] {
    display: flex;
    gap: var(--space-2);
}

/* ---------- Foco ---------- */

/*
    El mismo anillo que app.css da a botones y campos, para no inventar otro tratamiento.
    Se declara acá porque estos controles llevan clases propias, y con :focus-visible en vez
    de :focus para que no aparezca al hacer clic con el mouse.
*/
.dtl-scroll:focus-visible[b-gf3wygl4ta],
.dtl-desplegar:focus-visible[b-gf3wygl4ta],
.dtl-pie-botones[b-gf3wygl4ta]  .btn:focus-visible,
.dtl-acciones[b-gf3wygl4ta]  .btn:focus-visible,
.dtl-acciones[b-gf3wygl4ta]  a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.1rem var(--surface), 0 0 0 0.25rem var(--color-terciario);
}

/*
    En modo de alto contraste de Windows las sombras no se pintan, así que el anillo
    desaparecería. Ahí se cae a un contorno del sistema.
*/
@media (forced-colors: active) {
    .dtl-scroll:focus-visible[b-gf3wygl4ta],
    .dtl-desplegar:focus-visible[b-gf3wygl4ta],
    .dtl-pie-botones[b-gf3wygl4ta]  .btn:focus-visible,
    .dtl-acciones[b-gf3wygl4ta]  .btn:focus-visible,
    .dtl-acciones[b-gf3wygl4ta]  a:focus-visible {
        outline: 2px solid;
        outline-offset: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dtl-caret[b-gf3wygl4ta] {
        transition: none;
    }
}

/* ---------- Pantallas angostas ---------- */

@media (max-width: 640.98px) {
    .dtl-cabecera[b-gf3wygl4ta],
    .dtl-filtros[b-gf3wygl4ta],
    .dtl-pie[b-gf3wygl4ta] {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .dtl-tabla[b-gf3wygl4ta]  thead th,
    .dtl-tabla[b-gf3wygl4ta]  tbody td {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .dtl-pie[b-gf3wygl4ta] {
        justify-content: center;
    }
}
/* _content/ContabilidadApp/Components/Shared/RangoFechas.razor.rz.scp.css */
.rango-fechas[b-f0lhe9g6ky] {
    position: relative;
    display: inline-block;
}

.rango-fechas-boton[b-f0lhe9g6ky] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}

.rango-fechas-texto[b-f0lhe9g6ky] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.rango-fechas-preset[b-f0lhe9g6ky] {
    font-weight: 600;
    font-size: 0.875rem;
}

.rango-fechas-subtitulo[b-f0lhe9g6ky] {
    font-size: 0.75rem;
    color: var(--ink-soft);
}

/* Capa transparente a pantalla completa: cierra el panel al hacer clic afuera
   sin que el panel afecte el flujo de la página. */
.rango-fechas-clickfuera[b-f0lhe9g6ky] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.rango-fechas-panel[b-f0lhe9g6ky] {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 1050;
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem var(--shadow-md-color);
    max-width: calc(100vw - 2rem);
    overflow: auto;
}

.rango-fechas-lista[b-f0lhe9g6ky] {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

.rango-fechas-lista button[b-f0lhe9g6ky] {
    background: none;
    border: none;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--ink);
    white-space: nowrap;
}

.rango-fechas-lista button:hover[b-f0lhe9g6ky] {
    background: var(--paper);
}

.rango-fechas-lista button.activo[b-f0lhe9g6ky] {
    background: var(--info-soft);
    /* El texto va en --ink y no en el cognac de marca: cognac sobre --info-soft da 2.39:1, muy por
       debajo del 4.5:1 que pide AA. El estado activo ya se distingue por el fondo y la negrita, que
       no dependen de acertar el color. */
    color: var(--ink);
    font-weight: 600;
}

.rango-fechas-calendario[b-f0lhe9g6ky] {
    border-left: 1px solid var(--line);
    padding: 0.75rem;
}

.rf-nav[b-f0lhe9g6ky] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rf-nav-btn[b-f0lhe9g6ky] {
    background: none;
    border: 1px solid var(--line);
    border-radius: 0.375rem;
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1;
    font-size: 1.1rem;
    color: var(--ink);
    flex: none;
}

.rf-nav-btn:hover[b-f0lhe9g6ky] {
    background: var(--paper);
}

.rf-nav-ayuda[b-f0lhe9g6ky] {
    font-size: 0.75rem;
    color: var(--ink-soft);
    text-align: center;
    flex: 1 1 auto;
}

.rf-meses[b-f0lhe9g6ky] {
    display: flex;
    gap: 1rem;
}

.rf-mes-titulo[b-f0lhe9g6ky] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.375rem;
}

.rf-cuadricula[b-f0lhe9g6ky] {
    display: grid;
    grid-template-columns: repeat(7, 2rem);
    gap: 0.125rem;
}

.rf-dia-cabecera[b-f0lhe9g6ky] {
    font-size: 0.6875rem;
    color: var(--ink-soft);
    text-align: center;
    line-height: 1.75rem;
}

.rf-dia[b-f0lhe9g6ky] {
    background: none;
    border: none;
    height: 1.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ink);
    padding: 0;
    font-variant-numeric: tabular-nums;
}

.rf-dia:hover:not(.rf-fuera)[b-f0lhe9g6ky] {
    background: var(--paper);
}

.rf-fuera[b-f0lhe9g6ky] {
    visibility: hidden;
}

.rf-en-rango[b-f0lhe9g6ky] {
    background: var(--info-soft);
}

.rf-extremo[b-f0lhe9g6ky] {
    background: var(--color-primario-fuerte);
    color: var(--surface);
    font-weight: 600;
}

.rf-extremo:hover[b-f0lhe9g6ky] {
    background: var(--color-primario-fuerte-hover);
}

/* El anillo que marca el día de hoy es un indicador de interfaz: pide 3:1 y el cognac claro
   se queda en 2.97:1 sobre blanco. */
.rf-hoy:not(.rf-extremo)[b-f0lhe9g6ky] {
    box-shadow: inset 0 0 0 1px var(--color-primario-fuerte);
}

@media (max-width: 767.98px) {
    .rango-fechas-panel[b-f0lhe9g6ky] {
        flex-direction: column;
    }

    .rango-fechas-calendario[b-f0lhe9g6ky] {
        border-left: none;
        border-top: 1px solid var(--line);
    }

    .rf-meses[b-f0lhe9g6ky] {
        flex-direction: column;
    }
}