/* /Components/Controls/Buttons/ButtonMenu.razor.rz.scp.css */
.ButtonMenuRadio[b-hy3c3f1s70] {
    display: none;
}

.ButtonMenu[b-hy3c3f1s70] {
    background-color: var(--color-ButtonMenu-BG);
    color: var(--color-ButtonMenu-FG);
    border: none;
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    margin: 2px 5px;
    display: flex;
    width: calc(100% - 10px);
    align-items: center;
    font-size: var(--fontSize-ButtonMenu);
}

    .ButtonMenu:hover[b-hy3c3f1s70] {
        background-color: var(--color-ButtonMenu-Hover-BG);
        color: var(--color-ButtonMenu-Hover-FG);
    }

    .ButtonMenu.Active[b-hy3c3f1s70] {
        background-color: var(--color-ButtonMenu-Active-BG);
        color: var(--color-ButtonMenu-Active-FG);
    }

.ButtonMenuText[b-hy3c3f1s70] {
    padding-left: 10px;
}

.menu-icon-svg[b-hy3c3f1s70] {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    flex-shrink: 0;
    vertical-align: middle;
}
/* /Components/Controls/Buttons/CrudButton.razor.rz.scp.css */
/* ── Base ── */
.crud-btn[b-ncj507hpzr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--CrudButton-Radius);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    user-select: none;
}

.crud-btn:focus-visible[b-ncj507hpzr] {
    box-shadow: 0 0 0 3px var(--color-CrudButton-Focus-Shadow);
}

.crud-btn:disabled[b-ncj507hpzr] {
    opacity: 0.5;
    cursor: not-allowed;
}

.crud-btn-text[b-ncj507hpzr] {
    line-height: 1;
}

/* ── Icon-only (DataGrid) ── */
.crud-btn.icon-only[b-ncj507hpzr] {
    padding: 4px;
    width: 28px;
    height: 28px;
    justify-content: center;
    font-size: 12px;
    border-radius: 6px;
}

/* ── Create ── */
.crud-btn-create[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Create-BG);
    color: var(--color-CrudButton-Create-FG);
    border-color: var(--color-CrudButton-Create-Border);
}

.crud-btn-create:hover:not(:disabled)[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Create-Hover-BG);
}

/* ── Edit ── */
.crud-btn-edit[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Edit-BG);
    color: var(--color-CrudButton-Edit-FG);
    border-color: var(--color-CrudButton-Edit-Border);
}

.crud-btn-edit:hover:not(:disabled)[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Edit-Hover-BG);
}

/* ── Delete ── */
.crud-btn-delete[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Delete-BG);
    color: var(--color-CrudButton-Delete-FG);
    border-color: var(--color-CrudButton-Delete-Border);
}

.crud-btn-delete:hover:not(:disabled)[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Delete-Hover-BG);
}

/* ── Save ── */
.crud-btn-save[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Save-BG);
    color: var(--color-CrudButton-Save-FG);
    border-color: var(--color-CrudButton-Save-Border);
}

.crud-btn-save:hover:not(:disabled)[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Save-Hover-BG);
}

/* ── Cancel ── */
.crud-btn-cancel[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Cancel-BG);
    color: var(--color-CrudButton-Cancel-FG);
    border-color: var(--color-CrudButton-Cancel-Border);
}

.crud-btn-cancel:hover:not(:disabled)[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Cancel-Hover-BG);
}

/* ── Submit ── */
.crud-btn-submit[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Submit-BG);
    color: var(--color-CrudButton-Submit-FG);
    border-color: var(--color-CrudButton-Submit-Border);
    font-weight: 600;
}

.crud-btn-submit:hover:not(:disabled)[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Submit-Hover-BG);
}

.crud-btn-submit:active:not(:disabled)[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Submit-Active-BG);
    transform: translateY(1px);
}

/* ── Custom ── */
.crud-btn-custom[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Custom-BG);
    color: var(--color-CrudButton-Custom-FG);
    border-color: var(--color-CrudButton-Custom-Border);
}

.crud-btn-custom:hover:not(:disabled)[b-ncj507hpzr] {
    background-color: var(--color-CrudButton-Custom-Hover-BG);
}
/* /Components/Controls/Buttons/ExpanderButtonMenu.razor.rz.scp.css */
:root[b-osxsdnofao] {
    --font-size: 8px;
}
/* HEADER */
.expander-header[b-osxsdnofao] {
    padding: 4px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--color-ButtonMenuExpander-BG);
    color: var(--color-ButtonMenuExpander-FG);
    font-size: var(--fontSize-ButtonMenu);
    user-select: none;
    border-radius: 5px;
    margin: 2px 5px;
}
    /* ICONO PRINCIPAL (izquierda) */
    .expander-header > span:first-child[b-osxsdnofao] {
        width: calc(var(--fontSize-ButtonMenu) + 3px);
        flex-shrink: 0;
        text-align: center;
    }
    /* TÍTULO (centro - ocupa el resto) */
    .expander-header .expander-title[b-osxsdnofao] {
        flex: 1;
        text-align: left;
        padding-left: 5px;
    }

    .expander-header:hover[b-osxsdnofao] {
        background: var(--color-ButtonMenuExpander-Hover-BG);
        color: var(--color-ButtonMenuExpander-Hover-FG);
    }
/* BODY */
.expander-body[b-osxsdnofao] {
    display: flex;
    overflow: hidden;
    max-height: 0;
    transform: translateY(-4px);
    transition: max-height .25s ease, opacity .25s ease, transform .25s ease;
    background: var(--color-ButtonMenuExpander-BG);
    margin: 0px 5px;
}
    /* OPEN STATE */
    .expander-body.open[b-osxsdnofao] {
        max-height: 500px;
        transform: translateY(0);
        padding: 0px 4px 8px 0;
    }
    /* LINKS */
    .expander-body a[b-osxsdnofao] {
        display: block;
        padding: 8px 20px;
        color: white;
        text-decoration: none;
    }

    .expander-body > .body-items[b-osxsdnofao]  .ButtonMenu {
        width: 100%;
    }
/* ICON ROTATION (chevron) */
.expander-header .icon[b-osxsdnofao] {
    width: calc(var(--font-size) + 3px);
    flex-shrink: 0;
    margin: 2px 0;
    text-align: center;
    transition: transform .25s ease;
    font-size: 10px;
}

    .expander-header .icon.open[b-osxsdnofao] {
        transform: rotate(180deg);
    }
/* LÍNEA VERTICAL */
.vertical-line[b-osxsdnofao] {
    background: var(--color-ButtonMenuExpander-FG);
    width: 1.5px;
    min-height: 100%;
    margin-left: 14px;
    margin-right: 3px;
    flex-shrink: 0;
    align-self: stretch;
}
/* CONTENEDOR DEL CONTENIDO */
.expander-body > div:last-child[b-osxsdnofao] {
    flex: 1;
}

.menu-icon-svg[b-osxsdnofao] {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    flex-shrink: 0;
    vertical-align: middle;
}
/* /Components/Controls/Buttons/ToolStrip.razor.rz.scp.css */
.toolstrip[b-wy93fmywm7] {
    display: flex;
    align-items: stretch;
    background-color: var(--color-ToolStrip-BG);
    border-bottom: 1px solid var(--color-ToolStrip-Border);
    user-select: none;
}
/* /Components/Controls/Buttons/ToolStripButton.razor.rz.scp.css */
.ts-menu-item[b-z9prjms1he] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border: none;
    background: transparent;
    color: var(--color-ToolStrip-Dropdown-Item-FG);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Columna de icono — ancho fijo para alinear el texto */
