/* -- Colores del sistema ----------------------------------------------------
   Toda la piel de la app sale de aqui. Estos valores son los de fabrica y el
   modulo /colores solo los pisa, por usuario, con un :root que App.razor mete
   en el <head>. Regla de oro: lo que se declare aqui tiene que reproducir EXACTO
   como se ve la app hoy, para que el tema sea opcional y nunca un cambio forzado.
   Un color que no este en esta lista no se puede personalizar todavia: se van
   migrando modulo por modulo, igual que las advertencias de compilacion.        */
:root {
    --t-menu-bg:   #0f2027;   /* barra superior (inicio del degradado) */
    --t-menu-bg2:  #2c5364;   /* barra superior (fin del degradado)    */
    --t-menu-fg:   #ffffff;
    --t-side-bg:   #ffffff;   /* cajon de modulos */
    --t-side-fg:   #2a2f36;
    --t-head-bg:   #46594e;   /* encabezado de cada modulo */
    --t-head-fg:   #ffffff;
    --t-page-bg:   #f4f6f9;
    --t-bar-bg:    #f4f6f9;   /* barras de filtros y encabezados de tabla */
    --t-fg:        #1a1a2e;
    --t-fg2:       #6c757d;
    --t-accent:    #0a7d33;   /* botones de accion y elementos destacados */
    --t-accent-fg: #ffffff;
    --t-tool-bg:   #6c757d;   /* botones secundarios (Ver, Imprimir, Excel...) */
    --t-tool-fg:   #ffffff;
    --t-card-bg:   #ffffff;
    --t-border:    #dee2e6;
    /* Velos neutros: sirven igual sobre un menu claro que sobre uno oscuro, que es
       justamente el punto de poder invertir el menu. */
    --t-hover:     rgba(128,128,128,.14);
    --t-hover2:    rgba(128,128,128,.22);
}

html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
}

/* ── App shell ─────────────────────────────────────── */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--t-page-bg);
}

/* ── Topbar ─────────────────────────────────────────── */
.topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--t-menu-bg), var(--t-menu-bg2));
    color: var(--t-menu-fg);
    padding: 0 1.5rem;
    height: 56px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    position: sticky;
    top: 0;
    z-index: 100;
}
.topbar-brand {
    color: var(--t-menu-fg);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .3px;
}
.topbar-logo-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 44px;
    width: auto;
    object-fit: contain;
}
.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    margin-right: 176px;   /* deja espacio a las campanas en la esquina */
}
.topbar-username {
    font-weight: 600;
}
.topbar-sucursal {
    color: var(--t-menu-fg);
    opacity: .7;
    font-size: 0.8rem;
}
.btn-cerrar-sesion {
    background: var(--t-hover);
    color: var(--t-menu-fg);
    border: 1px solid currentColor;
    border-radius: 6px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background .2s;
}
.btn-cerrar-sesion:hover {
    background: var(--t-hover2);
    color: var(--t-menu-fg);
}

/* ── App content ────────────────────────────────────── */
.app-content {
    padding: 2rem;
    max-width: 1850px;
    width: 100%;
    margin: 0 auto;
}

/* ── Menú lateral colapsable ────────────────────────── */
.side-toggle {
    background: transparent; border: none; color: var(--t-menu-fg); font-size: 1.3rem; cursor: pointer;
    margin-right: .75rem; line-height: 1; padding: 4px 9px; border-radius: 6px;
}
.side-toggle:hover { background: var(--t-hover); }
.app-body { display: flex; align-items: stretch; flex: 1; min-height: 0; }
/* Menú = cajón (drawer) que se superpone; cerrado por default. El ☰ lo abre; al entrar a un módulo se cierra. */
.side-nav {
    position: fixed; top: 56px; left: 0; z-index: 200;
    width: 262px; height: calc(100vh - 56px);
    background: var(--t-side-bg); border-right: 1px solid var(--t-border); overflow-y: auto;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.25);
}
html.side-open .side-nav { transform: translateX(0); }
html.side-open .side-backdrop { display: block; position: fixed; inset: 56px 0 0 0; background: rgba(0,0,0,.35); z-index: 150; }

