/*
 * Identidad visual GestorPro — "panel de control".
 * Antes: violeta genérico (#6e48c1) + Outfit, el combo reconocible de
 * cualquier plantilla de dashboard gratuita. Ahora: superficies grises-acero
 * frías + un acento cobre/óxido cálido (como el indicador de un instrumento
 * sobre metal), con Archivo para títulos, IBM Plex Sans para el resto de la
 * interfaz e IBM Plex Mono para cifras y datos (igual que el cronómetro de
 * tiempo, que ya usaba monospace).
 */
:root {
            --sidebar-bg: #ffffff;
            --sidebar-active: #1f6f78;
            --sidebar-active-bright: #38a6ae;
            --sidebar-text: #55565c;
            --main-bg: #eef0f2;
            --card-bg: #ffffff;
            --text-main: #1a1d22;
            --text-muted: #6b7280;
            --border-color: #e2e5e9;
            --kanban-col-bg: #ffffff;
            --primary-accent: #1f6f78;
            --green-badge: #dcece0;
            --green-text: #2f6b46;
            --red-badge: #f4dedb;
            --red-text: #a8402f;
            --font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
            --font-heading: 'Archivo', 'Segoe UI', sans-serif;
            --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
            --shadow-sm: 0 4px 15px rgba(26, 29, 34, 0.04);
            --shadow-md: 0 8px 30px rgba(31, 111, 120, 0.10);
            --border-radius: 16px;
        }

        body[data-theme="dark"] {
            --sidebar-bg: #1a1c22;
            --sidebar-active: #1f7d87;
            --sidebar-active-bright: #4cbac2;
            --sidebar-text: #a3a8b2;
            --main-bg: #14161b;
            --card-bg: #1e2128;
            --text-main: #edeef0;
            --text-muted: #9aa1ac;
            --border-color: #2e333b;
            --kanban-col-bg: #1a1c22;
            --green-badge: #1e3327;
            --green-text: #7bc79a;
            --red-badge: #3a201d;
            --red-text: #e4897b;
            --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
        }

        @keyframes fadeInSlide {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-view { animation: fadeInSlide 0.4s ease forwards; }
        
        .toast-container-custom { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
        .toast-custom { background: var(--card-bg); border-left: 4px solid #3f7d58; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 12px 20px; border-radius: 8px; color: var(--text-main); font-size: 0.9rem; font-weight: 500; display: flex; align-items: center; gap: 10px; animation: fadeInSlide 0.3s ease; }
        .toast-custom.hide-toast { opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: var(--font-family); background-color: var(--main-bg); color: var(--text-main); height: 100vh; overflow: hidden; display: flex; transition: background-color 0.3s, color 0.3s; }

        /* Jerarquía tipográfica: Archivo para títulos, IBM Plex Sans para el
           resto, IBM Plex Mono (con cifras tabulares) donde el número es el
           protagonista — como en el instrumento de un panel de control. */
        h1, h2, h3, h4, h5, h6,
        .sidebar-brand, .auth-card h1,
        .chart-header h3, .metric-body h4,
        .task-title, .note-folder-card-title {
            font-family: var(--font-heading);
        }
        .metric-body h2, #global-timer-display, #productivity-val,
        .pipeline-value, .task-count, #pie-center-val {
            font-family: var(--font-mono);
            font-variant-numeric: tabular-nums;
        }
        .task-count {
            background: var(--main-bg); color: var(--text-muted);
            font-size: 0.72rem; font-weight: 600;
            border-radius: 999px; padding: 2px 9px;
        }
        .kanban-header-todo .task-count { color: var(--sidebar-active); }
        .pipeline-card { cursor: grab; }
        .pipeline-value {
            font-size: 0.78rem; font-weight: 600; color: var(--sidebar-active);
        }
        
        .app-container { display: flex; width: 100%; height: 100%; position: relative; }

        /* DIS-07: estado de carga mientras llega /api/state, en vez de una
           pantalla en blanco o a medio pintar durante la carga inicial. */
        .app-loading-overlay {
            position: absolute; inset: 0; z-index: 2000;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
            background: var(--main-bg); color: var(--text-muted); font-size: 0.9rem;
            transition: opacity 0.25s ease;
        }
        .app-loading-overlay[hidden] { display: none; }
        .app-loading-spinner {
            width: 34px; height: 34px; border-radius: 50%;
            border: 3px solid var(--border-color); border-top-color: var(--sidebar-active);
            animation: app-loading-spin 0.8s linear infinite;
        }
        @keyframes app-loading-spin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) {
            .app-loading-spinner { animation: none; }
        }

        /* Sidebar */
        .sidebar { width: 250px; background-color: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; padding: 1.5rem 1rem; flex-shrink: 0; transition: all 0.3s; border-top-right-radius: 20px; border-bottom-right-radius: 20px; z-index: 10; box-shadow: var(--shadow-sm); }
        .sidebar-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.25rem; color: var(--text-main); text-decoration: none; padding: 0.5rem; }
        .sidebar-brand .logo-icon { background-color: var(--sidebar-bg); color: var(--primary-accent); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
        .nav-section-title { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); letter-spacing: 1px; margin: 1rem 0 0.5rem 1rem; text-transform: uppercase; }
        .nav-menu { list-style: none; padding: 0; margin: 0; flex-grow: 1; overflow-y: auto; }
        .nav-item { margin-bottom: 0.3rem; }
        .nav-link { display: flex; align-items: center; gap: 12px; color: var(--sidebar-text); padding: 0.75rem 1rem; border-radius: 12px; text-decoration: none; transition: background-color 0.2s, color 0.2s; font-size: 0.95rem; font-weight: 500; }
        .nav-link:hover { background-color: var(--main-bg); color: var(--text-main); }
        .nav-link.active { color: white; background-color: var(--sidebar-active); box-shadow: 0 4px 10px rgba(31, 111, 120, 0.2); }

        /* Main Content */
        .main-wrapper { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; background-color: var(--main-bg); }
        .top-header { display: flex; justify-content: space-between; align-items: center; padding: 2rem 2.5rem 1rem; }
        .header-left h1 { font-size: 1.8rem; font-weight: 700; margin: 0; color: var(--text-main); }
        .header-left p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
        .header-actions { display: flex; align-items: center; gap: 1rem; }
        .mobile-menu-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--card-bg);
            box-shadow: var(--shadow-sm);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 0;
            cursor: pointer;
            flex-shrink: 0;
        }
        .mobile-menu-toggle span {
            display: block;
            width: 18px;
            height: 2px;
            border-radius: 999px;
            background: var(--text-main);
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
        /* Botón de cerrar sesión: ahora vive en el sidebar (bajo Datos),
           no en el header — se ve y se comporta como el resto del menú,
           pero en un tono de "acción sensible" para diferenciarlo. */
        .sidebar-logout-btn {
            display: flex; align-items: center; gap: 12px; width: 100%;
            border: none; background: transparent; text-align: left;
            color: var(--red-text); padding: 0.75rem 1rem; border-radius: 12px;
            font-size: 0.95rem; font-weight: 500; font-family: inherit;
            cursor: pointer; transition: background-color 0.2s ease;
        }
        .sidebar-logout-btn:hover { background-color: var(--red-badge); }
        .icon-btn { background: white; border: none; color: var(--text-main); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); position: relative; }
        body[data-theme="dark"] .icon-btn { background: var(--card-bg); }
        .icon-btn .badge { position: absolute; top: 0; right: 0; width: 8px; height: 8px; background-color: #b4453d; border-radius: 50%; padding: 0; }
        .user-profile {
            display: flex; align-items: center; gap: 10px; cursor: pointer;
            border: none; background: transparent; padding: 4px; border-radius: 999px;
            font-family: inherit; text-align: left; transition: background-color 0.15s ease;
        }
        .user-profile:hover { background-color: var(--card-bg); box-shadow: var(--shadow-sm); }
        .avatar {
            width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
            background: var(--sidebar-active); color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem;
        }
        .avatar.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }

        /* Modal de Perfil */
        .profile-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 1.3rem; }
        .profile-modal-email { font-weight: 700; font-size: 1.05rem; word-break: break-all; }
        .profile-modal-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
        .profile-modal-rows { display: flex; flex-direction: column; }
        .profile-modal-row {
            display: flex; align-items: center; justify-content: space-between; gap: 1rem;
            padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); font-size: 0.9rem;
        }
        .profile-modal-row:last-child { border-bottom: none; }
        .profile-modal-row > span:first-child { color: var(--text-muted); }
        .theme-switch { display: flex; background: var(--main-bg); border-radius: 999px; padding: 3px; gap: 2px; }
        .theme-switch-btn {
            border: none; background: transparent; color: var(--text-muted);
            font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: 999px;
            cursor: pointer; font-family: inherit; transition: background-color 0.15s ease, color 0.15s ease;
        }
        .theme-switch-btn.active { background: var(--card-bg); color: var(--text-main); box-shadow: var(--shadow-sm); }