.ts-menu-item-icon[b-z9prjms1he] {
    width: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.ts-menu-item-text[b-z9prjms1he] {
    flex: 1;
    line-height: 1.3;
}

/* Atajo de teclado */
.ts-menu-item-shortcut[b-z9prjms1he] {
    font-size: 12px;
    color: var(--color-ToolStrip-Dropdown-Item-Disabled-FG);
    margin-left: 16px;
    flex-shrink: 0;
}

/* ── Hover ── */
.ts-menu-item:hover:not(:disabled)[b-z9prjms1he] {
    background-color: var(--color-ToolStrip-Dropdown-Item-Hover-BG);
    color: var(--color-ToolStrip-Dropdown-Item-Hover-FG);
}

.ts-menu-item:hover:not(:disabled) .ts-menu-item-icon[b-z9prjms1he] {
    opacity: 1;
}

/* ── Checked / Active ── */
.ts-menu-item.active .ts-menu-item-icon[b-z9prjms1he] {
    color: var(--color-ToolStrip-Btn-Active-FG);
    opacity: 1;
}

/* ── Disabled ── */
.ts-menu-item:disabled[b-z9prjms1he] {
    color: var(--color-ToolStrip-Dropdown-Item-Disabled-FG);
    cursor: not-allowed;
}

.ts-menu-item:disabled .ts-menu-item-icon[b-z9prjms1he] {
    opacity: 0.35;
}
/* /Components/Controls/Buttons/ToolStripExpander.razor.rz.scp.css */
.ts-exp-wrapper[b-7l0ww0rvyx] {
    position: relative;
}

/* ── Trigger — mismos valores que .ts-menu-item en ToolStripButton ── */
.ts-exp-trigger[b-7l0ww0rvyx] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border: none;
    background: transparent;
    color: var(--color-ToolStrip-Dropdown-Item-FG);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Columna de icono — ancho fijo para alinear el texto (igual que ts-menu-item-icon) */
.ts-exp-icon[b-7l0ww0rvyx] {
    width: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.ts-exp-text[b-7l0ww0rvyx] {
    flex: 1;
    line-height: 1.3;
}

/* Flecha indicadora de submenú */
.ts-exp-arrow[b-7l0ww0rvyx] {
    font-size: 10px;
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

/* ── Hover se dispara desde el wrapper para cubrir trigger + panel abierto ── */
.ts-exp-wrapper:hover .ts-exp-trigger[b-7l0ww0rvyx] {
    background-color: var(--color-ToolStrip-Dropdown-Item-Hover-BG);
    color: var(--color-ToolStrip-Dropdown-Item-Hover-FG);
}

.ts-exp-wrapper:hover .ts-exp-icon[b-7l0ww0rvyx]  { opacity: 1; }
.ts-exp-wrapper:hover .ts-exp-arrow[b-7l0ww0rvyx] { opacity: 0.75; }

/* ── Disabled ── */
.ts-exp-trigger:disabled[b-7l0ww0rvyx] {
    color: var(--color-ToolStrip-Dropdown-Item-Disabled-FG);
    cursor: not-allowed;
}

.ts-exp-trigger:disabled .ts-exp-icon[b-7l0ww0rvyx] {
    opacity: 0.35;
}

/* ── Panel lateral ── */
.ts-exp-panel[b-7l0ww0rvyx] {
    position: absolute;
    top: -4px;
    left: 100%;
    z-index: 301;
    min-width: 200px;
    background-color: var(--color-ToolStrip-Dropdown-BG);
    border: 1px solid var(--color-ToolStrip-Dropdown-Border);
    border-radius: var(--ToolStrip-Dropdown-Radius);
    box-shadow: var(--color-ToolStrip-Dropdown-Shadow);
    padding: 4px 0;
    animation: ts-opt-panel-in 0.12s ease;
}

.ts-exp-panel[b-7l0ww0rvyx]::-webkit-scrollbar        { width: 6px; }
.ts-exp-panel[b-7l0ww0rvyx]::-webkit-scrollbar-track  { background: transparent; }
.ts-exp-panel[b-7l0ww0rvyx]::-webkit-scrollbar-thumb  { background: #d1d5db; border-radius: 3px; }
.ts-exp-panel[b-7l0ww0rvyx]::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
/* /Components/Controls/Buttons/ToolStripOption.razor.rz.scp.css */
@keyframes ts-opt-panel-in-b-h17bqmrmwa {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.ts-opt-wrapper[b-h17bqmrmwa] {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}

/* ── Trigger ── */
.ts-opt-trigger[b-h17bqmrmwa] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    min-height: 34px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--color-ToolStrip-Btn-FG);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
}

.ts-opt-trigger i[b-h17bqmrmwa] {
    font-size: 13px;
}

.ts-opt-trigger:hover[b-h17bqmrmwa] {
    background-color: var(--color-ToolStrip-Btn-Hover-BG);
    color: var(--color-ToolStrip-Btn-Hover-FG);
}

.ts-opt-trigger.active[b-h17bqmrmwa] {
    background-color: var(--color-ToolStrip-Btn-Active-BG);
    color: var(--color-ToolStrip-Btn-Active-FG);
}

/* ── Panel desplegable ── */
.ts-opt-panel[b-h17bqmrmwa] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 300;
    min-width: 210px;
    background-color: var(--color-ToolStrip-Dropdown-BG);
    border: 1px solid var(--color-ToolStrip-Dropdown-Border);
    border-radius: var(--ToolStrip-Dropdown-Radius);
    box-shadow: var(--color-ToolStrip-Dropdown-Shadow);
    padding: 4px 0;
    animation: ts-opt-panel-in-b-h17bqmrmwa 0.12s ease;
}

/* ── Scrollbar ── */
.ts-opt-panel[b-h17bqmrmwa]::-webkit-scrollbar        { width: 6px; }
.ts-opt-panel[b-h17bqmrmwa]::-webkit-scrollbar-track  { background: transparent; }
.ts-opt-panel[b-h17bqmrmwa]::-webkit-scrollbar-thumb  { background: #d1d5db; border-radius: 3px; }
.ts-opt-panel[b-h17bqmrmwa]::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
/* /Components/Controls/Buttons/ToolStripSeparator.razor.rz.scp.css */
.toolstrip-separator[b-jhwbda2wxb] {
    height: 1px;
    background-color: var(--color-ToolStrip-Dropdown-Separator);
    margin: 4px 8px;
}
/* /Components/Controls/Containers/ExpanderCard.razor.rz.scp.css */
/* ── ExpanderCard ── */
.expander-card[b-2t80ivqrox] {
    border: 1px solid var(--color-ExpanderCard-Border);
    border-radius: var(--ExpanderCard-Radius);
    background-color: var(--color-ExpanderCard-BG);
    overflow: hidden;
}

/* ── Header ── */
.expander-card-header[b-2t80ivqrox] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
    background-color: var(--color-ExpanderCard-Header-BG);
    color: var(--color-ExpanderCard-FG);
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.15s ease;
}

.expander-card-header:hover[b-2t80ivqrox] {
    background-color: var(--color-ExpanderCard-Header-Hover-BG);
}

/* ── Icon ── */
.expander-card-icon[b-2t80ivqrox] {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

/* ── Title ── */
.expander-card-title[b-2t80ivqrox] {
    flex: 1;
    text-align: left;
}

/* ── Chevron ── */
.expander-card-chevron[b-2t80ivqrox] {
    flex-shrink: 0;
    font-size: 12px;
    transition: transform 0.25s ease;
}

.expander-card-chevron.open[b-2t80ivqrox] {
    transform: rotate(180deg);
}

/* ── Body ── */
.expander-card-body[b-2t80ivqrox] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.expander-card-body.open[b-2t80ivqrox] {
    max-height: 2000px;
    border-top: 1px solid var(--color-ExpanderCard-Border);
}

/* ── Content ── */
.expander-card-body-content[b-2t80ivqrox] {
    padding: 8px 10px;
}
/* /Components/Controls/Containers/GroupBox.razor.rz.scp.css */
/* ── GroupBox ── */
.groupbox[b-nuwllbypty] {
    position: relative;
    border: 1px solid var(--color-GroupBox-Border);
    border-radius: var(--GroupBox-Radius);
    background-color: var(--color-GroupBox-BG);
    padding: 18px 10px;
    margin: 0;
}

/* ── Title ── */
.groupbox-title[b-nuwllbypty] {
    position: absolute;
    top: 0;
    left: 12px;
    transform: translateY(-50%);
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-GroupBox-FG);
    background-color: var(--color-GroupBox-Legend-BG);
    line-height: 1;
}

/* ── Content ── */
.groupbox-content[b-nuwllbypty] {
    font-size: 14px;
    color: var(--color-GroupBox-FG);
}
/* /Components/Controls/Containers/TabControl.razor.rz.scp.css */
/* ── Contenedor principal ── */
.tab-control[b-50bj9dt7qg] {
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-TabControl-Border);
    border-radius: var(--TabControl-Radius);
    background-color: var(--color-TabControl-BG);
    overflow: hidden;
}

/* ── Cabecera de pestañas ── */
.tab-header[b-50bj9dt7qg] {
    display: flex;
    flex-wrap: nowrap;
    background-color: var(--color-TabControl-Header-BG);
    border-bottom: 1px solid var(--color-TabControl-Border);
    overflow-x: auto;
    scrollbar-width: none;
}

.tab-header[b-50bj9dt7qg]::-webkit-scrollbar {
    display: none;
}

/* ── Pestaña individual ── */
.tab-item[b-50bj9dt7qg] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: var(--color-TabControl-Tab-FG);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.tab-item i[b-50bj9dt7qg] {
    font-size: 13px;
}

.tab-item:hover[b-50bj9dt7qg] {
    background-color: var(--color-TabControl-Tab-Hover-BG);
    color: var(--color-TabControl-Tab-Hover-FG);
}

.tab-item.active[b-50bj9dt7qg] {
    color: var(--color-TabControl-Tab-Active-FG);
    border-bottom-color: var(--color-TabControl-Tab-Active-Border);
    font-weight: 600;
    background-color: var(--color-TabControl-BG);
}

/* ── Cuerpo ── */
.tab-body[b-50bj9dt7qg] {
    flex: 1;
    padding: 16px;
}
/* /Components/Controls/Containers/TabPage.razor.rz.scp.css */
/* ── Contenido de pestaña (oculto por defecto) ── */
.tab-page[b-4ira10uuvi] {
    display: none;
}

.tab-page.active[b-4ira10uuvi] {
    display: block;
}
/* /Components/Controls/DataGrids/DataGrid.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   DataGrid.razor.css — CSS Aislado
   Diseño basado en estilo clean/minimal con bordes suaves,
   fondo blanco y acentos en azul claro.
   ═══════════════════════════════════════════════════════════════ */

/* ── Wrapper principal ── */
.datagrid-wrapper[b-1offdxmnat] {
    font-family: var(--DataGrid-Font);
    color: var(--color-DataGrid-FG);
    background: var(--color-DataGrid-BG);
    border: 1px solid var(--color-DataGrid-Border);
    border-radius: var(--DataGrid-Radius);
    box-shadow: var(--DataGrid-Shadow);
    overflow: clip;
}

/* ── Toolbar (selector de page size + count) ── */
.datagrid-toolbar[b-1offdxmnat] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-DataGrid-Border);
    background: var(--color-DataGrid-ToolBar-BG);
    gap: 12px;
    flex-wrap: wrap;
    border-radius: var(--DataGrid-Radius) var(--DataGrid-Radius) 0 0;
}

.datagrid-pagesize-selector[b-1offdxmnat] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-DataGrid-FG-Muted);
}

.datagrid-record-count[b-1offdxmnat] {
    font-size: 13px;
    color: var(--color-DataGrid-FG-Muted);
}

/* ── Panel de filtros ── */
.datagrid-filters[b-1offdxmnat] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-DataGrid-Border);
    background: var(--color-DataGrid-FilterArea-GB);
    flex-wrap: wrap;
    animation: dg-slide-down-b-1offdxmnat 0.2s ease;
}

@keyframes dg-slide-down-b-1offdxmnat {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.datagrid-filter-item[b-1offdxmnat] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.datagrid-filter-item label[b-1offdxmnat] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-DataGrid-FG-Muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Fila de filtro de fecha: date picker + checkbox "mes completo" ── */
.datagrid-filter-date-row[b-1offdxmnat] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .datagrid-filter-date-row[b-1offdxmnat]  .chk-label {
        text-transform: none;
        font-size: 12px;
        font-weight: 400;
        white-space: nowrap;
    }

/* ── Contenedor de la tabla ── */
.datagrid-table-container[b-1offdxmnat] {
    overflow-x: auto;
}

    /* Sin paginación visible (tabla es el último hijo): redondear esquinas inferiores
       para que el fondo de las columnas sticky quede recortado al border-radius del wrapper */
    .datagrid-table-container:last-child[b-1offdxmnat] {
        overflow-y: hidden;
        border-bottom-left-radius: var(--DataGrid-Radius);
        border-bottom-right-radius: var(--DataGrid-Radius);
    }

.datagrid-table-container.datagrid-scrollable[b-1offdxmnat] {
    max-height: 500px;
    overflow-y: auto; /* sobreescribe el hidden del :last-child en modo scroll */
}

/* ── Tabla ── */
.datagrid-table[b-1offdxmnat] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    background: var(--color-DataGrid-BG);
}

/* ── Encabezado ── */
.datagrid-th[b-1offdxmnat] {
    padding: 14px 20px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-DataGrid-FG-Muted);
    background: var(--color-DataGrid-BG);
    border-bottom: 2px solid var(--color-DataGrid-Border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.datagrid-th-sticky[b-1offdxmnat] {
    z-index: 3;
    background: var(--color-DataGrid-BG);
}

.datagrid-th-content[b-1offdxmnat] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Botón de filtro en header ── */
.datagrid-filter-btn[b-1offdxmnat] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-DataGrid-FG-Muted);
    cursor: pointer;
    font-size: 12px;
    transition: all var(--DataGrid-Transition);
    opacity: 0.5;
}

    .datagrid-filter-btn:hover[b-1offdxmnat] {
        background: var(--color-DataGrid-FilterButton-Hover-BG);
        color: var(--color-DataGrid-FilterButton-Hover-FG);
        opacity: 1;
    }

    .datagrid-filter-btn.active[b-1offdxmnat] {
        background: var(--color-DataGrid-FilterButton-Active-BG);
        color: var(--color-DataGrid-FilterButton-Active-FG);
        opacity: 1;
    }

        .datagrid-filter-btn.active:hover[b-1offdxmnat] {
            background: var(--color-DataGrid-FilterButton-Hover-BG);
            color: var(--color-DataGrid-FilterButton-Hover-FG);
            opacity: 1;
        }

/* ── Filas y celdas ── */
.datagrid-row[b-1offdxmnat] {
    transition: background-color var(--color-DataGrid-Row-Hover-BG);
}

.datagrid-row:last-child > .datagrid-td[b-1offdxmnat] {
    border-bottom: none;
}

    .datagrid-row:hover[b-1offdxmnat] {
        background-color: var(--color-DataGrid-Row-Hover-BG);
    }

        .datagrid-row:hover > .datagrid-td[b-1offdxmnat] {
            color: var(--color-DataGrid-Row-Hover-FG);
        }

.datagrid-td[b-1offdxmnat] {
    padding: 0px 10px;
    font-size: 14px;
    color: var(--color-DataGrid-FG);
    vertical-align: middle;
    border-bottom: 1px solid var(--color-DataGrid-Row-Border-Bottom);
}

.datagrid-td-sticky[b-1offdxmnat] {
    position: sticky;
    z-index: 1;
    background: var(--color-DataGrid-BG);
}

/* ── Columna principal (IsMain): solo resalta el texto ── */
.datagrid-th-main span[b-1offdxmnat],
.datagrid-td-main[b-1offdxmnat] {
    font-weight: 700;
}

    .datagrid-row:hover > .datagrid-td-sticky[b-1offdxmnat] {
        background: var(--color-DataGrid-Row-Hover-BG);
    }

/* ── Botón de filtros (solo móvil) ── */
.datagrid-mobile-filter-btn[b-1offdxmnat] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 12px 12px 0;
    padding: 10px;
    border: 1px solid var(--color-DataGrid-Border);
    border-radius: var(--DataGrid-Radius-SM);
    background: var(--color-DataGrid-BG);
    color: var(--color-DataGrid-FG-Muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--DataGrid-Transition);
}

    .datagrid-mobile-filter-btn:hover[b-1offdxmnat] {
        background: var(--color-DataGrid-FilterButton-Hover-BG);
        color: var(--color-DataGrid-FilterButton-Hover-FG);
    }

    .datagrid-mobile-filter-btn.active[b-1offdxmnat] {
        background: var(--color-DataGrid-FilterButton-Active-BG);
        color: var(--color-DataGrid-FilterButton-Active-FG);
        border-color: transparent;
    }

