:root {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #1a1a1a;
    --primary-color: #0078d4;
    --primary-hover: #005ea6;
    --secondary-color: #00b4d8;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --light-bg: #f5f6fa;
    
    /* Colores personalizados para botones de acceso rápido */
    --new-task-green-dark: #065f46;
    --new-task-green: #047857;
    --new-task-green-light: #059669;
    --new-task-green-hover: #10b981;
    --new-task-text: #d1fae5;
    
    --tools-navy-dark: #1e3a5f;
    --tools-navy: #2c5282;
    --tools-navy-darker: #1a365d;
    --tools-navy-hover: #2563eb;
    --tools-navy-light: #3182ce;
    --tools-text: #e6f2ff;
    
    --views-purple-dark: #4c1d95;
    --views-purple: #5b21b6;
    --views-purple-light: #6d28d9;
    --views-purple-hover: #7c3aed;
    --views-text: #ede9fe;
    --white: #ffffff;
    --border-color: #dee2e6;
    --text-muted: #6c757d;
}

* {
    box-sizing: border-box;
}

/* EXCLUSIÓN TOTAL: Los componentes DevExpress y diagramas NO heredan estilos globales */
/* Estos selectores excluyen explícitamente estos componentes del selector universal * */
body.page-docs-online .editor-full .dxre,
body.page-docs-online .editor-full .dxre *,
body.page-docs-online .editor-full [id*="richEdit"],
body.page-docs-online .editor-full [id*="richEdit"] *,
body.page-docs-online .editor-full [id*="RichEdit"],
body.page-docs-online .editor-full [id*="RichEdit"] *,
body.page-diagramas-editor .diagram-frame,
body.page-diagramas-editor .diagram-frame * {
    /* Excluir de TODOS los estilos globales - NO aplicar NINGÚN estilo */
    box-sizing: revert !important;
    /* NO aplicar otros estilos - estos componentes se gestionan solos */
}

body {
    margin: 0;
    padding: 0;
    background: var(--light-bg);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden; /* Prevenir scroll horizontal */
    overflow-y: auto; /* Permitir scroll vertical en body - nivel más alto */
    min-height: 100vh; /* Mínimo viewport height */
}

html {
    overflow-x: hidden; /* Prevenir scroll horizontal */
    overflow-y: auto; /* Permitir scroll vertical en html - nivel más alto */
}

.layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible; /* Permitir que el contenido se expanda completamente */
    overflow-x: hidden; /* Prevenir scroll horizontal */
    overflow-y: visible; /* CRÍTICO: Sin scroll vertical interno - el scroll debe estar en body */
    height: auto; /* Altura automática, no fija */
    max-height: none; /* Sin límite de altura máxima */
    /* Ocultar scrollbar si aparece */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
}

/* Ocultar scrollbar en .layout para Chrome, Safari y Opera */
.layout::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Banner de Fase de Pruebas */
.testing-banner {
    background-color: #1a365d;
    color: #ffffff;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.testing-banner-content {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.testing-banner strong {
    font-weight: 600;
}

.content {
    flex: 1;
    padding: 1.5rem;
    transition: margin-left 0.3s ease;
    overflow: visible; /* Permitir que el contenido se expanda completamente */
    overflow-x: hidden; /* Prevenir scroll horizontal */
    overflow-y: visible; /* CRÍTICO: Sin scroll vertical interno - el scroll debe estar en body */
    height: auto; /* Altura automática */
    max-height: none; /* Sin límite de altura máxima */
    min-height: 0; /* CRÍTICO: Permite que el contenido se encoja en flexbox */
    /* Ocultar scrollbar si aparece */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
}

/* Ocultar scrollbar en .content para Chrome, Safari y Opera */
.content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Ocultar scrollbar en main.content para Chrome, Safari y Opera */
main.content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Navegación Superior */
.top-nav-container {
    position: sticky;
    top: 0;
    z-index: 1001; /* Mayor que la barra de acceso rápido para que los dropdowns aparezcan encima */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: visible !important; /* CRÍTICO: Permitir que los dropdowns se vean */
}

/* Barra superior con nombre de organización - Diseño Sofisticado Una Sola Línea */
.org-name-bar {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
    border-bottom: 1px solid var(--org-bar-border, rgba(0, 0, 0, 0.06));
    padding: 0.35rem 1.2rem;
    font-size: 0.7rem;
    color: var(--org-bar-text, #6b7280);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.6rem;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    min-height: 2.2rem;
    overflow: hidden;
}

@media (max-width: 768px) {
    .org-name-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.35rem 1rem;
        min-height: auto;
    }
    
    .org-name-content {
        width: 100%;
        justify-content: center;
        order: 1;
    }
    
    .org-email-reception,
    .org-license-indicator {
        order: 2;
    }
    
    .org-name-controls {
        width: 100%;
        justify-content: center;
        padding-left: 0;
        border-left: none;
        margin-left: 0;
        order: 3;
    }
}

.org-name-controls {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    white-space: nowrap;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    margin-left: auto;
}

.org-name-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    flex: 0 0 auto;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.68rem;
    flex-shrink: 0;
}

.org-name-label {
    font-weight: 700;
    color: var(--org-label-color, #4b5563);
    letter-spacing: 0.02em;
    font-size: 0.68rem;
    white-space: nowrap;
}

.org-name-separator {
    color: var(--org-separator-color, #9ca3af);
    margin: 0 0.15rem;
    opacity: 0.5;
    font-size: 0.65rem;
}

.org-name-version {
    color: var(--org-version-color, #667eea);
    font-weight: 600;
    font-size: 0.68rem;
    white-space: nowrap;
}

.org-name-value {
    color: var(--org-value-color, #6b7280);
    font-weight: 500;
    font-size: 0.68rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge de Versión Beta - Estilo Terminal Retro */
.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.4rem;
    background: #000000;
    color: #00ff41; /* Verde fósforo tipo terminal */
    font-family: 'Courier New', 'Consolas', 'Monaco', 'Lucida Console', monospace;
    font-size: 0.58rem;
    line-height: 1;
    margin: 0 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 3px;
    box-shadow: 
        0 0 10px rgba(0, 255, 65, 0.5),
        0 0 20px rgba(0, 255, 65, 0.3),
        inset 0 0 10px rgba(0, 255, 65, 0.1);
    margin-left: 0.5rem;
    animation: pulse-beta-terminal 2s ease-in-out infinite;
    white-space: nowrap;
    position: relative;
    border: 1px solid #00ff41;
    text-shadow: 
        0 0 5px rgba(0, 255, 65, 0.8),
        0 0 10px rgba(0, 255, 65, 0.6),
        0 0 15px rgba(0, 255, 65, 0.4);
}

.beta-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 3px;
    background: linear-gradient(135deg, rgba(0, 255, 65, 0.1) 0%, transparent 100%);
    pointer-events: none;
}

@keyframes pulse-beta-terminal {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(0, 255, 65, 0.5),
            0 0 20px rgba(0, 255, 65, 0.3),
            inset 0 0 10px rgba(0, 255, 65, 0.1);
        text-shadow: 
            0 0 5px rgba(0, 255, 65, 0.8),
            0 0 10px rgba(0, 255, 65, 0.6),
            0 0 15px rgba(0, 255, 65, 0.4);
    }
    50% {
        box-shadow: 
            0 0 15px rgba(0, 255, 65, 0.7),
            0 0 30px rgba(0, 255, 65, 0.5),
            inset 0 0 15px rgba(0, 255, 65, 0.2);
        text-shadow: 
            0 0 8px rgba(0, 255, 65, 1),
            0 0 15px rgba(0, 255, 65, 0.8),
            0 0 20px rgba(0, 255, 65, 0.6);
    }
}

/* Ajustes para tema oscuro - mismo estilo terminal */
.theme-dark .beta-badge,
body[data-theme="dark"] .beta-badge,
body.theme-dark .beta-badge {
    background: #000000;
    color: #00ff41;
    border-color: #00ff41;
    box-shadow: 
        0 0 10px rgba(0, 255, 65, 0.5),
        0 0 20px rgba(0, 255, 65, 0.3),
        inset 0 0 10px rgba(0, 255, 65, 0.1);
    animation: pulse-beta-terminal 2s ease-in-out infinite;
}

.theme-dark .beta-badge::before,
body[data-theme="dark"] .beta-badge::before,
body.theme-dark .beta-badge::before {
    background: linear-gradient(135deg, rgba(0, 255, 65, 0.1) 0%, transparent 100%);
}

/* Responsive - ocultar en pantallas muy pequeñas si es necesario */
@media (max-width: 480px) {
    .beta-badge {
        font-size: 0.6rem;
        padding: 0.15rem 0.5rem;
    }
}

/* Correo de recepción */
/* Grupo central - Email, Licencia y Accesos Rápidos */
.org-name-bar > .org-email-reception,
.org-name-bar > .org-license-indicator {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.org-email-reception {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    border: 1px solid rgba(230, 57, 70, 0.2);
    box-shadow: 0 1px 2px rgba(230, 57, 70, 0.08);
    transition: all 0.2s ease;
    font-size: 0.64rem;
    margin: 0 0.25rem;
}

.org-email-reception:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(230, 57, 70, 0.5);
    box-shadow: 0 3px 6px rgba(230, 57, 70, 0.25);
    transform: translateY(-1px);
}

.org-email-icon {
    width: 12px;
    height: 12px;
    color: #e63946;
    flex-shrink: 0;
}

.org-email-label {
    display: none;
    font-weight: 600;
    color: var(--org-bar-text, #6b7280);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.org-email-value {
    font-size: 0.64rem;
    font-weight: 600;
    color: #e63946;
    font-family: 'Courier New', monospace;
    text-shadow: 0 1px 2px rgba(230, 57, 70, 0.2);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tema oscuro para correo de recepción */
body.theme-dark .org-email-reception {
    background: rgba(30, 36, 53, 0.8);
    border-color: rgba(255, 107, 107, 0.4);
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.2);
}

body.theme-dark .org-email-reception:hover {
    background: rgba(30, 36, 53, 0.95);
    border-color: rgba(255, 107, 107, 0.6);
    box-shadow: 0 3px 6px rgba(255, 107, 107, 0.3);
}

body.theme-dark .org-email-icon {
    color: #ff6b6b;
}

body.theme-dark .org-email-label {
    color: var(--dark-org-bar-text, #e5e7eb);
}

/* Indicador de licencia */
.org-license-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    background: rgba(40, 167, 69, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(40, 167, 69, 0.25);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    white-space: nowrap;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.65rem;
    margin-left: 0.4rem;
}

.org-license-indicator:hover {
    background: rgba(40, 167, 69, 0.2);
    box-shadow: 0 2px 5px rgba(40, 167, 69, 0.2);
    transform: translateY(-1px);
    text-decoration: none;
    border-color: rgba(40, 167, 69, 0.5);
}

.org-license-indicator.valid {
    background: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.3);
}

.org-license-indicator.valid:hover {
    background: rgba(40, 167, 69, 0.2);
    border-color: rgba(40, 167, 69, 0.5);
}

.org-license-indicator.warning {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
}

.org-license-indicator.warning:hover {
    background: rgba(255, 193, 7, 0.25);
    border-color: rgba(255, 193, 7, 0.6);
}

.org-license-indicator.expired {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
}

.org-license-indicator.expired:hover {
    background: rgba(220, 53, 69, 0.25);
    border-color: rgba(220, 53, 69, 0.6);
}

.org-license-icon {
    width: 11px;
    height: 11px;
    color: #28a745;
    flex-shrink: 0;
    opacity: 0.9;
}

.org-license-indicator.warning .org-license-icon {
    color: #ffc107;
}

.org-license-indicator.expired .org-license-icon {
    color: #dc3545;
}

.org-license-label {
    font-size: 0.64rem;
    font-weight: 600;
    color: #28a745;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
}

.org-license-indicator.warning .org-license-label {
    color: #ffc107;
}

.org-license-indicator.expired .org-license-label {
    color: #dc3545;
}

.org-license-status {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.org-license-status.valid {
    color: #28a745;
}

.org-license-status.warning {
    color: #ffc107;
}

.org-license-status.expired {
    color: #dc3545;
}

.org-license-days {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--org-bar-text, #6b7280);
}

/* Tema oscuro para indicador de licencia */
body.theme-dark .org-license-indicator {
    background: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.4);
}

body.theme-dark .org-license-indicator:hover {
    background: rgba(40, 167, 69, 0.25);
    border-color: rgba(40, 167, 69, 0.6);
}

body.theme-dark .org-license-indicator.valid {
    background: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.4);
}

body.theme-dark .org-license-indicator.valid:hover {
    background: rgba(40, 167, 69, 0.25);
    border-color: rgba(40, 167, 69, 0.6);
}

body.theme-dark .org-license-indicator.warning {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.5);
}

body.theme-dark .org-license-indicator.warning:hover {
    background: rgba(255, 193, 7, 0.3);
    border-color: rgba(255, 193, 7, 0.7);
}

body.theme-dark .org-license-indicator.expired {
    background: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.5);
}

body.theme-dark .org-license-indicator.expired:hover {
    background: rgba(220, 53, 69, 0.3);
    border-color: rgba(220, 53, 69, 0.7);
}

body.theme-dark .org-license-icon {
    color: #4ade80;
}

body.theme-dark .org-license-indicator.warning .org-license-icon {
    color: #ffd700;
}

body.theme-dark .org-license-indicator.expired .org-license-icon {
    color: #ff6b6b;
}

body.theme-dark .org-license-label {
    color: #4ade80;
}

body.theme-dark .org-license-indicator.warning .org-license-label {
    color: #ffd700;
}