.sidebar-backdrop {
    display: none;
}

body[data-auth="locked"] {
    overflow: hidden;
}

.auth-screen {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    background: linear-gradient(160deg, #0b0c17 0%, #121328 55%, #0f1a22 100%);
    z-index: 4000;
}

.auth-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    pointer-events: none;
    animation: authOrbFloat 14s ease-in-out infinite;
}

.auth-orb-1 {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, rgba(56, 166, 174, 0.55), transparent 70%);
}

.auth-orb-2 {
    width: 420px;
    height: 420px;
    bottom: -150px;
    right: -120px;
    background: radial-gradient(circle, rgba(88, 79, 214, 0.5), transparent 70%);
    animation-delay: -7s;
}

@keyframes authOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -24px) scale(1.08); }
}

/* Escenas decorativas: una tarjeta de proyecto y una mini gráfica de
   progreso, muy desenfocadas y casi transparentes a los lados del
   formulario -- dan pistas visuales de "gestor de proyectos" sin
   competir con el login. Se ocultan en pantallas angostas porque no
   hay espacio para mostrarlas sin encimarse con la tarjeta central. */
.auth-scene {
    position: absolute;
    top: 50%;
    filter: blur(2px);
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
}

.auth-scene-left {
    left: 6%;
    transform: translateY(-56%) rotate(-6deg);
}