/* ── Vista de tarjetas (móvil) ── */
.datagrid-cards[b-1offdxmnat] {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

    .datagrid-cards:last-child[b-1offdxmnat] {
        border-bottom-left-radius: var(--DataGrid-Radius);
        border-bottom-right-radius: var(--DataGrid-Radius);
    }

.datagrid-cards.datagrid-scrollable[b-1offdxmnat] {
    overflow-y: auto;
}

.datagrid-card[b-1offdxmnat] {
    border: 1px solid var(--color-DataGrid-Border);
    border-radius: var(--DataGrid-Radius-SM);
    background: var(--color-DataGrid-BG);
    overflow: clip;
}

.datagrid-card-header[b-1offdxmnat] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
}

.datagrid-card-main[b-1offdxmnat] {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-DataGrid-FG);
}

.datagrid-card-toggle[b-1offdxmnat] {
    font-size: 12px;
    color: var(--color-DataGrid-FG-Muted);
}

.datagrid-card-body[b-1offdxmnat] {
    padding: 4px 16px 12px;
    border-top: 1px solid var(--color-DataGrid-Border);
}

.datagrid-card-row[b-1offdxmnat] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--color-DataGrid-Border);
}

    .datagrid-card-row:last-child[b-1offdxmnat] {
        border-bottom: none;
    }

.datagrid-card-label[b-1offdxmnat] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-DataGrid-FG-Muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.datagrid-card-value[b-1offdxmnat] {
    font-size: 14px;
    color: var(--color-DataGrid-FG);
    text-align: right;
}

/* ── Fila vacía ── */
.datagrid-empty[b-1offdxmnat] {
    text-align: center;
    padding: 48px 20px;
    color: var(--color-DataGrid-FG-Muted);
    font-size: 14px;
}

.datagrid-empty i[b-1offdxmnat] {
    display: block;
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.4;
}

/* ── Paginación ── */
.datagrid-pagination[b-1offdxmnat] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-DataGrid-Border);
    background: var(--color-DataGrid-Pagination-BG);
    border-radius: 0 0 var(--DataGrid-Radius) var(--DataGrid-Radius);
}

.datagrid-page-btn[b-1offdxmnat] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: none;
    border-radius: 50%;
    background: var(--color-DataGrid-Pagination-BG);
    color: var(--color-DataGrid-Pagination-FG);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--DataGrid-Transition);
    user-select: none;
}

    .datagrid-page-btn:hover:not(:disabled):not(.active)[b-1offdxmnat] {
        background: var(--color-DataGrid-Pagination-Hover-BG);
        color: var(--color-DataGrid-Pagination-Hover-FG);
    }

    .datagrid-page-btn.active[b-1offdxmnat] {
        background: var(--color-DataGrid-Pagination-Active-BG);
        color: var(--color-DataGrid-Pagination-Active-FG);
        font-weight: 600;
    }

    .datagrid-page-btn:disabled[b-1offdxmnat] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.datagrid-page-btn i[b-1offdxmnat] {
    font-size: 12px;
}

/* ── Scrollbar personalizado ── */
.datagrid-table-container[b-1offdxmnat]::-webkit-scrollbar,
.datagrid-cards[b-1offdxmnat]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.datagrid-table-container[b-1offdxmnat]::-webkit-scrollbar-track {
    background: transparent;
}

.datagrid-table-container[b-1offdxmnat]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.datagrid-table-container[b-1offdxmnat]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ── Variante compacta (Small) ── */
.datagrid-sm .datagrid-toolbar[b-1offdxmnat] {
    padding: 6px 12px;
}

.datagrid-sm .datagrid-pagesize-selector[b-1offdxmnat],
.datagrid-sm .datagrid-record-count[b-1offdxmnat] {
    font-size: 11px;
}

.datagrid-sm .datagrid-filters[b-1offdxmnat] {
    padding: 6px 12px;
    gap: 10px;
}

.datagrid-sm .datagrid-filter-item label[b-1offdxmnat] {
    font-size: 10px;
}

.datagrid-sm .datagrid-th[b-1offdxmnat] {
    padding: 6px 10px;
    font-size: 11px;
}

.datagrid-sm .datagrid-td[b-1offdxmnat] {
    padding: 0 10px;
    font-size: 12px;
}

/* Botones (CrudButton) dentro de un <Template> de columna, en modo compacto */
.datagrid-sm .datagrid-td[b-1offdxmnat]  .crud-btn {
    padding: 4px 8px;
    font-size: 11px;
    gap: 4px;
}

.datagrid-sm .datagrid-td[b-1offdxmnat]  .crud-btn.icon-only {
    width: 22px;
    height: 22px;
    padding: 2px;
    font-size: 10px;
    border-radius: 5px;
}

.datagrid-sm .datagrid-empty[b-1offdxmnat] {
    padding: 20px 12px;
    font-size: 12px;
}

.datagrid-sm .datagrid-cards[b-1offdxmnat] {
    padding: 8px;
    gap: 6px;
}

.datagrid-sm .datagrid-card-header[b-1offdxmnat] {
    padding: 8px 10px;
}

.datagrid-sm .datagrid-card-main[b-1offdxmnat] {
    font-size: 12px;
}

.datagrid-sm .datagrid-card-body[b-1offdxmnat] {
    padding: 2px 10px 8px;
}

.datagrid-sm .datagrid-card-row[b-1offdxmnat] {
    padding: 4px 0;
}

.datagrid-sm .datagrid-card-label[b-1offdxmnat],
.datagrid-sm .datagrid-card-value[b-1offdxmnat] {
    font-size: 11px;
}

.datagrid-sm .datagrid-empty i[b-1offdxmnat] {
    font-size: 22px;
    margin-bottom: 6px;
}

.datagrid-sm .datagrid-pagination[b-1offdxmnat] {
    padding: 6px 12px;
    gap: 2px;
}

.datagrid-sm .datagrid-page-btn[b-1offdxmnat] {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
    border-radius: 6px;
}

.datagrid-sm .datagrid-page-btn i[b-1offdxmnat] {
    font-size: 10px;
}

/* ── Responsive ── */

/* Tablet (768px–1024px): se mantiene la tabla, forzamos que las columnas
   no se compriman para que el scroll horizontal ya existente se active
   en vez de apretar/envolver el contenido. */
@media (min-width: 768px) and (max-width: 1024px) {
    .datagrid-td[b-1offdxmnat] {
        white-space: nowrap;
    }
}

