/* _content/ContabilidadApp/Components/Layout/MainLayout.razor.rz.scp.css */
/* Migrado a los tokens de app.css. No queda ningún literal. */

.page[b-lajgqfwlvs] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

.sidebar[b-lajgqfwlvs] {
    background-image: linear-gradient(180deg, var(--color-primario) 0%, var(--surface-dark) 100%);
}

.top-row[b-lajgqfwlvs] {
    background-color: var(--paper);
    border-bottom: 1px solid var(--color-terciario);
    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: var(--space-lg);
        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: var(--space-xl) !important;
        padding-right: var(--space-lg) !important;
    }
}

/* El relleno era 0.6rem arriba y 0.7rem abajo, una asimetría de 1.6px que no parece
   intencional: queda simétrico en la escala. */
#blazor-error-ui[b-lajgqfwlvs] {
    background: var(--warning-soft);
    bottom: 0;
    box-shadow: var(--shadow-up);
    display: none;
    left: 0;
    padding: var(--space-sm) var(--space-md);
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-lajgqfwlvs] {
        cursor: pointer;
        position: absolute;
        right: var(--space-sm);
        top: var(--space-xs);
    }
/* _content/ContabilidadApp/Components/Layout/NavMenu.razor.rz.scp.css */
/* Migrado a los tokens de app.css.

   Esta es la única superficie oscura del sistema, de ahí los tokens nuevos
   --surface-dark, --ink-inverse e --ink-inverse-soft.

   Los blancos translúcidos se derivan de --surface con color-mix en vez de escribirse a
   mano, igual que el velo de los modales. Lo único que queda literal son los `fill` y
   `stroke` dentro de los data URI de los iconos: no se puede usar var() dentro de una
   url(), habría que sacarlos a archivos .svg para tokenizarlos. */

.navbar-toggler[b-d0linaep9r] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--ink-inverse);
    position: absolute;
    top: var(--space-xs);
    right: var(--space-md);
    border: 1px solid color-mix(in srgb, var(--surface) 10%, transparent);
    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 color-mix(in srgb, var(--surface) 10%, transparent);
}

.navbar-toggler:checked[b-d0linaep9r] {
    background-color: color-mix(in srgb, var(--surface) 50%, transparent);
}

.top-row[b-d0linaep9r] {
    height: 3.5rem;
    background-color: color-mix(in srgb, var(--ink) 40%, transparent);
}

.navbar-brand[b-d0linaep9r] {
    font-size: var(--fs-lg);
}

.bi[b-d0linaep9r] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: var(--space-sm);
    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: var(--fs-sm);
    padding-bottom: var(--space-xs);
}

    .nav-item:first-of-type[b-d0linaep9r] {
        padding-top: var(--space-md);
    }

    .nav-item:last-of-type[b-d0linaep9r] {
        padding-bottom: var(--space-md);
    }

    .nav-item[b-d0linaep9r]  .nav-link {
        color: var(--ink-inverse);
        background: none;
        border: none;
        border-radius: var(--radius-sm);
        min-height: 3rem;
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        line-height: 1.3;
        padding-top: var(--space-2xs);
        padding-bottom: var(--space-2xs);
        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: var(--space-sm);
}

.nav-group-label[b-d0linaep9r] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: var(--fs-sm);
}

.nav-group-caret[b-d0linaep9r] {
    font-size: var(--fs-xs);
    opacity: 0.75;
}

.nav-sub-item[b-d0linaep9r] {
    position: relative;
    margin-left: var(--space-lg);
    padding-left: var(--space-md);
    border-left: 2px solid color-mix(in srgb, var(--surface) 15%, transparent);
}

    .nav-sub-item[b-d0linaep9r]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 1.4rem;
        width: var(--space-sm);
        height: 2px;
        background: color-mix(in srgb, var(--surface) 15%, transparent);
    }

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

/* El activo usaba --color-secundario de fondo con texto blanco: 3,76:1, por debajo del
   mínimo AA, y ningún color de texto lo salvaba. Con la variante oscura sube a 5,19:1.
   Es el elemento que indica dónde estás parado, así que tiene que leerse. */
.nav-item[b-d0linaep9r]  a.active {
    background-color: var(--color-secundario-hover);
    color: var(--surface);
}

.nav-item[b-d0linaep9r]  .nav-link:hover {
    background-color: color-mix(in srgb, var(--color-terciario) 25%, transparent);
    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 */
/* Migrado a los tokens de app.css.

   Este bloque de modal está duplicado en 8 archivos con divergencias que parecen
   accidentales (velo al 0,45 o al 0,5, radio 0.6rem o 0.5rem, desenfoque 1.5rem o
   2rem). Al pasar a tokens las cuatro variantes convergen solas. Lo que queda distinto
   entre archivos es el max-width, que sí es intencional.

   El velo no tiene token: se deriva de --ink con color-mix, igual que en
   DataTableLuque, para que todos los overlays de la aplicación sean el mismo color. */

.modal-overlay[b-cem1o1xpd0] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: var(--space-md);
}

