@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
    --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    margin: 0;
}

.navmenu-icon {
    display: none;
}

.main {
    min-height: calc(100dvh - 86px);
    color: var(--neutral-foreground-rest);
    align-items: stretch !important;
}

/* ---------------------------------------------------------------------------------------------
   Menú lateral: ancho (ícono + texto) o compacto (solo íconos).

   Global y no en un .razor.css porque los cuatro menús laterales (principal, Créditos, Permisos,
   Equipahogar) son componentes distintos que tienen que verse igual: una copia por componente se
   desincroniza en silencio, que es justo lo que este archivo ya evita para el estado de cuenta.

   El estado es una clase sobre <html> (ver wwwroot/js/menuLateral.js). Se usa `!important` contra
   el ancho porque FluentNavMenu escribe `width` como estilo en línea desde su parámetro Width, y
   una regla de hoja no le gana; el mismo recurso que ya usa la regla de celular más abajo.
   --------------------------------------------------------------------------------------------- */

.menu-lateral-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    box-sizing: border-box;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    cursor: pointer;
    transition: background-color .16s ease;
}

    .menu-lateral-toggle:hover {
        background: rgba(0, 0, 0, .04);
    }

    .menu-lateral-toggle:focus-visible {
        outline: 2px solid var(--accent-fill-rest);
        outline-offset: -2px;
    }

.menu-lateral-toggle-chevron {
    flex: none;
    width: 8px;
    height: 8px;
    margin-inline-start: 4px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .7;
    transform: rotate(45deg);
    transition: transform .16s ease;
}

html.menu-lateral-compacto .menu-lateral-toggle-chevron {
    transform: rotate(-135deg);
}

html.menu-lateral-compacto .menu-lateral-toggle-texto,
html.menu-lateral-compacto nav.sitenav .fluent-nav-text,
html.menu-lateral-compacto nav.sitenav .menu-lateral-texto,
html.menu-lateral-compacto nav.sitenav .creditos-group-title,
html.menu-lateral-compacto nav.sitenav .creditos-group-chevron {
    display: none;
}

html.menu-lateral-compacto nav.sitenav #main-menu {
    width: 68px !important;
}

/* FluentNavMenu trae su propio botón de plegado (`.expander`), que funciona con el JavaScript de la
   librería y no con Blazor. Se oculta porque el botón de acá hace lo mismo y encima recuerda la
   preferencia: dos controles para lo mismo, cada uno con su estado, terminan mostrando estados
   distintos. Se oculta solo el de la barra lateral; app.css ya lo ocultaba en celular por su cuenta.
   Tampoco se lo usa para restaurar la preferencia al cargar: ese JavaScript memoriza el estilo
   original del menú al iniciarse, así que dejarlo plegado de antemano haría que "expandir" devuelva
   al estado plegado. */
nav.sitenav #main-menu > div:first-child.expander {
    display: none;
}

html.menu-lateral-compacto nav.sitenav {
    width: auto;
}

/* Sin el texto al lado, el ícono queda descolgado a la izquierda de una fila de 68 px. */
html.menu-lateral-compacto nav.sitenav .fluent-nav-item .content-region,
html.menu-lateral-compacto nav.sitenav .creditos-group-toggle,
html.menu-lateral-compacto nav.sitenav .menu-lateral-toggle {
    justify-content: center;
    margin-inline-start: 0;
}

html.menu-lateral-compacto nav.sitenav .creditos-group-child .content-region {
    padding-inline-start: 0;
}

/* En celular el menú ya se pliega entero detrás del botón hamburguesa, así que el modo compacto
   no tiene nada que resolver ahí: se desactiva, igual que hace la propia hoja de FluentUI con su
   estado `collapsed`. El botón tampoco se ofrece, para no dar una opción que no hace nada. */
@media (max-width: 600px) {
    .menu-lateral-toggle {
        display: none;
    }

    html.menu-lateral-compacto nav.sitenav #main-menu {
        width: 100% !important;
    }

    html.menu-lateral-compacto nav.sitenav .fluent-nav-text,
    html.menu-lateral-compacto nav.sitenav .menu-lateral-texto,
    html.menu-lateral-compacto nav.sitenav .creditos-group-title,
    html.menu-lateral-compacto nav.sitenav .creditos-group-chevron {
        display: block;
    }

    html.menu-lateral-compacto nav.sitenav .fluent-nav-item .content-region,
    html.menu-lateral-compacto nav.sitenav .creditos-group-toggle {
        justify-content: flex-start;
    }
}

.body-content {
    align-self: stretch;
    height: calc(100dvh - 86px) !important;
    display: flex;
    min-width: 0;
}

