/* ══════════════════════════════════════════
   AgoraHub360 ERP - Variables Corporativas
   ══════════════════════════════════════════ */
:root {
    /* Paleta principal */
    --agora-primary: #0B2748;
    --agora-primary-light: #17608A;
    --agora-primary-dark: #071A52;
    --agora-accent: #0D6B75;
    --agora-accent-light: #2E7F88;

    /* Superficie */
    --agora-bg: #F7F8F5;
    --agora-surface: #ffffff;
    --agora-surface-hover: #F1F7F7;
    --agora-border: #E4EAF3;

    /* Texto */
    --agora-text: #15233D;
    --agora-text-muted: #5D7891;
    --agora-text-light: #94A6B8;

    /* Estado */
    --agora-success: #59A957;
    --agora-warning: #E69714;
    --agora-danger: #B94B4B;
    --agora-info: #17608A;

    /* Sidebar */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 0px;
    --topbar-height: 56px;

    /* Tipografía */
    --font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Transiciones */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* Bordes */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
}

/* ══════════════════════════════════════════
   Reset y Base
   ══════════════════════════════════════════ */
html, body {
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--agora-text);
    background-color: var(--agora-bg);
    margin: 0;
    padding: 0;
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--agora-text);
}

h1:focus { outline: none; }

a, .btn-link {
    color: var(--agora-accent);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--agora-accent-light);
}

/* ══════════════════════════════════════════
   Botones Corporativos
   ══════════════════════════════════════════ */
.btn-primary {
    background-color: var(--agora-primary);
    border-color: var(--agora-primary);
}

.btn-primary:hover {
    background-color: var(--agora-primary-light);
    border-color: var(--agora-primary-light);
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(10, 165, 233, 0.25);
}

/* ══════════════════════════════════════════
   Cards ERP
   ══════════════════════════════════════════ */
.card {
    border: 1px solid var(--agora-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: var(--agora-surface);
}

.card-header {
    background-color: var(--agora-surface);
    border-bottom: 1px solid var(--agora-border);
    font-weight: 600;
}

/* ══════════════════════════════════════════
   Stat Cards (Dashboard)
   ══════════════════════════════════════════ */
.stat-card {
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    background: var(--agora-surface);
    border: 1px solid var(--agora-border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--agora-text);
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--agora-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════
   Page Header
   ══════════════════════════════════════════ */
.page-header {
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.page-header .breadcrumb {
    font-size: 0.8rem;
    margin-bottom: 0;
}

/* ══════════════════════════════════════════
   Formularios
   ══════════════════════════════════════════ */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--agora-success);
}

.invalid {
    outline: 1px solid var(--agora-danger);
}

.validation-message {
    color: var(--agora-danger);
    font-size: 0.8rem;
}

/* ══════════════════════════════════════════
   Badges de módulo
   ══════════════════════════════════════════ */
.badge-modulo {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2em 0.5em;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════
   User Menu Dropdown
   ══════════════════════════════════════════ */
.user-menu {
    position: relative;
}

.user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--agora-border);
    border-radius: var(--radius-md);
    color: var(--agora-text);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.user-menu-toggle:hover {
    background: var(--agora-surface-hover);
    border-color: var(--agora-accent);
}

.user-menu-toggle i.bi-person-circle {
    font-size: 1.5rem;
    color: var(--agora-primary);
}

.user-menu-toggle .user-name {
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 280px;
    background: var(--agora-surface);
    border: 1px solid var(--agora-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-dropdown-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--agora-surface-hover);
    border-bottom: 1px solid var(--agora-border);
}

.user-dropdown-header .user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--agora-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.user-dropdown-header .user-details {
    flex: 1;
}

.user-dropdown-header .user-name-full {
    font-weight: 600;
    color: var(--agora-text);
    font-size: 0.95rem;
}

.user-dropdown-header .user-email {
    font-size: 0.8rem;
    color: var(--agora-text-muted);
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--agora-text);
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.user-dropdown-item:hover {
    background: var(--agora-surface-hover);
}

.user-dropdown-item i {
    font-size: 1.1rem;
    color: var(--agora-text-muted);
}

.user-dropdown-item span {
    font-size: 0.9rem;
}

.user-dropdown-item.logout {
    color: var(--agora-danger);
    border-top: 1px solid var(--agora-border);
}

.user-dropdown-item.logout:hover {
    background: rgba(239, 68, 68, 0.1);
}

.user-dropdown-item.logout i {
    color: var(--agora-danger);
}

.user-dropdown-divider {
    height: 1px;
    background: var(--agora-border);
    margin: 0.5rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .user-menu-toggle .user-name {
        display: none;
    }

    .user-dropdown {
        min-width: 260px;
    }
}

/* ══════════════════════════════════════════
   Utilidades
   ══════════════════════════════════════════ */
.text-muted { color: var(--agora-text-muted) !important; }
code { color: #c02d76; font-family: var(--font-mono); }

/* ══════════════════════════════════════════
   Blazor Overrides
   ══════════════════════════════════════════ */
#blazor-error-ui {
    background: var(--agora-warning);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--agora-text);
}

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