.modal-card[b-cem1o1xpd0] {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
/* _content/ContabilidadApp/Components/Pages/Compras/RecepcionMercaderia.razor.rz.scp.css */
/* Migrado a los tokens de app.css.

   Este bloque de modal está duplicado en 8 archivos con divergencias que parecen
   accidentales (velo al 0,45 o al 0,5, radio 0.6rem o 0.5rem, desenfoque 1.5rem o
   2rem). Al pasar a tokens las cuatro variantes convergen solas. Lo que queda distinto
   entre archivos es el max-width, que sí es intencional.

   El velo no tiene token: se deriva de --ink con color-mix, igual que en
   DataTableLuque, para que todos los overlays de la aplicación sean el mismo color. */

.modal-overlay[b-xj9iupe4b0] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: var(--space-md);
}

.modal-card[b-xj9iupe4b0] {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
/* _content/ContabilidadApp/Components/Pages/Facturacion/NuevaFactura.razor.rz.scp.css */
/* Migrado a los tokens de app.css.

   Este bloque de modal está duplicado en 8 archivos con divergencias que parecen
   accidentales (velo al 0,45 o al 0,5, radio 0.6rem o 0.5rem, desenfoque 1.5rem o
   2rem). Al pasar a tokens las cuatro variantes convergen solas. Lo que queda distinto
   entre archivos es el max-width, que sí es intencional.

   El velo no tiene token: se deriva de --ink con color-mix, igual que en
   DataTableLuque, para que todos los overlays de la aplicación sean el mismo color. */

.modal-overlay-backdrop[b-33z1h967rl] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: var(--space-md);
}

.modal-overlay-card[b-33z1h967rl] {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    max-width: 700px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
/* _content/ContabilidadApp/Components/Pages/Home.razor.rz.scp.css */
/* Todo sale de los tokens de app.css. Ni un hex, ni un radio, ni una sombra literal. */

/* El h1 llevaba margin:0 y se metía debajo de la barra superior fija. Lleva su margen
   de vuelta, en la unidad de la escala. */
.cabecera[b-0ul072h5tu] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-md);
    margin: var(--space-sm) 0 var(--space-md);
}

.cabecera h1[b-0ul072h5tu] {
    margin: 0;
}

.cabecera-tienda[b-0ul072h5tu] {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

/* ---------- Franja de indicadores ---------- */

/* Antes eran cuatro .card de Bootstrap con border-success, border-danger, border-primary
   y border-warning, más el número coloreado a juego. Cuatro colores saturados encendidos
   siempre significan que ninguno gana; ahora son neutras y el color aparece solo cuando
   algo se sale de lo normal. */
.kpis[b-0ul072h5tu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.kpi[b-0ul072h5tu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.kpi-etiqueta[b-0ul072h5tu] {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

/* Cifra y variación en la misma línea de base, con la variación al borde derecho: así
   el ancho de la tarjeta trabaja en vez de quedar en blanco. */
.kpi-linea[b-0ul072h5tu] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-xs);
}

.kpi-cifra[b-0ul072h5tu] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}

.kpi-marca[b-0ul072h5tu] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}

.kpi-marca.es-bien[b-0ul072h5tu] {
    color: var(--success);
}

.kpi-marca.es-mal[b-0ul072h5tu] {
    color: var(--warning);
}

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

.kpi-cifra.es-al-dia[b-0ul072h5tu] {
    color: var(--success);
}

/* La ventana temporal va pegada a la cifra que califica. Antes estaba solo en el
   subtítulo de la página, y "Facturas pendientes" —que es acumulado— quedaba en una
   fila rotulada "mes actual" sin que nada lo advirtiera. */
.kpi-ventana[b-0ul072h5tu] {
    font-size: var(--fs-xs);
    color: var(--ink-soft);
    line-height: 1.3;
}

/* ---------- Excepciones ---------- */

/* Todo en orden ocupa una línea, no media pantalla. La versión anterior dedicaba el
   panel más ancho del tablero a una tabla vacía diciendo que no había nada: con el
   estado tranquilo gritando, lo que sí requiere atención dejaba de destacar. */
.todo-en-orden[b-0ul072h5tu] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0 0 var(--space-lg);
    padding: var(--space-xs) var(--space-md);
    background-color: var(--success-soft);
    border: 1px solid var(--success);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    /* El texto va en --ink: --success sobre --success-soft da 4,14:1 y no llega al
       minimo AA. El verde se queda en el borde y en el icono, que como objetos
       graficos solo necesitan 3:1. */
    color: var(--ink);
}

/* El icono lo dibuja Icon.razor, sin CSS aislado propio: no lleva el atributo de
   ambito de esta pagina, asi que hay que alcanzarlo con ::deep. */
.todo-en-orden[b-0ul072h5tu]  .ico {
    color: var(--success);
    flex: none;
}

/* Solo se dibujan las que tienen algo, así que la rejilla nunca queda con un hueco:
   con una sola alerta ocupa el ancho completo, con dos se reparten. */
.alertas[b-0ul072h5tu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    align-items: start;
}

.alerta[b-0ul072h5tu] {
    min-width: 0;
}

/* ---------- Actividad ---------- */

/* El nombre del cliente es lo que más varía de largo: se lleva el espacio sobrante para
   que no se parta en dos líneas mientras el resto de la tabla va holgada. */