/* Móvil (<768px): se reemplaza la tabla por tarjetas expandibles. */
@media (max-width: 767px) {
    .datagrid-toolbar[b-1offdxmnat] {
        flex-direction: column;
        align-items: flex-start;
    }

    .datagrid-filters[b-1offdxmnat] {
        flex-direction: column;
        gap: 12px;
    }

    .datagrid-filter-item[b-1offdxmnat] {
        width: 100%;
    }

    .datagrid-pagination[b-1offdxmnat] {
        gap: 2px;
    }

    .datagrid-page-btn[b-1offdxmnat] {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .datagrid-table-container[b-1offdxmnat] {
        display: none;
    }

    .datagrid-mobile-filter-btn[b-1offdxmnat] {
        display: flex;
    }

    .datagrid-cards[b-1offdxmnat] {
        display: flex;
    }
}
/* /Components/Controls/Dialogs/MessageBox.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   MessageBox.razor.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes: entrada / salida del panel ── */
@keyframes msgbox-panel-in-b-steqcqan8c {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(-16px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes msgbox-panel-out-b-steqcqan8c {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.88) translateY(-16px);
    }
}

/* ── Keyframes: animaciones de iconos ── */

/* Information — flota suavemente */
@keyframes msgbox-float-b-steqcqan8c {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

/* Done — pop con rebote */
@keyframes msgbox-pop-b-steqcqan8c {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
    55%  { transform: scale(1.2) rotate(6deg);  opacity: 1; }
    75%  { transform: scale(0.9) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}

/* Error — sacudida horizontal */
@keyframes msgbox-shake-b-steqcqan8c {
    0%, 100%     { transform: translateX(0); }
    12%          { transform: translateX(-9px) rotate(-4deg); }
    25%          { transform: translateX(9px)  rotate(4deg); }
    37%          { transform: translateX(-7px) rotate(-3deg); }
    50%          { transform: translateX(7px)  rotate(3deg); }
    62%          { transform: translateX(-4px) rotate(-1deg); }
    75%          { transform: translateX(4px)  rotate(1deg); }
    87%          { transform: translateX(-2px); }
}

/* Question — balanceo contemplativo */
@keyframes msgbox-tilt-b-steqcqan8c {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%      { transform: rotate(-12deg) scale(1.05); }
    75%      { transform: rotate(12deg)  scale(1.05); }
}

/* Warning — pulso urgente */
@keyframes msgbox-pulse-b-steqcqan8c {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.14); }
}

/* ── Overlay ── */
.msgbox-overlay[b-steqcqan8c] {
    position: fixed;
    inset: 0;
    background-color: var(--color-Modal-Overlay-BG);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 20px;
    animation: modal-overlay-in 0.2s ease;
}

.msgbox-overlay.msgbox-closing[b-steqcqan8c] {
    animation: modal-overlay-out 0.2s ease forwards;
}

/* ── Panel ── */
.msgbox-panel[b-steqcqan8c] {
    background-color: var(--color-Modal-BG);
    border: 1px solid var(--color-Modal-Border);
    border-radius: var(--Modal-Radius);
    box-shadow: var(--Modal-Shadow);
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 32px 28px 24px;
    text-align: center;
    animation: msgbox-panel-in-b-steqcqan8c 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.msgbox-panel.msgbox-panel-closing[b-steqcqan8c] {
    animation: msgbox-panel-out-b-steqcqan8c 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ── Temas: color de acento por icono ── */
.msgbox-theme-info[b-steqcqan8c]     { --msgbox-accent: #3b82f6; --msgbox-accent-bg: #dbeafe; }
.msgbox-theme-done[b-steqcqan8c]     { --msgbox-accent: #22c55e; --msgbox-accent-bg: #dcfce7; }
.msgbox-theme-error[b-steqcqan8c]    { --msgbox-accent: #ef4444; --msgbox-accent-bg: #fee2e2; }
.msgbox-theme-question[b-steqcqan8c] { --msgbox-accent: #8b5cf6; --msgbox-accent-bg: #ede9fe; }
.msgbox-theme-warning[b-steqcqan8c]  { --msgbox-accent: #f59e0b; --msgbox-accent-bg: #fef3c7; }

/* ── Icono ── */
.msgbox-icon-wrap[b-steqcqan8c] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--msgbox-accent-bg);
    color: var(--msgbox-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.msgbox-svg[b-steqcqan8c] {
    width: 38px;
    height: 38px;
}

/* ── Animaciones por icono ── */
.msgbox-svg-info[b-steqcqan8c] {
    animation: msgbox-float-b-steqcqan8c 2.6s ease-in-out infinite;
}

.msgbox-svg-done[b-steqcqan8c] {
    animation: msgbox-pop-b-steqcqan8c 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.msgbox-svg-error[b-steqcqan8c] {
    animation: msgbox-shake-b-steqcqan8c 0.65s ease-in-out forwards;
}

.msgbox-svg-question[b-steqcqan8c] {
    animation: msgbox-tilt-b-steqcqan8c 2.4s ease-in-out infinite;
}

.msgbox-svg-warning[b-steqcqan8c] {
    animation: msgbox-pulse-b-steqcqan8c 1.2s ease-in-out infinite;
}

/* ── Título ── */
.msgbox-title[b-steqcqan8c] {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-Modal-FG);
    margin-bottom: 8px;
    line-height: 1.3;
}

/* ── Mensaje ── */
.msgbox-message[b-steqcqan8c] {
    font-size: 14px;
    color: var(--color-Modal-FG-Muted);
    line-height: 1.6;
    margin-bottom: 24px;
    white-space: pre-wrap;
}

/* ── Footer / botones ── */
.msgbox-footer[b-steqcqan8c] {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.msgbox-btn[b-steqcqan8c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 36px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
    user-select: none;
}

    .msgbox-btn:hover[b-steqcqan8c] {
        opacity: 0.88;
    }

    .msgbox-btn:active[b-steqcqan8c] {
        transform: scale(0.96);
    }

.msgbox-btn-primary[b-steqcqan8c] {
    background-color: var(--msgbox-accent);
    color: #fff;
}

.msgbox-btn-secondary[b-steqcqan8c] {
    background-color: var(--color-Modal-BG);
    color: var(--color-Modal-FG);
    border: 1px solid var(--color-Modal-Border);
}

.msgbox-btn-danger[b-steqcqan8c] {
    background-color: #ef4444;
    color: #fff;
}
/* /Components/Controls/Dialogs/Modal.razor.rz.scp.css */
/* ── Keyframes ── */
@keyframes modal-overlay-in-b-8r4czpxrt0 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modal-overlay-out-b-8r4czpxrt0 {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes modal-panel-in-b-8r4czpxrt0 {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modal-panel-out-b-8r4czpxrt0 {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.97);
    }
}

/* ── Overlay ── */
.modal-overlay[b-8r4czpxrt0] {
    position: fixed;
    inset: 0;
    background-color: var(--color-Modal-Overlay-BG);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: modal-overlay-in-b-8r4czpxrt0 0.2s ease;
}

.modal-overlay.modal-closing[b-8r4czpxrt0] {
    animation: modal-overlay-out-b-8r4czpxrt0 0.2s ease forwards;
}

/* ── Panel ── */
.modal-panel[b-8r4czpxrt0] {
    background-color: var(--color-Modal-BG);
    border: 1px solid var(--color-Modal-Border);
    border-radius: var(--Modal-Radius);
    box-shadow: var(--Modal-Shadow);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
    width: 100%;
    animation: modal-panel-in-b-8r4czpxrt0 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.modal-closing .modal-panel[b-8r4czpxrt0] {
    animation: modal-panel-out-b-8r4czpxrt0 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ── Sizes ── */
.modal-sm[b-8r4czpxrt0] {
    max-width: 400px;
}

.modal-md[b-8r4czpxrt0] {
    max-width: 600px;
}

.modal-lg[b-8r4czpxrt0] {
    max-width: 800px;
}

/* ── Header ── */
.modal-header[b-8r4czpxrt0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-Modal-Border);
    flex-shrink: 0;
}

.modal-title[b-8r4czpxrt0] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-Modal-FG);
}

.modal-close[b-8r4czpxrt0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-Modal-FG-Muted);
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.modal-close:hover[b-8r4czpxrt0] {
    background-color: var(--color-Modal-Close-Hover-BG);
    color: var(--color-Modal-FG);
}

/* ── Body ── */
.modal-body[b-8r4czpxrt0] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    font-size: 14px;
    color: var(--color-Modal-FG);
}

/* ── Footer ── */
.modal-footer[b-8r4czpxrt0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--color-Modal-Border);
    flex-shrink: 0;
}

/* ── Scrollbar (body) ── */
.modal-body[b-8r4czpxrt0]::-webkit-scrollbar {
    width: 6px;
}

.modal-body[b-8r4czpxrt0]::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body[b-8r4czpxrt0]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.modal-body[b-8r4czpxrt0]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}
/* /Components/Controls/Dialogs/ToastNotification.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   ToastNotification.razor.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes: entrada / salida del toast ── */
@keyframes toast-in-b-acymnp7lry {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toast-out-b-acymnp7lry {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ── Keyframe: progreso ── */
@keyframes toast-progress-b-acymnp7lry {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ── Contenedor (superior centrado) ── */
.toast-container[b-acymnp7lry] {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1200;
    max-width: 420px;
    width: calc(100vw - 48px);
    pointer-events: none;
}

/* ── Item ── */
.toast-item[b-acymnp7lry] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--color-Toast-BG);
    border: 1px solid var(--color-Toast-Border);
    border-radius: var(--Toast-Radius);
    box-shadow: var(--Toast-Shadow);
    padding: 11px 36px 14px 20px;
    overflow: hidden;
    pointer-events: all;
    animation: toast-in-b-acymnp7lry 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-item.toast-closing[b-acymnp7lry] {
    animation: toast-out-b-acymnp7lry 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ── Barra de acento lateral ── */
.toast-accent[b-acymnp7lry] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--toast-accent);
}

/* ── Icono ── */
.toast-icon[b-acymnp7lry] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background-color: var(--toast-accent-bg);
    color: var(--toast-accent);
    flex-shrink: 0;
}

    .toast-icon svg[b-acymnp7lry] {
        width: 17px;
        height: 17px;
    }

/* ── Texto ── */
.toast-body[b-acymnp7lry] {
    flex: 1;
    min-width: 0;
}

.toast-message[b-acymnp7lry] {
    font-size: 13px;
    color: var(--color-Toast-FG);
    line-height: 1.5;
    word-wrap: break-word;
}

/* ── Botón de cierre ── */
.toast-close[b-acymnp7lry] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-Toast-FG-Muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

    .toast-close:hover[b-acymnp7lry] {
        background-color: var(--color-Toast-Close-Hover-BG);
        color: var(--color-Toast-FG);
    }

    .toast-close svg[b-acymnp7lry] {
        width: 11px;
        height: 11px;
    }

/* ── Barra de progreso ── */
.toast-progress[b-acymnp7lry] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: var(--toast-accent);
    opacity: 0.45;
    animation: toast-progress-b-acymnp7lry linear forwards;
    /* animation-duration se inyecta por estilo inline */
}

/* ── Temas: acento por tipo ── */
.toast-theme-info[b-acymnp7lry]    { --toast-accent: var(--color-Toast-Info-Accent);    --toast-accent-bg: var(--color-Toast-Info-Accent-BG); }
.toast-theme-warning[b-acymnp7lry] { --toast-accent: var(--color-Toast-Warning-Accent); --toast-accent-bg: var(--color-Toast-Warning-Accent-BG); }
.toast-theme-error[b-acymnp7lry]   { --toast-accent: var(--color-Toast-Error-Accent);   --toast-accent-bg: var(--color-Toast-Error-Accent-BG); }
/* /Components/Controls/Inputs/CheckBox.razor.rz.scp.css */
/* ── Wrapper ── */
.chk-wrapper[b-jjwrd519ux] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

/* ── Ocultar el input nativo ── */
.chk-input[b-jjwrd519ux] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ── Caja visual ── */
.chk-box[b-jjwrd519ux] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-CheckBox-Border);
    border-radius: var(--CheckBox-Radius);
    background-color: var(--color-CheckBox-BG);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

/* ── Check mark ── */
.chk-box[b-jjwrd519ux]::after {
    content: "";
    display: block;
    width: 5px;
    height: 9px;
    border: solid var(--color-CheckBox-Check-FG);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}

/* ── Checked state ── */
.chk-input:checked + .chk-box[b-jjwrd519ux] {
    background-color: var(--color-CheckBox-Checked-BG);
    border-color: var(--color-CheckBox-Checked-Border);
}

.chk-input:checked + .chk-box[b-jjwrd519ux]::after {
    transform: rotate(45deg) scale(1);
}

/* ── Focus state ── */
.chk-input:focus-visible + .chk-box[b-jjwrd519ux] {
    border-color: var(--color-CheckBox-Focus-Border);
    box-shadow: 0 0 0 3px var(--color-CheckBox-Focus-Shadow);
}

/* ── Hover state ── */
.chk-wrapper:hover .chk-box[b-jjwrd519ux] {
    border-color: var(--color-CheckBox-Hover-Border);
}

/* ── Disabled state ── */
.chk-input:disabled + .chk-box[b-jjwrd519ux] {
    opacity: 0.5;
    cursor: not-allowed;
}

.chk-input:disabled ~ .chk-label[b-jjwrd519ux] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Indeterminate state ── */
.chk-indeterminate[b-jjwrd519ux] {
    background-color: var(--color-CheckBox-Checked-BG);
    border-color: var(--color-CheckBox-Checked-Border);
}

.chk-indeterminate[b-jjwrd519ux]::after {
    width: 10px;
    height: 2px;
    border: none;
    background-color: var(--color-CheckBox-Check-FG);
    transform: scale(1);
    margin-top: 0;
}

/* ── Label ── */
.chk-label[b-jjwrd519ux] {
    font-size: 14px;
    color: var(--color-CheckBox-FG);
}
/* /Components/Controls/Inputs/CheckList.razor.rz.scp.css */
/* ── Contenedor ── */
.chl-wrapper[b-y32j9d5lum] {
    border: 1px solid var(--color-CheckList-Border);
    border-radius: var(--CheckList-Radius);
    background-color: var(--color-CheckList-BG);
    overflow-y: auto;
    padding: 4px 0;
}

/* ── Fila ── */
.chl-row[b-y32j9d5lum] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 8px;
    border-radius: 6px;
    margin: 1px 4px;
    transition: background-color 0.15s ease;
}

.chl-row:hover[b-y32j9d5lum] {
    background-color: var(--color-CheckList-Row-Hover-BG);
}

/* ── Botón expandir ── */
.chl-expander[b-y32j9d5lum] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    color: var(--color-CheckList-Expander-FG);
    cursor: pointer;
    padding: 0;
    font-size: 10px;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.chl-expander:hover[b-y32j9d5lum] {
    background-color: var(--color-CheckList-Border);
    color: var(--color-CheckList-FG);
}

/* ── Espaciador (nodo hoja) ── */
.chl-expander-spacer[b-y32j9d5lum] {
    flex-shrink: 0;
    width: 18px;
}

/* ── Sin elementos ── */
.chl-empty[b-y32j9d5lum] {
    display: block;
    text-align: center;
    padding: 16px;
    color: var(--color-CheckList-Expander-FG);
    font-size: 13px;
}
/* /Components/Controls/Inputs/DateTimePicker.razor.rz.scp.css */
/* ── Wrapper ── */
.dtp-wrapper[b-0tl92eyv40] {
    position: relative;
    width: 100%;
}

/* ── Control (input + icon) ── */
.dtp-control[b-0tl92eyv40] {
    display: flex;
    align-items: center;
    background-color: var(--color-DateTimePicker-BG);
    border: 1px solid var(--color-DateTimePicker-Border);
    border-radius: var(--DateTimePicker-Radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.dtp-wrapper.open .dtp-control[b-0tl92eyv40] {
    border-color: var(--color-DateTimePicker-Focus-Border);
    box-shadow: 0 0 0 3px var(--color-DateTimePicker-Focus-Shadow);
}

/* ── Input ── */
.dtp-input[b-0tl92eyv40] {
    flex: 1;
    border: none;
    outline: none;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--color-DateTimePicker-FG);
    background: transparent;
    cursor: text;
    min-width: 0;
}

.dtp-input[b-0tl92eyv40]::placeholder {
    color: var(--color-DateTimePicker-Placeholder);
}

/* ── Icon ── */
.dtp-icon[b-0tl92eyv40] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: var(--color-DateTimePicker-Placeholder);
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer;
}

/* ── Panel ── */
.dtp-panel[b-0tl92eyv40] {
    position: fixed;
    width: 280px;
    visibility: hidden;
    background-color: var(--color-DateTimePicker-BG);
    border: 1px solid var(--color-DateTimePicker-Border);
    border-radius: var(--DateTimePicker-Radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    padding: 12px;
}

/* ── Header (nav meses) ── */
.dtp-header[b-0tl92eyv40] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.dtp-title[b-0tl92eyv40] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-DateTimePicker-FG);
    user-select: none;
}

.dtp-nav-btn[b-0tl92eyv40] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-DateTimePicker-FG);
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.15s ease;
}

.dtp-nav-btn:hover[b-0tl92eyv40] {
    background-color: var(--color-DateTimePicker-Hover-BG);
}

/* ── Weekday headers ── */
.dtp-weekdays[b-0tl92eyv40] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.dtp-weekdays span[b-0tl92eyv40] {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-DateTimePicker-Placeholder);
    padding: 4px 0;
    user-select: none;
}

/* ── Day grid ── */
.dtp-days[b-0tl92eyv40] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dtp-day[b-0tl92eyv40] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-DateTimePicker-FG);
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    padding: 0;
}

.dtp-day:hover:not(.selected)[b-0tl92eyv40] {
    background-color: var(--color-DateTimePicker-Hover-BG);
}

.dtp-day.other-month[b-0tl92eyv40] {
    opacity: 0.3;
}

.dtp-day.today:not(.selected)[b-0tl92eyv40] {
    border: 1.5px solid var(--color-DateTimePicker-Today-Border);
}

.dtp-day.selected[b-0tl92eyv40] {
    background-color: var(--color-DateTimePicker-Selected-BG);
    color: var(--color-DateTimePicker-Selected-FG);
    font-weight: 600;
}

/* ── Time ── */
.dtp-time[b-0tl92eyv40] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 0 4px;
    border-top: 1px solid var(--color-DateTimePicker-Border);
    margin-top: 8px;
    color: var(--color-DateTimePicker-Placeholder);
    font-size: 14px;
}

.dtp-time input[type="number"][b-0tl92eyv40] {
    width: 48px;
    padding: 4px;
    border: 1px solid var(--color-DateTimePicker-Border);
    border-radius: 6px;
    background: transparent;
    color: var(--color-DateTimePicker-FG);
    font-size: 14px;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}