.blazor-error-boundary {
    background: var(--agora-danger);
    padding: 1rem;
    color: white;
    border-radius: var(--radius-md);
}

.blazor-error-boundary::after {
    content: "Ha ocurrido un error."
}

/* ══════════════════════════════════════════
   Loading Screen
   ══════════════════════════════════════════ */
.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--agora-bg);
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
}

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

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

.loading-progress-text {
    text-align: center;
    font-weight: 600;
    color: var(--agora-text-muted);
    margin-top: 1rem;
}

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

/* ── Accesibilidad: focus-visible global ────────────────────────────────────── */

/* Anillo de foco nítido para teclado — se suprime con ratón gracias a :focus-visible */
*:focus-visible {
    outline: 2px solid #17608A;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Botones Bootstrap ya tienen su propio focus; reforzamos el anillo */
.btn:focus-visible {
    outline: 2px solid #17608A;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .25);
}

/* Inputs y selects */
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid #17608A;
    outline-offset: 0;
}

/* Celdas de tabla con foco (edición inline) */
.table td:focus-within {
    background: #eff6ff;
}

/* ── Hint de atajos de teclado ──────────────────────────────────────────────── */

kbd {
    display: inline-block;
    padding: .1em .4em;
    font-size: .75em;
    font-family: ui-monospace, monospace;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-bottom-width: 2px;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Contenedor del hint */
.shortcut-hint {
    font-size: .72rem;
    color: #9ca3af;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    align-items: center;
}
.shortcut-hint span {
    white-space: nowrap;
}

/* ── VistaPreviewComprobante ───────────────────────────────────────────────── */

/* Modal */
.vp-backdrop   { overflow-y: auto; }
.vp-dialog     { max-width: 780px; width: 100%; max-height: 92vh; margin: 3vh auto; display: flex; }
.vp-content    { border: none; border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,.25); max-height: 92vh; display: flex; flex-direction: column; width: 100%; }

/* Toolbar (solo pantalla) */
.vp-toolbar {
    background: #f8fafc;
    border-bottom: 2px solid #6E4596;
    padding: .6rem 1rem;
    flex: 0 0 auto;
}

/* Cuerpo del documento — se le fuerza scroll propio para que un comprobante largo (muchas
   líneas) nunca quede cortado ni empuje el modal fuera de la pantalla; el toolbar queda fijo. */
.vp-body { background: #fff; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; }

@media print {
    .vp-dialog, .vp-content, .vp-body { max-height: none !important; overflow: visible !important; }
}

/* Cabecera */
.vp-header {
    padding: 1.25rem 1.5rem .75rem;
    border-bottom: 1px solid #e5e7eb;
}
.vp-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .75rem;
}
.vp-company-name {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: .01em;
}
.vp-doc-type {
    font-size: .78rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 2px;
}
.vp-number-block {
    text-align: right;
}
.vp-number-label {
    font-size: .68rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.vp-number-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #17608A;
    font-family: ui-monospace, monospace;
}