.col-ancha[b-0ul072h5tu] {
    width: 100%;
}

.accesos[b-0ul072h5tu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}
/* _content/ContabilidadApp/Components/Pages/Inventario/NuevoProducto.razor.rz.scp.css */
/* Migrado a los tokens de app.css.

   Este bloque de modal está duplicado en 8 archivos con divergencias que parecen
   accidentales (velo al 0,45 o al 0,5, radio 0.6rem o 0.5rem, desenfoque 1.5rem o
   2rem). Al pasar a tokens las cuatro variantes convergen solas. Lo que queda distinto
   entre archivos es el max-width, que sí es intencional.

   El velo no tiene token: se deriva de --ink con color-mix, igual que en
   DataTableLuque, para que todos los overlays de la aplicación sean el mismo color. */

.modal-overlay[b-foadit04jb] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: var(--space-md);
}

.modal-card[b-foadit04jb] {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
/* _content/ContabilidadApp/Components/Pages/Inventario/Productos.razor.rz.scp.css */
/* Migrado a los tokens de app.css.

   El semáforo de rentabilidad usaba el rojo/ámbar/verde de Bootstrap, más saturados que
   los semánticos de la marca. Pasan a --danger, --warning y --success, y sus fondos
   translúcidos se derivan del mismo token con color-mix en vez de repetir el rgba() a
   mano: así el velo sigue al color si el token cambia.

   Las barras conservan sus alfas originales (8%, 12%, 10%). Contra --line, que es el
   fondo del riel, dan 4,52:1, 3,58:1 y 3,85:1 — por encima del 3:1 que pide un objeto
   gráfico. */

.producto-card[b-oxtpf0ucmn] {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.producto-card .card-title[b-oxtpf0ucmn] {
    color: var(--color-primario);
    font-size: var(--fs-md);
    margin-bottom: var(--space-md);
}

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

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

.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: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--paper);
    transition: background-color 0.35s ease;
}

/* El punto y el alto de la barra son dimensiones del indicador, no espaciado. */
.rentabilidad-dot[b-oxtpf0ucmn] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
}