.dtp-time input[type="number"][b-0tl92eyv40]::-webkit-inner-spin-button,
.dtp-time input[type="number"][b-0tl92eyv40]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dtp-time input[type="number"]:focus[b-0tl92eyv40] {
    border-color: var(--color-DateTimePicker-Focus-Border);
}

.dtp-time-sep[b-0tl92eyv40] {
    font-weight: 600;
    color: var(--color-DateTimePicker-FG);
}

/* ── Footer ── */
.dtp-footer[b-0tl92eyv40] {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-DateTimePicker-Border);
    margin-top: 8px;
}

.dtp-today-btn[b-0tl92eyv40],
.dtp-clear-btn[b-0tl92eyv40] {
    padding: 4px 14px;
    border: 1px solid var(--color-DateTimePicker-Border);
    border-radius: 6px;
    background: transparent;
    color: var(--color-DateTimePicker-FG);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dtp-today-btn:hover[b-0tl92eyv40] {
    background-color: var(--color-DateTimePicker-Selected-BG);
    color: var(--color-DateTimePicker-Selected-FG);
    border-color: var(--color-DateTimePicker-Selected-BG);
}

.dtp-clear-btn:hover[b-0tl92eyv40] {
    background-color: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

/* ── Mobile modal ── */
.dtp-mobile-backdrop[b-0tl92eyv40] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
}

.dtp-mobile-modal[b-0tl92eyv40] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-DateTimePicker-BG);
    border-radius: 16px 16px 0 0;
    z-index: 9999;
    padding: 20px 16px 24px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}

.dtp-mobile-title[b-0tl92eyv40] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-DateTimePicker-FG);
}

.dtp-mobile-close[b-0tl92eyv40] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--color-DateTimePicker-Hover-BG);
    color: var(--color-DateTimePicker-FG);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.dtp-mobile-selects[b-0tl92eyv40] {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.dtp-mobile-select[b-0tl92eyv40] {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid var(--color-DateTimePicker-Border);
    border-radius: 8px;
    background: var(--color-DateTimePicker-BG);
    color: var(--color-DateTimePicker-FG);
    font-size: 15px;
    outline: none;
    -webkit-appearance: auto;
    appearance: auto;
    cursor: pointer;
}

.dtp-mobile-select:focus[b-0tl92eyv40] {
    border-color: var(--color-DateTimePicker-Focus-Border);
    box-shadow: 0 0 0 3px var(--color-DateTimePicker-Focus-Shadow);
}

/* Larger touch targets for mobile day grid */
.dtp-days-mobile[b-0tl92eyv40] {
    gap: 4px;
}

.dtp-days-mobile .dtp-day[b-0tl92eyv40] {
    min-height: 42px;
    font-size: 15px;
    border-radius: 8px;
}
/* /Components/Controls/Inputs/DropDownList.razor.rz.scp.css */
/* ── Wrapper ── */
.ddl-wrapper[b-mh6xze0uba] {
    position: relative;
    width: 100%;
    min-width: 0;
}

/* ── Control (input + arrow) ── */
.ddl-control[b-mh6xze0uba] {
    display: flex;
    align-items: center;
    background-color: var(--color-DropDownList-BG);
    border: 1px solid var(--color-DropDownList-Border);
    border-radius: var(--DropDownList-Radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    overflow: hidden;
}

.ddl-wrapper.open .ddl-control[b-mh6xze0uba],
.ddl-control:focus-within[b-mh6xze0uba] {
    border-color: var(--color-DropDownList-Focus-Border);
    box-shadow: 0 0 0 3px var(--color-DropDownList-Focus-Shadow);
}

/* ── Input ── */
.ddl-input[b-mh6xze0uba] {
    flex: 1;
    border: none;
    outline: none;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--color-DropDownList-FG);
    background: transparent;
    min-width: 0;
}

.ddl-input.readonly[b-mh6xze0uba] {
    cursor: pointer;
    user-select: none;
}

.ddl-input[b-mh6xze0uba]::placeholder {
    color: var(--color-DropDownList-Placeholder);
}

/* ── Arrow ── */
.ddl-arrow[b-mh6xze0uba] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: var(--color-DropDownList-Placeholder);
    font-size: 12px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.ddl-arrow.open[b-mh6xze0uba] {
    transform: rotate(180deg);
}

/* ── Panel desplegable ── */
.ddl-panel[b-mh6xze0uba] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--color-DropDownList-BG);
    border: 1px solid var(--color-DropDownList-Border);
    border-radius: var(--DropDownList-Radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
}

/* ── Items ── */
.ddl-item[b-mh6xze0uba] {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--color-DropDownList-FG);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* ── Resaltado (mouse y teclado comparten el mismo indicador) ── */
.ddl-item.ddl-active[b-mh6xze0uba] {
    background-color: var(--color-DropDownList-Hover-BG);
}

.ddl-item.selected[b-mh6xze0uba] {
    background-color: var(--color-DropDownList-Selected-BG);
    color: var(--color-DropDownList-Selected-FG);
    font-weight: 600;
}

/* ── Mensaje vacío ── */
.ddl-empty[b-mh6xze0uba] {
    padding: 12px;
    text-align: center;
    color: var(--color-DropDownList-Placeholder);
    font-size: 13px;
}

/* ── Variante compacta (solo reduce padding horizontal) ── */
.ddl-wrapper.ddl-compact .ddl-input[b-mh6xze0uba] {
    padding-left: 6px;
    padding-right: 6px;
}

.ddl-wrapper.ddl-compact .ddl-arrow[b-mh6xze0uba] {
    padding-left: 5px;
    padding-right: 5px;
}

/* ── Scrollbar ── */
.ddl-panel[b-mh6xze0uba]::-webkit-scrollbar {
    width: 6px;
}

.ddl-panel[b-mh6xze0uba]::-webkit-scrollbar-track {
    background: transparent;
}

.ddl-panel[b-mh6xze0uba]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.ddl-panel[b-mh6xze0uba]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}
/* /Components/Controls/Inputs/FileDrop.razor.rz.scp.css */
/* ── Contenedor raíz ── */
.filedrop[b-05lpskznn1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Zona de arrastre ── */
.filedrop-zone[b-05lpskznn1] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 24px 16px;
    border: 2px dashed var(--color-FileDrop-Border);
    border-radius: var(--FileDrop-Radius);
    background-color: var(--color-FileDrop-BG);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
}

.filedrop-zone:hover[b-05lpskznn1] {
    border-color: var(--color-FileDrop-Drag-Border);
    background-color: var(--color-FileDrop-Drag-BG);
}

.filedrop-zone--dragging[b-05lpskznn1] {
    border-color: var(--color-FileDrop-Drag-Border);
    background-color: var(--color-FileDrop-Drag-BG);
}

/* ── Contenido visual (pointer-events none para no interferir con drag) ── */
.filedrop-visual[b-05lpskznn1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    text-align: center;
}

.filedrop-icon[b-05lpskznn1] {
    font-size: 2.5rem;
    color: var(--color-FileDrop-FG-Muted);
    transition: color 0.2s ease, transform 0.2s ease;
}

.filedrop-zone--dragging .filedrop-icon[b-05lpskznn1],
.filedrop-zone:hover .filedrop-icon[b-05lpskznn1] {
    color: var(--color-FileDrop-Drag-Border);
    transform: translateY(-4px);
}

.filedrop-text[b-05lpskznn1] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-FileDrop-FG);
}

.filedrop-hint[b-05lpskznn1] {
    font-size: 11px;
    color: var(--color-FileDrop-FG-Muted);
}

/* ── Footer ── */
.filedrop-footer[b-05lpskznn1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Botón "Examinar" — mismo estilo que CrudButton Custom ── */
.filedrop-browse[b-05lpskznn1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--color-CrudButton-Custom-Border);
    border-radius: var(--CrudButton-Radius);
    cursor: pointer;
    background-color: var(--color-CrudButton-Custom-BG);
    color: var(--color-CrudButton-Custom-FG);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
    text-decoration: none;
    width: fit-content;
}

.filedrop-browse:hover[b-05lpskznn1] {
    background-color: var(--color-CrudButton-Custom-Hover-BG);
}

.filedrop-browse:focus-visible[b-05lpskznn1] {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-CrudButton-Focus-Shadow);
}

/* ── Error ── */
.filedrop-error[b-05lpskznn1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-CrudButton-Delete-BG);
}

/* ── Lista de archivos ── */
.filedrop-filelist[b-05lpskznn1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filedrop-fileitem[b-05lpskznn1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--color-FileDrop-FileItem-Border);
    border-radius: calc(var(--FileDrop-Radius) - 2px);
    background-color: var(--color-FileDrop-FileItem-BG);
    font-size: 13px;
    min-width: 0;
}

.filedrop-fileitem-icon[b-05lpskznn1] {
    font-size: 13px;
    color: var(--color-FileDrop-FG-Muted);
    flex-shrink: 0;
}

.filedrop-fileitem-name[b-05lpskznn1] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-FileDrop-FG);
}

.filedrop-fileitem-size[b-05lpskznn1] {
    font-size: 11px;
    color: var(--color-FileDrop-FG-Muted);
    flex-shrink: 0;
}

.filedrop-fileitem-remove[b-05lpskznn1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-FileDrop-FG-Muted);
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.filedrop-fileitem-remove:hover[b-05lpskznn1] {
    background-color: var(--color-CrudButton-Delete-BG);
    color: var(--color-CrudButton-Delete-FG);
}

/* ── Responsive: teléfonos ── */
@media (max-width: 480px) {
    .filedrop-zone[b-05lpskznn1] {
        min-height: 100px;
        padding: 18px 12px;
    }

    .filedrop-icon[b-05lpskznn1] {
        font-size: 2rem;
    }

    .filedrop-browse[b-05lpskznn1] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Controls/Inputs/NumericUpdown.razor.rz.scp.css */
/* ── Wrapper ── */
.nud-wrapper[b-zxetx51bwo] {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    background-color: var(--color-NumericUpDown-BG);
    border: 1px solid var(--color-NumericUpDown-Border);
    border-radius: var(--NumericUpDown-Radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.nud-wrapper.focused[b-zxetx51bwo] {
    border-color: var(--color-NumericUpDown-Focus-Border);
    box-shadow: 0 0 0 3px var(--color-NumericUpDown-Focus-Shadow);
}

.nud-wrapper.disabled[b-zxetx51bwo] {
    opacity: 0.6;
    cursor: not-allowed;
}

    .nud-wrapper.disabled .nud-input[b-zxetx51bwo] {
        cursor: not-allowed;
    }

/* ── Input ── */
.nud-input[b-zxetx51bwo] {
    flex: 1;
    border: none;
    outline: none;
    padding: 6px 6px;
    font-size: 14px;
    color: var(--color-NumericUpDown-FG);
    background: transparent;
    text-align: left;
    min-width: 0;
    -moz-appearance: textfield;
}

.nud-input[b-zxetx51bwo]::-webkit-inner-spin-button,
.nud-input[b-zxetx51bwo]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.nud-input[b-zxetx51bwo]::placeholder {
    color: var(--color-NumericUpDown-Placeholder);
    text-align: left;
}

/* ── Buttons container ── */
.nud-buttons[b-zxetx51bwo] {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-NumericUpDown-Border);
}

/* ── Buttons ── */
.nud-btn[b-zxetx51bwo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex: 1;
    border: none;
    background: var(--color-NumericUpDown-Btn-BG);
    color: var(--color-NumericUpDown-Btn-FG);
    cursor: pointer;
    font-size: 9px;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nud-btn:hover:not(:disabled)[b-zxetx51bwo] {
    background-color: var(--color-NumericUpDown-Btn-Hover-BG);
    color: var(--color-NumericUpDown-Btn-Hover-FG);
}

.nud-btn:disabled[b-zxetx51bwo] {
    opacity: 0.3;
    cursor: not-allowed;
}

.nud-btn-up[b-zxetx51bwo] {
    border-bottom: 1px solid var(--color-NumericUpDown-Border);
}

/* ── Variante compacta (Small) ── */
.nud-sm .nud-input[b-zxetx51bwo] {
    padding: 2px 4px;
    font-size: 12px;
}

.nud-sm .nud-btn[b-zxetx51bwo] {
    width: 20px;
    font-size: 8px;
}
/* /Components/Controls/Inputs/PictureBox.razor.rz.scp.css */
.picturebox[b-ozauydypsl] {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Preview ── */
.picturebox-preview[b-ozauydypsl] {
    width: 100%;
    min-height: 120px;
    border: 1px solid var(--color-TextBox-Border);
    border-radius: var(--TextBox-Radius);
    background-color: var(--color-TextBox-BG);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.picturebox-img[b-ozauydypsl] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.picturebox-placeholder[b-ozauydypsl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-TextBox-Placeholder);
    font-size: 2.5rem;
}

/* ── Actions ── */
.picturebox-actions[b-ozauydypsl] {
    display: flex;
    gap: 6px;
}

.picturebox-btn[b-ozauydypsl] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    justify-content: center;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--color-TextBox-Border);
    border-radius: var(--TextBox-Radius);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    outline: none;
    text-decoration: none;
}

.picturebox-btn:disabled[b-ozauydypsl] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Browse ── */
.picturebox-btn-browse[b-ozauydypsl] {
    background-color: var(--color-TextBox-BG);
    color: var(--color-TextBox-FG);
}

.picturebox-btn-browse:hover[b-ozauydypsl] {
    background-color: var(--color-CrudButton-Cancel-Hover-BG);
}

/* ── Remove ── */
.picturebox-btn-remove[b-ozauydypsl] {
    background-color: var(--color-CrudButton-Delete-BG);
    color: var(--color-CrudButton-Delete-FG);
    border-color: var(--color-CrudButton-Delete-Border);
}

.picturebox-btn-remove:hover:not(:disabled)[b-ozauydypsl] {
    background-color: var(--color-CrudButton-Delete-Hover-BG);
}
/* /Components/Controls/Inputs/RadioButton.razor.rz.scp.css */
/* ── Wrapper ── */
.rdb-wrapper[b-c3u5xx693a] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

/* ── Ocultar el input nativo ── */
.rdb-input[b-c3u5xx693a] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ── Círculo visual ── */
.rdb-circle[b-c3u5xx693a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-RadioButton-Border);
    border-radius: 50%;
    background-color: var(--color-RadioButton-BG);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

/* ── Dot interior ── */
.rdb-circle[b-c3u5xx693a]::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-RadioButton-Dot-FG);
    transform: scale(0);
    transition: transform 0.15s ease;
}