.content {
    padding: 0.5rem 1.5rem;
    align-self: stretch !important;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.manage {
    width: 100dvw;
}

footer {
    background: var(--neutral-layer-4);
    color: var(--neutral-foreground-rest);
    align-items: center;
    padding: 10px 10px;
}

    footer a {
        color: var(--neutral-foreground-rest);
        text-decoration: none;
    }

        footer a:focus {
            outline: 1px dashed;
            outline-offset: 3px;
        }

        footer a:hover {
            text-decoration: underline;
        }

.alert {
    border: 1px dashed var(--accent-fill-rest);
    padding: 5px;
    margin: 10px 0;
}

.alert-danger {
    border: 1px dashed var(--error);
}

.alert-success {
    border: 1px dashed var(--success);
}

.alert-warning {
    border: 1px dashed var(--warning);
}

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

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

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

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

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

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

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

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

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

code {
    color: #c02d76;
}
/* Clase que sirve param resaltar principalmente las filas defs un FluentDataGrid */
tr.fluent-data-grid-row.highlighted,
tr.fluent-data-grid-row.highlighted > td {
    background-color: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent) !important;
    color: var(--neutral-foreground-rest) !important;
}

@media (max-width: 600px) {
    .header-gutters {
        margin: 0.5rem 3rem 0.5rem 1.5rem !important;
    }

    [dir="rtl"] .header-gutters {
        margin: 0.5rem 1.5rem 0.5rem 3rem !important;
    }

    .main {
        flex-direction: column !important;
        row-gap: 0 !important;
    }

    nav.sitenav {
        width: 100%;
        height: 100%;
    }

    #main-menu {
        width: 100% !important;
    }

        #main-menu > div:first-child:is(.expander) {
            display: none;
        }

    .navmenu {
        width: 100%;
    }

    #navmenu-toggle {
        appearance: none;
    }

        #navmenu-toggle ~ nav {
            display: none;
        }

        #navmenu-toggle:checked ~ nav {
            display: block;
        }

    .navmenu-icon {
        cursor: pointer;
        z-index: 10;
        display: block;
        position: absolute;
        top: 15px;
        left: unset;
        right: 20px;
        width: 20px;
        height: 20px;
        border: none;
    }

    [dir="rtl"] .navmenu-icon {
        left: 20px;
        right: unset;
    }
}

/* Table */

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

    table td,
    table th {
        padding: var(--spacingVerticalS) var(--spacingHorizontalM);
        text-align: left;
        vertical-align: middle;
        border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
    }

/* Estado de cuenta del cliente (M16). Global y no en un .razor.css: dos componentes distintos
   -- la pantalla del operador (Equipa.Blazor, Server, F4) y la del cliente (Equipa.Blazor.Client,
   WebAssembly, F6) -- tienen que renderizar el mismo documento, y el aislamiento de CSS de Blazor
   asigna un scope por componente: una copia por cada uno se puede desincronizar en silencio, que
   es justamente el riesgo que este proyecto evita en todo lo demas (ver Cuota.cs). */
.estado-de-cuenta-imprimible {
    margin-top: 16px;
}

.estado-de-cuenta-encabezado {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    margin-bottom: 12px;
}

.estado-de-cuenta-cliente {
    font-weight: 600;
}

.estado-de-cuenta-moneda {
    margin-bottom: 20px;
}

.estado-de-cuenta-moneda h4 {
    margin-bottom: 8px;
}