.rentabilidad-danger[b-oxtpf0ucmn] {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.rentabilidad-warning[b-oxtpf0ucmn] {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.rentabilidad-success[b-oxtpf0ucmn] {
    background: color-mix(in srgb, var(--success) 10%, transparent);
}

.rentabilidad-barra-fondo[b-oxtpf0ucmn] {
    width: 100%;
    height: 0.6rem;
    background: var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.rentabilidad-barra-relleno[b-oxtpf0ucmn] {
    height: 100%;
    border-radius: var(--radius-lg);
    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: var(--space-xs);
    }
}

/* No hay token de velo. En vez de escribir un rgba a mano se deriva de --ink, igual que
   en DataTableLuque, para que los dos overlays de la aplicación sean el mismo color. */
.modal-overlay[b-oxtpf0ucmn] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-card[b-oxtpf0ucmn] {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
}
/* _content/ContabilidadApp/Components/Pages/Reportes/BalanceGeneral.razor.rz.scp.css */
/* Todo sale de los tokens de app.css. Ni un hex, ni un radio, ni una sombra literal. */

.fecha-corte[b-tybgc43fxw] {
    max-width: 14rem;
    margin-bottom: var(--space-md);
}

/* ---------- Banda de cuadre ---------- */

/* Es la conclusión del reporte y ahora abre la pantalla. Los dos lados de la igualdad
   van uno al lado del otro porque la comparación es entre ellos. */
.cuadre[b-tybgc43fxw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    padding: var(--space-md);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

.cuadre-ok[b-tybgc43fxw] {
    background-color: var(--success-soft);
    border-color: var(--success);
}

.cuadre-mal[b-tybgc43fxw] {
    background-color: var(--danger-soft);
    border-color: var(--danger);
}

.cuadre-totales[b-tybgc43fxw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
}

.cuadre-item[b-tybgc43fxw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.cuadre-etiqueta[b-tybgc43fxw] {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

/* Misma familia y cifras tabulares que las columnas numéricas de las tablas: los dos
   números que hay que comparar tienen que alinear dígito con dígito. */
.cuadre-cifra[b-tybgc43fxw] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
}

.cuadre-signo[b-tybgc43fxw] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--ink-soft);
}

/* El veredicto lleva ícono y texto además del color: quien no distingue rojo de verde
   igual lee "Cuadrado" o "Descuadrado por $X". */
.cuadre-veredicto[b-tybgc43fxw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: 600;
}

/* El texto del veredicto va en --ink en los dos casos: --success sobre --success-soft
   da 4,14:1 y no llega al minimo AA. El color semantico se queda en el icono y en el
   borde de la banda, que ya distinguen el estado junto con el texto.
   El icono lo dibuja Icon.razor, que no tiene CSS aislado y por lo tanto no lleva el
   atributo de ambito de esta pagina: hay que alcanzarlo con ::deep. */
.cuadre-veredicto[b-tybgc43fxw] {
    color: var(--ink);
}

.cuadre-ok[b-tybgc43fxw]  .ico {
    color: var(--success);
}

.cuadre-mal[b-tybgc43fxw]  .ico {
    color: var(--danger);
}

.cuadre-mal .cuadre-veredicto strong[b-tybgc43fxw] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    color: var(--danger);
}

/* ---------- Secciones ---------- */

.secciones[b-tybgc43fxw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* El código de cuenta tiene ancho conocido y no debe partirse; antes esto era un
   style="width:100px" en línea, el único ancho fijo del grupo de reportes. */
.secciones[b-tybgc43fxw]  .col-codigo {
    width: 1%;
    white-space: nowrap;
    font-family: 'IBM Plex Mono', monospace;
}

/* La utilidad del ejercicio no es una cuenta: se distingue del total que la acompaña. */
.secciones[b-tybgc43fxw]  .pie-derivado td {
    font-weight: 400;
    color: var(--ink-soft);
}
/* _content/ContabilidadApp/Components/Pages/Reportes/ReporteCompras.razor.rz.scp.css */
/* Todo sale de los tokens de app.css. Ni un hex, ni un radio, ni una sombra literal.
   Esta pantalla no usa --success, --warning ni --danger: por decisión, la proporción
   sin factura es informativa y no una alarma. */

.reparto[b-2dzqtsm7vn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

.reparto-cifra[b-2dzqtsm7vn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.reparto-etiqueta[b-2dzqtsm7vn] {
    display: block;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

.reparto-porcentaje[b-2dzqtsm7vn] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}

.reparto-pie[b-2dzqtsm7vn] {
    display: block;
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}

/* Dos partes de un todo: la comparación más simple que existe. Se hace con dos div y
   anchos porcentuales, sin librería ni pipeline.
   Los segmentos van en los colores de marca y no en verde y rojo: sin umbral no hay
   bueno ni malo, y pintarlo de rojo sería emitir un juicio que decidimos no emitir. */
.barra[b-2dzqtsm7vn] {
    display: flex;
    width: 100%;
    height: var(--space-sm);
    border-radius: var(--radius-pill);
    overflow: hidden;
    background-color: var(--line);
}

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

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

.reparto-detalle[b-2dzqtsm7vn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: var(--space-sm) var(--space-md);
}

/* La marca de color repite la del segmento de la barra, para no obligar a decodificar
   una leyenda aparte. */
.reparto-item[b-2dzqtsm7vn] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
}

.reparto-marca[b-2dzqtsm7vn] {
    flex: none;
    width: var(--space-sm);
    height: var(--space-sm);
    margin-top: var(--space-2xs);
    border-radius: var(--radius-sm);
}

.marca-con[b-2dzqtsm7vn] {
    background-color: var(--color-primario);
}

.marca-sin[b-2dzqtsm7vn] {
    background-color: var(--color-terciario);
}

.marca-total[b-2dzqtsm7vn] {
    background-color: var(--ink-soft);
}

/* Antes conteo y monto iban fundidos en una línea de texto, con un guión entre medio y
   ambos en negrita: había que decodificar en vez de percibir, y al ir embebidos en
   texto corrido perdían la alineación tabular, así que las tres tarjetas ni siquiera
   alineaban entre sí. */
.reparto-monto[b-2dzqtsm7vn] {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
}

.reparto-nota[b-2dzqtsm7vn] {
    margin: 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--line);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}
/* _content/ContabilidadApp/Components/Pages/Reportes/ReporteGastos.razor.rz.scp.css */
/* Todo sale de los tokens de app.css. Ni un hex, ni un radio, ni una sombra literal. */

.resumen[b-od99dcolmp] {
    margin: 0 0 var(--space-lg);
    padding: var(--space-md);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--ink-soft);
}

.resumen strong[b-od99dcolmp] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xl);
    color: var(--ink);
}