/* ── Checked state ── */
.rdb-input:checked + .rdb-circle[b-c3u5xx693a] {
    background-color: var(--color-RadioButton-Checked-BG);
    border-color: var(--color-RadioButton-Checked-Border);
}

.rdb-input:checked + .rdb-circle[b-c3u5xx693a]::after {
    transform: scale(1);
}

/* ── Focus state ── */
.rdb-input:focus-visible + .rdb-circle[b-c3u5xx693a] {
    border-color: var(--color-RadioButton-Focus-Border);
    box-shadow: 0 0 0 3px var(--color-RadioButton-Focus-Shadow);
}

/* ── Hover state ── */
.rdb-wrapper:hover .rdb-circle[b-c3u5xx693a] {
    border-color: var(--color-RadioButton-Hover-Border);
}

/* ── Disabled state ── */
.rdb-input:disabled + .rdb-circle[b-c3u5xx693a] {
    opacity: 0.5;
    cursor: not-allowed;
}

.rdb-input:disabled ~ .rdb-label[b-c3u5xx693a] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Label ── */
.rdb-label[b-c3u5xx693a] {
    font-size: 14px;
    color: var(--color-RadioButton-FG);
}
/* /Components/Controls/Inputs/Switch.razor.rz.scp.css */
/* ── Wrapper ── */
.swt-wrapper[b-34x9ll99u1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

/* ── Ocultar el input nativo ── */
.swt-input[b-34x9ll99u1] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ── Track (pista) ── */
.swt-track[b-34x9ll99u1] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 22px;
    border: 2px solid var(--color-Switch-Border);
    border-radius: var(--Switch-Radius);
    background-color: var(--color-Switch-BG);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

/* ── Thumb (círculo deslizante) ── */
.swt-thumb[b-34x9ll99u1] {
    position: absolute;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-Switch-Thumb);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* ── Checked state ── */
.swt-input:checked + .swt-track[b-34x9ll99u1] {
    background-color: var(--color-Switch-Checked-BG);
    border-color: var(--color-Switch-Checked-Border);
}

.swt-input:checked + .swt-track .swt-thumb[b-34x9ll99u1] {
    transform: translateX(18px);
    background-color: var(--color-Switch-Checked-Thumb);
}

/* ── Focus state ── */
.swt-input:focus-visible + .swt-track[b-34x9ll99u1] {
    border-color: var(--color-Switch-Focus-Border);
    box-shadow: 0 0 0 3px var(--color-Switch-Focus-Shadow);
}

/* ── Hover state ── */
.swt-wrapper:hover .swt-track[b-34x9ll99u1] {
    border-color: var(--color-Switch-Hover-Border);
}

/* ── Disabled state ── */
.swt-input:disabled + .swt-track[b-34x9ll99u1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.swt-input:disabled ~ .swt-label[b-34x9ll99u1] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Label ── */
.swt-label[b-34x9ll99u1] {
    font-size: 14px;
    color: var(--color-Switch-FG);
}
/* /Components/Controls/Inputs/TextBox.razor.rz.scp.css */
.textbox[b-x6okppy9lc] {
    width: 100%;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--color-TextBox-FG);
    background-color: var(--color-TextBox-BG);
    border: 1px solid var(--color-TextBox-Border);
    border-radius: var(--TextBox-Radius);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.textbox[b-x6okppy9lc]::placeholder {
    color: var(--color-TextBox-Placeholder);
}

.textbox:focus[b-x6okppy9lc] {
    border-color: var(--color-TextBox-Focus-Border);
    box-shadow: 0 0 0 3px var(--color-TextBox-Focus-Shadow);
}

/* ── Password ── */
.textbox-wrapper[b-x6okppy9lc] {
    position: relative;
    width: 100%;
}

.textbox-password[b-x6okppy9lc] {
    padding-right: 2.5rem;
}

.textbox-password[b-x6okppy9lc]::-ms-reveal,
.textbox-password[b-x6okppy9lc]::-ms-clear {
    display: none;
}

.toggle-password-btn[b-x6okppy9lc] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem;
    color: var(--color-TextBox-Placeholder);
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    border-radius: 4px;
    line-height: 1;
}

.toggle-password-btn:hover[b-x6okppy9lc] {
    color: var(--color-TextBox-FG);
}
/* /Components/Layout/BranchSelectorModal.razor.rz.scp.css */
.bsm-backdrop[b-hlz2xxuqrz] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.bsm-card[b-hlz2xxuqrz] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
}

.bsm-header[b-hlz2xxuqrz] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.bsm-header-icon[b-hlz2xxuqrz] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    background: #eef4fa;
    color: var(--color-Primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.bsm-title[b-hlz2xxuqrz] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
}

.bsm-subtitle[b-hlz2xxuqrz] {
    margin: 0;
    font-size: 0.78rem;
    color: #888;
}

.bsm-close[b-hlz2xxuqrz] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1rem;
    color: #aaa;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bsm-close:hover[b-hlz2xxuqrz] {
    background: #f5f5f5;
    color: #555;
}

.bsm-list[b-hlz2xxuqrz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem 1.5rem;
    max-height: 320px;
    overflow-y: auto;
}

.bsm-item[b-hlz2xxuqrz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    background: #fafafa;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
    width: 100%;
    min-height: 48px; /* accessible touch target */
}

    .bsm-item:hover[b-hlz2xxuqrz] {
        border-color: var(--color-BranchPill-Border);
        background: var(--color-BranchPill-BG);
        color: var(--color-BranchPill-FG)
    }

.bsm-item.selected[b-hlz2xxuqrz] {
    border-color: #4a90c4;
    background: #eef4fa;
}