.auth-scene-right {
    right: 6%;
    transform: translateY(-44%) rotate(5deg);
}

.mock-card {
    width: 220px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.mock-card-tag {
    width: 56px;
    height: 16px;
    border-radius: 999px;
    background: #38a6ae;
    margin-bottom: 16px;
}

.mock-card-title {
    width: 70%;
    height: 12px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.55);
    margin-bottom: 12px;
}

.mock-card-line {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.22);
    margin-bottom: 8px;
}

.mock-card-line.short {
    width: 55%;
}

.mock-card-progress {
    margin-top: 16px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.mock-card-progress-fill {
    width: 68%;
    height: 100%;
    background: linear-gradient(90deg, #1f6f78, #38a6ae);
}

.mock-chart {
    width: 190px;
    height: 130px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.mock-bar {
    flex: 1;
    border-radius: 6px 6px 0 0;
    background: rgba(255, 255, 255, 0.3);
}

.mock-bar.accent {
    background: linear-gradient(180deg, #38a6ae, #1f6f78);
}

@media (max-width: 900px) {
    .auth-scene {
        display: none;
    }
}

.auth-card {
    position: relative;
    z-index: 1;
    width: min(92vw, 440px);
    padding: 36px 32px;
    border-radius: 24px;
    background: rgba(20, 22, 36, 0.66);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #fff;
    animation: authCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authCardIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.auth-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    margin-bottom: 18px;
    color: #fff;
    background: linear-gradient(135deg, #1f6f78, #38a6ae);
    box-shadow: 0 0 0 6px rgba(56, 166, 174, 0.12), 0 12px 28px rgba(31, 111, 120, 0.35);
}

.auth-kicker {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(31, 111, 120, 0.15);
    color: #bfe6e8;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.auth-card h1 {
    margin: 0 0 10px;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.auth-card p {
    margin: 0 0 26px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    font-size: 0.92rem;
}

.auth-form {
    display: grid;
    gap: 12px;
}

.auth-field {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-field-icon {
    position: absolute;
    left: 16px;
    color: rgba(255, 255, 255, 0.38);
    pointer-events: none;
    transition: color 0.15s ease;
}

.auth-field:focus-within .auth-field-icon {
    color: #4cbac2;
}

.auth-form input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
    color: #fff;
    border-radius: 14px;
    padding: 14px 16px 14px 46px;
    outline: none;
    font-size: 0.95rem;
    font-family: var(--font-family);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.auth-form input::placeholder {
    color: rgba(255, 255, 255, 0.32);
}

.auth-form input:focus {
    border-color: rgba(76, 186, 194, 0.75);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 4px rgba(56, 166, 174, 0.16);
}

.auth-form button,
.auth-link {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.auth-form button {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    background: linear-gradient(135deg, #1f6f78, #1f7d87);
    box-shadow: 0 10px 24px rgba(31, 111, 120, 0.35);
    cursor: pointer;
}

.auth-form button svg {
    transition: transform 0.2s ease;
}

.auth-form button:hover svg {
    transform: translateX(3px);
}

.auth-link {
    margin-top: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
}

.auth-form button:hover,
.auth-link:hover {
    transform: translateY(-1px);
}

.auth-form button:active,
.auth-link:active {
    transform: translateY(0);
}

.auth-message {
    min-height: 22px;
    margin-top: 14px;
    font-size: 0.88rem;
    color: #cbd5e1;
}

.auth-message[data-type="error"] {
    color: #fda4af;
}

.auth-message[data-type="success"] {
    color: #86efac;
}
        .user-info { display: flex; flex-direction: column; }
        .user-info span { font-weight: 600; font-size: 0.9rem; }
        .user-info small { font-size: 0.75rem; color: var(--text-muted); }

        .content-area { flex-grow: 1; padding: 1rem 2.5rem 2.5rem; overflow-y: auto; }

        /* Dash Grid */
        .dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
        .dash-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
        .dash-grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
        .dash-left-col { display: flex; flex-direction: column; gap: 1.5rem; }
        .dash-top-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
        
        .dash-card { background-color: var(--card-bg); border-radius: var(--border-radius); padding: 1.5rem; box-shadow: var(--shadow-sm); position: relative; }
        .dash-card.primary { background-color: var(--sidebar-active); color: white; box-shadow: 0 10px 20px rgba(31, 111, 120, 0.2); }
        
        .project-card { background-color: var(--card-bg); border-radius: var(--border-radius); padding: 1.5rem; box-shadow: var(--shadow-sm); cursor: pointer; transition: all 0.2s ease; border: 1px solid var(--border-color); display: flex; flex-direction: column; }
        .project-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--sidebar-active); }
        
        .filter-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); padding: 0.4rem 1.2rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
        .filter-btn:hover { border-color: var(--sidebar-active); color: var(--text-main); }
        .filter-btn.active { background: var(--text-main); color: var(--main-bg); border-color: var(--text-main); }
        
        .metric-card { display: flex; flex-direction: column; justify-content: space-between; height: 140px; }
        .metric-header { display: flex; justify-content: space-between; align-items: flex-start; }
        .metric-icon { width: 36px; height: 36px; background: rgba(0,0,0,0.05); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
        .primary .metric-icon { background: rgba(255,255,255,0.2); color: white; }
        .metric-badge { padding: 4px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
        .badge-green { background-color: var(--green-badge); color: var(--green-text); }
        .badge-red { background-color: var(--red-badge); color: var(--red-text); }
        
        .metric-body h4 { font-size: 0.85rem; font-weight: 500; margin-bottom: 0.2rem; color: var(--text-muted); }
        .primary .metric-body h4 { color: rgba(255,255,255,0.8); }
        .metric-body h2 { font-size: 2rem; font-weight: 700; margin: 0; }
        
        .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
        .chart-header h3 { font-size: 1.2rem; font-weight: 600; margin: 0; }
        .chart-header p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

        .custom-list { margin-top: 1.5rem; }
        .custom-list-item { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--border-color); }
        .custom-list-item:last-child { border-bottom: none; }
        .item-left { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 0.9rem; }
        .item-right { display: flex; align-items: center; gap: 10px; font-weight: 600; }

        /* Progreso por Proyecto (Dashboard) */
        .project-progress-row { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border-color); }
        .project-progress-row:last-child { border-bottom: none; padding-bottom: 0; }
        .project-progress-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
        .project-progress-info { flex: 1; min-width: 0; }
        .project-progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; }
        .project-progress-name { font-weight: 600; font-size: 0.92rem; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .project-progress-pct { font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; flex-shrink: 0; }
        .project-progress-track { width: 100%; background-color: var(--border-color); height: 8px; border-radius: 999px; overflow: hidden; }
        .project-progress-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
        .project-progress-count { display: block; margin-top: 0.4rem; font-size: 0.75rem; color: var(--text-muted); }

        /* Shared & Board */
        .sub-nav { display: flex; gap: 2rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1.5rem; padding-bottom: 0.5rem; }
        .sub-nav-link { text-decoration: none; color: var(--text-muted); font-weight: 500; position: relative; padding-bottom: 0.5rem; cursor: pointer; }
        .sub-nav-link.active { color: var(--sidebar-active); }
        .sub-nav-link.active::after { content: ''; position: absolute; bottom: -9px; left: 0; width: 100%; height: 2px; background-color: var(--sidebar-active); }

        .kanban-board { display: flex; gap: 1.5rem; height: 100%; align-items: flex-start; overflow-x: auto; padding-bottom: 1rem; }
        .kanban-column { background-color: var(--kanban-col-bg); border-radius: var(--border-radius); min-width: 300px; width: 300px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
        .kanban-header { padding: 1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); position: relative; }
        .kanban-header::before { content: ''; position: absolute; left: 1.2rem; top: 1rem; height: 20px; width: 4px; border-radius: 4px; }
        .kanban-header-todo::before { background-color: #3f8f86; }
        .kanban-header-inprogress::before { background-color: #5a8fb8; }
        .kanban-header-done::before { background-color: #3f7d58; }
        .kanban-header-paused::before { background-color: #b98a2e; }
        .kanban-header h4 { margin: 0; font-size: 0.95rem; font-weight: 500; padding-left: 12px; }
        .task-list { padding: 1rem; min-height: 200px; display: flex; flex-direction: column; gap: 1rem; }
        .task-card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.2rem; cursor: grab; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
        .task-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
        .task-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem; }
        .task-project-tag {
            display: inline-block; font-size: 0.7rem; font-weight: 600;
            color: var(--sidebar-active); background: var(--main-bg);
            border-radius: 999px; padding: 2px 8px; margin-bottom: 0.6rem;
        }
        .task-footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-muted); border-top: 1px dashed var(--border-color); padding-top: 0.8rem; margin-top: 0.5rem; }
        .priority-badge { padding: 4px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; }
        .priority-Alta { background-color: var(--red-badge); color: var(--red-text); }
        .priority-Media { background-color: #f1e6cf; color: #8a6a1f; }
        .priority-Baja { background-color: var(--green-badge); color: var(--green-text); }
        .btn-action-icon { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; transition: color 0.2s, background-color 0.2s; }
        .btn-action-icon:hover { background: var(--main-bg); }
        .btn-action-icon:hover { color: var(--text-main); }
        .btn-action-delete:hover { color: #b4453d; }
        .add-task-inline { background: none; border: none; color: var(--text-muted); font-size: 0.85rem; padding: 0.5rem 1rem; text-align: left; cursor: pointer; width: 100%; font-weight: 500;}
        .add-task-inline:hover { color: var(--sidebar-active); }
        .btn-floating-primary { position: fixed; bottom: 2.5rem; right: 2.5rem; background-color: var(--sidebar-active); color: white; border: none; border-radius: 25px; padding: 0.8rem 1.5rem; font-weight: 500; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(31, 111, 120, 0.4); z-index: 100; cursor: pointer; }
        .note-folder-tab {
            position: relative;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--folder-accent) 35%, var(--border-color) 65%);
            background: color-mix(in srgb, var(--folder-accent) 10%, var(--card-bg) 90%);
            color: var(--text-main);
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.48rem 0.95rem 0.48rem 0.8rem;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
        }
        .note-folder-tab::before {
            content: '';
            width: 0.55rem;
            height: 0.55rem;
            border-radius: 999px;
            background: var(--folder-accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--folder-accent) 12%, transparent);
            flex-shrink: 0;
        }
        .note-folder-tab:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0,0,0,0.08);
        }
        .note-folder-tab.active {
            background: var(--folder-accent);
            border-color: var(--folder-accent);
            color: #fff;
            box-shadow: 0 10px 20px color-mix(in srgb, var(--folder-accent) 35%, transparent);
        }
        .note-folder-tab.active::before {
            background: #fff;
            box-shadow: none;
        }
        body[data-theme="dark"] .note-folder-tab {
            background: color-mix(in srgb, var(--folder-accent) 16%, var(--card-bg) 84%);
            border-color: color-mix(in srgb, var(--folder-accent) 45%, var(--border-color) 55%);
        }
        /* Notas: antes cada tarjeta simulaba una carpeta de manila física
           (pestaña + cuerpo degradado de color). Ahora es una tarjeta plana,
           igual que el resto de la app (dash-card, project-card): superficie
           lisa + una franja de color a la izquierda que identifica la
           carpeta, en vez de un ilustración literal de carpeta. */
        .note-folder-card {
            position: relative;
            border-radius: var(--border-radius);
            padding: 1.1rem 1.1rem 1rem;
            --note-accent: #1f6f78;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-left: 3px solid var(--note-accent);
            box-shadow: var(--shadow-sm);
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            display: flex;
            flex-direction: column;
            min-height: 168px;
            min-width: 240px;
        }
        .note-folder-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }
        .note-folder-card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 0.9rem;
        }
        .note-folder-icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: color-mix(in srgb, var(--note-accent) 14%, transparent);
            color: var(--note-accent);
            flex-shrink: 0;
        }
        .note-folder-card-body {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            flex: 1;
        }
        .note-folder-card-title {
            color: var(--text-main);
            font-size: 1rem;
            line-height: 1.3;
            font-weight: 700;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .note-folder-card-folder {
            align-self: flex-start;
            color: var(--note-accent);
            background: color-mix(in srgb, var(--note-accent) 12%, transparent);
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            border-radius: 999px;
            padding: 2px 9px;
        }
        .note-folder-card-footer {
            margin-top: 1rem;
            font-size: 0.8rem;
            color: var(--text-muted);
            font-weight: 600;
            border-top: 1px solid var(--border-color);
            padding-top: 0.7rem;
            transition: color 0.2s ease;
        }
        .note-folder-card:hover .note-folder-card-footer {
            color: var(--note-accent);
        }
        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }
        .modal-content { background-color: var(--card-bg); color: var(--text-main); border-radius: 20px;}
        .form-control, .form-select { background-color: var(--main-bg); color: var(--text-main); border-color: var(--border-color); border-radius: 10px; padding: 0.6rem 1rem;}

        .notes-search-wrap { position: relative; max-width: 360px; }
        .notes-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
        .notes-search-input { padding-left: 40px; }
        .notes-search-input::-webkit-search-cancel-button { cursor: pointer; }
        body[data-theme="dark"] .btn-close { filter: invert(1); }

        /* Calendario: FullCalendar trae su propio look (enlaces azules
           subrayados, botones planos negros) que no pasaba por ninguna
           variable de la app. Este bloque lo pone en el mismo sistema que
           el resto — mismos tokens de color, misma tipografía, mismos
           bordes — en vez de convivir dos estilos visuales distintos. */
        #calendar-container {
            background-color: var(--card-bg); border-radius: var(--border-radius);
            padding: 1.5rem; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color);
            height: 70vh; font-family: var(--font-family);
        }
        .fc { --fc-border-color: var(--border-color); --fc-page-bg-color: transparent; --fc-neutral-bg-color: var(--main-bg); }
        .fc-theme-standard .fc-scrollgrid, .fc-theme-standard td, .fc-theme-standard th { border-color: var(--border-color); }

        /* Barra superior: título + navegación + selector de vista */
        .fc .fc-toolbar-title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--text-main); }
        .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem; }
        .fc .fc-button { font-family: var(--font-family); font-weight: 600; font-size: 0.85rem; box-shadow: none !important; }
        .fc .fc-button-primary {
            background-color: var(--card-bg); border-color: var(--border-color); color: var(--text-main);
            border-radius: 10px; padding: 0.4rem 0.9rem; transition: background-color 0.15s ease, color 0.15s ease;
        }
        .fc .fc-button-primary:hover { background-color: var(--main-bg); border-color: var(--border-color); color: var(--text-main); }
        .fc .fc-button-primary:not(:disabled).fc-button-active,
        .fc .fc-button-primary:not(:disabled):active {
            background-color: var(--sidebar-active); border-color: var(--sidebar-active); color: #fff;
        }
        .fc .fc-button-primary:focus, .fc .fc-button-primary:not(:disabled).fc-button-active:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sidebar-active) 25%, transparent) !important; }
        .fc .fc-icon { font-size: 1rem; }

        /* Encabezados de día (dom, lun, mar…) y números de fecha venían como
           <a> sin ningún reset: azules y subrayados por defecto. */
        .fc .fc-col-header-cell-cushion {
            color: var(--text-muted); text-decoration: none !important; font-weight: 600;
            font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.6rem 0;
        }
        .fc .fc-daygrid-day-number {
            color: var(--text-main); text-decoration: none !important; font-weight: 500;
            font-size: 0.85rem; padding: 0.4rem 0.6rem;
        }
        .fc .fc-daygrid-day-number:hover { color: var(--sidebar-active); }
        .fc .fc-day-other .fc-daygrid-day-number { color: var(--text-muted); opacity: 0.5; }
        .fc .fc-day-today { background-color: color-mix(in srgb, var(--sidebar-active) 8%, transparent) !important; }
        .fc .fc-day-today .fc-daygrid-day-number {
            background: var(--sidebar-active); color: #fff; border-radius: 999px;
            width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
            padding: 0; margin: 0.3rem 0.4rem 0 0;
        }

        /* Eventos (tareas) */
        .fc .fc-event { border: none; border-radius: 6px; padding: 1px 6px; font-size: 0.78rem; font-weight: 500; }
        .fc .fc-daygrid-event-dot { display: none; }
        .fc .fc-more-link { color: var(--sidebar-active); font-weight: 600; font-size: 0.75rem; }
        .fc .fc-popover { background: var(--card-bg); border-color: var(--border-color); box-shadow: var(--shadow-md); }
        .fc .fc-popover-header { background: var(--main-bg); color: var(--text-main); }
        .fc-theme-standard .fc-list-day-cushion { background: var(--main-bg); }
        .fc .fc-list-event:hover td { background: var(--main-bg); }
        .fc-timegrid-slot-label-cushion, .fc-timegrid-axis-cushion { color: var(--text-muted); font-size: 0.78rem; }

        @media (max-width: 992px) {
            body {
                overflow: hidden;
                height: 100vh;
                min-height: 100vh;
            }

            .app-container {
                flex-direction: column;
                height: 100vh;
                min-height: 100vh;
                position: relative;
            }

            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                bottom: 0;
                width: min(84vw, 300px);
                padding: 1rem 0.85rem;
                border-radius: 0 20px 20px 0;
                transform: translateX(-105%);
                transition: transform 0.25s ease;
                z-index: 2100;
                overflow-y: auto;
                box-shadow: 10px 0 30px rgba(0, 0, 0, 0.18);
            }

            .sidebar.is-open {
                transform: translateX(0);
            }

            .nav-menu {
                max-height: none;
            }

            .main-wrapper {
                min-height: 100vh;
                overflow: hidden;
            }

            .content-area {
                padding: 1rem;
                overflow-y: auto;
            }

            .top-header {
                padding: 1rem;
                flex-direction: column;
                align-items: flex-start;
                gap: 0.75rem;
            }

            .header-left {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 0.75rem;
                flex-wrap: wrap;
            }

            .mobile-menu-toggle {
                display: inline-flex;
            }

            .header-actions {
                width: 100%;
                justify-content: flex-end;
                flex-wrap: wrap;
            }

            .dash-grid,
            .dash-grid-2-1,
            .dash-grid-1-1,
            .dash-top-metrics {
                grid-template-columns: 1fr !important;
                display: grid !important;
            }

            .dash-left-col {
                display: flex !important;
                flex-direction: column !important;
            }

            .dash-grid,
            .dash-grid-2-1,
            .dash-grid-1-1,
            .dash-top-metrics {
                gap: 1rem;
            }

            .kanban-board {
                gap: 1rem;
            }

            .kanban-column {
                min-width: 260px;
                width: 260px;
            }

            .btn-floating-primary {
                bottom: 1rem;
                right: 1rem;
                padding: 0.7rem 1rem;
            }

            .sidebar-backdrop {
                display: block;
                position: fixed;
                inset: 0;
                background: rgba(8, 10, 22, 0.5);
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.25s ease;
                z-index: 2050;
            }

            .sidebar-backdrop.is-visible {
                opacity: 1;
                pointer-events: auto;
            }
        }

        @media (max-width: 640px) {
            .sidebar-brand {
                font-size: 1.05rem;
            }

            .nav-link {
                font-size: 0.9rem;
                padding: 0.7rem 0.85rem;
            }

            .header-left h1 {
                font-size: 1.45rem;
            }

            .user-profile {
                width: 100%;
                justify-content: flex-end;
            }

            .dash-card {
                padding: 1rem;
            }

            .metric-card {
                height: auto;
                min-height: 120px;
            }

            .metric-body h2 {
                font-size: 1.6rem;
            }

            .chart-header h3 {
                font-size: 1rem;
            }

            .sub-nav {
                gap: 1rem;
                overflow-x: auto;
                white-space: nowrap;
                padding-bottom: 0.75rem;
            }

            .d-flex.justify-content-between.align-items-center.mb-3 {
                flex-direction: column;
                align-items: stretch !important;
                gap: 0.75rem;
            }

            .d-flex.justify-content-between.align-items-center.mb-3 .btn,
            .d-flex.justify-content-between.align-items-center.mb-3 > div {
                width: 100%;
            }

            #notes-list {
                grid-template-columns: 1fr !important;
            }

            #calendar-container {
                height: 58vh;
                padding: 1rem;
            }

            .auth-card {
                width: min(94vw, 420px);
                padding: 24px;
                border-radius: 24px;
            }
        }