:root {
    --bg-gradient: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    --glass-bg: rgba(255,255,255,0.07);
    --glass-border: rgba(255,255,255,0.12);
    --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
    --glass-blur: blur(16px);
    --sidebar-bg: rgba(15,12,41,0.85);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent: #818cf8;
    --accent-hover: #6366f1;
    --danger: #f87171;
    --success: #34d399;
    --warning: #fbbf24;
    --sidebar-width: 250px;
    --detail-width: 420px;
    --header-h: 56px;
    --radius: 12px;
    --radius-sm: 8px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--bg-gradient);background-attachment:fixed;color:var(--text-primary);height:100vh;overflow:hidden}
a{color:var(--accent);text-decoration:none}
.hidden{display:none!important}
.w-100{width:100%}.text-center{text-align:center}.text-sm{font-size:.8rem}.mt-3{margin-top:1rem}.mb-2{margin-bottom:.5rem}
.text-accent{color:var(--accent)}.text-danger{color:var(--danger)}

/* Glass */
.glass-card{background:rgba(255,255,255,0.08);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--glass-shadow);padding:2rem}
.glass-inner{background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:1rem}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:5000}
.login-box{width:100%;max-width:400px}
.modal-sm{width:100%;max-width:440px}
.modal-lg{width:100%;max-width:700px;max-height:85vh;overflow-y:auto}
.modal-header-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.modal-header-bar h2{font-size:1.1rem;display:flex;align-items:center;gap:.5rem}
.modal-actions{margin-top:1.5rem}
.brand-logo{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:.5rem}
.brand-logo-img{width:64px;height:64px;object-fit:cover;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.brand-text{font-size:1.8rem;color:#fff;letter-spacing:-0.03em}
.brand-text b{color:var(--accent);font-weight:800}
.login-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:1.5rem;font-size:.85rem}
.error-msg{color:var(--danger);font-size:.8rem;margin-top:.5rem;min-height:1rem}

/* Forms */
.form-group{margin-bottom:1rem}
.form-group label{display:block;margin-bottom:.4rem;font-size:.8rem;font-weight:500;color:var(--text-secondary)}
input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="date"],select,textarea{width:100%;padding:.55rem .75rem;background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:.85rem;transition:border .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(129,140,248,0.15)}
select option{background:#1e1b4b;color:#fff}
.color-input{height:40px;padding:2px;cursor:pointer}
.hidden-select{position:absolute;opacity:0;pointer-events:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem 1.1rem;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;border:none;font-size:.8rem;transition:all .2s}
.btn-sm{padding:.4rem .8rem;font-size:.75rem}
.btn-primary{background:linear-gradient(135deg,var(--accent),#6366f1);color:#fff}
.btn-primary:hover{filter:brightness(1.15);transform:translateY(-1px)}
.btn-secondary{background:rgba(255,255,255,0.08);border:1px solid var(--glass-border);color:var(--text-primary)}
.btn-secondary:hover{background:rgba(255,255,255,0.14)}
.btn-danger{background:rgba(248,113,113,0.15);border:1px solid rgba(248,113,113,0.3);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-text{background:none;border:none;cursor:pointer;color:var(--text-secondary);font-size:.85rem;padding:.25rem}
.btn-text:hover{color:var(--accent)}
.icon-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.1rem;padding:.3rem;border-radius:50%;transition:.2s}
.icon-btn:hover{color:var(--text-primary);background:rgba(255,255,255,0.1)}

/* Layout */
#app-container{display:flex;height:100vh}

/* Sidebar */
.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);backdrop-filter:var(--glass-blur);border-right:1px solid var(--glass-border);display:flex;flex-direction:column;flex-shrink:0;z-index:100}
.sidebar-header{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 1.2rem;border-bottom:1px solid var(--glass-border)}
.sidebar-brand{display:flex;align-items:center;gap:.6rem}
.sidebar-logo{width:32px;height:32px;object-fit:cover;border-radius:6px}
.brand-text-sidebar{font-size:1.1rem;font-weight:400;color:#fff;letter-spacing:-0.02em}
.brand-text-sidebar b{color:var(--accent);font-weight:800}
.mobile-menu-close{display:none;background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer}
.sidebar-section{padding:1rem 1.2rem;flex:0 0 auto}
.sidebar-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.sidebar-section-header h3{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600}
.sidebar-add-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.7rem;padding:2px 4px;border-radius:4px;transition:.2s}
.sidebar-add-btn:hover{color:var(--accent);background:rgba(255,255,255,0.08)}
.nav-list{list-style:none;overflow-y:auto}
#area-list{max-height:45vh}
#project-sidebar-list{max-height:22vh}
.nav-item{padding:.45rem .7rem;margin-bottom:.15rem;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;gap:.6rem;font-size:.82rem;transition:.2s;color:var(--text-secondary)}
.nav-item:hover,.nav-item.active{background:rgba(255,255,255,0.08);color:#fff}
.area-color-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sidebar-footer{margin-top:auto;padding:1rem 1.2rem;border-top:1px solid var(--glass-border)}
.user-profile{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#a78bfa);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.75rem;flex-shrink:0}
.avatar-sm{width:22px;height:22px;font-size:.6rem}
.user-info{display:flex;flex-direction:column}
.user-info span{font-size:.8rem;font-weight:500}
.user-info .user-role{font-size:.65rem;color:var(--text-muted);text-transform:capitalize}
.sidebar-bottom-actions{display:flex;gap:.5rem}

/* Main */
.main-content{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* Topbar - z-index higher than kanban so notifications show on top */
.topbar{height:var(--header-h);background:rgba(255,255,255,0.04);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;gap:1rem;flex-shrink:0;position:relative;z-index:500}
.topbar-left{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.topbar-left h1{font-size:1.1rem;font-weight:600;white-space:nowrap}
.mobile-menu-btn{display:none;background:none;border:none;font-size:1.2rem;color:var(--text-primary);cursor:pointer}
.topbar-center{flex:1;max-width:420px;margin:0 auto}
.search-box{position:relative;display:flex;align-items:center}
.search-box i{position:absolute;left:.75rem;color:var(--text-muted);font-size:.8rem}
.search-box input{width:100%;padding:.45rem .75rem .45rem 2.2rem;background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);border-radius:20px;color:var(--text-primary);font-size:.8rem}
.search-box input:focus{border-color:var(--accent);background:rgba(255,255,255,0.1)}
.search-box input::placeholder{color:var(--text-muted)}
.topbar-right{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.btn-text-label{display:inline}

/* Notifications */
.notifications-wrapper{position:relative}
.badge{position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center}
.notifications-dropdown{position:absolute;top:calc(100% + .5rem);right:0;width:320px;background:rgba(30,27,75,0.98);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,0.5);z-index:600;max-height:380px;display:flex;flex-direction:column}
.notif-header{padding:.75rem 1rem;border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center}
.notif-header h3{font-size:.85rem}
.notif-list{overflow-y:auto;padding:.25rem 0}
.notif-item{padding:.6rem 1rem;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:.2s}
.notif-item:hover{background:rgba(255,255,255,0.06)}
.notif-item.unread{background:rgba(129,140,248,0.08)}
.notif-item p{font-size:.8rem;margin-bottom:.15rem}
.notif-item .time{font-size:.7rem;color:var(--text-muted)}

/* Kanban */
.kanban-board{flex:1;display:flex;padding:1.2rem;gap:1rem;overflow-x:auto;overflow-y:hidden}
.kanban-col{background:var(--glass-bg);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius);display:flex;flex-direction:column;min-height:0;flex:1 1 0;min-width:220px}
.kanban-col-header{padding:.75rem 1rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--glass-border);flex-shrink:0}
.kanban-col-header h3{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;flex:1}
.col-status-dot{width:8px;height:8px;border-radius:50%}
.kanban-col-header .col-delete{opacity:0;transition:.2s;font-size:.7rem}
.kanban-col-header:hover .col-delete,.kanban-col-header:hover .col-move{opacity:1}
.col-move{opacity:0;transition:.2s;font-size:.65rem;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px}
.col-move:hover{color:var(--accent)}
.kanban-col-header .count{background:rgba(255,255,255,0.1);padding:.1rem .45rem;border-radius:10px;font-size:.7rem;color:var(--text-secondary)}
.kanban-col-body{flex:1;padding:.75rem;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;min-height:60px}
.kanban-col-body.drag-over{background:rgba(129,140,248,0.08);border-radius:0 0 var(--radius) var(--radius)}

/* Task Card */
.task-card{background:rgba(255,255,255,0.06);backdrop-filter:blur(8px);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:.85rem;cursor:grab;position:relative;transition:transform .15s,box-shadow .15s,border-color .15s}
.task-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.25);border-color:rgba(129,140,248,0.3)}
.task-card:active{cursor:grabbing}
.task-card.touch-dragging{opacity:.6;transform:scale(.95);box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.touch-ghost{position:fixed;pointer-events:none;z-index:9000;opacity:.85;transform:rotate(2deg)}
.deadline-alarm{position:absolute;top:-4px;right:-4px;width:12px;height:12px;background:var(--danger);border-radius:50%;border:2px solid #24243e;box-shadow:0 0 8px rgba(248,113,113,0.6);z-index:2;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 4px rgba(248,113,113,0.4)}50%{box-shadow:0 0 12px rgba(248,113,113,0.8)}}
.task-project-name{font-size:.65rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem;opacity:.85}
.task-title{font-size:.9rem;font-weight:600;margin-bottom:.5rem;line-height:1.3}
.task-labels{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.4rem}
.task-label{font-size:.6rem;padding:.1rem .35rem;border-radius:4px;font-weight:500}
.task-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem}
.task-icons{display:flex;gap:.4rem;color:var(--text-muted);font-size:.7rem}
.task-icons span{display:flex;align-items:center;gap:.2rem}
.task-assignees{display:flex}
.task-assignees .avatar-sm{margin-left:-6px;border:2px solid rgba(36,36,62,0.8)}
.task-assignees .avatar-sm:first-child{margin-left:0}

/* Task Sidebar */
.task-detail-sidebar{width:var(--detail-width);background:rgba(15,12,41,0.92);backdrop-filter:var(--glass-blur);border-left:1px solid var(--glass-border);display:flex;flex-direction:column;flex-shrink:0;z-index:50}
.task-sidebar-header{height:var(--header-h);padding:0 1.2rem;border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center}
.sidebar-detail-title{font-size:.85rem;font-weight:600;color:var(--text-secondary)}
.task-sidebar-body{flex:1;overflow-y:auto;padding:1.2rem}
.title-input{font-size:1.3rem!important;font-weight:700!important;background:transparent!important;border:none!important;border-bottom:1px dashed transparent!important;padding:0!important;border-radius:0!important}
.title-input:focus{border-bottom-color:var(--glass-border)!important;box-shadow:none!important}
.task-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.2rem;background:rgba(255,255,255,0.04);padding:.85rem;border-radius:var(--radius-sm);border:1px solid var(--glass-border)}
.meta-item label{font-size:.7rem;color:var(--text-muted);margin-bottom:.2rem;display:block}
.meta-item select,.meta-item input{background:transparent;border:1px solid transparent;padding:.2rem .3rem;font-size:.8rem;width:100%;border-radius:4px;color:var(--text-primary)}
.meta-item select:hover,.meta-item input:hover{border-color:var(--glass-border);background:rgba(255,255,255,0.05)}
.assignees-select-container{position:relative;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.selected-assignees{display:flex;flex-wrap:wrap;gap:.2rem}
.assignee-chip{display:flex;align-items:center;gap:.2rem;background:rgba(255,255,255,0.1);border:1px solid var(--glass-border);padding:1px 6px;border-radius:10px;font-size:.7rem}
.assignee-chip button{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:.65rem}
.dropdown-menu{position:absolute;top:100%;left:0;background:rgba(30,27,75,0.98);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--radius-sm);z-index:3000;width:220px;max-height:200px;overflow-y:auto}
.dropdown-item{padding:.45rem .75rem;font-size:.8rem;cursor:pointer;transition:.15s}
.dropdown-item:hover{background:rgba(255,255,255,0.08)}
.input-group{display:flex;gap:.5rem}
.attachment-item{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,0.05);padding:.4rem .6rem;border-radius:var(--radius-sm);margin-bottom:.4rem;font-size:.8rem}
.sidebar-footer-actions{display:flex;justify-content:space-between;margin-top:1.5rem}
.divider{border:0;border-top:1px solid var(--glass-border);margin:1.5rem 0}