.zonas[b-od99dcolmp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* La barra ocupa una columna propia de la tabla: el ranking se percibe por longitud,
   que es el codificador correcto para comparación cuantitativa, y el porcentaje exacto
   queda en la columna de al lado para quien necesite el número. */
.col-barra[b-od99dcolmp] {
    width: 30%;
    min-width: 6rem;
}

.barra[b-od99dcolmp] {
    width: 100%;
    height: var(--space-xs);
    border-radius: var(--radius-pill);
    overflow: hidden;
    background-color: var(--line);
}

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

/* La variación contra el período anterior es el único codificador de estado de la
   pantalla. Solo se pinta el alza: gastar menos no siempre es buena noticia —puede ser
   una factura que no llegó— así que las bajas quedan en neutro. */
.var-aviso[b-od99dcolmp] {
    color: var(--warning);
    font-weight: 600;
}

.var-alarma[b-od99dcolmp] {
    color: var(--danger);
    font-weight: 600;
}

/* Categoría que no existía en el período anterior: no es alza ni baja, es dato nuevo.
   Usa --info, que ahora existe como alias de --color-primario. */
.var-nueva[b-od99dcolmp] {
    color: var(--info);
    font-style: italic;
}

/* La columna del período anterior es contexto, no la cifra que se lee. */
.anterior[b-od99dcolmp] {
    color: var(--ink-soft);
}

.resumen-comparacion[b-od99dcolmp] {
    display: block;
    margin-top: var(--space-2xs);
    font-size: var(--fs-sm);
}
/* _content/ContabilidadApp/Components/Pages/Reportes/ReporteRentabilidadReal.razor.rz.scp.css */
/* Todo sale de los tokens de app.css. Ni un hex, ni un radio, ni una sombra literal. */

/* ---------- Zona A: el resultado ---------- */

/* Antes eran tres tarjetas col-md-4 idénticas en tamaño y peso, distinguidas solo por
   el color del borde: la cifra correcta y la explícitamente incorrecta con la misma
   autoridad visual. Ahora hay una jerarquía real de tres escalones. */
.resultado[b-osmj0bdroo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--space-md) var(--space-xl);
    padding: var(--space-lg);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

.resultado-principal[b-osmj0bdroo],
.resultado-secundario[b-osmj0bdroo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.resultado-etiqueta[b-osmj0bdroo] {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

/* Las dos cifras comparten familia y cifras tabulares; se separan por tamaño, que es
   el codificador correcto para "esta importa más que esta". */
.resultado-cifra[b-osmj0bdroo],
.resultado-cifra-sec[b-osmj0bdroo] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}

.resultado-cifra[b-osmj0bdroo] {
    font-size: var(--fs-2xl);
}

.resultado-cifra-sec[b-osmj0bdroo] {
    font-size: var(--fs-lg);
}

.resultado-pie[b-osmj0bdroo] {
    font-size: var(--fs-xs);
    color: var(--ink-soft);
    line-height: 1.35;
}

/* "Utilidad aparente" dejó de ser tarjeta. Es la refutación, no una métrica hermana:
   va como nota al pie de las dos cifras que sí lo son. */
.resultado-nota[b-osmj0bdroo] {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

.resultado-nota strong[b-osmj0bdroo] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ---------- Zonas B y C ---------- */

.zonas[b-osmj0bdroo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* El margen es el único codificador de estado de toda la pantalla. Con un solo sitio
   pintado, el color vuelve a significar algo; antes había tres tarjetas de colores
   distintos compitiendo y ninguna destacaba.
   Umbrales confirmados en el grill: bajo 10% alarma, 10-20% aviso, sobre 20% bien. */
.margen-bajo[b-osmj0bdroo] {
    color: var(--danger);
    font-weight: 600;
}

.margen-medio[b-osmj0bdroo] {
    color: var(--warning);
    font-weight: 600;
}

.margen-alto[b-osmj0bdroo] {
    color: var(--success);
    font-weight: 600;
}

/* Ausencia de dato, no un nivel de la escala: un producto sin costo daría 100% de
   margen, que sería falso. Usa --info, que ahora existe como alias de --color-primario. */
.margen-sin-dato[b-osmj0bdroo] {
    color: var(--info);
    font-style: italic;
}

/* Resumen de la excepción, en el slot de filtros de la tabla: cuántos productos están
   bajo el umbral y cuánto facturan. Es la lectura que dispara la revisión de precios. */
.margen-resumen[b-osmj0bdroo] {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
}

.margen-resumen-cifra[b-osmj0bdroo] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--ink);
}

.margen-resumen-texto[b-osmj0bdroo] {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

/* El costo por producto es estimado y el del comparativo es contable: si no se dice,
   alguien va a sumar los dos y no le van a cuadrar. */
.aviso-costo-estimado[b-osmj0bdroo] {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--info-soft);
    border: 1px solid var(--info);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--ink);
}

.aviso-sin-costo[b-osmj0bdroo] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--warning-soft);
    border: 1px solid var(--warning);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--ink);
}
/* _content/ContabilidadApp/Components/Pages/Ventas/Ventas.razor.rz.scp.css */
/* Todo sale de los tokens de app.css. Ni un hex, ni un radio, ni una sombra literal. */

/* Las cuatro tarjetas de la Ventas vieja eran cuatro <h3> sin diferenciar: mismo peso,
   sin color, sin orden de importancia. Énfasis parejo en todo equivale a énfasis en
   nada. Ahora "Pendiente de cobro" ocupa el doble de ancho y una tipografía mayor,
   porque es la única de las cuatro con una acción atada. */
.kpis[b-11l7x9rk54] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.kpi[b-11l7x9rk54] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-md);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.kpi-etiqueta[b-11l7x9rk54] {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

.kpi-cifra[b-11l7x9rk54] {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
}

.kpi-pie[b-11l7x9rk54] {
    font-size: var(--fs-xs);
    color: var(--ink-soft);
    line-height: 1.3;
}

.kpi-principal .kpi-cifra[b-11l7x9rk54] {
    font-size: var(--fs-2xl);
}

/* Estado tranquilo: cuando no queda nada por cobrar el color aparece una sola vez en
   toda la pantalla. Si siempre hubiera color, no significaría nada. */
.kpi-cifra.es-al-dia[b-11l7x9rk54] {
    color: var(--success);
}

/* Vencido sí es una alarma: hay plata que ya se debía haber cobrado. Es el único
   --danger de la pantalla. */
.es-vencido[b-11l7x9rk54] {
    color: var(--danger);
}

@media (min-width: 641px) {
    .kpi-principal[b-11l7x9rk54] {
        grid-column: span 2;
    }
}

.zonas[b-11l7x9rk54] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}
/* _content/ContabilidadApp/Components/Shared/AsistenteContable.razor.rz.scp.css */
/* Migrado a los tokens de app.css.

   El azul del asistente era el de Bootstrap, no el de la marca: burbuja y globo del
   usuario pasan a --color-primario, y el hover a --color-primario-hover.

   Los dos grises de relleno no van al mismo token. La cabecera va a --paper, que es un
   tinte apenas perceptible, y le basta porque ya la separa un borde. El globo del
   asistente va a --line: tiene que leerse como región propia sobre el panel blanco, y
   --paper ahí desaparecería. Se conserva así el orden original, donde #f1f3f5 era el más
   oscuro de los dos. */