/* ── Menú FIJO (pantalla de inicio) ──────────────────
   En Inicio el menú no es un cajón que tapa el trabajo: es parte de la pantalla. Queda abierto,
   sin la capa oscura, y el contenido se recorre para no quedar debajo. Como es el punto de partida
   del día, verlo desplegado ahorra un clic. En las demás pantallas sigue siendo cajón. */
html.side-fijo .side-nav { transform: translateX(0); box-shadow: none; }
html.side-fijo .side-backdrop { display: none !important; }
html.side-fijo .app-content { margin-left: 262px; }
/* En pantalla angosta no cabe fijo: ahí vuelve a comportarse como cajón cerrado. */
@media (max-width: 900px) {
    html.side-fijo .side-nav { transform: translateX(-100%); box-shadow: 2px 0 16px rgba(0,0,0,.25); }
    html.side-fijo .app-content { margin-left: 0; }
    html.side-fijo.side-open .side-nav { transform: translateX(0); }
}

.side-nav-inner { padding: 8px 6px; display: flex; flex-direction: column; gap: 2px; }
/* Rótulo de SECCIÓN (Operación, Análisis, Sistema): es una etiqueta, no un botón — no navega ni se
   colapsa. Va en gris tenue para que el ojo caiga en los módulos, que sí son clicables. */
.side-sec { font-size: .63rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
            color: var(--t-side-fg); opacity: .45; padding: 12px 10px 4px; }
.side-nav-inner > .side-sec:first-child { padding-top: 4px; }
/* Subtítulo de GRUPO dentro de un módulo (Movimientos, Reportes, Catálogos…). */
.side-grp { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
            color: var(--t-side-fg); opacity: .42; padding: 7px 10px 2px; }
.side-cat-items > .side-grp:first-child { padding-top: 2px; }
/* Módulo de una sola pantalla: se ve como los encabezados de módulo, no como un submódulo. */
.side-uno { font-size: .88rem !important; font-weight: 600; }

/* ── Barra de módulo de CATÁLOGO ─────────────────────────────────────────────
   La misma barra para todos los catálogos, tengan pantalla propia (Clientes,
   Productos, Proveedores, Unidades, Choferes, Cuentas) o usen la genérica
   /catalogo/{id}: título a la izquierda, las funciones del módulo como botones
   a la derecha. Vive aquí y no en cada página para que sea UNA sola definición:
   si cada pantalla se trae su copia, a la tercera ya no se parecen.           */
.cat-bar { background: var(--t-head-bg); color: var(--t-head-fg); border-radius: 11px;
           padding: 11px 16px; display: flex; align-items: center; gap: 14px;
           flex-wrap: wrap; margin-bottom: 12px; }
.cat-bar .ti { font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; gap: 9px; }
.cat-bar .sub { font-size: .72rem; opacity: .8; font-weight: 500; margin-top: 1px; max-width: 70ch; }
.cat-acc { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.cat-btn { background: var(--t-tool-bg); color: var(--t-tool-fg); border: 1px solid var(--t-border);
           border-radius: 7px; padding: 5px 11px; font-size: .8rem; cursor: pointer;
           white-space: nowrap; text-decoration: none; display: inline-block; line-height: 1.5; }
.cat-btn:hover:not(:disabled) { opacity: .88; color: var(--t-tool-fg); text-decoration: none; }
.cat-btn:disabled { opacity: .5; cursor: not-allowed; }
.cat-btn.acc { background: var(--t-accent); color: var(--t-accent-fg); border-color: transparent; font-weight: 600; }
@media (max-width: 820px) { .cat-acc { margin-left: 0; width: 100%; } }
.side-home { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--t-side-fg); text-decoration: none; font-size: .88rem; font-weight: 600; }
.side-home:hover { background: var(--t-hover); color: var(--t-side-fg); }
/* Categoría (acordeón) */
.side-cat { display: flex; flex-direction: column; }
.side-cat-hd {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: transparent; border: none; cursor: pointer; text-align: left;
    padding: 9px 10px; border-radius: 7px; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; color: #56606c;
}
.side-cat-hd:hover { background: var(--t-hover); }
.side-chev { transition: transform .18s ease; font-size: .8rem; color: var(--t-side-fg); opacity: .55; }
.side-cat.open > .side-cat-hd .side-chev { transform: rotate(90deg); }
.side-cat.open > .side-cat-hd { color: var(--t-accent); }
.side-cat-items { display: none; flex-direction: column; gap: 1px; padding: 2px 0 6px 6px; }
.side-cat.open > .side-cat-items { display: flex; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: var(--t-side-fg); text-decoration: none; font-size: .84rem; white-space: nowrap; }
.side-link:hover { background: var(--t-hover); }
/* El modulo activo se marca con un filete del color de acento, no pintando el texto:
   el acento puede ser oscuro y el menu tambien, y ahi el texto desapareceria. */