/* Campos de cabecera */
.vp-header-fields {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.5rem;
    margin-bottom: .6rem;
}
.vp-field        { display: flex; align-items: baseline; gap: .3rem; }
.vp-field-label  { font-size: .68rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.vp-field-value  { font-size: .82rem; color: #111827; font-weight: 500; }

/* Concepto */
.vp-concepto {
    font-size: .8rem;
    color: #374151;
    margin-bottom: .5rem;
}

/* Glosa resaltada */
.vp-glosa-box {
    background: #eff6ff;
    border-left: 4px solid #17608A;
    padding: .45rem .85rem;
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: baseline;
    gap: .4rem;
}
.vp-glosa-label { font-size: .68rem; color: #17608A; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.vp-glosa-text  { font-size: .88rem; color: #1e40af; font-style: italic; font-weight: 500; }

/* Tabla de líneas */
.vp-table-wrap { overflow-x: auto; }
.vp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}
.vp-table th, .vp-table td { padding: .35rem .6rem; }
.vp-table thead { background: #0B2748; color: #fff; }
.vp-table th    { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; white-space: nowrap; }

.vp-th-num      { width: 32px; text-align: center; }
.vp-th-cod      { width: 90px; }
.vp-th-cuenta   { }
.vp-th-cc       { width: 80px; }
.vp-th-glosa    { width: 160px; }
.vp-th-monto    { width: 100px; text-align: right; }

.vp-td-num      { text-align: center; color: #9ca3af; font-size: .72rem; }
.vp-td-cod      { font-family: ui-monospace, monospace; }
.vp-td-cuenta   { color: #111827; }
.vp-td-cc       { }
.vp-td-glosa    { color: #6b7280; font-size: .76rem; }
.vp-td-monto    { text-align: right; }

.vp-debe        { color: #17608A; font-weight: 600; }
.vp-haber       { color: #15803d; font-weight: 600; }

.vp-row-even    { background: #f9fafb; }
.vp-table tbody tr:hover { background: #eff6ff; }

/* Badge centro de costo */
.vp-cc-badge {
    background: #ede9fe;
    color: #6E4596;
    font-size: .62rem;
    padding: .1em .4em;
    border-radius: 3px;
    font-weight: 600;
    font-family: ui-monospace, monospace;
}

/* Totales */
.vp-totals-row         { background: #f1f5f9; font-weight: 700; }
.vp-totals-label       { text-align: right; color: #374151; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.vp-total-debe         { color: #17608A; font-size: .9rem; }
.vp-total-haber        { color: #15803d; font-size: .9rem; }

 /* Indicador de cuadre */
.vp-cuadre-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}
.vp-cuadre-ok {
    color: #15803d;
    font-size: .8rem;
    font-weight: 500;
}
.vp-cuadre-error {
    color: #b91c1c;
    font-size: .8rem;
    font-weight: 500;
}
.vp-diferencia-block { font-size: .78rem; }

/* Pie con firmas */
.vp-footer {
    display: flex;
    justify-content: space-around;
    padding: 2rem 1.5rem 1rem;
    gap: 1rem;
}
.vp-firma-block  { flex: 1; text-align: center; }
.vp-firma-line   { border-bottom: 1px solid #374151; margin-bottom: .3rem; height: 2rem; }
.vp-firma-label  { font-size: .68rem; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }

/* Meta de impresión */
.vp-print-meta { font-size: .65rem; color: #9ca3af; text-align: right; padding: .4rem 1.5rem .6rem; }

/* ══════════════ @media print ══════════════ */
@media print {
    /* Ocultar barra lateral y superior */
    .sidebar { display: none !important; }
    .topbar { display: none !important; }

    /* Ocultar elementos marcados para no imprimir */
    .d-print-none { display: none !important; }

    /* Para evitar blank pages al intentar imprimir un modal (que está dentro del layout),
       es mejor resetear la estructura o directamente usar window.open como se hace desde JS.
       Si se usa Ctrl+P, ocultaremos todo el layout y solo mostraremos el modal si es posible,
       pero la regla anterior body:has() ocultaba hasta el propio modal. 
       Por eso la eliminamos para no romper la página entera. */
    /* body:has(.vp-backdrop) .app-layout { display: none !important; } */

    .vp-backdrop           { position: static !important; background: none !important; }
    .vp-dialog             { max-width: 100% !important; margin: 0 !important; box-shadow: none !important; }
    .vp-content            { box-shadow: none !important; border: none !important; }
    .vp-toolbar            { display: none !important; }
    .vp-body               { padding: 0 !important; }

    /* Fuente más pequeña para encajar en A4 */
    .vp-table              { font-size: .72rem; }
    .vp-company-name       { font-size: .95rem; }
    .vp-number-value       { font-size: 1.1rem; }

    /* Evitar cortes en las filas */
    .vp-table tr           { page-break-inside: avoid; }
    .vp-footer             { page-break-inside: avoid; }

    /* Colores forzados para impresoras B/N */
    .vp-debe, .vp-total-debe   { color: #000 !important; }
    .vp-haber, .vp-total-haber { color: #000 !important; }
    .vp-table thead            { background: #000 !important; }
    .vp-glosa-box              { background: #f0f0f0 !important; border-left-color: #000 !important; }
    .vp-glosa-text             { color: #000 !important; }
    .vp-cuadre-ok              { color: #000 !important; }
    .vp-cuadre-error           { color: #000 !important; }
    .vp-cc-badge               { background: #e0e0e0 !important; color: #000 !important; }
}

/* ── AccountSearchDropdown ─────────────────────────────────────────────────── */
.account-search-dropdown {
    position: relative;
    width: 100%;
}

.account-dropdown-panel {
    top: 100%;
    left: 0;
}

.account-dropdown-panel .dropdown-item {
    border-radius: 0;
    line-height: 1.35;
}

.account-dropdown-panel .dropdown-item:hover,
.account-dropdown-panel .dropdown-item:focus {
    background-color: #f0f9ff !important;
    outline: none;
}

.account-dropdown-panel .dropdown-item.active {
    color: inherit;
}

.account-dropdown-panel .dropdown-item code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ══════════════════════════════════════════
   Accesos Directos - Tablero de Módulos
   ══════════════════════════════════════════ */

/* ── Módulos existentes (se mantienen) ── */
.module-section {
    background: var(--agora-surface);
    border: 1px solid var(--agora-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
}

.module-section-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--agora-border);
}

.module-section-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.module-section-header h5 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--agora-text);
}

.shortcut-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem 0.85rem;
    background: var(--agora-surface);
    border: 1px solid var(--agora-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--agora-text);
    text-align: center;
    transition: all var(--transition-fast);
    position: relative;
    min-height: 80px;
    cursor: pointer;
}

.shortcut-card:hover {
    background: var(--agora-surface-hover);
    border-color: var(--agora-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--agora-text);
    text-decoration: none;
}

.shortcut-card i {
    font-size: 1.6rem;
    line-height: 1;
}

.shortcut-card span:not(.shortcut-badge) {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--agora-text-muted);
}

.shortcut-card:hover span:not(.shortcut-badge) {
    color: var(--agora-text);
}

/* ══════════════════════════════════════════
   HUB — Tarjetas de módulo (Vista 1)
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   MENÚ — Paleta por módulo del prototipo
   MudBlazor renderiza el icono dentro de estos wrappers; las reglas globales
   garantizan que el fondo no quede reemplazado por DrawerIcon del tema.
   ══════════════════════════════════════════ */
.agora-nav-dashboard .mud-nav-link-icon,
.agora-nav-group .mud-nav-group-title-icon,
.agora-nav-group .mud-nav-link-icon,
.agora-nav-accesos .mud-nav-link-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #FFFFFF !important;
    box-shadow: 0 3px 8px rgba(25, 45, 86, .14);
}

.agora-nav-dashboard .mud-nav-link-icon,
.agora-nav-dashboard .mud-nav-link-icon { background-color: #0D6B75 !important; }
.agora-nav-group-comercial .mud-nav-group-title-icon,
.agora-nav-group-comercial .mud-nav-link-icon { background-color: #17608A !important; }
.agora-nav-group-compras .mud-nav-group-title-icon,
.agora-nav-group-compras .mud-nav-link-icon { background-color: #0A8A98 !important; }
.agora-nav-group-inventario .mud-nav-group-title-icon,
.agora-nav-group-inventario .mud-nav-link-icon { background-color: #59A957 !important; }
.agora-nav-group-activos .mud-nav-group-title-icon,
.agora-nav-group-activos .mud-nav-link-icon { background-color: #1A6F92 !important; }
.agora-nav-group-servicios .mud-nav-group-title-icon,
.agora-nav-group-servicios .mud-nav-link-icon { background-color: #2E7F88 !important; }
.agora-nav-group-financiera .mud-nav-group-title-icon,
.agora-nav-group-financiera .mud-nav-link-icon { background-color: #6E4596 !important; }
.agora-nav-group-maestros .mud-nav-group-title-icon,
.agora-nav-group-maestros .mud-nav-link-icon { background-color: #C24886 !important; }
.agora-nav-group-administracion .mud-nav-group-title-icon,
.agora-nav-group-administracion .mud-nav-link-icon { background-color: #24445D !important; }
.agora-nav-group-productividad .mud-nav-group-title-icon,
.agora-nav-group-productividad .mud-nav-link-icon { background-color: #E69714 !important; }
.agora-nav-accesos .mud-nav-link-icon,
.agora-nav-accesos .mud-nav-link-icon { background-color: #1A6F92 !important; }

.agora-nav-dashboard .mud-nav-link-icon .mud-icon-root,
.agora-nav-group .mud-nav-group-title-icon .mud-icon-root,
.agora-nav-group .mud-nav-link-icon .mud-icon-root,
.agora-nav-accesos .mud-nav-link-icon .mud-icon-root {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    font-size: 21px !important;
    color: #FFFFFF !important;
    background: transparent !important;
}

/* La flecha de expansión es independiente del icono del módulo. */
.agora-nav-group .mud-nav-group-title > .mud-icon-root:last-child,
.agora-nav-group .mud-nav-group-title .mud-nav-group-expand-icon,
.agora-nav-group .mud-nav-group-title [class*="expand"] {
    margin-left: auto !important;
    color: #92A0B8 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
}

.agora-nav-root .mud-nav-link,
.agora-nav-root .mud-nav-group-title {
    min-height: 42px;
}

.agora-nav-root .mud-nav-link-icon,
.agora-nav-root .mud-nav-group-title-icon {
    margin-right: 0.6rem;
}

.hub-module-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 86px;
    padding: 1rem 1.1rem;
    background: var(--agora-surface);
    border: 1px solid var(--agora-border);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(25, 45, 86, .07);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.hub-module-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.hub-module-card:hover {
    border-color: var(--agora-primary-light);
    box-shadow: 0 8px 18px rgba(25, 45, 86, .11);
    transform: translateY(-2px);
}

.hub-module-card:hover::before {
    opacity: 0.6;
}

.hub-module-card:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.hub-module-icon {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(25, 45, 86, .12);
}

.hub-module-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.hub-module-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--agora-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-module-desc {
    font-size: 0.72rem;
    color: var(--agora-text-muted);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-module-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 36px;
}

.hub-module-count span {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--agora-text);
    line-height: 1;
}

.hub-module-count small {
    font-size: 0.6rem;
    color: var(--agora-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hub-module-arrow {
    color: var(--agora-text-light);
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.hub-module-card:hover .hub-module-arrow {
    transform: translateX(4px);
    color: var(--agora-accent);
}

/* ══════════════════════════════════════════
   HUB — Botón Volver + Cabecera del panel
   ══════════════════════════════════════════ */
.hub-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--agora-border);
    background: var(--agora-surface);
    color: var(--agora-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 1rem;
    flex-shrink: 0;
}

.hub-back-btn:hover {
    background: var(--agora-primary);
    border-color: var(--agora-primary);
    color: white;
}

.hub-back-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   HUB — Tarjetas de sub-acceso (Vista 2)
   ══════════════════════════════════════════ */
.hub-panel-enter {
    animation: hubFadeSlide 0.22s ease both;
}

@keyframes hubFadeSlide {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.hub-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 0.4rem 0.65rem;
    background: var(--agora-surface);
    border: 1px solid var(--agora-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--agora-text);
    text-align: center;
    transition: all var(--transition-fast);
    position: relative;
    min-height: 66px;
    cursor: pointer;
}

.hub-item-card:hover {
    background: var(--agora-surface-hover);
    border-color: var(--agora-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    color: var(--agora-text);
    text-decoration: none;
}

.hub-item-card:active {
    transform: translateY(0);
}

.hub-item-card i {
    font-size: 1.35rem;
    line-height: 1;
}

.hub-item-name {
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--agora-text-muted);
}

.hub-item-card:hover .hub-item-name {
    color: var(--agora-text);
}

/* Dashboard variant */
.hub-item-dashboard {
    border-style: dashed;
    background: linear-gradient(135deg, var(--agora-surface-hover), var(--agora-surface));
}

.hub-item-dashboard:hover {
    border-style: solid;
}

.hub-item-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.52rem;
    font-weight: 700;
    padding: 0.15em 0.45em;
    border-radius: 3px;
    background: var(--agora-primary);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 576px) {
    .shortcut-card {
        min-height: 70px;
        padding: 0.75rem 0.25rem;
    }

    .shortcut-card i {
        font-size: 1.35rem;
    }

    .shortcut-card span:not(.shortcut-badge) {
        font-size: 0.66rem;
    }

    .module-section {
        padding: 1rem;
    }

    .hub-module-card {
        padding: 0.85rem 1rem;
    }

    .hub-module-icon {
        width: 44px;
        height: 44px;
        font-size: 1.35rem;
    }

    .hub-module-name  { font-size: 0.88rem; }
    .hub-module-desc  { display: none; }

    .hub-item-card {
        min-height: 74px;
        padding: 0.75rem 0.25rem;
    }

    .hub-item-card i  { font-size: 1.4rem; }
    .hub-item-name    { font-size: 0.66rem; }
}
@media print {
    .kanban-no-print,
    .mud-appbar,
    .mud-drawer {
        display: none !important;
    }

    .kanban-print-heading {
        display: block !important;
    }

    .kanban-list-view,
    .kanban-task-table {
        width: 100% !important;
        box-shadow: none !important;
    }
}

/* ══════════════════════════════════════════
   Notificaciones internas — Toast flotante global (superior derecha)
   ══════════════════════════════════════════ */
.agora-notif-toast-host {
    position: fixed;
    top: 64px;
    right: 16px;
    z-index: 10000; /* por encima de diálogos y visores */
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(400px, calc(100vw - 32px));
    pointer-events: none;
}

.agora-notif-toast-host > * {
    pointer-events: auto;
}

.agora-notif-toast {
    position: relative;
    display: flex;
    background: var(--agora-surface, #ffffff);
    border: 1px solid var(--agora-border, #E4EAF3);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.agora-notif-toast:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
}

.agora-notif-toast-indicator {
    width: 4px;
    flex-shrink: 0;
    align-self: stretch;
}

.agora-notif-toast-body {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
}

.agora-notif-toast-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.agora-notif-toast-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agora-notif-popup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--agora-danger, #B94B4B);
    flex-shrink: 0;
}

.agora-notif-toast-close {
    flex-shrink: 0;
    color: var(--agora-text-muted, #5D7891);
}

.agora-notif-toast-message {
    margin-top: 4px;
    color: var(--agora-text, #1e293b);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.agora-notif-toast-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    gap: 8px;
}

.agora-notif-toast-time {
    color: var(--agora-text-light, #94a3b8);
    font-size: 0.7rem;
}

.agora-notif-toast-open {
    color: var(--agora-primary, #0B2748);
    font-size: 0.7rem;
    font-weight: 600;
}

/* Móvil: casi todo el ancho, respetando márgenes */
@media (max-width: 600px) {
    .agora-notif-toast-host {
        right: 8px;
        top: 56px;
        left: 8px;
        max-width: none;
    }

    .agora-notif-toast {
        width: 100%;
    }
}

/* Compatibilidad con clases previas (popup inferior) por si quedan referencias */
.agora-notif-popup-host {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2400;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(400px, calc(100vw - 32px));
    pointer-events: none;
}

.agora-notif-popup-host > * {
    pointer-events: auto;
}

@media (max-width: 600px) {
    .agora-notif-popup-host {
        right: 8px;
        bottom: 8px;
        left: 8px;
        max-width: none;
    }

    .agora-notif-popup-host .agora-notif-popup {
        width: 100%;
    }
}

/* ── Imágenes de Producto (drop zone) ─────────────────────────────────── */
.producto-imagenes-zona.agora-drop-over {
    border-color: #17608A !important;
    background: #eff6ff !important;
}
.producto-imagenes-zona.agora-drop-over i,
.producto-imagenes-zona.agora-drop-over h6,
.producto-imagenes-zona.agora-drop-over p {
    color: #17608A !important;
}

/* ── Adjuntos de Tarea (drop zone) ────────────────────────────────────── */
.task-attachments-zona.agora-drop-over {
    border-color: #17608A !important;
    background: #eff6ff !important;
}
.task-attachments-zona.agora-drop-over .mud-icon-root,
.task-attachments-zona.agora-drop-over .mud-text {
    color: #17608A !important;
}
.checklist-item-attachments .agora-drop-over,
.checklist-dropzone.agora-drop-over {
    border-color: #17608A !important;
    background: #eff6ff !important;
}
.checklist-dropzone.agora-drop-over .small,
.checklist-dropzone.agora-drop-over i {
    color: #17608A !important;
}