.asistente[b-5w4wvwxbay] {
    position: fixed;
    right: var(--space-md);
    bottom: var(--space-md);
    z-index: 1055;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
}

.asistente-burbuja[b-5w4wvwxbay] {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-primario);
    color: var(--surface);
    font-size: var(--fs-xl);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Era sombra de modal (0.25 de opacidad) siendo un elemento flotante: por eso
       desentonaba con el resto. Pasa al nivel que le corresponde. */
    box-shadow: var(--shadow-md);
    align-self: flex-end;
    flex: none;
}

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

/* El descuento del ancho es el doble del margen de .asistente, para que el panel
   respete la misma separación de los dos lados. */
.asistente-panel[b-5w4wvwxbay] {
    width: min(24rem, calc(100vw - var(--space-xl)));
    height: min(32rem, calc(100vh - 8rem));
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

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

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

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

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

.asistente-mensajes[b-5w4wvwxbay] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

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

.asistente-vacio p[b-5w4wvwxbay] {
    margin-bottom: var(--space-xs);
}

.asistente-ejemplos[b-5w4wvwxbay] {
    font-style: italic;
    font-size: var(--fs-xs);
}

.asistente-mensaje[b-5w4wvwxbay] {
    max-width: 88%;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    line-height: 1.45;
    /* El modelo responde en texto plano con saltos de línea: hay que respetarlos. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* La esquina que apunta al hablante va menos redondeada que las otras tres: es lo que
   convierte el rectángulo en un globo de diálogo. */
.es-usuario[b-5w4wvwxbay] {
    align-self: flex-end;
    background: var(--color-primario);
    color: var(--surface);
    border-bottom-right-radius: var(--radius-sm);
}

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

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

/* El texto va en --ink y no en --danger: sobre --danger-soft el rojo da 4,57:1, que
   pasa AA por muy poco y esto es texto de 11px en un mensaje de error. El rojo se queda
   en el borde, que como objeto gráfico solo necesita 3:1. Mismo patrón que el resto
   del proyecto: fondo suave, texto en tinta, color semántico en el borde. */
.asistente-error[b-5w4wvwxbay] {
    align-self: stretch;
    background: var(--danger-soft);
    color: var(--ink);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-xs);
}

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

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

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

    .asistente-panel[b-5w4wvwxbay] {
        width: calc(100vw - var(--space-lg));
        height: min(30rem, calc(100vh - 6rem));
    }
}
/* _content/ContabilidadApp/Components/Shared/BuscadorCliente.razor.rz.scp.css */
/* Migrado a los tokens de app.css.

   Este bloque de modal está duplicado en 8 archivos con divergencias que parecen
   accidentales (velo al 0,45 o al 0,5, radio 0.6rem o 0.5rem, desenfoque 1.5rem o
   2rem). Al pasar a tokens las cuatro variantes convergen solas. Lo que queda distinto
   entre archivos es el max-width, que sí es intencional.

   El velo no tiene token: se deriva de --ink con color-mix, igual que en
   DataTableLuque, para que todos los overlays de la aplicación sean el mismo color. */

.modal-overlay[b-6w1lo9yxzu] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: var(--space-md);
}

.modal-card[b-6w1lo9yxzu] {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
/* _content/ContabilidadApp/Components/Shared/BuscadorCuentaContable.razor.rz.scp.css */
/* Migrado a los tokens de app.css.

   Este bloque de modal está duplicado en 8 archivos con divergencias que parecen
   accidentales (velo al 0,45 o al 0,5, radio 0.6rem o 0.5rem, desenfoque 1.5rem o
   2rem). Al pasar a tokens las cuatro variantes convergen solas. Lo que queda distinto
   entre archivos es el max-width, que sí es intencional.

   El velo no tiene token: se deriva de --ink con color-mix, igual que en
   DataTableLuque, para que todos los overlays de la aplicación sean el mismo color. */

.modal-overlay[b-ssr39igwxv] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: var(--space-md);
}

.modal-card[b-ssr39igwxv] {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
/* _content/ContabilidadApp/Components/Shared/BuscadorProducto.razor.rz.scp.css */
/* Migrado a los tokens de app.css.

   Este bloque de modal está duplicado en 8 archivos con divergencias que parecen
   accidentales (velo al 0,45 o al 0,5, radio 0.6rem o 0.5rem, desenfoque 1.5rem o
   2rem). Al pasar a tokens las cuatro variantes convergen solas. Lo que queda distinto
   entre archivos es el max-width, que sí es intencional.

   El velo no tiene token: se deriva de --ink con color-mix, igual que en
   DataTableLuque, para que todos los overlays de la aplicación sean el mismo color. */

.modal-overlay[b-1q8d35ew1i] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: var(--space-md);
}