.bsm-item-icon[b-hlz2xxuqrz] {
    color: var(--color-Primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.bsm-item-name[b-hlz2xxuqrz] {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2b2b2b;
}

.bsm-item-check[b-hlz2xxuqrz] {
    color: #4a90c4;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Mobile: bottom sheet ── */
@media (max-width: 600px) {
    .bsm-backdrop[b-hlz2xxuqrz] {
        align-items: flex-end;
        padding: 0;
    }

    .bsm-card[b-hlz2xxuqrz] {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        /* Drag handle hint */
        padding-top: 0.35rem;
    }

    .bsm-card[b-hlz2xxuqrz]::before {
        content: '';
        display: block;
        width: 2.5rem;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 0 auto 0.25rem;
    }

    .bsm-list[b-hlz2xxuqrz] {
        max-height: 55vh;
        padding-bottom: env(safe-area-inset-bottom, 1.5rem);
    }
}

/* ── Very short screens (landscape phone) ── */
@media (max-height: 500px) {
    .bsm-list[b-hlz2xxuqrz] {
        max-height: 40vh;
    }

    .bsm-header[b-hlz2xxuqrz] {
        padding: 0.85rem 1.25rem 0.75rem;
    }
}
/* /Components/Layout/Loader.razor.rz.scp.css */
/* ── Overlay ── */
.loader-overlay[b-ljvcnq4i65] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: loader-fade-in-b-ljvcnq4i65 0.2s ease;
}

@keyframes loader-fade-in-b-ljvcnq4i65 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Caja centrada ── */
.loader-box[b-ljvcnq4i65] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* ── Mensaje opcional ── */
.loader-message[b-ljvcnq4i65] {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ── Spinner (from Uiverse.io by kerolos23) ── */
.loader[b-ljvcnq4i65] {
    width: 53px;
    height: 53px;
    border: 5px dotted var(--color-Primary);
    border-style: solid solid dotted dotted;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation-b-ljvcnq4i65 2s linear infinite;
}

    .loader[b-ljvcnq4i65]::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 4px dotted var(--color-Secondary);
        border-style: solid solid dotted;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        animation: rotationBack-b-ljvcnq4i65 1s linear infinite;
        transform-origin: center center;
    }

@keyframes rotation-b-ljvcnq4i65 {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotationBack-b-ljvcnq4i65 {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.login-page[b-59vi99q9f5] {
    min-height: 100vh;
    display: flex;
    padding-top: 60px;
    justify-content: center;
    background: linear-gradient(145deg, #c6c24313 0%, #FFFFFF 50%, #c0825215 100%);
}

.login-container[b-59vi99q9f5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
    padding: 1.5rem;
}

.login-logo[b-59vi99q9f5] {
    width: 180px;
    height: auto;
    margin-bottom: 1.75rem;
}

.login-card[b-59vi99q9f5] {
    width: 100%;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.08);
    padding: 2rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.nav-toggle[b-y9o3fqgxlf] {
    display: none;
}

/* ── No-branches blocking screen ── */
.no-branch-screen[b-y9o3fqgxlf] {
    position: fixed;
    inset: 0;
    background: #f7f7f7;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.no-branch-card[b-y9o3fqgxlf] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 420px;
    padding: 2rem 2rem 1.75rem;
    text-align: center;
}

.no-branch-icon[b-y9o3fqgxlf] {
    font-size: 2.5rem;
    color: #e74c3c;
    margin-bottom: 1rem;
}

.no-branch-title[b-y9o3fqgxlf] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.no-branch-text[b-y9o3fqgxlf] {
    font-size: 0.875rem;
    color: #888;
    margin-bottom: 1.5rem;
}

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

main[b-y9o3fqgxlf] {
    flex: 1;
    min-width: 0;
    background: #ffffff;
}

.sidebar[b-y9o3fqgxlf] {
    background: var(--color-SideBar-BG);
}

/* ── Mobile topbar ── */
.mobile-topbar[b-y9o3fqgxlf] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 3.5rem;
    padding: 0 0.75rem;
    background: var(--color-SideBar-BG, white);
    border-bottom: 1px solid #d6d5d5;
    position: sticky;
    top: 0;
    z-index: 300;
}

.burger-btn[b-y9o3fqgxlf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
    color: #4D4D4D;
    font-size: 1.1rem;
    cursor: pointer;
}

.burger-btn:hover[b-y9o3fqgxlf] {
    background-color: #f0f0f0;
}

.mobile-logo-header[b-y9o3fqgxlf] {
    height: 1.75rem;
    width: auto;
}

/* Right slot of the mobile topbar (branch icon + logout) */
.mobile-topbar-right[b-y9o3fqgxlf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.1rem;
}

.branch-icon-btn[b-y9o3fqgxlf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: var(--color-BranchButton-BG);
    border-radius: 50%;
    color: var(--color-BranchButton-FG);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

    .branch-icon-btn:hover[b-y9o3fqgxlf] {
        background-color: var(--color-BranchButton-BG-Hover);
    }

.profile-btn[b-y9o3fqgxlf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: none;
    border-radius: 50%;
    color: #4D4D4D;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.profile-btn:hover[b-y9o3fqgxlf] {
    background-color: #f0f0f0;
}

.profile-info[b-y9o3fqgxlf] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.profile-name[b-y9o3fqgxlf] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.profile-role[b-y9o3fqgxlf] {
    font-size: 0.72rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.sidebar-backdrop[b-y9o3fqgxlf] {
    display: none;
}

/* ── Branch pill (desktop) ── */
.branch-pill[b-y9o3fqgxlf] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-BranchPill-BG);
    border: 1.5px solid var(--color-BranchPill-Border);
    border-radius: 999px;
    padding: 4px 12px 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-BranchPill-FG);
    cursor: pointer;
    max-width: 200px;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.branch-pill span[b-y9o3fqgxlf] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

    .branch-pill:hover[b-y9o3fqgxlf] {
        background: var(--color-BranchPill-BG-Hover);
        border-color: var(--color-BranchPill-FG-Hover);
    }

.branch-chevron[b-y9o3fqgxlf] {
    font-size: 0.65rem;
    opacity: 0.7;
    flex-shrink: 0;
}

/* ── Desktop header ── */
.top-row[b-y9o3fqgxlf] {
    background-color: #ffffff;
    justify-content: space-between;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.header-title[b-y9o3fqgxlf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.menu-icon-svg[b-y9o3fqgxlf] {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    flex-shrink: 0;
    vertical-align: middle;
}

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

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

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

/* ── Mobile ── */
@media (max-width: 1220.98px) {
    .sidebar[b-y9o3fqgxlf] {
        position: fixed;
        top: 3.5rem;
        left: 0;
        height: calc(100vh - 3.5rem);
        width: 220px;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 200;
        border-right: 1px solid #d6d5d5;
    }

    .page:has(.nav-toggle:checked) .sidebar[b-y9o3fqgxlf] {
        transform: translateX(0);
    }

    .sidebar-backdrop[b-y9o3fqgxlf] {
        position: fixed;
        inset: 0;
        top: 3.5rem;
        background: rgba(0, 0, 0, 0.35);
        z-index: 150;
        cursor: pointer;
    }

    .page:has(.nav-toggle:checked) .sidebar-backdrop[b-y9o3fqgxlf] {
        display: block;
    }

    .top-row[b-y9o3fqgxlf] {
        display: none;
    }

    /* Shrink user info a bit on mid-range tablets */
    .profile-name[b-y9o3fqgxlf] { max-width: 110px; }
    .profile-role[b-y9o3fqgxlf] { max-width: 110px; }
}

/* ── Desktop ── */
@media (min-width: 1221px) {
    .mobile-topbar[b-y9o3fqgxlf] {
        display: none;
    }

    .page[b-y9o3fqgxlf] {
        flex-direction: row;
    }

    .sidebar[b-y9o3fqgxlf] {
        width: 180px;
        height: 100vh;
        position: sticky;
        top: 0;
        border-right: 1px solid #d6d5d5;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

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

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

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

/* ── Narrow desktop / small tablets ── */
@media (min-width: 1221px) and (max-width: 1400px) {
    .branch-pill[b-y9o3fqgxlf] {
        max-width: 150px;
    }

    .profile-name[b-y9o3fqgxlf] { max-width: 100px; }
    .profile-role[b-y9o3fqgxlf] { max-width: 100px; }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.nav-scrollable[b-r2aqkoqlh4] {
    display: block;
}

.logo-container[b-r2aqkoqlh4] {
    display: none;
}

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

    .nav-wrapper[b-r2aqkoqlh4] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    .nav-wrapper nav[b-r2aqkoqlh4] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    .nav-scrollable[b-r2aqkoqlh4] {
        display: block;
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        scrollbar-width: thin;
        scrollbar-color: #d0d0d0 transparent;
    }

    .nav-scrollable[b-r2aqkoqlh4]::-webkit-scrollbar {
        width: 2px;
    }

    .nav-scrollable[b-r2aqkoqlh4]::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-scrollable[b-r2aqkoqlh4]::-webkit-scrollbar-thumb {
        background-color: #d0d0d0;
        border-radius: 2px;
    }

    .nav-scrollable[b-r2aqkoqlh4]::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8;
    }

    .logo[b-r2aqkoqlh4] {
        max-width: 100%;
        max-height: 60px;
        height: auto;
        width: auto;
    }
    .logo-container[b-r2aqkoqlh4] {
        display: flex;
        justify-content: center;
    }
}
/* /Components/Layout/NotificationPanel.razor.rz.scp.css */
/* ── Contenedor posicionado ── */
.notif-container[b-2lo071vbf7] {
    position: relative;
    display: flex;
    align-items: center;
}

/* ── Botón campana ── */
.notif-bell[b-2lo071vbf7] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--color-Header-FG, #6b7280);
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.notif-bell:hover[b-2lo071vbf7] {
    background-color: var(--color-Header-Hover-BG, rgba(0,0,0,0.06));
    color: var(--color-Header-Active-FG, #111827);
}

.notif-bell.has-unread[b-2lo071vbf7] {
    color: var(--color-Primary, #3b82f6);
}

/* ── Badge contador ── */
.notif-badge[b-2lo071vbf7] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background-color: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* ── Backdrop ── */
.notif-backdrop[b-2lo071vbf7] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

/* ── Panel flotante ── */
.notif-panel[b-2lo071vbf7] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 520px;
    background-color: var(--color-Modal-BG, #fff);
    border: 1px solid var(--color-Modal-Border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1050;
}

/* ── Cabecera del panel ── */
.notif-panel-header[b-2lo071vbf7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--color-Modal-Border, #e5e7eb);
    flex-shrink: 0;
}

.notif-panel-title[b-2lo071vbf7] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-Text-Primary, #111827);
}

.notif-header-actions[b-2lo071vbf7] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.notif-markall[b-2lo071vbf7] {
    border: none;
    background: none;
    font-size: 12px;
    color: var(--color-Primary, #3b82f6);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.notif-markall:hover[b-2lo071vbf7] {
    background-color: rgba(59,130,246,0.08);
}

.notif-deleteall[b-2lo071vbf7] {
    border: none;
    background: none;
    font-size: 13px;
    color: var(--color-Text-Muted, #9ca3af);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.notif-deleteall:hover[b-2lo071vbf7] {
    color: #ef4444;
    background-color: rgba(239,68,68,0.08);
}

/* ── Cuerpo con scroll ── */
.notif-panel-body[b-2lo071vbf7] {
    overflow-y: auto;
    flex: 1;
}

/* ── Estado vacío ── */
.notif-empty[b-2lo071vbf7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    color: var(--color-Text-Muted, #9ca3af);
    font-size: 13px;
}

.notif-empty i[b-2lo071vbf7] {
    font-size: 28px;
    opacity: 0.5;
}

/* ── Ítem de notificación ── */
.notif-item[b-2lo071vbf7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px 10px 0;
    cursor: pointer;
    transition: background-color 0.12s ease;
    position: relative;
    border-bottom: 1px solid var(--color-Modal-Border, #e5e7eb);
}

.notif-item:last-child[b-2lo071vbf7] {
    border-bottom: none;
}

.notif-item:hover[b-2lo071vbf7] {
    background-color: var(--color-Row-Hover-BG, rgba(0,0,0,0.03));
}

.notif-item.unread[b-2lo071vbf7] {
    background-color: rgba(59,130,246,0.04);
}

/* ── Barra lateral de tipo ── */
.notif-type-bar[b-2lo071vbf7] {
    width: 4px;
    align-self: stretch;
    border-radius: 0 2px 2px 0;
    flex-shrink: 0;
}

.notif-type-bar.type-sistema[b-2lo071vbf7]     { background-color: #6b7280; }
.notif-type-bar.type-inventario[b-2lo071vbf7]  { background-color: #f59e0b; }
.notif-type-bar.type-ventas[b-2lo071vbf7]      { background-color: #10b981; }
.notif-type-bar.type-integracion[b-2lo071vbf7] { background-color: #8b5cf6; }
.notif-type-bar.type-seguridad[b-2lo071vbf7]   { background-color: #ef4444; }

/* ── Icono de tipo ── */
.notif-icon[b-2lo071vbf7] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}

.notif-icon.type-sistema[b-2lo071vbf7]     { background-color: #f3f4f6; color: #6b7280; }
.notif-icon.type-inventario[b-2lo071vbf7]  { background-color: #fef3c7; color: #d97706; }
.notif-icon.type-ventas[b-2lo071vbf7]      { background-color: #d1fae5; color: #059669; }
.notif-icon.type-integracion[b-2lo071vbf7] { background-color: #ede9fe; color: #7c3aed; }
.notif-icon.type-seguridad[b-2lo071vbf7]   { background-color: #fee2e2; color: #dc2626; }

/* ── Contenido ── */
.notif-content[b-2lo071vbf7] {
    flex: 1;
    min-width: 0;
}

.notif-title[b-2lo071vbf7] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-Text-Primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-message[b-2lo071vbf7] {
    font-size: 12px;
    color: var(--color-Text-Secondary, #6b7280);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-time[b-2lo071vbf7] {
    font-size: 11px;
    color: var(--color-Text-Muted, #9ca3af);
    margin-top: 4px;
}

/* ── Botón eliminar ítem (visible al hover) ── */
.notif-delete[b-2lo071vbf7] {
    border: none;
    background: none;
    font-size: 12px;
    color: transparent;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.notif-item:hover .notif-delete[b-2lo071vbf7] {
    color: var(--color-Text-Muted, #9ca3af);
}

.notif-delete:hover[b-2lo071vbf7] {
    color: #ef4444 !important;
    background-color: rgba(239,68,68,0.08);
}

/* ── Punto indicador no-leída ── */
.notif-dot[b-2lo071vbf7] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #3b82f6;
    flex-shrink: 0;
    margin-top: 6px;
}

@media (max-width: 455px) {
    .notif-panel[b-2lo071vbf7] {
         position: fixed;
         top: 60px;
         left: 50%;
         right: auto;
         transform: translateX(-50%);
         width: calc(100vw - 32px);
         max-width: 360px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-4vips1yer8],
.components-reconnect-repeated-attempt-visible[b-4vips1yer8],
.components-reconnect-failed-visible[b-4vips1yer8],
.components-pause-visible[b-4vips1yer8],
.components-resume-failed-visible[b-4vips1yer8],
.components-rejoining-animation[b-4vips1yer8] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-4vips1yer8],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-4vips1yer8],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-4vips1yer8],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-4vips1yer8],
#components-reconnect-modal.components-reconnect-retrying[b-4vips1yer8],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-4vips1yer8],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-4vips1yer8],
#components-reconnect-modal.components-reconnect-failed[b-4vips1yer8],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-4vips1yer8] {
    display: block;
}


#components-reconnect-modal[b-4vips1yer8] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-4vips1yer8 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-4vips1yer8 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-4vips1yer8 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-4vips1yer8]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-4vips1yer8 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-4vips1yer8 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-4vips1yer8 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-4vips1yer8 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-4vips1yer8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-4vips1yer8] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-4vips1yer8] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-4vips1yer8] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-4vips1yer8] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-4vips1yer8] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-4vips1yer8] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-4vips1yer8 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-4vips1yer8] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-4vips1yer8 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/ClientPages/ClientAccount.razor.rz.scp.css */
/* ── Tarjetas de estadísticas ── */
.stat-card[b-jl2il1vs7t] {
    background: #ffffff;
    border: 1px solid var(--color-Control-Border);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.stat-card-label[b-jl2il1vs7t] {
    font-size: 11px;
    font-weight: 600;
    color: #8896a6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card-value[b-jl2il1vs7t] {
    font-size: 22px;
    font-weight: 700;
    color: #2d3748;
    line-height: 1.2;
}

/* ── Campos de información general ── */
.info-field[b-jl2il1vs7t] {
    margin-bottom: 14px;
}

.info-label[b-jl2il1vs7t] {
    font-size: 11px;
    font-weight: 600;
    color: #8896a6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.info-value[b-jl2il1vs7t] {
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
}
/* /Components/Pages/DashboardPages/Dashboard.razor.rz.scp.css */
/* ── Grid de tarjetas ─────────────────────────────────────────────────────── */
.dashboard-grid[b-ro7bxzb2ea] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

/* ── Etiqueta de sección ──────────────────────────────────────────────────── */
.dashboard-section-label[b-ro7bxzb2ea] {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--color-Dashboard-SectionLabel-FG);
    margin-bottom: 10px;
}

/* ── Tarjeta base (flat & uniforme) ──────────────────────────────────────── */
.summary-card[b-ro7bxzb2ea] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--DataGrid-Radius);
    border: 1px solid var(--color-Dashboard-Card-Border);
    background: var(--color-Dashboard-Card-BG);
    box-shadow: var(--DataGrid-Shadow);
}

/* ── Ícono (cuadrado redondeado) ──────────────────────────────────────────── */
.summary-card__icon[b-ro7bxzb2ea] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

/* ── Cuerpo de texto ──────────────────────────────────────────────────────── */
.summary-card__body[b-ro7bxzb2ea] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.summary-card__label[b-ro7bxzb2ea] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-Dashboard-CardLabel-FG);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-card__value[b-ro7bxzb2ea] {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.3px;
    white-space: nowrap;
}

/* ── Variantes de color ───────────────────────────────────────────────────── */
.summary-card--green  .summary-card__icon[b-ro7bxzb2ea]  { background: var(--color-Dashboard-Green-BG);  color: var(--color-Dashboard-Green); }
.summary-card--green  .summary-card__value[b-ro7bxzb2ea] { color: var(--color-Dashboard-Green); }

.summary-card--teal   .summary-card__icon[b-ro7bxzb2ea]  { background: var(--color-Dashboard-Teal-BG);   color: var(--color-Dashboard-Teal); }
.summary-card--teal   .summary-card__value[b-ro7bxzb2ea] { color: var(--color-Dashboard-Teal); }

.summary-card--blue   .summary-card__icon[b-ro7bxzb2ea]  { background: var(--color-Dashboard-Blue-BG);   color: var(--color-Dashboard-Blue); }
.summary-card--blue   .summary-card__value[b-ro7bxzb2ea] { color: var(--color-Dashboard-Blue); }

.summary-card--purple .summary-card__icon[b-ro7bxzb2ea]  { background: var(--color-Dashboard-Purple-BG); color: var(--color-Dashboard-Purple); }
.summary-card--purple .summary-card__value[b-ro7bxzb2ea] { color: var(--color-Dashboard-Purple); }

.summary-card--orange .summary-card__icon[b-ro7bxzb2ea]  { background: var(--color-Dashboard-Orange-BG); color: var(--color-Dashboard-Orange); }
.summary-card--orange .summary-card__value[b-ro7bxzb2ea] { color: var(--color-Dashboard-Orange); }

.summary-card--gray   .summary-card__icon[b-ro7bxzb2ea]  { background: var(--color-Dashboard-Gray-BG);   color: var(--color-Dashboard-Gray); }
.summary-card--gray   .summary-card__value[b-ro7bxzb2ea] { color: var(--color-Dashboard-Gray); }

/* ── Layout mensual + gráfica (izquierda | derecha) ──────────────────────── */
.dashboard-monthly-chart-layout[b-ro7bxzb2ea] {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 1.5rem;
}

/* ── Resumen mensual apilado vertical ────────────────────────────────────── */
.dashboard-month-stack[b-ro7bxzb2ea] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Dropdowns pequeños (mes / año) ──────────────────────────────────────── */
:global(.ddl-sm-filter)[b-ro7bxzb2ea] {
    width: 155px;
}

/* ── Área de gráfica ──────────────────────────────────────────────────────── */
.dashboard-chart-area[b-ro7bxzb2ea] {
    background: var(--color-Dashboard-Card-BG);
    border: 1px solid var(--color-Dashboard-Card-Border);
    border-radius: var(--DataGrid-Radius);
    box-shadow: var(--DataGrid-Shadow);
    padding: 12px 8px 4px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── Responsive: en pantallas pequeñas apila verticalmente ───────────────── */
@media (max-width: 900px) {
    .dashboard-monthly-chart-layout[b-ro7bxzb2ea] {
        grid-template-columns: 1fr;
    }
}

/* ── Grilla de estadísticas de texto ──────────────────────────────────────── */
.dashboard-stat-grid[b-ro7bxzb2ea] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 16px 28px;
}

.dashboard-stat-item[b-ro7bxzb2ea] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-Dashboard-Card-Border);
}

.dashboard-stat-item__label[b-ro7bxzb2ea] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-Dashboard-CardLabel-FG);
}

.dashboard-stat-item__value[b-ro7bxzb2ea] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.15;
}

/* ── Modificadores de color para estadísticas ─────────────────────────────── */
.dashboard-stat--green[b-ro7bxzb2ea]  { color: var(--color-Dashboard-Green); }
.dashboard-stat--teal[b-ro7bxzb2ea]   { color: var(--color-Dashboard-Teal); }
.dashboard-stat--blue[b-ro7bxzb2ea]   { color: var(--color-Dashboard-Blue); }
.dashboard-stat--purple[b-ro7bxzb2ea] { color: var(--color-Dashboard-Purple); }
.dashboard-stat--orange[b-ro7bxzb2ea] { color: var(--color-Dashboard-Orange); }
.dashboard-stat--gray[b-ro7bxzb2ea]   { color: var(--color-Dashboard-Gray); }
.dashboard-stat--red[b-ro7bxzb2ea]    { color: var(--color-Dashboard-Red); }
/* /Components/Pages/Login.razor.rz.scp.css */
.content[b-o1zzcsp36o] {
    background: #f7f7f7;
}
/* /Components/Pages/NotAuthorized.razor.rz.scp.css */
.na-wrapper[b-n30tpd9230] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.na-card[b-n30tpd9230] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 16px;
    padding: 2.5rem 3rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    max-width: 420px;
    text-align: center;
}

.na-icon[b-n30tpd9230] {
    font-size: 3rem;
    color: #d9534f;
}

.na-title[b-n30tpd9230] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #2b2b2b;
}

.na-text[b-n30tpd9230] {
    margin: 0;
    font-size: 0.88rem;
    color: #666;
    line-height: 1.6;
}

.btn-back[b-n30tpd9230] {
    margin-top: 0.5rem;
    background: #B2CDE4;
    border: none;
    border-radius: 8px;
    padding: 8px 24px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    color: #2b2b2b;
}

.btn-back:hover[b-n30tpd9230] {
    background: #9dbdd8;
}
/* /Components/Pages/PurchasePages/NewPurchase.razor.rz.scp.css */
/* ── Cards móvil/tablet ────────────────────────────────────────────────────── */

.purchase-card-list[b-8nlw5s5mu0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 90px; /* espacio para el total fijo inferior */
}

.purchase-card[b-8nlw5s5mu0] {
    background: var(--color-Surface, #fff);
    border: 1px solid var(--color-Border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.purchase-card-header[b-8nlw5s5mu0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 6px;
    border-bottom: 1px solid var(--color-Border, #e2e8f0);
    background: var(--color-SurfaceAlt, #f8fafc);
}

.purchase-card-code[b-8nlw5s5mu0] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-TextMuted, #64748b);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.purchase-card-name[b-8nlw5s5mu0] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-Text, #1e293b);
    line-height: 1.3;
}

.purchase-card-body[b-8nlw5s5mu0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding: 12px;
}

.purchase-field[b-8nlw5s5mu0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.purchase-field-label[b-8nlw5s5mu0] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-TextMuted, #64748b);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.purchase-card-footer[b-8nlw5s5mu0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--color-Border, #e2e8f0);
    background: var(--color-SurfaceAlt, #f8fafc);
}

.purchase-card-subtotal[b-8nlw5s5mu0] {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-Text, #1e293b);
}

/* ── Total fijo (móvil) ────────────────────────────────────────────────────── */

.purchase-totals-fixed[b-8nlw5s5mu0] {
    z-index: 1000;
}

/* ── Sección FEL en el modal de guardar ─────────────────────────────────────── */

.purchase-save-section-label[b-8nlw5s5mu0] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-TextMuted, #64748b);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--color-Border, #e2e8f0);
}
/* /Components/Pages/ReportPages/StaticReports.razor.rz.scp.css */
.sr-panel[b-t5w26erywn] {
    border: 1px solid var(--color-ToolStrip-Border);
    border-radius: var(--ToolStrip-Radius);
    background-color: #ffffff;
    overflow: hidden;
}

/* ── Filtros ── */
.sr-filters[b-t5w26erywn] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background-color: var(--color-ToolStrip-BG);
    border-bottom: 1px solid var(--color-ToolStrip-Border);
}

/* ── Cuerpo con la grilla ── */
.sr-body[b-t5w26erywn] {
    padding: 12px;
}

/* ── Barra de selección activa ── */
.sr-selection-bar[b-t5w26erywn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    margin-bottom: 10px;
    background-color: var(--color-ToolStrip-Btn-Active-BG);
    border: 1px solid color-mix(in srgb, var(--color-ToolStrip-Btn-Active-FG) 30%, transparent);
    border-radius: 6px;
    color: var(--color-ToolStrip-Btn-Active-FG);
    font-size: 13px;
}

.sr-selection-bar i:first-child[b-t5w26erywn] {
    font-size: 14px;
}

.sr-selection-bar span[b-t5w26erywn] {
    flex: 1;
}

.sr-selection-clear[b-t5w26erywn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease, background-color 0.15s ease;
    padding: 0;
}

.sr-selection-clear:hover[b-t5w26erywn] {
    opacity: 1;
    background-color: color-mix(in srgb, var(--color-ToolStrip-Btn-Active-FG) 15%, transparent);
}
/* /Components/Pages/SalePages/NewSale.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   NewSale.razor.css — Estilos de la página Nueva Venta
   ═══════════════════════════════════════════════════════════════ */

/* ── Anula el z-index de fixed-bottom (1030) para quedar debajo del sidebar,
      backdrop y topbar del layout (z-index: 200, 150, 300) ── */

.cart-totals-fixed[b-kfag90y33u] {
    z-index: 100 !important;
}
/* /Components/Pages/Welcome.razor.rz.scp.css */
.welcome-wrapper[b-nvdt469gr7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.welcome-card[b-nvdt469gr7] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    max-width: 480px;
    width: 100%;
}

.welcome-icon[b-nvdt469gr7] {
    font-size: 3.5rem;
    color: var(--color-Primary-SemiLight);
    line-height: 1;
    flex-shrink: 0;
}

.welcome-body[b-nvdt469gr7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.welcome-greeting[b-nvdt469gr7] {
    margin: 0;
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.welcome-name[b-nvdt469gr7] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #2b2b2b;
}

.welcome-role[b-nvdt469gr7] {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    color: #555;
    background: #f0f4f8;
    border-radius: 999px;
    padding: 3px 12px;
    width: fit-content;
    margin-top: 0.25rem;
}

.welcome-hint[b-nvdt469gr7] {
    font-size: 0.85rem;
    color: #999;
    margin: 0;
}
/* /Components/Routes.razor.rz.scp.css */
.te-page[b-3875nz8t4n] {
    min-height: 100vh;
    display: flex;
    padding-top: 60px;
    justify-content: center;
    background: linear-gradient(145deg, #E1ECF5 0%, #FFFFFF 50%, #F5FFF4 100%);
}

.te-container[b-3875nz8t4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 440px;
    padding: 1.5rem;
}

.te-logo[b-3875nz8t4n] {
    width: 180px;
    height: auto;
    margin-bottom: 1.75rem;
}

.te-card[b-3875nz8t4n] {
    width: 100%;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.08);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.te-icon[b-3875nz8t4n] {
    font-size: 3rem;
    color: #d9534f;
}

.te-icon--warn[b-3875nz8t4n] {
    color: #e6a817;
}

.te-title[b-3875nz8t4n] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #2b2b2b;
}

.te-text[b-3875nz8t4n] {
    margin: 0;
    font-size: 0.88rem;
    color: #666;
    line-height: 1.6;
}

.te-btn[b-3875nz8t4n] {
    margin-top: 0.5rem;
    background: #B2CDE4;
    border: none;
    border-radius: 8px;
    padding: 8px 24px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    color: #2b2b2b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.te-btn:hover[b-3875nz8t4n] {
    background: #9dbdd8;
    color: #2b2b2b;
}