/* Comments */
.comments-section h3{font-size:.95rem;margin-bottom:.75rem}
.comments-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem;max-height:300px;overflow-y:auto}
.comment{display:flex;gap:.6rem}
.comment-content{background:rgba(255,255,255,0.05);padding:.6rem;border-radius:0 var(--radius-sm) var(--radius-sm) var(--radius-sm);flex:1;border:1px solid rgba(255,255,255,0.05)}
.comment-header{display:flex;justify-content:space-between;margin-bottom:.15rem}
.comment-author{font-weight:600;font-size:.8rem}
.comment-time{font-size:.65rem;color:var(--text-muted)}
.comment-text{font-size:.8rem;line-height:1.4;white-space:pre-wrap;color:var(--text-secondary)}
.mention{color:var(--accent);font-weight:600;background:rgba(129,140,248,0.15);padding:0 2px;border-radius:2px}
.comment-form{position:relative;display:flex;gap:.4rem;align-items:flex-end}
.comment-form textarea{resize:none;border-radius:var(--radius);padding-right:2.5rem}
.comment-form button{position:absolute;right:.5rem;bottom:.5rem}
.mention-autocomplete{position:absolute;bottom:100%;left:0;width:100%;background:rgba(30,27,75,0.95);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-sm);z-index:10;max-height:140px;overflow-y:auto;margin-bottom:.4rem}