.modal-card[b-1q8d35ew1i] {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
/* _content/ContabilidadApp/Components/Shared/BuscadorProveedor.razor.rz.scp.css */
/* Migrado a los tokens de app.css.

   Este bloque de modal está duplicado en 8 archivos con divergencias que parecen
   accidentales (velo al 0,45 o al 0,5, radio 0.6rem o 0.5rem, desenfoque 1.5rem o
   2rem). Al pasar a tokens las cuatro variantes convergen solas. Lo que queda distinto
   entre archivos es el max-width, que sí es intencional.

   El velo no tiene token: se deriva de --ink con color-mix, igual que en
   DataTableLuque, para que todos los overlays de la aplicación sean el mismo color. */

.modal-overlay[b-u9b9lvxnbp] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: var(--space-md);
}

.modal-card[b-u9b9lvxnbp] {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
/* _content/ContabilidadApp/Components/Shared/ConfirmarDocumento.razor.rz.scp.css */
/* Migrado a los tokens de app.css.

   El velo no tiene token: se deriva de --ink con color-mix, igual que en los otros
   modales de la aplicación.

   La regla sobre el total va a --line-strong y no a --line: son 2px de énfasis que
   separan el importe final del listado, no una división cualquiera. */

.confirmar-fondo[b-pi416zxz2b] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    padding: var(--space-md);
}

.confirmar-tarjeta[b-pi416zxz2b] {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.confirmar-encabezado[b-pi416zxz2b] {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    background: var(--paper);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
}

/* El listado puede ser largo; que scrolee él y no empuje al total fuera de la vista. */
.confirmar-lineas[b-pi416zxz2b] {
    max-height: 40vh;
    overflow-y: auto;
}

/* El total es lo que de verdad hay que mirar: se separa del listado y se agranda. */
.confirmar-total[b-pi416zxz2b] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 2px solid var(--line-strong);
    padding-top: var(--space-sm);
    font-size: var(--fs-lg);
}

.confirmar-total strong[b-pi416zxz2b] {
    font-size: var(--fs-xl);
    font-variant-numeric: tabular-nums;
}
/* _content/ContabilidadApp/Components/Shared/DataTableLuque.razor.rz.scp.css */
/* Todos los valores salen de los tokens de app.css. No hay un solo hex, rgba, px de radio
   ni sombra literal en este archivo: si algo hace falta y no existe como token, se deriva
   del token con color-mix en vez de escribir el color a mano.

   El contenido de Cabecera, Fila y Acciones lo escribe la pantalla que consume el
   componente, así que llega con el ámbito CSS de ella y no con el de acá: todo lo que
   toque esas celdas va con ::deep. */

.tabla-luque[b-gf3wygl4ta] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ---------- Encabezado ---------- */

.tabla-encabezado[b-gf3wygl4ta] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-sm);
}

.tabla-titulo[b-gf3wygl4ta] {
    font-size: var(--fs-lg);
    margin: 0;
}

.tabla-conteo[b-gf3wygl4ta] {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

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

/* Rejilla y no flex: los campos los escribe la pantalla que consume el componente
   y llegan con su propio ambito CSS, asi que no se los puede dimensionar desde aca.
   Con auto-fit el contenedor los acomoda solo y a 320px cada uno conserva su ancho
   minimo en vez de quedar aplastado. */
.tabla-filtros[b-gf3wygl4ta] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    align-items: end;
    gap: var(--space-xs) var(--space-sm);
    padding: var(--space-sm);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

/* ---------- Marco de la tabla ---------- */

/* El scroll horizontal vive acá y no en el body: una tabla de 12 columnas no debe
   empujar la página entera de lado. */
.tabla-marco[b-gf3wygl4ta] {
    overflow-x: auto;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* Bootstrap 5.1 resuelve el hover de fila con su propia --bs-table-hover-bg, que el
   proyecto no redefine en ningún lado y por defecto es un negro translúcido. Se la
   apunta al token para que el hover salga del sistema y no de Bootstrap. */
.tabla-marco[b-gf3wygl4ta]  .table {
    --bs-table-hover-bg: var(--paper);
    border-color: var(--line);
}

.tabla-marco[b-gf3wygl4ta]  thead th {
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--paper);
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tabla-marco[b-gf3wygl4ta]  tbody td {
    padding: var(--space-xs) var(--space-sm);
    border-bottom-color: var(--line);
}

.tabla-marco[b-gf3wygl4ta]  tfoot td,
.tabla-marco[b-gf3wygl4ta]  tfoot th {
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--paper);
    border-top: 1px solid var(--line);
    font-weight: 600;
}

/* La fila vacía usa el mismo tratamiento que ya tenían 21 de las 25 pantallas:
   centrada, apagada y con aire suficiente para que no parezca una fila más. */
.tabla-vacia[b-gf3wygl4ta] {
    padding: var(--space-xl) var(--space-sm);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    text-align: center;
}

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

.tabla-col-acciones[b-gf3wygl4ta] {
    width: 1%;
    text-align: end;
    white-space: nowrap;
}

.tabla-acciones[b-gf3wygl4ta] {
    display: inline-flex;
    gap: var(--space-2xs);
    justify-content: flex-end;
}

/* El foco de los botones lo pone la regla de app.css, que ya cubre .btn. No se
   redefine acá para no tener dos anillos distintos conviviendo. */

/* ---------- Diálogo de confirmación ---------- */

/* <dialog> abierto con showModal(): el atrapado de foco, el Esc y la inertización del
   fondo son del navegador. Acá solo va la apariencia. */
.tabla-dialogo[b-gf3wygl4ta] {
    width: calc(100% - var(--space-xl));
    max-width: 30rem;
    padding: 0;
    background-color: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* No hay token de velo. En vez de escribir un rgba a mano se deriva de --ink, que es
   el mismo color con el que se tiñen las sombras del sistema. */
.tabla-dialogo[b-gf3wygl4ta]::backdrop {
    background-color: color-mix(in srgb, var(--ink) 45%, transparent);
}

.dialogo-cuerpo[b-gf3wygl4ta] {
    padding: var(--space-lg) var(--space-lg) var(--space-sm);
}

.dialogo-titulo[b-gf3wygl4ta] {
    margin: 0 0 var(--space-xs);
    font-size: var(--fs-lg);
}

.dialogo-texto[b-gf3wygl4ta] {
    margin: 0;
    color: var(--ink);
}

.dialogo-detalle[b-gf3wygl4ta] {
    margin: var(--space-2xs) 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}

.dialogo-pie[b-gf3wygl4ta] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg) var(--space-lg);
}