.side-link.active { background: var(--t-hover2); color: var(--t-side-fg); font-weight: 700; box-shadow: inset 3px 0 0 var(--t-accent); }
.side-ic { width: 22px; text-align: center; font-size: 1.02rem; flex: 0 0 22px; }
.side-ic svg { width: 16px; height: 16px; vertical-align: middle; display: inline-block; }
/* En el encabezado de módulo (acordeón) se agrupa ícono+texto a la izquierda y la flecha a la derecha. */
.side-cat-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.side-backdrop { display: none; }
/* Home: sin menú lateral */
.app-shell.no-side .side-nav, .app-shell.no-side .side-toggle { display: none; }
/* APK/standalone: antes ocultaba el menú lateral (experiencia restringida de Emergencia). Ahora la APK es app
   completa (todos los módulos), así que el menú lateral SÍ se muestra. Se deja .apk-mode por si se requiere
   algún ajuste específico de APK en el futuro. */

/* ── Dashboard header ───────────────────────────────── */
.dashboard-header {
    margin-bottom: 2rem;
}
.dashboard-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
}

/* ── Módulos grid ───────────────────────────────────── */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.7rem;
}
.module-card {
    background: #fff;
    border-radius: 10px;
    padding: 0.9rem 0.7rem;
    text-align: center;
    text-decoration: none;
    color: #1a1a2e;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border: 2px solid transparent;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.module-card:hover {
    transform: translateY(-3px);
    border-color: #2c5364;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    color: #0f2027;
}
.module-icon  { font-size: 1.7rem; }
.module-name  { font-weight: 700; font-size: 0.85rem; }
.module-desc  { color: var(--t-fg2); font-size: 0.72rem; line-height: 1.25; }