/* Users Table */
.users-toolbar{margin-bottom:1rem}
.users-table-wrap{overflow-x:auto}
.users-table{width:100%;border-collapse:collapse;font-size:.8rem}
.users-table th{text-align:left;padding:.5rem .6rem;font-weight:600;font-size:.7rem;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--glass-border)}
.users-table td{padding:.5rem .6rem;border-bottom:1px solid rgba(255,255,255,0.04);vertical-align:middle}
.users-table tr:hover td{background:rgba(255,255,255,0.04)}
.inline-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.form-actions-inline{display:flex;gap:.5rem;align-items:flex-end;justify-content:flex-end}

/* Toast */
.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.4rem}
.toast{background:rgba(30,27,75,0.92);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-left:4px solid var(--accent);padding:.75rem 1rem;border-radius:var(--radius-sm);box-shadow:var(--glass-shadow);display:flex;align-items:center;gap:.6rem;min-width:240px;animation:slideIn .3s ease-out;font-size:.8rem}
.toast.success{border-left-color:var(--success)}.toast.error{border-left-color:var(--danger)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Responsive */
@media(max-width:1024px){
.task-detail-sidebar{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:420px;z-index:300}
}
@media(max-width:768px){
.sidebar{position:fixed;left:-100%;top:0;bottom:0;z-index:200;transition:left .3s;box-shadow:var(--glass-shadow)}
.sidebar.open{left:0}
.mobile-menu-btn,.mobile-menu-close{display:block}
.topbar{padding:0 .75rem}
.topbar-center{display:none}
.btn-text-label{display:none}
.kanban-board{flex-direction:column;padding:.75rem;overflow-y:auto;overflow-x:hidden}
.kanban-col{min-width:100%;flex:none}
.kanban-col-body{max-height:350px}
.task-detail-sidebar{max-width:100%}
}

/* Kanban Admin Bar */
.kanban-admin-bar{display:flex;align-items:center;gap:.5rem;padding:0 1.2rem .5rem;flex-shrink:0}
.kanban-admin-bar .btn{font-size:.7rem}

/* Area & Project admin buttons */
.area-arrows{display:flex;align-items:center;gap:2px;margin-left:auto;opacity:0;transition:opacity .2s}
.nav-item:hover .area-arrows{opacity:1}
.area-arrow-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.6rem;padding:3px 4px;border-radius:4px;transition:.15s;line-height:1;display:flex;align-items:center}
.area-arrow-btn:hover{color:var(--accent);background:rgba(129,140,248,0.15)}
.area-arrow-btn.text-danger:hover{color:var(--danger);background:rgba(248,113,113,0.15)}