/* app.css sobreescribe .btn-primary y .btn-secondary con los tokens, pero no .btn-danger:
   ése se quedó con el rojo por defecto de Bootstrap. Se define uno propio sobre --danger
   en vez de arrastrar el #dc3545 del framework. */
.btn-peligro[b-gf3wygl4ta] {
    color: var(--surface);
    background-color: var(--danger);
    border-color: var(--danger);
}

.btn-peligro:hover[b-gf3wygl4ta],
.btn-peligro:active[b-gf3wygl4ta],
.btn-peligro:focus[b-gf3wygl4ta] {
    color: var(--surface);
    background-color: color-mix(in srgb, var(--danger) 85%, var(--ink));
    border-color: color-mix(in srgb, var(--danger) 85%, var(--ink));
}

@media (max-width: 575.98px) {
    .dialogo-pie[b-gf3wygl4ta] {
        flex-direction: column-reverse;
    }

    .dialogo-pie .btn[b-gf3wygl4ta] {
        width: 100%;
    }
}
/* _content/ContabilidadApp/Components/Shared/RangoFechas.razor.rz.scp.css */
/* Migrado a los tokens de app.css.

   El calendario estaba pintado con la paleta por defecto de Bootstrap, que convivía con
   la de marca sin ser ninguna de las dos. El azul de selección pasa a --color-primario y
   su hover a --color-primario-hover; el fondo del rango, a --info-soft.

   Los grises de relleno van a dos tokens distintos a propósito: --paper está pensado para
   ir DEBAJO de --surface, así que encima del panel blanco casi no se ve (1,08:1 contra
   el 1,11:1 del #f1f3f5 original). Los hover, que tienen que notarse, van a --line
   (1,30:1). Medidos: día seleccionado 8,88:1, preset activo 7,07:1, textos apagados
   5,93:1 — todos sobre el mínimo AA. */

.rango-fechas[b-f0lhe9g6ky] {
    position: relative;
    display: inline-block;
}

.rango-fechas-boton[b-f0lhe9g6ky] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    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: var(--fs-sm);
}

.rango-fechas-subtitulo[b-f0lhe9g6ky] {
    font-size: var(--fs-xs);
    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% + var(--space-2xs));
    left: 0;
    z-index: 1050;
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-width: calc(100vw - var(--space-xl));
    overflow: auto;
}

.rango-fechas-lista[b-f0lhe9g6ky] {
    list-style: none;
    margin: 0;
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

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

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

.rango-fechas-lista button.activo[b-f0lhe9g6ky] {
    background: var(--info-soft);
    color: var(--color-primario);
    font-weight: 600;
}

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

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

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

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

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

.rf-meses[b-f0lhe9g6ky] {
    display: flex;
    gap: var(--space-md);
}

.rf-mes-titulo[b-f0lhe9g6ky] {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-2xs);
}

/* El gap y el alto de celda son dimensiones de la cuadrícula del calendario, no
   espaciado de layout: se quedan como están para no descuadrar la rejilla de 7 días. */
.rf-cuadricula[b-f0lhe9g6ky] {
    display: grid;
    grid-template-columns: repeat(7, 2rem);
    gap: 0.125rem;
}

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

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

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

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

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

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

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

.rf-hoy:not(.rf-extremo)[b-f0lhe9g6ky] {
    box-shadow: inset 0 0 0 1px var(--color-primario);
}

@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;
    }
}