/* ── Encabezado de sección ──────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.section-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--t-fg);
    margin: 0;
}

/* ── Formulario ──────────────────────────────────────── */
.form-card {
    background: var(--t-card-bg);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    margin-bottom: 2rem;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem 1.5rem;
}
.form-field label {
    display: block;
    font-weight: 600;
    font-size: 0.82rem;
    color: #495057;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.form-control {
    width: 100%;
    border: 1.5px solid var(--t-border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.925rem;
    transition: border-color .15s;
    background: #fff;
}
.form-control:focus {
    border-color: #2c5364;
    outline: none;
    box-shadow: 0 0 0 3px rgba(44,83,100,.12);
}
.form-control[readonly] { background: #f8f9fa; color: #6c757d; }
.form-control:disabled  { background: #f8f9fa; cursor: not-allowed; }
.campo-error { border-color: #dc3545 !important; }

.input-busqueda {
    display: flex;
    gap: 0.4rem;
}
.input-busqueda .form-control { flex: 1; }
.btn-buscar {
    border: 1.5px solid #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
    padding: 0 0.75rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background .15s;
}
.btn-buscar:hover:not(:disabled) { background: #e9ecef; }

.form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}
.btn-guardar {
    background: var(--t-accent);
    color: var(--t-accent-fg);
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity .2s;
}
.btn-guardar:hover:not(:disabled) { opacity: .9; }
.btn-guardar:disabled { opacity: .6; cursor: not-allowed; }
.btn-limpiar {
    background: #fff;
    color: #495057;
    border: 1.5px solid #dee2e6;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background .15s;
}
.btn-limpiar:hover { background: #f8f9fa; }
.btn-refrescar {
    background: transparent;
    border: 1.5px solid #dee2e6;
    border-radius: 6px;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: #495057;
}
.btn-refrescar:hover { background: #f8f9fa; }

/* ── Alertas ─────────────────────────────────────────── */
.alerta-exito {
    background: #d1e7dd; border: 1px solid #a3cfbb;
    border-radius: 8px; padding: 0.75rem 1rem;
    color: #0a3622; font-size: 0.9rem; margin-bottom: 1rem;
}
.alerta-warning {
    background: #fff3cd; border: 1px solid #ffda6a;
    border-radius: 8px; padding: 0.75rem 1rem;
    color: #664d03; font-size: 0.875rem; margin-bottom: 1rem;
}
.alerta-error {
    background: #f8d7da; border: 1px solid #f1aeb5;
    border-radius: 8px; padding: 0.75rem 1rem;
    color: #58151c; font-size: 0.9rem; margin-bottom: 1rem;
}

/* ── Tabla de depósitos ───────────────────────────────── */
.tabla-wrapper {
    background: var(--t-card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    overflow-x: auto;
    width: 100%;
}
.tabla-depositos {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.tabla-depositos th {
    background: var(--t-bar-bg);
    padding: 0.7rem 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    color: var(--t-fg2);
    letter-spacing: .5px;
    border-bottom: 2px solid var(--t-border);
    white-space: nowrap;
}
.tabla-depositos td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--t-border);
    color: var(--t-fg);
    vertical-align: middle;
}
.tabla-depositos tr:last-child td { border-bottom: none; }
.tabla-depositos tr:hover td { background: #f8f9ff; }
.fila-confirmada td { color: #555; }
.td-cliente { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-monto { font-weight: 700; color: #0a3622 !important; }
.badge-estado {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
.badge-ok   { background: #d1e7dd; color: #0a3622; }
.badge-pend { background: #fff3cd; color: #664d03; }
.sin-registros { color: #6c757d; padding: 1.5rem; text-align: center; margin: 0; }

/* ── Confirmación ────────────────────────────────────── */
.filtros-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    margin-bottom: 1rem;
}

/* ── Filtros (una sola línea) ─────────────────────────── */
.filters-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    margin-bottom: 1rem;
}

.filter-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.filter-group {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-width: 150px;
}

.filter-group label {
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
    font-size: 0.9rem;
}

.filter-group input,
.filter-group select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
}
.filtros-grid {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.filtros-grid .form-field { min-width: 180px; flex: 1; }
.filtros-accion { flex: 0 0 auto !important; }
.resumen-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
    font-size: 0.9rem;
    color: #495057;
    flex-wrap: wrap;
}
.resumen-monto { color: #0a3622; }
.btn-confirmar-todo {
    background: #0a3622;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: auto;
}
.btn-confirmar-todo:hover:not(:disabled) { opacity: .85; }
.btn-confirmar-todo:disabled { opacity: .5; cursor: not-allowed; }

.badge-sucursal {
    background: #e8f4fd;
    color: #0c5460;
    border-radius: 12px;
    padding: 0.15rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.td-cuenta { font-size: 0.8rem; color: #6c757d; }
.acciones-fila { display: flex; gap: 0.4rem; align-items: center; }

.btn-confirmar {
    background: #d1e7dd;
    color: #0a3622;
    border: 1px solid #a3cfbb;
    border-radius: 6px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.btn-confirmar:hover:not(:disabled) { background: #a3cfbb; }
.btn-confirmar:disabled { opacity: .5; cursor: not-allowed; }

.btn-rechazar {
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f1aeb5;
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background .15s;
}
.btn-cambiar-suc {
    background: #e8f4fd;
    color: #055160;
    border: 1px solid #9eeaf9;
    border-radius: 6px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.btn-cambiar-suc:hover:not(:disabled) { background: #9eeaf9; }
.btn-cambiar-suc:disabled { opacity: .5; cursor: not-allowed; }
.btn-rechazar:hover:not(:disabled) { background: #f1aeb5; }
.btn-rechazar:disabled { opacity: .5; cursor: not-allowed; }

.rechazo-inline { display: flex; gap: 0.35rem; align-items: center; }
.rechazo-inline .form-control { font-size: 0.82rem; padding: 0.3rem 0.5rem; }
.btn-rechazar-ok {
    background: #d1e7dd; color: #0a3622;
    border: 1px solid #a3cfbb; border-radius: 6px;
    padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.85rem;
}
.btn-rechazar-cancel {
    background: #f8d7da; color: #842029;
    border: 1px solid #f1aeb5; border-radius: 6px;
    padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.85rem;
}
.cargando {
    padding: 2rem;
    text-align: center;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* ── Bitácora acciones ───────────────────────────────── */
.tabla-bitacora td { font-size: 0.84rem; }
.accion-inline {
    display: flex; flex-direction: column; gap: 0.35rem;
}
.accion-inline .form-control { font-size: 0.82rem; padding: 0.3rem 0.5rem; }
.accion-btns { display: flex; gap: 0.35rem; }
.btn-accion-est {
    background: #e8f4fd; color: #055160;
    border: 1px solid #9eeaf9; border-radius: 6px;
    padding: 0.2rem 0.6rem; font-size: 0.78rem;
    font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .15s;
}
.btn-accion-est:hover { background: #9eeaf9; }
.btn-accion-alm {
    background: #f3e8ff; color: #5a189a;
    border: 1px solid #d8b4fe; border-radius: 6px;
    padding: 0.2rem 0.6rem; font-size: 0.78rem;
    font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .15s;
}
.btn-accion-alm:hover { background: #d8b4fe; }

/* ── Spinner global de carga ─────────────────────────── */
.app-spinner-overlay { position:fixed; inset:0; background:rgba(0,0,0,.22); z-index:4000; display:flex; align-items:center; justify-content:center; }
.app-spinner-box { background:#fff; border-radius:12px; padding:22px 28px; box-shadow:0 12px 40px rgba(0,0,0,.3); display:flex; flex-direction:column; align-items:center; gap:10px; }
.app-spinner { width:46px; height:46px; border:5px solid #e5e7eb; border-top-color:#0066cc; border-radius:50%; animation:app-spin .8s linear infinite; }
.app-spinner-txt { font-size:.85rem; color:#555; }
@@keyframes app-spin { to { transform:rotate(360deg); } }

/* ── Notificaciones ──────────────────────────────────── */
.notif-root {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 200;
}
/* Segunda campana (saldos): a la izquierda de la de pedidos para que no se encimen. */
.notif-root-saldos {
    right: 56px;
}
/* Tercera campana (tareas CRM del día). */
.notif-root-crm {
    right: 96px;
}
/* Cuarta campana (facturas pendientes de ERP; solo ADMIN). */
.notif-root-facpend {
    right: 136px;
}
.notif-wrapper {
    position: relative;
}
.notif-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    position: relative;
    padding: 0.2rem 0.4rem;
    line-height: 1;
}
.notif-badge {
    position: absolute;
    top: -4px; right: -6px;
    background: #dc3545;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 0.05rem 0.35rem;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
}
.notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    z-index: 500;
    overflow: hidden;
    color: #1a1a2e;
}
.notif-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #0f2027, #2c5364);
    color: #fff;
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
}
.notif-close {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    opacity: .75;
}
.notif-close:hover { opacity: 1; }
.notif-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    gap: 0.5rem;
    transition: background .1s;
}
.notif-item:hover { background: #f8f9ff; }
.notif-item-loading { opacity: .6; }
.notif-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}
.notif-folio   { font-weight: 700; font-size: 0.875rem; color: #0f2027; }
.notif-cliente {
    font-size: 0.8rem; color: #495057;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-sucursal { font-size: 0.75rem; color: #6c757d; }
.notif-fecha    { font-size: 0.72rem; color: #adb5bd; }
.notif-liberar {
    background: #d1e7dd; color: #0a3622;
    border: 1px solid #a3cfbb; border-radius: 6px;
    padding: 0.25rem 0.65rem; font-size: 0.8rem;
    font-weight: 600; cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; gap: 0.3rem;
    transition: background .15s; flex-shrink: 0;
}
.notif-liberar:hover:not(:disabled) { background: #a3cfbb; }
.notif-liberar:disabled { opacity: .5; cursor: not-allowed; }
.notif-panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    border-top: 1px solid #f0f0f0;
    font-size: 0.8rem;
}
.notif-panel-footer a { color: #2c5364; font-weight: 600; text-decoration: none; }
.notif-panel-footer a:hover { text-decoration: underline; }
.notif-refresh {
    background: transparent; border: none;
    color: #6c757d; cursor: pointer; font-size: 0.9rem;
}
.notif-refresh:hover { color: #1a1a2e; }
.notif-acciones { display: flex; gap: 0.35rem; flex-shrink: 0; }
.notif-rechazar {
    background: #f8d7da; color: #842029;
    border: 1px solid #f1aeb5; border-radius: 6px;
    padding: 0.25rem 0.5rem; font-size: 0.85rem;
    cursor: pointer; transition: background .15s;
}
.notif-rechazar:hover:not(:disabled) { background: #f1aeb5; }
.notif-rechazar:disabled { opacity: .5; cursor: not-allowed; }
.notif-item-rechazo { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.notif-rechazo-inline { display: flex; gap: 0.35rem; align-items: center; }
.notif-rechazo-inline .form-control { font-size: 0.82rem; padding: 0.3rem 0.5rem; flex: 1; }

.notif-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.875rem;
}

/* ── Input archivo ───────────────────────────────────── */
.form-control-file {
    display: block;
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1.5px dashed #ced4da;
    border-radius: 8px;
    background: #fafafa;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color .15s;
}
.form-control-file:hover { border-color: #2c5364; }

/* ── Buscador ERP ────────────────────────────────────── */
.erp-busqueda {
    display: flex; align-items: center; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 0.25rem;
}
.erp-label  { font-weight: 700; font-size: 0.9rem; color: #344050; white-space: nowrap; }
.erp-input  { max-width: 280px; }
.erp-ok     { color: #0a3622; font-size: 0.875rem; font-weight: 600; }
.erp-error  { color: #842029; font-size: 0.875rem; }

/* ── Botón nuevo pedido ──────────────────────────────── */
.btn-nuevo-pedido {
    background: linear-gradient(135deg, #0f2027, #2c5364);
    color: #fff; border: none; border-radius: 8px;
    padding: 0.45rem 1.1rem; font-size: 0.875rem;
    font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: opacity .2s;
}
.btn-nuevo-pedido:hover { opacity: .88; }

/* ── Pedidos ─────────────────────────────────────────── */
.tabla-pedidos td { font-size: 0.855rem; }
.td-fecha    { white-space: nowrap; color: #6c757d; }
.td-fpago    { font-size: 0.78rem; color: #495057; }
.fila-obs td { background: #fffbf0; padding: 0.25rem 1rem 0.5rem 2.5rem !important; }
.td-obs      { font-size: 0.8rem; color: #856404; }

.badge-estatus {
    display: inline-block; border-radius: 20px;
    padding: 0.18rem 0.6rem; font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.badge-estatus-pendiente         { background:#fff3cd; color:#664d03; }
.badge-estatus-programado        { background:#cff4fc; color:#055160; }
.badge-estatus-procesando_entrega{ background:#d1e7dd; color:#0a3622; }
.badge-estatus-entregado,
.badge-estatus-entrergado        { background:#d1e7dd; color:#0a3622; }
.badge-estatus-rechazado         { background:#f8d7da; color:#842029; }
.badge-error { background:#f8d7da; color:#842029; }

.paginacion {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; padding: 1rem;
    border-top: 1px solid #f0f0f0; font-size: 0.875rem; color: #495057;
}
.btn-pag {
    background: #fff; border: 1.5px solid #dee2e6; border-radius: 6px;
    padding: 0.3rem 0.85rem; font-size: 0.85rem; cursor: pointer;
    transition: background .15s;
}
.btn-pag:hover:not(:disabled) { background: #f8f9fa; }
.btn-pag:disabled { opacity: .4; cursor: not-allowed; }

/* ── Impresión ───────────────────────────────────────── */
.btn-imprimir {
    background: #cff4fc; color: #055160;
    border: 1px solid #9eeaf9; border-radius: 6px;
    padding: 0.2rem 0.65rem; font-size: 0.8rem;
    font-weight: 600; text-decoration: none;
    white-space: nowrap; transition: background .15s;
    display: inline-block;
}
.btn-imprimir:hover { background: #9eeaf9; color: #055160; }
.badge-impresa {
    color: #6c757d; font-size: 0.78rem;
    white-space: nowrap;
}
.btn-rehabilitar {
    background: #fff3cd; color: #664d03;
    border: 1px solid #ffda6a; border-radius: 6px;
    padding: 0.25rem 0.65rem; font-size: 0.8rem;
    font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: background .15s;
}
.btn-rehabilitar:hover:not(:disabled) { background: #ffda6a; }
.btn-rehabilitar:disabled { opacity: .5; cursor: not-allowed; }
.print-toolbar {
    padding: 0.75rem 1.5rem;
    display: flex; gap: 0.75rem; align-items: center;
    background: #f8f9fa; border-bottom: 1px solid #dee2e6;
}

/* ── Recibo imprimible ───────────────────────────────── */
.recibo {
    max-width: 400px;
    margin: 1.5rem auto;
    padding: 1.5rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}
.recibo-header { text-align: center; margin-bottom: 1rem; }
.recibo-header h2 { font-size: 1.1rem; margin: 0 0 0.2rem; }
.recibo-subtitulo { color: #6c757d; font-size: 0.85rem; margin: 0; }
.recibo-folio {
    display: flex; justify-content: space-between;
    background: #1a1a2e; color: #fff;
    padding: 0.5rem 0.75rem; border-radius: 6px;
    margin-bottom: 1rem; font-size: 0.85rem;
}
.recibo-folio strong { font-size: 1.1rem; }
.recibo-tabla { width: 100%; border-collapse: collapse; }
.recibo-tabla td { padding: 0.3rem 0.25rem; vertical-align: top; }
.recibo-label { color: #6c757d; font-size: 0.82rem; width: 45%; }
.recibo-sep { border-top: 1px dashed #dee2e6; padding: 0 !important; height: 8px; }
.recibo-monto-row td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.recibo-monto { font-size: 1.4rem; font-weight: 700; color: #0a3622; }
.recibo-footer { text-align: center; margin-top: 1.5rem; color: #6c757d; font-size: 0.8rem; }
.recibo-firma { margin: 1.5rem auto 0.25rem; width: 80%; }

@media print {
    .no-print, .topbar, .side-nav, .side-backdrop, .app-content > *:not(.recibo) { display: none !important; }
    .recibo { border: none; margin: 0; max-width: 100%; box-shadow: none; }
    body { background: white; }
}

/* ── Spinner ─────────────────────────────────────────── */
.spinner-sm {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Error UI ───────────────────────────────────────── */
#blazor-error-ui {
    background: #fef3cd;
    border-top: 2px solid #ffc107;
    bottom: 0; left: 0; right: 0;
    padding: 0.75rem 1.25rem;
    display: none;
    position: fixed;
    font-size: 0.875rem;
    z-index: 1000;
}
#blazor-error-ui .reload  { font-weight: 600; margin-left: 0.5rem; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ── Modal ──────────────────────────────────────────── */
.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    padding: 20px !important;
}

.modal-content {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    max-width: 500px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
}

/* ── Modal Portal ───────────────────────────────────── */
.modal-overlay-portal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    padding: 20px !important;
}

.modal-content-portal {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    max-width: 500px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
}

.btn-close:hover {
    color: #1a1a2e;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

.form-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.form-row .form-group {
    flex: 1;
    min-width: 0;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.form-group label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.form-group textarea {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

.form-group textarea:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* ===== Alta y Modificación de Clientes ===== */
.cl-wrap{max-width:1100px;margin:0 auto;padding:0 4px}
.cl-tipos{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cl-tipo{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.cl-fs{border:1px solid #dde1e6;border-radius:8px;padding:10px 12px 4px;margin:0 0 12px}
.cl-fs>legend{font-weight:700;font-size:.9rem;color:#334;padding:0 6px}
.cl-formhead{display:flex;align-items:center;gap:12px;margin:0 0 10px;flex-wrap:wrap}
.cl-clave{font-size:.95rem;color:#334;background:#eef;padding:3px 10px;border-radius:6px}
.cl-foot{display:flex;align-items:center;gap:8px;margin-top:6px}
.cl-ok,.cl-err,.cl-warn{padding:8px 12px;border-radius:6px;margin:8px 0;font-size:.9rem}
.cl-ok{background:#e8f6ec;color:#1b7a37;border:1px solid #b7e0c2}
.cl-err{background:#fdecea;color:#b0261a;border:1px solid #f3c2bd}
.cl-warn{background:#fff5e6;color:#8a5a00;border:1px solid #f0d9a8}

/* Clientes: pestañas */
.cl-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:2px solid #dde1e6;margin:0 0 14px}
.cl-tab{background:#f2f4f7;border:1px solid #dde1e6;border-bottom:none;border-radius:8px 8px 0 0;
  padding:8px 16px;font-weight:600;font-size:.88rem;color:#556;cursor:pointer;margin-bottom:-2px}
.cl-tab:hover{background:#e9edf2}
.cl-tab.active{background:#fff;color:#0066cc;border-color:#dde1e6;border-bottom:2px solid #fff}
.cl-pane{display:none;animation:clFade .15s ease}
.cl-pane.active{display:block}
@keyframes clFade{from{opacity:.4}to{opacity:1}}

/* Clientes: navegación (flechas) */
.cl-nav{display:inline-flex;align-items:center;gap:6px;margin-left:8px}
.cl-nav .btn{padding:2px 10px;font-weight:700;line-height:1.1}

/* Clientes: pills enmarcados + navegación estilo Facturación (override) */
.cl-tipos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cl-tipo{border:1px solid #ced4da;border-radius:20px;padding:6px 14px;cursor:pointer;font-size:.9rem;background:#fff;display:inline-flex;align-items:center;gap:6px}
.cl-tipo:has(input:checked){border-color:#0066cc;background:#eaf3ff;font-weight:600}
.cl-nav{display:inline-flex;border:1px solid #adb5bd;border-radius:4px;overflow:hidden;margin-left:2px}
.cl-navbtn{background:#e9ecef;border:none;border-right:1px solid #adb5bd;padding:7px 12px;cursor:pointer;font-size:1rem;color:#333;line-height:1}
.cl-navbtn:last-child{border-right:none}
.cl-navbtn:hover{background:#dde1e6}

/* ───────── Barra de FILTROS / búsqueda — ESTÁNDAR del proyecto (VIT-ERP) ─────────
   Úsala en TODA área de filtros o navegación de búsqueda. Toma el color de
   "Encabezados de módulos" de la paleta (--t-head-bg / --t-head-fg), así que se
   cambia solo desde /colores y queda uniforme en todo el sistema. Los campos van
   en fondo claro para que se lean sobre cualquier color de encabezado.
   Estructura:  .vfiltros > .vfiltros-tit , .vfiltros-row > .vfiltros-f(label+control) , .vfiltros-acc > .vfiltros-btn
   Diseño BAJO: título arriba, los campos en UNA línea, y los botones en el
   renglón siguiente del mismo recuadro (estilo IMTECNO). Compacto para no
   comerse alto en monitores chicos. */
.vfiltros { background:var(--t-head-bg); color:var(--t-head-fg); border-radius:10px; padding:10px 16px; margin:0 0 14px; width:100%; }
.vfiltros-tit { font-weight:700; font-size:.85rem; margin:0 0 8px; color:var(--t-head-fg); display:flex; align-items:center; gap:7px; }
.vfiltros-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.vfiltros-f { display:flex; flex-direction:column; flex:1 1 0; min-width:140px; max-width:300px; }
.vfiltros-f.ancho { flex:1.6 1 0; max-width:360px; }
.vfiltros-f label { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--t-head-fg); opacity:.85; margin-bottom:3px; }
.vfiltros-f select, .vfiltros-f input, .vfiltros-f textarea {
    background:#fff; color:#1a1a1a; border:1px solid rgba(0,0,0,.15); border-radius:6px; padding:6px 9px; font-size:.85rem; width:100%; }
.vfiltros-acc { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:10px; align-items:flex-end; }
.vfiltros-btn { border:none; border-radius:7px; padding:7px 14px; font-size:.84rem; font-weight:600; cursor:pointer; color:#fff; white-space:nowrap; }
.vfiltros-btn.gris { background:#4a5568; } .vfiltros-btn.verde { background:#1e9e55; }
.vfiltros-btn.rojo { background:#c0392b; } .vfiltros-btn.azul { background:#3457d5; }
.vfiltros-btn:hover { filter:brightness(1.08); }