/* Badge de aprobación de usuarios */
.badge{display:inline-block;padding:.15rem .45rem;border-radius:10px;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.bg-success{background:rgba(52,211,153,0.2);color:#34d399}
.bg-warning{background:rgba(251,191,36,0.2);color:#fbbf24}

/* Logo en sidebar y login sin texto original */
.sidebar-brand h2{display:none}
.sidebar-logo{width:32px;height:32px;object-fit:cover}
.brand-logo-img{width:80px;height:80px;object-fit:cover}

/* Deadline en tarjetas */
.deadline-display{display:flex;align-items:center;gap:4px;font-size:.7rem;margin-bottom:4px}

/* Avatar Gallery */
.avatar-gallery{display:flex;flex-wrap:wrap;gap:.6rem;padding:.75rem;margin-bottom:1rem;background:rgba(0,0,0,0.2);border-radius:12px;border:1px solid rgba(255,255,255,0.05);justify-content:center}
.avatar-opt{width:56px !important;height:56px !important;min-width:56px;border-radius:50% !important;cursor:pointer;border:3px solid transparent;transition:.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);background:rgba(255,255,255,0.05);object-fit:cover;padding:2px}
.avatar-opt:hover{transform:scale(1.15);border-color:rgba(129,140,248,0.6);background:rgba(129,140,248,0.1)}
.avatar-opt.selected{border-color:var(--accent);background:rgba(129,140,248,0.2);box-shadow:0 0 15px rgba(129,140,248,0.4)}

/* =========================================
   PRIORITY STYLES
========================================= */
.priority-Urgente {
    border: 2px solid rgba(239, 68, 68, 0.6) !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}
.priority-Alta {
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
}
.priority-Baja {
    opacity: 0.8;
}
.prio-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 5px;
}
.prio-badge.Urgente { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.prio-badge.Alta { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.prio-badge.Normal { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.prio-badge.Baja { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }

/* =========================================
   REPORTS DASHBOARD (Shark Summary)
========================================= */
.reports-card {
    padding: 30px;
    max-width: 800px;
}
.report-header {
    text-align: center;
    margin-bottom: 30px;
}
.report-header h3 {
    font-size: 1.5rem;
    color: var(--text-light);
}
.report-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
}
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}
.report-stat-box {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}
.report-stat-box .stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-light);
    margin-bottom: 5px;
}
.report-stat-box .stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.report-stat-box.success .stat-value { color: var(--accent-color); }
.report-stat-box.warning .stat-value { color: #ef4444; }

.report-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.report-section {
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 8px;
}
.report-section h4 {
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}
.report-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.report-list li {
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.report-list .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.text-success { color: var(--accent-color); }

@media print {
    body * {
        visibility: hidden;
    }
    #print-area, #print-area * {
        visibility: visible;
    }
    #print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: white !important;
        color: black !important;
    }
    .no-print {
        display: none !important;
    }
    .report-stat-box {
        border-color: #ccc;
    }
    .report-stat-box .stat-value { color: #000; }
    .report-section { background: none; }
    .report-section h4 { color: #000; border-color: #ccc; }
    .report-list { color: #333; }
    .modal-overlay { background: none; }
}

/* =========================================
   COMPANY CHIP (etiqueta de empresa en tarjetas)
========================================= */
.task-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}
.company-chip {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* =========================================
   BOTÓN "MIS TAREAS" EN SIDEBAR
========================================= */
.btn-my-tasks {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}
.btn-my-tasks:hover {
    background: rgba(129, 140, 248, 0.1);
    color: var(--text-light);
    border-color: rgba(129, 140, 248, 0.3);
}
.btn-my-tasks.active {
    background: rgba(129, 140, 248, 0.15);
    color: #818cf8;
    border-color: rgba(129, 140, 248, 0.5);
}