body.theme-dark .org-license-indicator.expired .org-license-label {
    color: #ff6b6b;
}

body.theme-dark .org-license-status.valid {
    color: #4ade80;
}

body.theme-dark .org-license-status.warning {
    color: #ffd700;
}

body.theme-dark .org-license-status.expired {
    color: #ff6b6b;
}

body.theme-dark .org-license-days {
    color: var(--dark-org-bar-text, #e5e7eb);
}

@media (max-width: 768px) {
    .org-license-indicator {
        order: 4;
        width: 100%;
        margin-left: 0;
        margin-top: 0.25rem;
    }
}

body.theme-dark .org-email-value {
    color: #ff6b6b;
    text-shadow: 0 1px 3px rgba(255, 107, 107, 0.3);
}

.org-name-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--org-label-color, #4b5563);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.org-name-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.org-company-icon {
    width: 12px;
    height: 12px;
    color: var(--org-label-color, #4b5563);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.org-name-link:hover .org-company-icon {
    color: var(--primary-color);
    transform: scale(1.1);
}

/* Tema oscuro para barra de organización - Colores con buen contraste */
body.theme-dark .org-name-bar {
    background: linear-gradient(135deg, rgba(20, 24, 35, 0.98) 0%, rgba(30, 36, 53, 0.95) 100%);
    border-color: var(--dark-org-bar-border, rgba(255, 255, 255, 0.12));
    color: var(--dark-org-bar-text, #e5e7eb);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.theme-dark .org-name-controls {
    border-left-color: rgba(255, 255, 255, 0.12);
}

body.theme-dark .org-name-label {
    color: var(--dark-org-label-color, #f5f7ff);
    font-weight: 600;
}

body.theme-dark .org-name-separator {
    color: var(--dark-org-separator-color, #d4dbff);
}

body.theme-dark .org-name-version {
    color: var(--dark-org-version-color, #818cf8);
    font-weight: 600;
}

body.theme-dark .org-name-value {
    color: var(--dark-org-value-color, #e5e7eb);
    font-weight: 500;
}

body.theme-dark .org-name-link {
    color: var(--dark-org-label-color, #f5f7ff);
}

body.theme-dark .org-name-link:hover {
    color: var(--secondary-color);
}

body.theme-dark .org-company-icon {
    color: var(--dark-org-label-color, #f5f7ff);
}

body.theme-dark .org-name-link:hover .org-company-icon {
    color: var(--secondary-color);
}

body.theme-dark .org-name-content {
    border-left-color: rgba(255, 255, 255, 0.2);
}

body.theme-dark .org-name-controls {
    border-left-color: rgba(255, 255, 255, 0.15);
}

/* ============================================
   ESTILOS PREMIUM PARA TEMA OSCURO - MENÚ
   ============================================ */

/* Menú principal en tema oscuro - Glassmorphism elegante */
body.theme-dark .top-nav {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

body.theme-dark .top-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
    pointer-events: none;
}

/* Brand link en tema oscuro */
body.theme-dark .top-nav .brand-link {
    color: #f8fafc;
}

body.theme-dark .top-nav .brand-link:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body.theme-dark .top-nav .brand-icon-wrapper {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

body.theme-dark .top-nav .brand-link:hover .brand-icon-wrapper {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Nav links en tema oscuro */
body.theme-dark .nav-link {
    color: #f1f5f9 !important;
}

body.theme-dark .nav-link::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

body.theme-dark .nav-link::after {
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), transparent);
}

body.theme-dark .nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Drop toggle en tema oscuro */
body.theme-dark .drop-toggle {
    color: #f1f5f9;
}

body.theme-dark .drop-toggle::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

body.theme-dark .drop-toggle:hover,
body.theme-dark .dropdown:focus-within .drop-toggle {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body.theme-dark .dropdown.open > .drop-toggle {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Dropdown menu en tema oscuro - Glassmorphism premium */
body.theme-dark .dropdown-menu {
    background: rgba(15, 23, 42, 0.98) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

body.theme-dark .dropdown-menu {
    border-top: none !important;
}

body.theme-dark .dropdown-menu::before {
    display: none;
}

/* Dropdown links en tema oscuro */
body.theme-dark .dropdown-link {
    color: #e2e8f0 !important;
}

body.theme-dark .dropdown-link::before {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    box-shadow: 0 0 12px rgba(129, 140, 248, 0.5);
}

body.theme-dark .dropdown-link:hover {
    background: linear-gradient(90deg, rgba(129, 140, 248, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
    color: #c7d2fe !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(129, 140, 248, 0.15);
}

/* Separadores en tema oscuro */
body.theme-dark .dropdown-menu .menu-separator {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

body.theme-dark .dropdown-menu .menu-separator::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Títulos de sección en tema oscuro */
body.theme-dark .dropdown-menu .menu-section-title {
    color: #94a3b8;
    opacity: 0.9;
}

/* Iconos SVG en tema oscuro */
body.theme-dark .dropdown-link svg,
body.theme-dark .dropdown-menu a svg,
body.theme-dark .dropdown-menu .dropdown-link svg {
    color: #cbd5e1 !important;
}

body.theme-dark .dropdown-link:hover svg {
    color: #c7d2fe !important;
}

/* Submenús en tema oscuro */
body.theme-dark .submenu {
    background: rgba(15, 23, 42, 0.98) !important;
    border-left: 3px solid rgba(129, 140, 248, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

body.theme-dark .submenu .dropdown-link {
    color: #e2e8f0 !important;
}

body.theme-dark .submenu .dropdown-link:hover {
    background: linear-gradient(90deg, rgba(129, 140, 248, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
    color: #c7d2fe !important;
}

/* Top nav container en tema oscuro */
body.theme-dark .top-nav-container {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Botón hamburguesa en tema oscuro */
body.theme-dark .mobile-menu-toggle {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.theme-dark .mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body.theme-dark .mobile-menu-toggle.active {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Estilos para información del usuario y logout */
/* Estilos para información del usuario - usando el mismo estilo que org-license-indicator */
.org-user-info {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.org-user-info[data-user-email] {
    display: inline-flex !important;
}

/* El email y logout ya usan org-license-indicator y org-license-label, no necesitan estilos adicionales */

/* Estilos para los selectores en la barra superior */
.org-control-wrapper {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.35rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.org-control-wrapper:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 120, 212, 0.25);
}

.org-control-icon {
    width: 10px;
    height: 10px;
    color: #6b7280;
    transition: all 0.2s ease;
    flex-shrink: 0;
    opacity: 0.7;
}

.org-control-wrapper:hover .org-control-icon {
    color: var(--primary-color, #0078d4);
}

.org-control-select {
    background: transparent;
    border: none;
    color: #4b5563;
    padding: 0.05rem 0.15rem;
    font-size: 0.64rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: auto;
    min-width: 45px;
    max-width: 75px;
    max-width: 80px;
    height: 16px;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 3L7 1' stroke='%236b7280' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.15rem center;
    padding-right: 0.9rem;
}

.org-control-wrapper:hover .org-control-select {
    color: var(--primary-color, #0078d4);
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 3L7 1' stroke='%230078d4' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.org-control-select:focus {
    outline: none;
    color: var(--primary-color, #0078d4);
}

.org-control-select option {
    background: #ffffff;
    color: #1a1a1a;
    padding: 0.4rem;
}

/* Estilos para tema oscuro */
body.theme-dark .org-control-wrapper {
    background: rgba(30, 36, 53, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
}

body.theme-dark .org-control-wrapper:hover {
    background: rgba(30, 36, 53, 0.85);
    border-color: rgba(0, 120, 212, 0.4);
}

body.theme-dark .org-control-icon {
    color: #d1d5db;
}

body.theme-dark .org-control-wrapper:hover .org-control-icon {
    color: var(--primary-color, #0078d4);
}

body.theme-dark .org-control-select {
    color: #e5e7eb;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 3L7 1' stroke='%23d1d5db' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.theme-dark .org-control-wrapper:hover .org-control-select {
    color: var(--primary-color, #0078d4);
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 3L7 1' stroke='%230078d4' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.theme-dark .org-control-select option {
    background: #1e2435;
    color: #e5e7eb;
}

/* Reloj Digital */
.org-clock-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    order: 3;
    white-space: nowrap;
}

.org-clock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.2rem 0.6rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.org-clock:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.clock-time {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.clock-date {
    font-size: 0.6rem;
    color: #6b7280;
    font-weight: 500;
    margin-top: 0.1rem;
    text-transform: capitalize;
    white-space: nowrap;
}

body.theme-dark .org-clock {
    background: rgba(30, 36, 53, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
}

body.theme-dark .clock-time {
    color: #f5f7ff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.theme-dark .clock-date {
    color: #d1d5db;
}

/* Post-its (Sticky Notes) */
#stickyNotesContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

.sticky-note {
    position: absolute;
    width: 250px;
    min-height: 200px;
    background: #ffeb3b;
    border: 2px solid #fbc02d;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    pointer-events: all;
    cursor: grab;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.sticky-note:active {
    cursor: grabbing;
}

.sticky-note-header {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: flex-end;
    cursor: grab;
}

.sticky-note-delete {
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.5);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.sticky-note-delete:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #d32f2f;
}

.sticky-note-content {
    flex: 1;
    padding: 0.75rem;
    min-height: 150px;
    outline: none;
    font-family: 'Comic Sans MS', 'Marker Felt', cursive;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
    overflow-y: auto;
    word-wrap: break-word;
}

.sticky-note-content:focus {
    background: rgba(255, 255, 255, 0.3);
}

.sticky-notes-add-btn {
    position: fixed !important;
    bottom: 20px !important;
    right: 90px !important;
    z-index: 9999 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.sticky-notes-add-btn:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.sticky-notes-add-btn:active {
    transform: scale(0.95);
}

/* Calculadora Rápida */
.quick-calculator {
    position: fixed;
    width: 280px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    overflow: hidden;
    cursor: grab;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.quick-calculator:active {
    cursor: grabbing;
}

.calc-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
}

.calc-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.calc-controls {
    display: flex;
    gap: 0.5rem;
}

.calc-btn-minimize,
.calc-btn-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.calc-btn-minimize:hover,
.calc-btn-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.calc-body {
    padding: 1rem;
}

.calc-display {
    background: #f5f6fa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    font-size: 1.8rem;
    font-weight: 600;
    text-align: right;
    font-family: 'Courier New', monospace;
    color: #1a1a1a;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    word-break: break-all;
    margin-bottom: 1rem;
}

.calc-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.calc-btn {
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.calc-btn:hover {
    background: #f5f6fa;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.calc-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.calc-btn-number {
    background: #f8f9fa;
}

.calc-btn-operator {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.calc-btn-operator:hover {
    background: #5568d3;
}

.calc-btn-function {
    background: #e9ecef;
    color: #495057;
}

.calc-btn-equals {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    grid-column: span 2;
}

.calc-btn-equals:hover {
    background: linear-gradient(135deg, #5568d3 0%, #653a8f 100%);
}

.calc-btn-zero {
    grid-column: span 2;
}

.quick-calculator-toggle {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.quick-calculator-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.quick-calculator-toggle:active {
    transform: scale(0.95);
}

body.theme-dark .quick-calculator {
    background: #1e2435;
    border-color: rgba(255, 255, 255, 0.1);
}

body.theme-dark .calc-display {
    background: #2a3142;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f5f7ff;
}

body.theme-dark .calc-btn {
    background: #2a3142;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f5f7ff;
}

body.theme-dark .calc-btn:hover {
    background: #353b4f;
}

body.theme-dark .calc-btn-number {
    background: #252b3a;
}

body.theme-dark .calc-btn-function {
    background: #353b4f;
    color: #d1d5db;
}

/* Responsive: en pantallas pequeñas, ajustar layout */
@media (max-width: 1024px) {
    .org-name-bar {
        padding: 0.3rem 1rem;
        gap: 0.5rem;
    }

    .org-name-content {
        font-size: 0.7rem;
    }

    .org-name-label,
    .org-name-separator,
    .org-name-version,
    .org-name-value {
        font-size: 0.7rem;
    }

    .org-clock {
        padding: 0.2rem 0.5rem;
    }

    .clock-time {
        font-size: 0.95rem;
    }

    .clock-date {
        font-size: 0.6rem;
    }
}

@media (max-width: 768px) {
    .org-name-bar {
        flex-wrap: wrap;
        padding: 0.3rem 0.75rem;
        gap: 0.5rem;
    }
    
    .org-name-content {
        width: 100%;
        order: 1;
        margin-top: 0;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        justify-content: center;
    }
    
    .org-name-controls {
        order: 2;
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: 0.25rem;
    }
    
    .org-control-wrapper {
        padding: 0.1rem 0.25rem;
    }
    
    .org-control-select {
        font-size: 0.65rem;
        min-width: 50px;
        max-width: 70px;
    }

}

/* Barra superior discreta con controles - TODO EN UNA LÍNEA */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%);
    padding: 0.6rem 1.5rem;
    color: #666;
    position: relative;
    overflow: visible;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.8rem;
    min-height: 48px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    gap: 1.5rem;
}

.top-bar > * {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Logo/Brand - Más grande y destacado */
.top-bar .brand-link {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.3rem 0.6rem;
    margin: -0.3rem -0.6rem;
    border-radius: 10px;
    flex-shrink: 0;
}

.top-bar .brand-link:hover {
    color: var(--primary-color);
    background: rgba(0, 120, 212, 0.06);
    transform: translateX(2px);
}

.brand-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.15) 0%, rgba(0, 120, 212, 0.1) 100%);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.brand-icon-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.5s ease;
}

.top-bar .brand-link:hover .brand-icon-wrapper::before {
    left: 100%;
}

.brand-icon {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 1px 3px rgba(0, 120, 212, 0.25));
}

.top-bar .brand-link:hover .brand-icon-wrapper {
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.25) 0%, rgba(0, 120, 212, 0.18) 100%);
    transform: rotate(5deg) scale(1.05);
    box-shadow: 0 3px 10px rgba(0, 120, 212, 0.25);
}

.top-bar .brand-link:hover .brand-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 5px rgba(0, 120, 212, 0.35));
}

.brand-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.brand-text {
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1.2;
}

.brand-org-name {
    font-weight: 500;
    font-size: 0.75rem;
    color: #6b7280;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.2;
}

.top-bar .brand-link:hover .brand-text {
    background: linear-gradient(135deg, var(--primary-color) 0%, #005ea6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Controles - Compactos y discretos */
.top-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin: 0 auto;
}

.control-wrapper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.4rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.control-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 120, 212, 0.08), transparent);
    transition: left 0.4s ease;
}

.control-wrapper:hover::before {
    left: 100%;
}

.control-wrapper:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 120, 212, 0.2);
    box-shadow: 0 2px 6px rgba(0, 120, 212, 0.12);
    transform: translateY(-1px);
}

.control-icon {
    width: 14px;
    height: 14px;
    color: #6b7280;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.control-wrapper:hover .control-icon {
    color: var(--primary-color);
    transform: scale(1.1);
}

.control-select {
    background: transparent;
    border: none;
    color: #4b5563;
    padding: 0.1rem 0.2rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: auto;
    min-width: 65px;
    max-width: 90px;
    height: 20px;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.2rem center;
    padding-right: 1.2rem;
}

.control-wrapper:hover .control-select {
    color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230078d4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.control-select:focus {
    outline: none;
    color: var(--primary-color);
}

.control-select option {
    background: #ffffff;
    color: #1a1a1a;
    padding: 0.5rem;
}

/* Enlace al proyecto - Al final, discreto */
.top-bar .project-link {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    margin: -0.3rem -0.5rem;
    border-radius: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

.top-bar .project-link:hover {
    color: var(--primary-color);
    background: rgba(0, 120, 212, 0.06);
}

.link-icon {
    width: 11px;
    height: 11px;
    opacity: 0.6;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.top-bar .project-link:hover .link-icon {
    opacity: 1;
    transform: translate(1px, -1px);
}

/* Línea separadora */
.nav-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
    margin: 0;
}

/* Menú principal - Logo y menú en una línea */
.top-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 0.85rem 2rem;
    color: var(--white);
    position: relative; /* Cambiado de sticky a relative porque el contenedor ya es sticky */
    top: 0;
    z-index: 1002; /* Mayor que el contenedor para asegurar que los dropdowns aparezcan encima */
    overflow: visible !important; /* CRÍTICO: Permitir que los dropdowns se vean */
    box-shadow: 0 4px 24px rgba(0, 120, 212, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-nav > * {
    position: relative;
    z-index: 1;
}

.top-nav .dropdown {
    position: relative;
    z-index: 1003; /* Mayor que el nav para que los dropdowns aparezcan encima */
}

/* Puente invisible para mantener el hover activo entre botón y menú */
.dropdown.open::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 1px;
    background: transparent;
    z-index: 10049; /* Justo debajo del dropdown-menu */
    pointer-events: auto;
}

/* Logo dentro del menú - TODO EN UNA LÍNEA HORIZONTAL - FORZADO */
.top-nav .brand-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.65rem !important;
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    line-height: 1 !important;
    white-space: nowrap !important;
    height: auto !important;
    position: relative;
    overflow: hidden;
}

.top-nav .brand-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.top-nav .brand-link:hover::before {
    left: 100%;
}

.top-nav .brand-link:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.top-nav .brand-icon-wrapper {
    display: flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-direction: row !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.top-nav .brand-link:hover .brand-icon-wrapper {
    background: rgba(255, 255, 255, 0.35);
    transform: rotate(8deg) scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.top-nav .brand-icon {
    width: 18px !important;
    height: 18px !important;
    color: var(--white);
    transition: all 0.3s ease;
    display: block !important;
    flex-shrink: 0 !important;
}

.top-nav .brand-text {
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    white-space: nowrap !important;
    display: inline !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    vertical-align: baseline !important;
    color: var(--white);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--white) !important;
    background-clip: unset !important;
}

/* Estilos para tema oscuro - brand-text */
body[data-theme="dark"] .top-nav .brand-text,
body.theme-dark .top-nav .brand-text,
.theme-dark .top-nav .brand-text {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] .top-nav .brand-link:hover .brand-text,
body.theme-dark .top-nav .brand-link:hover .brand-text,
.theme-dark .top-nav .brand-link:hover .brand-text {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
    text-shadow: 0 2px 6px rgba(102, 126, 234, 0.5);
}

.top-nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.top-nav .nav-links {
    align-items: center;
}

.top-nav li {
    list-style: none;
    position: relative;
}

.theme-selector {
    display: flex;
    align-items: center;
}


.theme-select option,
.language-select option {
    color: #000;
}

.language-selector {
    display: flex;
    align-items: center;
}

.nav-link {
    color: var(--white) !important;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.7rem 1.2rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.6s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-link:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}

.nav-link-logout:hover {
    background: rgba(220, 53, 69, 0.2);
}

/* Foto de perfil en el menú principal - Cuadrada y misma altura */
.nav-item-profile-photo {
    margin-left: 0.5rem;
}

.nav-link-profile-photo {
    padding: 0.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    min-height: calc(0.7rem + 0.7rem + 1.31rem); /* Misma altura que los nav-links */
}

.nav-link-profile-photo:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.nav-profile-photo {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 6px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: block;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav-link-profile-photo:hover .nav-profile-photo {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

/* Tema oscuro para foto de perfil */
body.theme-dark .nav-link-profile-photo:hover {
    background: rgba(255, 255, 255, 0.12);
}

body.theme-dark .nav-profile-photo {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.theme-dark .nav-link-profile-photo:hover .nav-profile-photo {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Contenedor de acciones de perfil (foto + logout) */
.profile-actions-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
}

/* Botón de logout en el menú principal */
.btn-logout-nav {
    background: transparent;
    border: none;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #dc3545;
    min-height: calc(0.7rem + 0.7rem + 1.31rem);
    min-width: calc(0.7rem + 0.7rem + 1.31rem);
}

.btn-logout-nav:hover {
    background: rgba(220, 53, 69, 0.1);
    transform: scale(1.1);
}

.btn-logout-nav:active {
    transform: scale(0.95);
}

.btn-logout-nav .logout-icon {
    width: 1.4rem;
    height: 1.4rem;
    stroke: #dc3545;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-logout-nav:hover .logout-icon {
    stroke: #c82333;
    filter: drop-shadow(0 2px 4px rgba(220, 53, 69, 0.3));
}

/* Tema oscuro para botón de logout */
body.theme-dark .btn-logout-nav {
    color: #ff6b6b;
}

body.theme-dark .btn-logout-nav:hover {
    background: rgba(255, 107, 107, 0.15);
}

body.theme-dark .btn-logout-nav .logout-icon {
    stroke: #ff6b6b;
}

body.theme-dark .btn-logout-nav:hover .logout-icon {
    stroke: #ff5252;
    filter: drop-shadow(0 2px 4px rgba(255, 107, 107, 0.4));
}


.nav-icon {
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* Iconos SVG en el menú principal */
.nav-link svg.nav-icon,
.drop-toggle svg.nav-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    color: inherit;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

/* Iconos SVG en dropdowns */
.dropdown-link svg.dropdown-icon,
.submenu-toggle svg.dropdown-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    color: inherit;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0;
}

/* Asegurar que los SVG tengan color visible */
.nav-link svg,
.drop-toggle svg,
.dropdown-link svg,
.submenu .dropdown-link svg,
.dropdown-menu a svg,
.dropdown-menu li a svg {
    color: currentColor !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Manejo correcto de stroke y fill para iconos SVG */
.nav-link svg path[stroke],
.drop-toggle svg path[stroke],
.dropdown-link svg path[stroke],
.submenu .dropdown-link svg path[stroke],
.dropdown-menu a svg path[stroke],
.dropdown-menu li a svg path[stroke] {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: inherit;
}

.nav-link svg path[fill]:not([stroke]),
.drop-toggle svg path[fill]:not([stroke]),
.dropdown-link svg path[fill]:not([stroke]),
.submenu .dropdown-link svg path[fill]:not([stroke]),
.dropdown-menu a svg path[fill]:not([stroke]),
.dropdown-menu li a svg path[fill]:not([stroke]) {
    fill: currentColor !important;
    stroke: none !important;
}

.nav-link svg rect[stroke],
.drop-toggle svg rect[stroke],
.nav-link svg circle[stroke],
.drop-toggle svg circle[stroke],
.dropdown-link svg rect[stroke],
.dropdown-link svg circle[stroke],
.submenu .dropdown-link svg rect[stroke],
.submenu .dropdown-link svg circle[stroke],
.dropdown-menu a svg rect[stroke],
.dropdown-menu a svg circle[stroke] {
    fill: none !important;
    stroke: currentColor !important;
}

.nav-link svg rect[fill]:not([stroke]),
.drop-toggle svg rect[fill]:not([stroke]),
.nav-link svg circle[fill]:not([stroke]),
.drop-toggle svg circle[fill]:not([stroke]),
.dropdown-link svg rect[fill]:not([stroke]),
.dropdown-link svg circle[fill]:not([stroke]),
.submenu .dropdown-link svg rect[fill]:not([stroke]),
.submenu .dropdown-link svg circle[fill]:not([stroke]),
.dropdown-menu a svg rect[fill]:not([stroke]),
.dropdown-menu a svg circle[fill]:not([stroke]) {
    fill: currentColor !important;
    stroke: none !important;
}

/* Por defecto, si no tiene fill ni stroke, usar stroke */
.nav-link svg path:not([fill]):not([stroke]),
.drop-toggle svg path:not([fill]):not([stroke]),
.dropdown-link svg path:not([fill]):not([stroke]),
.submenu .dropdown-link svg path:not([fill]):not([stroke]),
.dropdown-menu a svg path:not([fill]):not([stroke]),
.dropdown-menu li a svg path:not([fill]):not([stroke]) {
    stroke: currentColor !important;
    fill: none !important;
}

/* Reglas específicas con mayor especificidad para paths en submenús */
li .dropdown-link svg path[stroke],
.submenu li .dropdown-link svg path[stroke],
.dropdown-menu li a.dropdown-link svg path[stroke],
.dropdown-submenu .dropdown-link svg path[stroke] {
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.nav-link:hover .nav-icon {
    transform: scale(1.2) rotate(5deg);
}

.nav-text {
    white-space: nowrap;
    text-transform: uppercase;
}

/* Aplicar mayúsculas a todos los textos del menú */
.nav-link .nav-text,
.dropdown-link span:not(.dropdown-icon):not(.submenu-arrow),
.drop-toggle .nav-text {
    text-transform: uppercase !important;
}

.drop-toggle {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.7rem 1.2rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
}

.drop-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.6s ease;
}

.drop-toggle:hover::before {
    left: 100%;
}

.drop-toggle::after {
    content: "▾";
    font-size: 0.75rem;
    margin-left: 0.4rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.9;
}

.drop-toggle:hover,
.dropdown:focus-within .drop-toggle {
    background: rgba(255,255,255,0.2);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}

.dropdown.open > .drop-toggle {
    background: rgba(255,255,255,0.25);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25);
}

.dropdown.open > .drop-toggle::after {
    transform: rotate(180deg);
}

.dropdown-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100% !important;
    left: 0;
    background: rgba(255, 255, 255, 0.98) !important;
    color: #1a1a1a !important;
    min-width: 280px;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.08) !important;
    padding: 0.75rem;
    z-index: 10050 !important; /* Mucho mayor que la barra de acceso rápido para asegurar que aparezca encima */
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    animation: slideDownFade 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0 !important;
}

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

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-15px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown-menu::before {
    display: none;
}

.dropdown:not(.open) .dropdown-menu {
    display: none;
}

.dropdown.open > .drop-toggle {
    background: rgba(255,255,255,0.2);
}

.dropdown-menu li {
    width: 100%;
    margin: 0.15rem 0;
}

/* Separador de sección en menú dropdown */
.dropdown-menu .menu-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent);
    margin: 0.75rem 1rem;
    padding: 0;
    list-style: none;
    pointer-events: none;
    position: relative;
}

.dropdown-menu .menu-separator::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}

/* Título de sección en menú dropdown */
.dropdown-menu .menu-section-title {
    padding: 0.65rem 1.1rem 0.35rem 1.1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6b7280;
    margin-top: 0.5rem;
    margin-bottom: 0.35rem;
    pointer-events: none;
    user-select: none;
    opacity: 0.85;
}

.dropdown-menu .menu-section-title:first-child {
    margin-top: 0;
}

.dropdown-link {
    color: #1a1a1a !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    background: transparent !important;
    letter-spacing: 0.01em;
}

/* Asegurar que los SVG dentro de dropdown-link hereden el color */
.dropdown-link svg,
.dropdown-link svg.dropdown-icon {
    color: inherit !important;
}

/* Asegurar que los paths dentro de los SVG usen el color heredado */
.dropdown-link svg path,
.dropdown-link svg rect,
.dropdown-link svg circle {
    stroke: currentColor !important;
    fill: none !important;
}

.dropdown-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
}

.dropdown-link:hover::before {
    transform: scaleY(1);
}

.dropdown-link:hover {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.08) 100%);
    color: #667eea !important;
    transform: translateX(6px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15), inset 0 1px 0 rgba(102, 126, 234, 0.1);
}

.dropdown-icon {
    font-size: 1.1rem;
    display: inline-block !important;
    align-items: center;
    justify-content: center;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    visibility: visible !important;
    opacity: 1 !important;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* Iconos SVG en dropdowns - Asegurar visibilidad */
.dropdown-link svg.dropdown-icon,
.submenu .dropdown-link svg.dropdown-icon,
.dropdown-menu a svg.dropdown-icon,
.dropdown-menu .dropdown-link svg.dropdown-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    color: inherit !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* Asegurar que los SVG tengan color */
.dropdown-link svg,
.submenu .dropdown-link svg,
.dropdown-menu a svg,
.dropdown-menu .dropdown-link svg {
    color: #1a1a1a !important;
}

/* Asegurar que todos los SVG en dropdowns sean visibles - INCLUYENDO HyperLink de ASP.NET */
.dropdown-link svg,
.submenu .dropdown-link svg,
.dropdown-menu svg,
.dropdown-menu a svg,
.dropdown-menu li svg,
li a svg.dropdown-icon,
li .dropdown-link svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0;
    width: 18px !important;
    height: 18px !important;
}

/* Asegurar que los SVG en dropdowns tengan color visible - INCLUYENDO HyperLink de ASP.NET */
.dropdown-link svg,
.dropdown-menu svg,
.dropdown-menu a svg,
.dropdown-menu li svg,
.dropdown-menu li a svg,
.submenu svg,
.submenu .dropdown-link svg,
.submenu a svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 0.5rem;
    color: inherit !important;
}

.dropdown-link svg path,
.dropdown-link svg rect,
.dropdown-link svg circle,
.submenu .dropdown-link svg path,
.submenu .dropdown-link svg rect,
.submenu .dropdown-link svg circle,
.dropdown-menu svg path,
.dropdown-menu svg rect,
.dropdown-menu svg circle,
.dropdown-menu a svg path,
.dropdown-menu a svg rect,
.dropdown-menu a svg circle,
.dropdown-menu li svg path,
.dropdown-menu li svg rect,
.dropdown-menu li svg circle,
.dropdown-menu li a svg path,
.dropdown-menu li a svg rect,
.dropdown-menu li a svg circle {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Si el path tiene stroke, usar stroke; si tiene fill, usar fill */
.dropdown-link svg path[stroke],
.submenu .dropdown-link svg path[stroke],
.dropdown-menu svg path[stroke],
.dropdown-menu a svg path[stroke],
.dropdown-menu li svg path[stroke],
.dropdown-menu li a svg path[stroke] {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: inherit;
}

.dropdown-link svg rect[stroke],
.dropdown-link svg circle[stroke],
.submenu .dropdown-link svg rect[stroke],
.submenu .dropdown-link svg circle[stroke],
.dropdown-menu svg rect[stroke],
.dropdown-menu svg circle[stroke],
.dropdown-menu a svg rect[stroke],
.dropdown-menu a svg circle[stroke] {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: inherit;
}

.dropdown-link svg path[fill]:not([stroke]),
.submenu .dropdown-link svg path[fill]:not([stroke]),
.dropdown-menu svg path[fill]:not([stroke]),
.dropdown-menu a svg path[fill]:not([stroke]) {
    fill: currentColor !important;
    stroke: none !important;
}

/* Por defecto, usar stroke si no hay atributos específicos */
.dropdown-link svg path:not([fill]):not([stroke]),
.submenu .dropdown-link svg path:not([fill]):not([stroke]),
.dropdown-menu svg path:not([fill]):not([stroke]),
.dropdown-menu a svg path:not([fill]):not([stroke]) {
    stroke: currentColor !important;
    fill: none !important;
}

/* Reglas adicionales para asegurar visibilidad de SVG en HyperLink de ASP.NET */
a.dropdown-link svg,
a.dropdown-link svg.dropdown-icon,
.dropdown-menu a svg,
.dropdown-menu a svg.dropdown-icon,
li a svg,
li a svg.dropdown-icon,
.submenu a svg,
.submenu a svg.dropdown-icon,
.submenu li a svg,
.submenu li a svg.dropdown-icon,
.dropdown-submenu a svg,
.dropdown-submenu a svg.dropdown-icon,
.dropdown-submenu .dropdown-link svg,
.dropdown-submenu .dropdown-link svg.dropdown-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 0.5rem;
    color: inherit !important;
}

/* Asegurar que los paths dentro de SVG en submenús sean visibles */
.submenu a svg path,
.submenu a svg rect,
.submenu a svg circle,
.submenu li a svg path,
.submenu li a svg rect,
.submenu li a svg circle,
.dropdown-submenu a svg path,
.dropdown-submenu a svg rect,
.dropdown-submenu a svg circle,
.dropdown-submenu .dropdown-link svg path,
.dropdown-submenu .dropdown-link svg rect,
.dropdown-submenu .dropdown-link svg circle {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Aplicar stroke/fill correctamente a paths en submenús */
.submenu a svg path[stroke],
.submenu li a svg path[stroke],
.dropdown-submenu a svg path[stroke],
.dropdown-submenu .dropdown-link svg path[stroke] {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: inherit;
}

.submenu a svg path[fill]:not([stroke]),
.submenu li a svg path[fill]:not([stroke]),
.dropdown-submenu a svg path[fill]:not([stroke]),
.dropdown-submenu .dropdown-link svg path[fill]:not([stroke]) {
    fill: currentColor !important;
    stroke: none !important;
}

.submenu a svg path:not([fill]):not([stroke]),
.submenu li a svg path:not([fill]):not([stroke]),
.dropdown-submenu a svg path:not([fill]):not([stroke]),
.dropdown-submenu .dropdown-link svg path:not([fill]):not([stroke]) {
    stroke: currentColor !important;
    fill: none !important;
}

.submenu a svg,
.submenu li a svg,
.dropdown-submenu a svg,
.dropdown-submenu .dropdown-link svg {
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 0.5rem;
    color: #1a1a1a !important;
}

a.dropdown-link svg path,
a.dropdown-link svg rect,
a.dropdown-link svg circle,
.dropdown-menu a svg path,
.dropdown-menu a svg rect,
.dropdown-menu a svg circle,
li a svg path,
li a svg rect,
li a svg circle {
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dropdown-link:hover .dropdown-icon {
    transform: scale(1.2);
}

.dropdown-menu a:hover {
    background: rgba(0,120,212,0.12);
    color: var(--primary-color) !important;
}

/* Submenús anidados */
.dropdown-submenu {
    position: relative;
}

.submenu-toggle {
    justify-content: flex-start !important;
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
}

.submenu-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    margin-left: auto;
}

.submenu {
    display: none !important;
    list-style: none;
    padding: 0.75rem 0 !important;
    margin: 0;
    margin-left: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-left: 3px solid rgba(102, 126, 234, 0.4) !important;
    border-radius: 0 12px 12px 0;
    padding-left: 0.75rem;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 220px;
    z-index: 10051 !important; /* Mayor que el dropdown-menu principal */
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.08) !important;
    animation: slideInRightFade 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

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

@keyframes slideInRightFade {
    from {
        opacity: 0;
        transform: translateX(-15px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Mostrar submenú SOLO cuando está abierto - evita superposiciones */
.dropdown-submenu:hover > .submenu,
.dropdown-submenu.open > .submenu {
    display: block !important;
}

/* Conectar visualmente el submenú con su padre - eliminar espacio muerto */
.dropdown-submenu::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 0;
    bottom: 0;
    width: 10px;
    z-index: 10050; /* Igual que el dropdown-menu para mantener la conexión */
    pointer-events: auto;
    background: transparent;
}

/* Asegurar que solo un submenú esté abierto a la vez */
.dropdown-submenu:not(:hover):not(.open) > .submenu {
    display: none !important;
}

.dropdown-submenu:hover > .submenu-toggle .submenu-arrow,
.dropdown-submenu.open > .submenu-toggle .submenu-arrow {
    transform: rotate(90deg);
}

.submenu .dropdown-link {
    padding-left: 1rem;
    font-size: 0.85rem;
    white-space: nowrap;
    color: #333 !important;
    background: transparent !important;
}

.submenu .dropdown-link:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu {
    display: flex;
}

.top-nav a, .top-nav .aspNetDisabled {
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
}

.nav-links > .nav-item > a,
.nav-links > .nav-item > .drop-toggle {
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.55rem 1rem;
    border-radius: 6px;
    transition: background 0.3s ease, color 0.3s ease;
}

.nav-links > .nav-item > a:hover {
    background: rgba(255,255,255,0.2);
}

/* Contenido Principal */
/* Barra de Acceso Rápido - Diseño Moderno Compacto */
.quick-access-bar {
    display: flex;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 900; /* Reducido para que los dropdowns aparezcan encima */
    margin: 0;
    width: 100%;
    backdrop-filter: blur(12px);
    min-height: auto;
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible; /* Cambiado de hidden a visible para permitir que los resultados se muestren */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Ajustar posición sticky basado en la altura del header */
.top-nav-container ~ .quick-access-bar {
    position: sticky;
    top: 0;
}

/* Iconos SVG en la barra de acceso rápido */
.quick-access-icon-svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.quick-access-btn:hover .quick-access-icon-svg {
    stroke: white;
    transform: scale(1.1);
}

/* Tema oscuro para iconos SVG - Solo para botones normales, no los personalizados */
body.theme-dark .quick-access-btn:not(.quick-access-btn-new-task):not(.quick-access-btn-tools):not(.quick-access-btn-views) .quick-access-icon-svg {
    stroke: rgba(255, 255, 255, 0.8);
}

body.theme-dark .quick-access-btn:not(.quick-access-btn-new-task):not(.quick-access-btn-tools):not(.quick-access-btn-views):hover .quick-access-icon-svg {
    stroke: white;
}

/* Buscador integrado en la barra */
.quick-access-search-inline {
    position: relative;
    flex: 1;
    min-width: 230px;
    max-width: 460px;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 0.68rem 0.75rem;
    transition: all 0.2s ease;
    height: auto;
    min-height: calc(0.68rem * 2 + 1.5px * 2 + 1.2rem); /* Misma altura que los botones */
    box-sizing: border-box;
    z-index: 901; /* Mayor que la barra pero menor que los dropdowns */
}

.quick-access-search-inline:focus-within {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--primary-color, #0078d4);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

body.theme-dark .quick-access-search-inline {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

body.theme-dark .quick-access-search-inline:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

.quick-search-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    color: var(--text-muted, #6c757d);
    flex-shrink: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.quick-access-search-inline:focus-within .quick-search-icon {
    opacity: 1;
    color: var(--primary-color, #3b82f6);
}

body.theme-dark .quick-search-icon {
    color: rgba(255, 255, 255, 0.6);
}

body.theme-dark .quick-access-search-inline:focus-within .quick-search-icon {
    color: rgba(255, 255, 255, 0.9);
}

.quick-search-input-inline {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.875rem;
    color: var(--text-color, #1a1a1a);
    width: 100%;
    min-width: 0;
    position: relative;
    z-index: 1; /* Por encima del ::before */
    pointer-events: auto; /* Asegurar que sea clickeable */
}

.quick-search-input-inline::placeholder {
    color: var(--text-muted, #6c757d);
    opacity: 0.7;
}

body.theme-dark .quick-search-input-inline {
    color: rgba(255, 255, 255, 0.9);
}

body.theme-dark .quick-search-input-inline::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.quick-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color, #3b82f6);
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease;
    width: 16px;
    height: 16px;
}

.quick-access-search:focus-within .quick-search-icon {
    opacity: 1;
    color: var(--primary-color, #3b82f6);
}

.quick-search-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 3rem;
    border: 2px solid var(--primary-color-light, rgba(59, 130, 246, 0.2));
    border-radius: 12px;
    font-size: 1rem;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1f2937);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.quick-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    background: var(--card-bg, #ffffff);
    transform: translateY(-1px);
}

.quick-search-input::placeholder {
    color: var(--text-muted, #6b7280);
    opacity: 0.7;
}

.quick-search-results {
    position: fixed;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 10060 !important; /* Muy alto para aparecer encima de todo */
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 999999;
    pointer-events: auto;
    display: none;
}

.quick-search-result-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.2s ease;
}

.quick-search-result-item:last-child {
    border-bottom: none;
}

.quick-search-result-item:hover {
    background: rgba(79, 140, 255, 0.1);
}

.quick-search-result-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.quick-search-result-meta {
    font-size: 0.8rem;
    color: #666;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.quick-search-result-link {
    text-decoration: none;
    display: block;
    color: inherit;
}

.quick-search-result-link:hover {
    text-decoration: none;
}

.quick-search-no-results {
    padding: 1rem;
    text-align: center;
    color: #999;
    font-size: 0.9rem;
}

.quick-search-loading {
    padding: 1rem;
    text-align: center;
    color: #999;
    font-size: 0.9rem;
}

/* Tema oscuro para resultados de búsqueda */
body.theme-dark .quick-search-results {
    background: rgba(30, 30, 30, 0.98);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.theme-dark .quick-search-result-item {
    border-color: rgba(255, 255, 255, 0.1);
}

body.theme-dark .quick-search-result-item:hover {
    background: rgba(79, 140, 255, 0.2);
}

body.theme-dark .quick-search-result-title {
    color: rgba(255, 255, 255, 0.9);
}

body.theme-dark .quick-search-result-meta {
    color: rgba(255, 255, 255, 0.6);
}

body.theme-dark .quick-search-no-results,
body.theme-dark .quick-search-loading {
    color: rgba(255, 255, 255, 0.6);
}

.quick-access-bar::-webkit-scrollbar {
    height: 3px;
}

.quick-access-bar::-webkit-scrollbar-track {
    background: transparent;
}

.quick-access-bar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.quick-access-bar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.quick-access-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--primary-color, #3b82f6) 20%, 
        var(--secondary-color, #00b4d8) 50%, 
        var(--primary-color, #3b82f6) 80%, 
        transparent 100%);
    opacity: 0.6;
}

.quick-access-group {
    display: flex;
    gap: 0.25rem;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
}

.quick-access-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.68rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
    font-size: 0;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    overflow: visible;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    min-width: 59px;
    width: 59px;
    height: 59px;
    flex-shrink: 0;
}

/* Eliminado el efecto de brillo animado que causaba problemas */

.quick-access-btn:hover {
    background: linear-gradient(135deg, var(--primary-color, #3b82f6) 0%, var(--secondary-color, #00b4d8) 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35), 0 4px 8px rgba(59, 130, 246, 0.2);
}

.quick-access-btn:hover .quick-access-icon-svg {
    stroke: white;
    color: white;
}

.quick-access-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* Tema oscuro para botones */
body.theme-dark .quick-access-bar {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.98) 100%);
}

body.theme-dark .quick-access-btn {
    background: linear-gradient(135deg, rgba(40, 40, 40, 1) 0%, rgba(35, 35, 35, 1) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

body.theme-dark .quick-access-btn:hover {
    background: linear-gradient(135deg, var(--primary-color, #3b82f6) 0%, var(--secondary-color, #00b4d8) 100%);
    border-color: transparent;
}

body.theme-dark .quick-access-btn:not(.quick-access-btn-new-task):not(.quick-access-btn-tools):not(.quick-access-btn-views):hover .quick-access-icon-svg {
    stroke: white;
}

.quick-access-label {
    display: none !important;
    font-size: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Botón principal destacado - MIS TAREAS */
.quick-access-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: #667eea !important;
    color: white !important;
    padding: 0.68rem 1rem !important;
    min-width: auto !important;
    width: auto !important;
    gap: 0.5rem !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3), 0 2px 4px rgba(102, 126, 234, 0.2) !important;
}

.quick-access-btn-primary:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4), 0 4px 8px rgba(102, 126, 234, 0.3) !important;
}

.quick-access-btn-primary .quick-access-icon-svg {
    stroke: white !important;
    color: white !important;
}

.quick-access-label-primary {
    display: inline-block !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: white !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Tema oscuro para botón principal */
body.theme-dark .quick-access-btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
    border-color: #7c3aed !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4), 0 2px 4px rgba(124, 58, 237, 0.3) !important;
}

body.theme-dark .quick-access-btn-primary:hover {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.5), 0 4px 8px rgba(124, 58, 237, 0.4) !important;
}

/* Botones de herramientas con estilo azul metálico tipo navy */
.quick-access-btn-tools {
    background: linear-gradient(135deg, var(--tools-navy-dark, #1e3a5f) 0%, var(--tools-navy, #2c5282) 50%, var(--tools-navy-darker, #1a365d) 100%) !important;
    border-color: rgba(66, 153, 225, 0.4) !important;
    color: var(--tools-text, #e6f2ff) !important;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.4), 
                0 1px 4px rgba(30, 58, 95, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    position: relative;
}

.quick-access-btn-tools::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(79, 172, 254, 0.15) 0%, 
        rgba(66, 153, 225, 0.1) 50%, 
        rgba(30, 64, 175, 0.2) 100%);
    border-radius: 8px;
    pointer-events: none;
    opacity: 0.6;
}

.quick-access-btn-tools .quick-access-icon-svg {
    stroke: var(--tools-text, #b3d9ff) !important;
    color: var(--tools-text, #b3d9ff) !important;
    fill: none !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.quick-access-btn-tools:hover {
    background: linear-gradient(135deg, var(--tools-navy, #2c5282) 0%, var(--tools-navy-light, #3182ce) 50%, var(--tools-navy-hover, #2563eb) 100%) !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5), 
                0 4px 12px rgba(37, 99, 235, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.quick-access-btn-tools:hover::before {
    background: linear-gradient(135deg, 
        rgba(147, 197, 253, 0.25) 0%, 
        rgba(96, 165, 250, 0.2) 50%, 
        rgba(59, 130, 246, 0.3) 100%);
    opacity: 0.8;
}

.quick-access-btn-tools:hover .quick-access-icon-svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3));
}

.quick-access-btn-tools:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4), 
                inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Tema oscuro para botones de herramientas */
body.theme-dark .quick-access-btn-tools {
    background: linear-gradient(135deg, var(--tools-navy-dark, #1e3a5f) 0%, var(--tools-navy, #2c5282) 50%, var(--tools-navy-darker, #1a365d) 100%) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
    color: var(--tools-text, #dbeafe) !important;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.6), 
                0 1px 4px rgba(30, 58, 95, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

body.theme-dark .quick-access-btn-tools .quick-access-icon-svg {
    stroke: var(--tools-text, #bfdbfe) !important;
    color: var(--tools-text, #bfdbfe) !important;
    fill: none !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

body.theme-dark .quick-access-btn-tools:hover {
    background: linear-gradient(135deg, var(--tools-navy-light, #3182ce) 0%, #3b82f6 50%, var(--tools-navy-hover, #2563eb) 100%) !important;
    border-color: rgba(147, 197, 253, 0.7) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6), 
                0 4px 12px rgba(37, 99, 235, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

body.theme-dark .quick-access-btn-tools:hover .quick-access-icon-svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
    filter: drop-shadow(0 2px 4px rgba(147, 197, 253, 0.5));
}

/* Botón de nueva tarea - Verde metalizado */
.quick-access-btn-new-task {
    background: linear-gradient(135deg, var(--new-task-green-dark, #065f46) 0%, var(--new-task-green, #047857) 50%, var(--new-task-green-light, #059669) 100%) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: var(--new-task-text, #d1fae5) !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4), 
                0 1px 4px rgba(5, 150, 105, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    position: relative;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0.68rem 1rem !important;
    min-width: auto !important;
    width: auto !important;
}

.quick-access-btn-new-task::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.2) 0%, 
        rgba(5, 150, 105, 0.15) 50%, 
        rgba(4, 120, 87, 0.25) 100%);
    border-radius: 8px;
    pointer-events: none;
    opacity: 0.7;
}

.quick-access-btn-new-task .quick-access-icon-svg {
    stroke: var(--new-task-text, #d1fae5) !important;
    color: var(--new-task-text, #d1fae5) !important;
    fill: none !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.quick-access-btn-new-task .quick-access-label {
    display: inline-block !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: var(--new-task-text, #d1fae5) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    position: relative;
    z-index: 1;
}

.quick-access-btn-new-task:hover {
    background: linear-gradient(135deg, var(--new-task-green, #047857) 0%, var(--new-task-green-light, #059669) 50%, var(--new-task-green-hover, #10b981) 100%) !important;
    border-color: rgba(16, 185, 129, 0.7) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5), 
                0 4px 12px rgba(5, 150, 105, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.quick-access-btn-new-task:hover::before {
    background: linear-gradient(135deg, 
        rgba(52, 211, 153, 0.3) 0%, 
        rgba(16, 185, 129, 0.25) 50%, 
        rgba(5, 150, 105, 0.35) 100%);
    opacity: 0.9;
}

.quick-access-btn-new-task:hover .quick-access-icon-svg,
.quick-access-btn-new-task:hover .quick-access-label {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
}

.quick-access-btn-new-task:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4), 
                inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Tema oscuro para botón de nueva tarea */
body.theme-dark .quick-access-btn-new-task {
    background: linear-gradient(135deg, var(--new-task-green-dark, #065f46) 0%, var(--new-task-green, #047857) 50%, var(--new-task-green-light, #059669) 100%) !important;
    border-color: rgba(52, 211, 153, 0.5) !important;
    color: var(--new-task-text, #a7f3d0) !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.6), 
                0 1px 4px rgba(5, 150, 105, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body.theme-dark .quick-access-btn-new-task .quick-access-icon-svg,
body.theme-dark .quick-access-btn-new-task .quick-access-label {
    color: var(--new-task-text, #a7f3d0) !important;
    stroke: var(--new-task-text, #a7f3d0) !important;
    fill: none !important;
}

body.theme-dark .quick-access-btn-new-task:hover {
    background: linear-gradient(135deg, var(--new-task-green, #047857) 0%, var(--new-task-green-light, #059669) 50%, var(--new-task-green-hover, #10b981) 100%) !important;
    border-color: rgba(52, 211, 153, 0.8) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.7), 
                0 4px 12px rgba(5, 150, 105, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

body.theme-dark .quick-access-btn-new-task:hover .quick-access-icon-svg,
body.theme-dark .quick-access-btn-new-task:hover .quick-access-label {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
}

/* Botones de vistas (Kanban, Calendario, Gantt) - Estilo unificado profesional */
.quick-access-btn-views {
    background: linear-gradient(135deg, var(--views-purple-dark, #4c1d95) 0%, var(--views-purple, #5b21b6) 50%, var(--views-purple-light, #6d28d9) 100%) !important;
    border-color: rgba(167, 139, 250, 0.4) !important;
    color: var(--views-text, #ede9fe) !important;
    box-shadow: 0 2px 8px rgba(109, 40, 217, 0.35), 
                0 1px 4px rgba(109, 40, 217, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    position: relative;
}

.quick-access-btn-views::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(196, 181, 253, 0.15) 0%, 
        rgba(167, 139, 250, 0.1) 50%, 
        rgba(139, 92, 246, 0.2) 100%);
    border-radius: 8px;
    pointer-events: none;
    opacity: 0.6;
}

.quick-access-btn-views .quick-access-icon-svg {
    stroke: var(--views-text, #c4b5fd) !important;
    color: var(--views-text, #c4b5fd) !important;
    fill: none !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.quick-access-btn-views:hover {
    background: linear-gradient(135deg, var(--views-purple, #5b21b6) 0%, var(--views-purple-light, #6d28d9) 50%, var(--views-purple-hover, #7c3aed) 100%) !important;
    border-color: rgba(196, 181, 253, 0.6) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45), 
                0 4px 12px rgba(109, 40, 217, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.quick-access-btn-views:hover::before {
    background: linear-gradient(135deg, 
        rgba(221, 214, 254, 0.25) 0%, 
        rgba(196, 181, 253, 0.2) 50%, 
        rgba(167, 139, 250, 0.3) 100%);
    opacity: 0.85;
}

.quick-access-btn-views:hover .quick-access-icon-svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3));
}

.quick-access-btn-views:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(109, 40, 217, 0.4), 
                inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Tema oscuro para botones de vistas */
body.theme-dark .quick-access-btn-views {
    background: linear-gradient(135deg, var(--views-purple-dark, #4c1d95) 0%, var(--views-purple, #5b21b6) 50%, var(--views-purple-light, #6d28d9) 100%) !important;
    border-color: rgba(196, 181, 253, 0.5) !important;
    color: var(--views-text, #ddd6fe) !important;
    box-shadow: 0 2px 8px rgba(109, 40, 217, 0.5), 
                0 1px 4px rgba(109, 40, 217, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

body.theme-dark .quick-access-btn-views .quick-access-icon-svg {
    stroke: var(--views-text, #c4b5fd) !important;
    color: var(--views-text, #c4b5fd) !important;
    fill: none !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

body.theme-dark .quick-access-btn-views:hover {
    background: linear-gradient(135deg, var(--views-purple, #5b21b6) 0%, var(--views-purple-light, #6d28d9) 50%, var(--views-purple-hover, #7c3aed) 100%) !important;
    border-color: rgba(221, 214, 254, 0.7) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.65), 
                0 4px 12px rgba(109, 40, 217, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

body.theme-dark .quick-access-btn-views:hover .quick-access-icon-svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
    filter: drop-shadow(0 2px 4px rgba(221, 214, 254, 0.5));
}

/* Tooltip simplificado para los botones - sin usar ::before y ::after para evitar conflictos */
.quick-access-btn {
    position: relative;
}

.quick-access-btn[title] {
    cursor: pointer;
}

/* Usar un elemento separado para el tooltip en lugar de ::after para evitar problemas de hover */
.quick-access-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.35rem 0.6rem;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    pointer-events: none;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.quick-access-btn:hover .quick-access-tooltip {
    opacity: 1;
    visibility: visible;
}

.quick-access-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid rgba(0, 0, 0, 0.9);
}

@keyframes fadeInTooltip {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Separador visual entre grupos */
.quick-access-group:not(:last-child)::after {
    content: '';
    width: 1px;
    height: 20px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    /* Ocultar la barra de acceso rápido en pantallas pequeñas */
    .quick-access-bar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Ajustar buscador integrado en móviles */
    .quick-access-search-inline {
        min-width: 173px;
        max-width: 288px;
        padding: 0.55rem 0.6rem; /* Mantener misma altura que los botones en móvil */
        min-height: calc(0.55rem * 2 + 1.5px * 2 + 1.1rem);
    }

    .quick-search-input-inline {
        font-size: 0.8rem;
    }

    .quick-search-icon {
        width: 16px;
        height: 16px;
    }

    .quick-access-group {
        gap: 0.25rem;
    }

    .quick-access-group:not(:last-child)::after {
        display: none;
    }

    .quick-access-btn {
        padding: 0.55rem;
        font-size: 0.8125rem;
        min-width: 50px;
        width: 50px;
        height: 50px;
    }

    .quick-access-label {
        display: none;
    }
    
    .quick-access-label-primary {
        font-size: 0.75rem !important;
        letter-spacing: 0.3px !important;
    }
    
    .quick-access-btn-primary {
        padding: 0.55rem 0.75rem !important;
        gap: 0.4rem !important;
    }
    
    .quick-access-icon-svg {
        width: 1.1rem;
        height: 1.1rem;
    }
    
    .quick-access-btn {
        gap: 0;
        justify-content: center;
    }

    .quick-access-profile-photo {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    .quick-access-profile-photo-search {
        width: 3.15rem !important;
        height: 3.15rem !important;
    }
}

.content {
    padding: 2rem;
    flex: 1;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    transition: margin-left 0.3s ease;
    position: relative;
    overflow: visible; /* Permitir que el contenido se expanda completamente */
    overflow-x: hidden; /* Prevenir scroll horizontal */
    overflow-y: visible; /* CRÍTICO: Sin scroll vertical interno - el scroll debe estar en body */
    height: auto; /* Altura automática */
    max-height: none; /* Sin límite de altura máxima */
    min-height: 0; /* CRÍTICO: Permite que el contenido se encoja en flexbox */
    /* Ocultar scrollbar si aparece */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
}

/* Ajustar contenido cuando el historial está visible */
.historial-navegacion:not(.collapsed) ~ .quick-access-bar,
.historial-navegacion:not(.collapsed) ~ .global-search-container,
.historial-navegacion:not(.collapsed) ~ .content {
    margin-left: 280px;
}

/* En pantallas pequeñas, ocultar el historial automáticamente y ajustar el contenido */
@media (max-width: 768px) {
    .historial-navegacion {
        transform: translateX(-280px) !important;
        visibility: hidden !important;
    }
    
    .historial-navegacion:not(.collapsed) ~ .quick-access-bar,
    .historial-navegacion:not(.collapsed) ~ .global-search-container,
    .historial-navegacion:not(.collapsed) ~ .content {
        margin-left: 0 !important;
    }
    
    .content {
        margin-left: 0 !important;
        padding: 1rem !important;
    }
}

.content::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 20%, rgba(0, 120, 212, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(0, 180, 216, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.content > * {
    position: relative;
    z-index: 1;
}

/* Cards y Secciones */
.card, section {
    background: var(--white);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card::before,
section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover,
section:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.card:hover::before,
section:hover::before {
    opacity: 1;
}

.card-sub {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.card h2, .card h3, section h2, section h3 {
    margin-top: 0;
    color: var(--primary-color);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Grid Dashboard */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Tablas */
.grid {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.grid th {
    background: var(--primary-color);
    color: var(--white);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
}

.grid td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.task-card {
    background: var(--white);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.task-card__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.task-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    flex: 1;
    margin: 0;
}

.task-card__actions .btn {
    margin-left: 0.5rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}

.task-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.3rem;
    font-size: 0.9rem;
}

.task-card__meta span {
    background: rgba(0,0,0,0.03);
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
}

.task-card__asignados {
    font-size: 0.9rem;
    line-height: 1.4;
}

.task-card__asignados strong {
    display: inline-block;
    margin-right: 0.5rem;
}

.assign-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.assign-item span {
    flex: 1;
}

.btn-whatsapp {
    background: #25D366;
    color: #fff;
}

.btn-whatsapp:hover {
    background: #1ebe5d;
    color: #fff;
}

.filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    align-items: flex-end;
}

.filters > div {
    flex: 1;
    min-width: 200px;
}

.select2-container .select2-selection--single {
    height: 42px;
    padding: 6px 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
    color: #333;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 10px;
}

.select2-dropdown {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
}

.filters label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--text-muted);
}

.filters__actions {
    display: flex;
    gap: 0.5rem;
    min-width: 200px;
}

.align-end {
    display: flex;
    align-items: flex-end;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.checkbox-inline input {
    margin: 0;
}

.grid tr:hover {
    background: rgba(0, 120, 212, 0.08);
}

.grid tr:last-child td {
    border-bottom: none;
}

/* Formularios */
.form-container {
    max-width: 800px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

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

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.input, select, textarea {
    width: 100%;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: inherit;
}

.input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,120,212,0.1);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

select[multiple], .listbox-multiple {
    min-height: 150px;
    padding: 0.5rem;
}

/* Botones */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.6rem 1.4rem;
    min-width: 140px;
    min-height: 44px;
    border-radius: 10px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--white);
    background: var(--primary-color);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: 0;
}

.btn > * {
    position: relative;
    z-index: 1;
}

.btn:hover,
.btn:focus {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.btn-primary {
    background: var(--primary-color);
}

.btn-secondary {
    background: #5f6b7a;
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: #4d5662;
}

.btn-danger {
    background: var(--danger-color);
}

.btn-danger:hover,
.btn-danger:focus {
    background: #c82333;
}

.btn-success {
    background: var(--success-color);
}

.btn-success:hover,
.btn-success:focus {
    background: #218838;
}

.btn-outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.8);
    color: #fff;
}

.btn-block {
    width: 100%;
}

.btn-action {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 1rem;
    font-size: 0.92rem;
    justify-content: center;
}

.actions-stack {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 170px;
    min-width: 170px;
    max-width: 170px;
}

.editor-full {
    width: 100%;
    min-height: 900px;
}

/* Excluir editores DevExpress del estilo genérico */
body.page-docs-online .editor-full,
body.page-hojas-online .editor-full {
    min-height: 0 !important;
}

.link-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.link-box {
    flex: 1;
    min-width: 220px;
}

.link-copy-btn {
    white-space: nowrap;
}

.workspace-container {
    max-width: 100%;
    width: 100%;
    background: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Estilos para maximizar el área de trabajo en DocsOnline, HojasOnline y DiagramasEditor */
body.page-docs-online,
body.page-hojas-online,
body.page-diagramas-editor {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body.page-docs-online html,
body.page-hojas-online html,
body.page-diagramas-editor html {
    width: 100%;
    margin: 0;
    padding: 0;
}

body.page-docs-online .content,
body.page-hojas-online .content,
body.page-diagramas-editor .content {
    padding: 0 !important;
    height: calc(100vh - var(--header-height, 200px) - var(--quick-access-height, 50px) - var(--search-bar-height, 50px) - var(--footer-height, 60px)) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.page-docs-online .layout,
body.page-hojas-online .layout,
body.page-diagramas-editor .layout {
    height: 100vh;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

body.page-docs-online .app-footer,
body.page-hojas-online .app-footer,
body.page-diagramas-editor .app-footer {
    display: none;
}

body.page-docs-online .workspace-container,
body.page-hojas-online .workspace-container,
body.page-diagramas-editor .workspace-container {
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--white) !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

body.page-docs-online .tool-header,
body.page-hojas-online .tool-header,
body.page-diagramas-editor .tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    min-height: 60px;
}

body.page-docs-online .tool-header h2,
body.page-hojas-online .tool-header h2,
body.page-diagramas-editor .tool-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-color);
    line-height: 1.2;
}

body.page-docs-online .tool-header .text-muted,
body.page-hojas-online .tool-header .text-muted,
body.page-diagramas-editor .tool-header .text-muted {
    display: none;
}

body.page-docs-online .tool-header > div,
body.page-hojas-online .tool-header > div,
body.page-diagramas-editor .tool-header > div {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

body.page-docs-online .tool-actions,
body.page-hojas-online .tool-actions,
body.page-diagramas-editor .tool-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

body.page-diagramas-editor .tool-header .inline-group {
    margin: 0;
}

body.page-diagramas-editor .tool-header .inline-group label {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

body.page-diagramas-editor .tool-header .inline-group .input {
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
}

/* Editor de documentos y hojas de cálculo - Solo afectar el contenedor principal */
body.page-docs-online .editor-full,
body.page-hojas-online .editor-full {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
}

/* EXCLUSIÓN TOTAL: NO aplicar estilos a elementos hijos directos */
/* Solo el contenedor .editor-full tiene estilos, sus hijos son gestionados por DevExpress */

/* Asegurar que los contenedores principales no tengan limitaciones */
body.page-docs-online form,
body.page-hojas-online form,
body.page-diagramas-editor form {
    width: 100%;
    margin: 0;
    padding: 0;
}

body.page-docs-online #MainContent,
body.page-hojas-online #MainContent,
body.page-diagramas-editor #MainContent {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Editor de diagramas - Asegurar que ocupe todo el espacio disponible */
body.page-diagramas-editor .diagram-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* EXCLUSIÓN TOTAL: NO aplicar estilos al iframe de diagramas */
/* El iframe se gestiona a sí mismo, solo el contenedor .diagram-wrapper tiene estilos */
body.page-diagramas-editor .diagram-frame {
    /* Sin estilos - el iframe se gestiona a sí mismo */
}

/* ============================================
   EXCLUSIÓN TOTAL DE ESTILOS PARA COMPONENTES DEVEXPRESS Y DIAGRAMAS
   ============================================
   Estas reglas aseguran que NINGÚN estilo global afecte a los componentes
   DevExpress (RichEdit, Spreadsheet) ni al iframe de diagramas.
   ============================================ */

/* EXCLUSIÓN TOTAL: RichEdit (Editor de Texto) - NO aplicar NINGÚN estilo */
/* DevExpress gestiona completamente estos elementos - NO interferir */
body.page-docs-online .editor-full .dxre,
body.page-docs-online .editor-full .dxre *,
body.page-docs-online .editor-full .dxre *::before,
body.page-docs-online .editor-full .dxre *::after,
body.page-docs-online .editor-full [id*="richEdit"],
body.page-docs-online .editor-full [id*="richEdit"] *,
body.page-docs-online .editor-full [id*="RichEdit"],
body.page-docs-online .editor-full [id*="RichEdit"] * {
    /* NO aplicar estilos - dejar que DevExpress gestione todo */
}


/* EXCLUSIÓN TOTAL: Iframe de Diagramas - NO aplicar NINGÚN estilo */
/* draw.io gestiona completamente el iframe - NO interferir */
body.page-diagramas-editor .diagram-frame,
body.page-diagramas-editor .diagram-frame * {
    /* NO aplicar estilos - dejar que draw.io gestione todo */
}

/* Asegurar que los contenedores principales NO interfieran */
body.page-docs-online .editor-full,
body.page-hojas-online .editor-full,
body.page-diagramas-editor .diagram-wrapper {
    transform: none !important;
    will-change: auto !important;
    /* Solo el contenedor puede tener estilos, nada más */
}

/* EXCLUSIÓN ADICIONAL: Prevenir que cualquier selector universal afecte estos componentes */
/* Estas reglas tienen máxima prioridad y se aplican DESPUÉS de todos los demás estilos */
body.page-docs-online .editor-full .dxre,
body.page-docs-online .editor-full .dxre *,
body.page-docs-online .editor-full .dxre *::before,
body.page-docs-online .editor-full .dxre *::after,
body.page-docs-online .editor-full [id*="richEdit"],
body.page-docs-online .editor-full [id*="richEdit"] *,
body.page-docs-online .editor-full [id*="RichEdit"],
body.page-docs-online .editor-full [id*="RichEdit"] *,
body.page-diagramas-editor .diagram-frame,
body.page-diagramas-editor .diagram-frame * {
    /* Excluir de selectores universales y cualquier estilo global */
    /* Estos componentes son gestionados EXCLUSIVAMENTE por DevExpress/draw.io */
    pointer-events: auto !important;
}

/* REGLA FINAL DE EXCLUSIÓN: Anular CUALQUIER estilo que pueda haber sido aplicado */
/* Esta regla debe estar al final del archivo para tener máxima prioridad */
/* NO aplicar NINGÚN estilo a estos elementos - se gestionan solos */
body.page-docs-online .editor-full .dxre *,
body.page-docs-online .editor-full [id*="richEdit"] *,
body.page-docs-online .editor-full [id*="RichEdit"] *,
body.page-diagramas-editor .diagram-frame * {
    /* NO aplicar estilos - estos componentes se gestionan completamente solos */
}

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tool-header h2 {
    margin: 0 0 0.25rem 0;
    color: var(--primary-color);
}

.tool-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Reglas genéricas para diagramas (no aplican al editor) */
.diagram-wrapper:not(body.page-diagramas-editor .diagram-wrapper) {
    width: 100%;
    min-height: 80vh;
}

.diagram-frame:not(body.page-diagramas-editor .diagram-frame) {
    width: 100%;
    min-height: 78vh;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    background: #fff;
}

.inline-group {
    max-width: 420px;
}

.inline-group label {
    font-weight: 600;
    margin-bottom: 0.4rem;
    display: block;
}

/* Kanban board - Rediseño moderno y amplio */
.kanban-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;
}

.kanban-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.kanban-header > div:first-child {
    flex: 1;
    min-width: 0;
}

.kanban-header-left {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.kanban-title-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.kanban-header > div:first-child h2,
.kanban-header-left h2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
}

.kanban-header > div:first-child p,
.kanban-header-left p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.kanban-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
}

.kanban-actions .btn {
    white-space: nowrap;
    min-width: auto;
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.kanban-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Estilos responsivos para el header del Kanban */
@media (max-width: 768px) {
    .kanban-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .kanban-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .kanban-actions .btn {
        flex: 1;
        min-width: 120px;
    }
}

.kanban-board {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0.75rem 0.75rem 1.5rem 0.75rem;
    position: relative;
    min-height: calc(100vh - 250px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.kanban-board::-webkit-scrollbar {
    height: 12px;
}

.kanban-board::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 10px;
}

.kanban-board::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

.kanban-board::-webkit-scrollbar-thumb:hover {
    background: #5568d3;
}

.kanban-board--loading {
    opacity: 0.6;
    pointer-events: none;
}

.kanban-board--loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.kanban-board--empty::after {
    content: "No hay tareas para mostrar.";
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 1.1rem;
    pointer-events: none;
}

.kanban-column {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 12px;
    padding: 0.75rem;
    min-width: 200px;
    width: 200px;
    max-width: 200px;
    flex: 0 0 200px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 220px);
    height: 100%;
    border: 1px solid rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.kanban-column:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
}

.kanban-column__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1.5px solid rgba(102, 126, 234, 0.2);
}

/* Colores para las columnas según estado - Fondo y bordes usando clases */
.kanban-column--pendiente {
    background: linear-gradient(180deg, rgba(107, 114, 128, 0.05) 0%, rgba(107, 114, 128, 0.02) 100%) !important;
    border-color: rgba(107, 114, 128, 0.15) !important;
}

.kanban-column[data-status="Pendiente de Asignar"],
.kanban-column[data-status*="Pendiente"] {
    background: linear-gradient(180deg, rgba(107, 114, 128, 0.05) 0%, rgba(107, 114, 128, 0.02) 100%) !important;
    border-color: rgba(107, 114, 128, 0.15) !important;
}

.kanban-column[data-status*="Pendiente"] .kanban-column__header {
    border-bottom-color: rgba(107, 114, 128, 0.3);
}

.kanban-column--abierta {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.02) 100%) !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
}

.kanban-column--abierta .kanban-column__header {
    border-bottom-color: rgba(59, 130, 246, 0.3) !important;
}

.kanban-column[data-status="Abierta"],
.kanban-column[data-status*="Abierta"] {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.02) 100%) !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
}

.kanban-column[data-status*="Abierta"] .kanban-column__header {
    border-bottom-color: rgba(59, 130, 246, 0.3);
}

.kanban-column--proceso {
    background: linear-gradient(180deg, rgba(102, 126, 234, 0.05) 0%, rgba(102, 126, 234, 0.02) 100%) !important;
    border-color: rgba(102, 126, 234, 0.15) !important;
}

.kanban-column[data-status="En Proceso"],
.kanban-column[data-status*="Proceso"] {
    background: linear-gradient(180deg, rgba(102, 126, 234, 0.05) 0%, rgba(102, 126, 234, 0.02) 100%) !important;
    border-color: rgba(102, 126, 234, 0.15) !important;
}

.kanban-column[data-status*="Proceso"] .kanban-column__header {
    border-bottom-color: rgba(102, 126, 234, 0.3);
}

.kanban-column--bloqueada {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.02) 100%) !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
}

.kanban-column--bloqueada .kanban-column__header {
    border-bottom-color: rgba(239, 68, 68, 0.3) !important;
}

.kanban-column[data-status="Bloqueada"],
.kanban-column[data-status*="Bloqueada"] {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.02) 100%) !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
}

.kanban-column[data-status*="Bloqueada"] .kanban-column__header {
    border-bottom-color: rgba(239, 68, 68, 0.3);
}

.kanban-column--pausada {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.02) 100%) !important;
    border-color: rgba(245, 158, 11, 0.15) !important;
}

.kanban-column[data-status="Pausada"],
.kanban-column[data-status*="Pausada"] {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.02) 100%) !important;
    border-color: rgba(245, 158, 11, 0.15) !important;
}

.kanban-column[data-status*="Pausada"] .kanban-column__header {
    border-bottom-color: rgba(245, 158, 11, 0.3);
}

.kanban-column--revision {
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.05) 0%, rgba(168, 85, 247, 0.02) 100%) !important;
    border-color: rgba(168, 85, 247, 0.15) !important;
}

.kanban-column--revision .kanban-column__header {
    border-bottom-color: rgba(168, 85, 247, 0.3) !important;
}

.kanban-column[data-status="En Revisión"],
.kanban-column[data-status*="Revisión"],
.kanban-column[data-status*="Revision"] {
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.05) 0%, rgba(168, 85, 247, 0.02) 100%) !important;
    border-color: rgba(168, 85, 247, 0.15) !important;
}

.kanban-column[data-status*="Revisión"] .kanban-column__header,
.kanban-column[data-status*="Revision"] .kanban-column__header {
    border-bottom-color: rgba(168, 85, 247, 0.3);
}

.kanban-column--terminada {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%) !important;
    border-color: rgba(16, 185, 129, 0.15) !important;
}

.kanban-column[data-status="Terminada"],
.kanban-column[data-status*="Terminada"],
.kanban-column[data-status*="Completada"] {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%) !important;
    border-color: rgba(16, 185, 129, 0.15) !important;
}

.kanban-column[data-status*="Terminada"] .kanban-column__header,
.kanban-column[data-status*="Completada"] .kanban-column__header {
    border-bottom-color: rgba(16, 185, 129, 0.3);
}

.kanban-column--cancelada {
    background: linear-gradient(180deg, rgba(156, 163, 175, 0.05) 0%, rgba(156, 163, 175, 0.02) 100%) !important;
    border-color: rgba(156, 163, 175, 0.15) !important;
}

.kanban-column--cancelada .kanban-column__header {
    border-bottom-color: rgba(156, 163, 175, 0.3) !important;
}

.kanban-column[data-status="Cancelada"],
.kanban-column[data-status*="Cancelada"] {
    background: linear-gradient(180deg, rgba(156, 163, 175, 0.05) 0%, rgba(156, 163, 175, 0.02) 100%) !important;
    border-color: rgba(156, 163, 175, 0.15) !important;
}

.kanban-column[data-status*="Cancelada"] .kanban-column__header {
    border-bottom-color: rgba(156, 163, 175, 0.3);
}

.kanban-column__header h3 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    line-height: 1.2;
    word-wrap: break-word;
    hyphens: auto;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-column__counter {
    background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
    color: var(--white);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(102, 126, 234, 0.3);
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.kanban-column__body {
    flex: 1;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.35rem;
    min-height: 200px;
    border-radius: 8px;
    transition: background 0.3s ease, border 0.3s ease;
    width: 100%;
}

.kanban-column__body--over {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
    outline: 3px dashed var(--primary-color);
    outline-offset: -6px;
    border-radius: 12px;
}

.kanban-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid rgba(0,0,0,0.08);
    border-left: 3px solid transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    flex-shrink: 0;
    min-height: auto;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
}

.kanban-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.kanban-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.08);
    border-color: rgba(102, 126, 234, 0.3);
    border-left-color: rgba(102, 126, 234, 0.5);
}

.kanban-card:hover::before {
    opacity: 1;
}

.kanban-card:active {
    cursor: grabbing;
}

.kanban-card--dragging {
    opacity: 0.5;
    transform: rotate(2deg);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.kanban-card--readonly {
    cursor: default;
    opacity: 0.9;
    background: #f8f9fa;
}

.kanban-card__title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

.kanban-card__description {
    margin: 0;
    font-size: 0.75rem;
    color: #666;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.kanban-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.kanban-card__meta span {
    background: rgba(102, 126, 234, 0.08);
    padding: 0.3rem 0.55rem;
    border-radius: 6px;
    font-weight: 600;
    border: 1px solid rgba(102, 126, 234, 0.15);
    white-space: nowrap;
    font-size: 0.65rem;
}

.kanban-card__assign {
    font-size: 0.7rem;
    color: #555;
    padding: 0.35rem 0.55rem;
    background: rgba(0,0,0,0.04);
    border-radius: 6px;
    margin-top: 0.2rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex-shrink: 0;
    line-height: 1.4;
    border: 1px solid rgba(0,0,0,0.05);
}

.kanban-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    gap: 0.4rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    min-height: auto;
    width: 100%;
    box-sizing: border-box;
}

.kanban-card__status {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.3rem 0.55rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
}

/* Colores específicos para cada estado - Badge */
.kanban-card__status[data-estado-original="Pendiente de Asignar"],
.kanban-card__status[data-estado-original*="Pendiente"] {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.25);
}

/* Colores para borde izquierdo de tarjetas según estado */
.kanban-card[data-estado="Pendiente de Asignar"],
.kanban-card[data-estado*="Pendiente"] {
    border-left-color: #6b7280;
}

.kanban-card__status[data-estado-original="Abierta"],
.kanban-card__status[data-estado-original*="Abierta"] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.25);
}

.kanban-card[data-estado="Abierta"],
.kanban-card[data-estado*="Abierta"] {
    border-left-color: #3b82f6;
}

.kanban-card__status[data-estado-original="En Proceso"],
.kanban-card__status[data-estado-original*="Proceso"] {
    background: rgba(102, 126, 234, 0.15);
    color: #667eea;
    border-color: rgba(102, 126, 234, 0.25);
}

.kanban-card__status[data-estado-original="Bloqueada"],
.kanban-card__status[data-estado-original*="Bloqueada"] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

.kanban-card[data-estado="Bloqueada"],
.kanban-card[data-estado*="Bloqueada"] {
    border-left-color: #ef4444;
}

.kanban-card__status[data-estado-original="Pausada"],
.kanban-card__status[data-estado-original*="Pausada"] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.25);
}

.kanban-card__status[data-estado-original="En Revisión"],
.kanban-card__status[data-estado-original*="Revisión"],
.kanban-card__status[data-estado-original*="Revision"] {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border-color: rgba(168, 85, 247, 0.25);
}

.kanban-card[data-estado="En Revisión"],
.kanban-card[data-estado*="Revisión"],
.kanban-card[data-estado*="Revision"] {
    border-left-color: #a855f7;
}

.kanban-card__status[data-estado-original="Terminada"],
.kanban-card__status[data-estado-original*="Terminada"],
.kanban-card__status[data-estado-original*="Completada"] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.25);
}

.kanban-card__status[data-estado-original="Cancelada"],
.kanban-card__status[data-estado-original*="Cancelada"] {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
    border-color: rgba(156, 163, 175, 0.25);
}

.kanban-card[data-estado="Cancelada"],
.kanban-card[data-estado*="Cancelada"] {
    border-left-color: #9ca3af;
}

.kanban-card__footer .btn {
    white-space: nowrap;
    min-width: 60px;
    padding: 0.4rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px;
    flex: 0 0 auto;
    transition: all 0.2s ease;
    overflow: visible;
    text-overflow: ellipsis;
}

.kanban-card__footer .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.kanban-card__footer .btn-sm {
    padding: 0.3rem 0.45rem;
    font-size: 0.6rem;
    min-width: 45px;
}

/* Contenedor de botones en el footer */
.kanban-card__footer > div:last-child {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
}

.kanban-empty {
    width: 100%;
    text-align: center;
    padding: 2rem;
    font-size: 1rem;
    color: var(--text-muted);
}

.kanban-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: rgba(33, 37, 41, 0.9);
    color: var(--white);
    padding: 0.85rem 1.25rem;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2000;
}

.kanban-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.kanban-toast--success {
    background: rgba(40, 167, 69, 0.95);
}

.kanban-toast--danger {
    background: rgba(220, 53, 69, 0.95);
}

.kanban-toast--info {
    background: rgba(0, 120, 212, 0.95);
}

.kanban-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.kanban-modal--open {
    display: flex;
}

.kanban-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
}

.kanban-modal__dialog {
    position: relative;
    width: min(960px, 95vw);
    height: min(90vh, 720px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}

.kanban-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    border: none;
    background: rgba(0,0,0,0.1);
    color: #111;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.kanban-modal__close:hover {
    background: rgba(0,0,0,0.2);
}

.kanban-modal__frame {
    border: none;
    flex: 1;
    width: 100%;
}

body.modal-open {
    overflow: hidden;
}

/* Estilos responsive para Kanban - Diseño compacto */
@media (max-width: 1600px) {
    .kanban-column {
        min-width: 180px;
        width: 180px;
        max-width: 180px;
        flex: 0 0 180px;
        padding: 0.65rem;
    }
    
    .kanban-column__header h3 {
        font-size: 0.75rem;
    }
    
    .kanban-card {
        padding: 0.55rem 0.65rem;
    }
    
    .kanban-card__title {
        font-size: 0.8rem;
    }
}

@media (max-width: 1280px) {
    .kanban-column {
        min-width: 170px;
        width: 170px;
        max-width: 170px;
        flex: 0 0 170px;
    }
    
    .kanban-board {
        gap: 0.6rem;
    }
    
    .kanban-column__header h3 {
        font-size: 0.7rem;
    }
    
    .kanban-card__title {
        font-size: 0.75rem;
    }
}

@media (max-width: 1024px) {
    .kanban-column {
        min-width: 160px;
        width: 160px;
        max-width: 160px;
        flex: 0 0 160px;
        padding: 0.6rem;
    }
    
    .kanban-column__header {
        margin-bottom: 0.6rem;
        padding-bottom: 0.5rem;
    }
    
    .kanban-column__header h3 {
        font-size: 0.7rem;
    }
    
    .kanban-card {
        padding: 0.5rem 0.6rem;
    }
    
    .kanban-card__title {
        font-size: 0.75rem;
    }
    
    .kanban-card__description {
        font-size: 0.7rem;
    }
    
    .kanban-card__footer .btn {
        min-width: 42px;
        padding: 0.3rem 0.45rem;
        font-size: 0.6rem;
    }
    
    .kanban-card__footer .btn-sm {
        min-width: 40px;
        padding: 0.25rem 0.4rem;
        font-size: 0.55rem;
    }
}

@media (max-width: 768px) {
    .kanban-column {
        min-width: 150px;
        width: 150px;
        max-width: 150px;
        flex: 0 0 150px;
        padding: 0.55rem;
    }
    
    .kanban-column__header h3 {
        font-size: 0.65rem;
    }
    
    .kanban-card__title {
        font-size: 0.7rem;
    }
    
    .kanban-card__footer .btn {
        min-width: 40px;
        padding: 0.3rem 0.4rem;
        font-size: 0.6rem;
    }
    
    .kanban-card__footer .btn-sm {
        min-width: 38px;
        padding: 0.25rem 0.35rem;
        font-size: 0.55rem;
    }
    
    .kanban-card__status {
        font-size: 0.55rem;
        padding: 0.15rem 0.35rem;
    }
}

.calendar-wrapper {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    min-height: 650px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

/* Login */
.login-body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 1rem;
}

.login-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 400px;
}

.login-card h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-color);
}

/* Alertas */
.alert {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.alert-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.alert-stack .alert {
    margin-bottom: 0;
}

.text-muted {
    color: #6b7280;
    font-size: 0.9rem;
}

.report-panel {
    align-items: flex-end;
}

.alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* File Upload */
input[type="file"] {
    padding: 0.5rem;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: #f8f9fa;
    cursor: pointer;
}

input[type="file"]:hover {
    border-color: var(--primary-color);
    background: #e9ecef;
}

/* Botón hamburguesa para móviles */
.mobile-menu-toggle {
    display: none !important;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    cursor: pointer;
    padding: 10px 8px;
    z-index: 1001;
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.mobile-menu-toggle:active {
    transform: scale(0.98);
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #ffffff !important;
    border-radius: 3px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    display: block !important;
    margin: 3px 0;
    min-height: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.mobile-menu-toggle.active {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(9px, 9px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

/* Responsive - Aumentar breakpoint para incluir más dispositivos móviles */
@media (max-width: 1024px) {
    /* Ocultar menú normal en tablets y móviles, pero mantener estructura */
    .top-nav .nav-links {
        display: none;
    }
    
    /* Mostrar botón hamburguesa en tablets también */
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 768px) {
    .content {
        padding: 1rem;
    }
    
    .top-nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        position: relative;
    }
    
    /* Mostrar botón hamburguesa en móviles */
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ocultar menú por defecto en móviles */
    .top-nav .nav-links {
        display: block !important;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        flex-direction: column;
        gap: 0;
        padding: 1rem 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        z-index: 999;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 100%;
        margin: 0;
        visibility: hidden;
    }
    
    .top-nav.menu-open .nav-links {
        visibility: visible;
    }
    
    /* Mostrar menú cuando está activo */
    .top-nav.menu-open .nav-links {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        padding: 1rem 0;
    }
    
    .top-nav .nav-links > li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .top-nav .nav-links > li:last-child {
        border-bottom: none;
    }
    
    .nav-link,
    .drop-toggle {
        width: 100%;
        padding: 1rem 1.5rem;
        justify-content: flex-start;
        border-radius: 0;
    }
    
    .nav-link:hover,
    .drop-toggle:hover {
        background: rgba(255, 255, 255, 0.15);
    }
    

    .dropdown-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.2);
        display: none;
        flex-direction: column;
        padding: 0;
        margin: 0;
        border-radius: 0;
    }
    
    .dropdown.open .dropdown-menu {
        display: flex;
    }
    
    .dropdown-menu li {
        width: 100%;
    }
    
    .dropdown-link {
        padding: 0.75rem 1.5rem 0.75rem 2.5rem;
        width: 100%;
        justify-content: flex-start;
    }
    
    /* Separadores y títulos de sección en móviles */
    .dropdown-menu .menu-separator {
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        margin: 0.5rem 1.5rem;
    }
    
    .dropdown-menu .menu-section-title {
        padding: 0.75rem 1.5rem 0.5rem 1.5rem;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.7rem;
    }
    
    /* Submenús en móviles */
    .submenu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        min-width: auto !important;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .submenu li {
        width: 100%;
    }
    
    .submenu .dropdown-link {
        padding-left: 3.5rem;
    }
    
    .submenu-arrow {
        margin-left: auto;
    }
    
    .dropdown-submenu.open .submenu-arrow {
        transform: rotate(90deg);
    }
    
    /* Ajustar brand link en móviles */
    .top-nav .brand-link {
        flex: 1;
        margin-left: 1rem;
        order: 2;
    }
    
    .top-nav .brand-text {
        font-size: 1rem;
    }
    
    .mobile-menu-toggle {
        order: 1;
        margin-right: 0.5rem;
    }
    
    /* Asegurar que el menú esté por encima del contenido */
    .top-nav.menu-open {
        z-index: 1001;
    }
    
    .top-nav.menu-open .nav-links {
        z-index: 1000;
    }
    
    /* Forzar visibilidad del botón en móviles */
    .top-nav .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .dash-grid {
        grid-template-columns: 1fr;
    }
    
    .card, section {
        padding: 1.5rem;
    }
    
    .grid {
        font-size: 0.9rem;
    }
    
    .grid th, .grid td {
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 1.5rem;
    }
    
    .top-nav .brand {
        font-size: 1.2rem;
    }
    
    .top-nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Utilidades */
.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: 1rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
}

.badge-success {
    background: #d4edda;
    color: #155724;
}

.badge-info {
    background: #d1ecf1;
    color: #0c5460;
}

.badge-warning {
    background: #fff3cd;
    color: #856404;
}

.badge-danger {
    background: #f8d7da;
    color: #721c24;
}

/* Footer */
.app-footer {
    background: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #666;
    flex-shrink: 0;
    min-height: 50px;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 1.5rem;
    position: relative;
}

.footer-controls {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.footer-brand {
    position: absolute;
    right: 2rem;
    display: flex;
    align-items: center;
}

.footer-brand-link {
    color: #666;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.footer-brand-link:hover {
    color: var(--primary-color);
}

.footer-powered-by {
    font-weight: 400;
    font-size: 0.75rem;
    opacity: 0.7;
    font-style: italic;
}

.footer-control-wrapper {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.4rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.footer-control-wrapper:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 120, 212, 0.2);
}

.footer-control-icon {
    width: 12px;
    height: 12px;
    color: #6b7280;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.footer-control-wrapper:hover .footer-control-icon {
    color: var(--primary-color);
}

.footer-control-select {
    background: transparent;
    border: none;
    color: #4b5563;
    padding: 0.1rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: auto;
    min-width: 60px;
    max-width: 85px;
    height: 18px;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='5' viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4.5 4L8 1' stroke='%236b7280' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.2rem center;
    padding-right: 1rem;
}

.footer-control-wrapper:hover .footer-control-select {
    color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='5' viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4.5 4L8 1' stroke='%230078d4' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.footer-control-select:focus {
    outline: none;
    color: var(--primary-color);
}

.footer-control-select option {
    background: #ffffff;
    color: #1a1a1a;
    padding: 0.5rem;
}

/* ============================================
   MEJORAS DE DISEÑO - MENÚ Y BARRAS
   ============================================ */

/* Separadores visuales elegantes entre elementos del menú */
.top-nav .nav-links > .nav-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 20%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0.2) 80%, 
        transparent 100%);
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.top-nav .nav-links > .nav-item:hover::after {
    opacity: 0.6;
}

/* Indicador de página activa en el menú */
.nav-link.active,
.drop-toggle.active {
    background: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.15), 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 2px rgba(255, 255, 255, 0.2);
    position: relative;
}

.nav-link.active::before,
.drop-toggle.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.8) 50%, 
        transparent 100%);
    border-radius: 2px 2px 0 0;
    animation: pulse-active 2s ease-in-out infinite;
}

@keyframes pulse-active {
    0%, 100% {
        opacity: 0.8;
        transform: translateX(-50%) scaleX(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1.1);
    }
}

/* Mejoras en la barra de acceso rápido - Agrupación visual */
.quick-access-group {
    position: relative;
}

/* Separador sutil entre grupos de botones en la barra de acceso rápido */
.quick-access-btn:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -0.15rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 50%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.08) 50%, 
        transparent 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.quick-access-group:hover .quick-access-btn::before {
    opacity: 1;
}

/* Mejora en el efecto hover de los botones de acceso rápido */
.quick-access-btn {
    position: relative;
    overflow: hidden;
}

.quick-access-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.quick-access-btn:hover::after {
    width: 200%;
    height: 200%;
    max-width: 300px; /* Limitar tamaño máximo para prevenir overflow */
    max-height: 300px;
}

/* Efecto de brillo sutil en el menú principal */
/* NOTA: overflow: hidden removido para permitir que los dropdowns se vean */

.top-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
    animation: shine-menu 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    overflow: hidden; /* Solo el pseudo-elemento tiene overflow hidden */
}

@keyframes shine-menu {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

/* Mejora en el glassmorphism del menú */
.top-nav {
    background: linear-gradient(135deg, 
        rgba(0, 120, 212, 0.95) 0%, 
        rgba(0, 180, 216, 0.95) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 4px 24px rgba(0, 120, 212, 0.25), 
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    overflow: visible !important; /* Permitir que los dropdowns se vean */
}

/* Mejora en el glassmorphism de la barra de acceso rápido */
.quick-access-bar {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(248, 250, 252, 0.98) 100%);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.04), 
        0 1px 2px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Efecto de elevación al hacer scroll en el menú */
.top-nav-container.scrolled {
    box-shadow: 
        0 8px 32px rgba(0, 120, 212, 0.3), 
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Mejora en los dropdowns - sombra más pronunciada */
.dropdown-menu {
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Animación de entrada mejorada para dropdowns */
.dropdown-menu {
    animation: dropdown-fade-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdown-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mejora en el hover de los elementos del dropdown */
.dropdown-link {
    position: relative;
    overflow: hidden;
}

.dropdown-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, 
        var(--primary-color, #0078d4) 0%, 
        var(--secondary-color, #00b4d8) 100%);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.2s ease;
}

.dropdown-link:hover::before {
    transform: scaleY(1);
}

/* Mejora en la barra superior de organización - efecto de profundidad */
.org-name-bar {
    position: relative;
}

.org-name-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.08) 20%, 
        rgba(0, 0, 0, 0.12) 50%, 
        rgba(0, 0, 0, 0.08) 80%, 
        transparent 100%);
}

/* Mejora en el buscador integrado */
.quick-access-search-inline {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-access-search-inline::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    padding: 1px;
    background: linear-gradient(135deg, 
        var(--primary-color, #0078d4) 0%, 
        var(--secondary-color, #00b4d8) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* CRÍTICO: Permitir que el input sea clickeable */
    z-index: 0; /* Detrás del input */
}

.quick-access-search-inline:focus-within::before {
    opacity: 1;
}

/* Mejora en los iconos del menú - efecto de rotación sutil */
.nav-link:hover .nav-icon,
.drop-toggle:hover .nav-icon {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3));
}

/* Mejora en el botón principal de acceso rápido */
.quick-access-btn-primary {
    position: relative;
    overflow: visible;
}

.quick-access-btn-primary::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.3;
    filter: blur(8px);
    z-index: -1;
    transition: opacity 0.3s ease;
}

.quick-access-btn-primary:hover::before {
    opacity: 0.5;
}

/* Mejora en la transición de estados */
.nav-link,
.drop-toggle,
.quick-access-btn {
    will-change: transform, background-color;
}

/* Mejora en tema oscuro - ajustes adicionales */
body.theme-dark .top-nav {
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.98) 0%, 
        rgba(30, 41, 59, 0.95) 100%);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4), 
        0 2px 8px rgba(0, 0, 0, 0.3), 
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.theme-dark .quick-access-bar {
    background: linear-gradient(135deg, 
        rgba(30, 30, 30, 0.98) 0%, 
        rgba(20, 20, 20, 0.98) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.2), 
        0 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.theme-dark .quick-access-btn:not(:first-child)::before {
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.08) 50%, 
        transparent 100%);
}

/* Responsive - ajustes para móviles */
@media (max-width: 768px) {
    .top-nav .nav-links > .nav-item:not(:last-child)::after {
        display: none;
    }
    
    .quick-access-btn:not(:first-child)::before {
        display: none;
    }
    
    .top-nav::before {
        animation: none;
    }
}

/* Prevenir overflow horizontal en todos los contenedores principales */
.layout {
    overflow-x: hidden;
    overflow-y: visible !important; /* CRÍTICO: Sin scroll vertical interno - el scroll debe estar en body */
    width: 100%;
    max-width: 100%;
    height: auto !important; /* Altura automática, no fija */
    max-height: none !important; /* Sin límite de altura máxima */
    /* Ocultar scrollbar si aparece */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE y Edge */
}

/* Ocultar scrollbar en .layout para Chrome, Safari y Opera */
.layout::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.top-nav-container {
    overflow-x: hidden;
    overflow-y: visible; /* Permitir que los dropdowns se vean */
    width: 100%;
    max-width: 100%;
}

.quick-access-bar {
    overflow-x: auto; /* Permitir scroll solo en la barra si es necesario */
    overflow-y: visible;
}

/* Mejora en la accesibilidad - focus visible mejorado */
.nav-link:focus-visible,
.drop-toggle:focus-visible,
.quick-access-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
    border-radius: 8px;
}

body.theme-dark .nav-link:focus-visible,
body.theme-dark .drop-toggle:focus-visible,
body.theme-dark .quick-access-btn:focus-visible {
    outline-color: rgba(99, 102, 241, 0.8);
}

/* ============================================
   SOLUCIÓN PARA SCROLL INTERNO
   Asegurar que los contenedores principales no tengan scroll interno
   El scroll debe estar solo en body/html
   ============================================ */
form,
body > form,
body > form > div.layout,
div.layout,
.layout,
body > form > div.layout > main.content,
main.content,
.content {
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    /* Ocultar scrollbar si aparece - hacerlo invisible */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE y Edge */
}

/* Ocultar scrollbar en todos los contenedores principales para Chrome, Safari y Opera */
form::-webkit-scrollbar,
body > form::-webkit-scrollbar,
div.layout::-webkit-scrollbar,
.layout::-webkit-scrollbar,
main.content::-webkit-scrollbar,
.content::-webkit-scrollbar,
body > form > div.layout::-webkit-scrollbar,
body > form > div.layout > main.content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}