.estado-de-cuenta-credito {
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.estado-de-cuenta-credito-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* El bloque entero se resalta si tiene alguna cuota vencida, no solo la fila/card de esa cuota. */
.estado-de-cuenta-credito.vencido .estado-de-cuenta-credito-header {
    color: var(--error, #c4314b);
}

/* Dato secundario (fecha y autor de creación): tipografía liviana para no competir con el header. */
.estado-de-cuenta-credito-meta {
    font-size: 0.85em;
    font-weight: 400;
    color: var(--neutral-foreground-hint, #666);
    margin-bottom: 8px;
}

/* Tabla: vista por defecto (PC/tablet e impresion). Las cards quedan ocultas salvo en celular.
   Scrollea dentro de su propio contenedor en vez de aplastar columnas o cortar el texto -- mismo
   criterio que ya usan las tablas de Contabilidad y los listados con FluentDataGrid. */
.estado-de-cuenta-tabla-scroll {
    overflow-x: auto;
}

.estado-de-cuenta-cuotas-tabla {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
}

.estado-de-cuenta-cuotas-tabla th,
.estado-de-cuenta-cuotas-tabla td {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    white-space: nowrap;
}

.estado-de-cuenta-cuotas-tabla tr.vencida {
    color: var(--error, #c4314b);
    font-weight: 600;
}

.estado-de-cuenta-cuotas-cards {
    display: none;
}

.estado-de-cuenta-cuota-card-fila {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
}

.estado-de-cuenta-cuota-card-etiqueta {
    color: var(--neutral-foreground-3, #666);
}

.estado-de-cuenta-cuota-card.vencida {
    color: var(--error, #c4314b);
    font-weight: 600;
}

.estado-de-cuenta-pie {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    color: var(--neutral-foreground-3, #666);
}

/* Celular: cards en vez de tabla. Sin "print" a proposito -- la regla de mas abajo fuerza la
   tabla y oculta las cards en impresion sin depender de este ancho de pantalla. */
@media screen and (max-width: 600px) {
    .estado-de-cuenta-cuotas-tabla {
        display: none;
    }

    .estado-de-cuenta-cuotas-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}

/* Al imprimir, mostrar solo el documento y ocultar menu, breadcrumb y los controles de filtro de
   la pantalla -- viven fuera de este contenedor, en el layout. */
@media print {
    body * {
        visibility: hidden;
    }

    .estado-de-cuenta-imprimible,
    .estado-de-cuenta-imprimible *,
    .vencimientos-imprimible,
    .vencimientos-imprimible * {
        visibility: visible;
    }

    .estado-de-cuenta-imprimible,
    .vencimientos-imprimible {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    /* Un cliente no se parte entre dos hojas si entra entero en una. */
    .vencimientos-cliente {
        break-inside: avoid;
    }
}

/* Informe de vencimientos de Cobranzas. Mismo esquema que el estado de cuenta: tabla en pantalla
   ancha y al imprimir, tarjetas en celular. */
.vencimientos-rango {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.vencimientos-imprimible {
    margin-top: 16px;
}

.vencimientos-encabezado {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    margin-bottom: 12px;
}

.vencimientos-titulo {
    font-weight: 600;
}

.vencimientos-cliente {
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.vencimientos-cliente-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.vencimientos-cliente-nombre {
    font-weight: 600;
}

.vencimientos-tabla-scroll {
    width: 100%;
    overflow-x: auto;
}

.vencimientos-tabla {
    width: 100%;
    border-collapse: collapse;
}

.vencimientos-tabla th,
.vencimientos-tabla td {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    white-space: nowrap;
}

.vencimientos-tabla .vencimientos-importe {
    text-align: right;
}

.vencimientos-tabla tr.vencida,
.vencimientos-card.vencida {
    color: var(--error, #c4314b);
    font-weight: 600;
}

/* El nombre que abre el estado de cuenta y la cuota que abre el pago: aspecto de enlace, sin cambiar
   el color de la fila, para que una cuota vencida siga leyéndose en rojo. */
/* El relleno y el margen negativo se compensan: el texto queda donde estaba y el área que recibe el
   toque crece a unos 32 px de alto, en vez de los 20 del renglón. */
.vencimientos-accion {
    background: none;
    border: none;
    padding: 6px 8px;
    margin: -6px -8px;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.vencimientos-accion:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
    outline-offset: 2px;
}

.vencimientos-accion:disabled {
    cursor: progress;
    opacity: 0.6;
}

@media print {
    .vencimientos-accion {
        text-decoration: none;
    }
}

.vencimientos-cards {
    display: none;
}

.vencimientos-card {
    padding: 6px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
}

.vencimientos-card-fila {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
}

.vencimientos-card-etiqueta {
    color: var(--neutral-foreground-3, #666);
}

.vencimientos-subtotal {
    margin-top: 6px;
    text-align: right;
    font-weight: 600;
}

.vencimientos-totales {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
}

.vencimientos-totales h4 {
    margin: 0 0 4px;
}

@media screen and (max-width: 600px) {
    .vencimientos-tabla-scroll {
        display: none;
    }

    .vencimientos-cards {
        display: block;
    }
}

/* Opciones de cuenta de tesoreria: la etiqueta lleva banco, tipo y numero al final, y es justo lo
   que distingue dos cuentas del mismo banco. Con el recorte por omision de FluentOption, en celular
   quedaba oculto tras un «…». Se deja partir en varias lineas solo aca: es global porque el estilo
   con ambito de un componente no alcanza al shadow DOM de FluentOption. */
fluent-option.opcion-de-cuenta-de-tesoreria {
    height: auto;
    min-height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
    padding-top: 4px;
    padding-bottom: 4px;
}

fluent-option.opcion-de-cuenta-de-tesoreria::part(content) {
    white-space: normal;
    overflow: visible;
}