/* ======================================================================
   SHARED.CSS — SGC ChocoAlien Estudio
   Estilos comunes para talento, proyecto y otras páginas
   ====================================================================== */

/* ── RESET ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── BODY ── */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #1a1a1a;
    color: #e0e0e0;
    min-height: 100vh;
}

/* ── LOADING SCREEN ── */
.loading-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s;
}
.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}
.spinner {
    width: 50px; height: 50px;
    border: 5px solid #333;
    border-top-color: #4CAF50;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
    font-size: 1.2em;
    color: #4CAF50;
    margin-bottom: 8px;
    font-weight: bold;
}
.loading-description {
    color: #888;
    font-size: 0.9em;
    max-width: 600px;
    text-align: center;
    line-height: 1.6;
}

/* ── HEADER ── */
.header {
    background: #2a2a2a;
    padding: 16px 24px;
    border-bottom: 2px solid #444;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-left { display: flex; align-items: center; gap: 16px; }
.header-left h1 { font-size: 1.3em; color: #4CAF50; }
.back-btn {
    background: #444;
    border: none;
    color: #ccc;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    text-decoration: none;
}
.back-btn:hover { background: #555; }

.user-info-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85em;
    color: #aaa;
}
.user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid #4CAF50;
}
.logout-btn {
    background: #574240;
    border: none;
    color: #e0c0c0;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
}
.logout-btn:hover { background: #6a5040; }

/* ── TASK CARDS (usado por proyecto y potencialmente otras páginas) ── */
.task-card {
    background: #252525;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}
.task-card:hover { border-color: #4CAF50; }
.task-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.task-title { font-size: 1em; color: #e0e0e0; line-height: 1.4; }
.task-priority {
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: bold;
    white-space: nowrap;
    margin-left: 8px;
}
.priority-1 { background: #5c2020; color: #FF8A80; }
.priority-2 { background: #5c4a20; color: #FFD54F; }
.priority-3 { background: #2a3a20; color: #81C784; }
.priority-4 { background: #1a2a3a; color: #64B5F6; }

.task-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85em;
    color: #999;
    margin-bottom: 8px;
}
.task-meta span { display: flex; align-items: center; gap: 4px; }
.task-ddl {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.ddl-overdue { background: #5c2020; color: #FF8A80; }
.ddl-today { background: #5c4a20; color: #FFD54F; }
.ddl-future { background: #1a3a20; color: #81C784; }
.ddl-ok { color: #81C784; }

.task-observations {
    background: #1e1e1e;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    color: #aaa;
    margin-top: 8px;
    white-space: pre-wrap;
}

.task-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: 600;
}
.status-sin-comenzar { background: #333; color: #999; }
.status-en-progreso { background: #2a4a30; color: #81C784; }
.status-en-espera { background: #4a4020; color: #FFD54F; }
.status-finalizado { background: #1a3a20; color: #4CAF50; }
.status-cancelado { background: #3a2020; color: #FF8A80; }

.no-tasks {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}
.no-tasks h3 { color: #888; margin-bottom: 8px; }

/* ── ERROR CARD ── */
.error-card {
    text-align: center;
    padding: 60px 20px;
}
.error-card h2 { color: #F44336; margin-bottom: 12px; }
.error-card p { color: #888; margin-bottom: 8px; }
.retry-btn {
    margin-top: 20px;
    background: #4CAF50;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
}
.retry-btn:hover { background: #45a049; }

/* ── LOGIN PROMPT ── */
.login-prompt {
    text-align: center;
    padding: 80px 20px;
}
.login-prompt h2 { color: #e0e0e0; margin-bottom: 12px; }
.login-prompt p { color: #888; margin-bottom: 24px; }
.login-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background 0.2s;
}
.login-btn:hover { background: #45a049; }

/* ── ACCESS DENIED ── */
.access-denied {
    text-align: center;
    padding: 60px 20px;
}
.access-denied h2 { color: #F44336; margin-bottom: 12px; }
.access-denied p { color: #888; margin-bottom: 24px; }

/* ── PROJECT INFO ── */
.project-info {
    background: #222;
    padding: 16px 24px;
    border-bottom: 1px solid #333;
}
.project-info .team-summary {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 0.9em;
}
.project-info .stat {
    background: #2a2a2a;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #3a3a3a;
}
.project-info .stat-label { color: #888; font-size: 0.8em; }
.project-info .stat-value { color: #4CAF50; font-weight: bold; }
.mandos-section {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mandos-label { color: #FFB74D; font-size: 0.85em; font-weight: 600; }
.mando-chip {
    background: #3a3520;
    color: #FFD54F;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    border: 1px solid #5a5030;
}
.mando-chip.nahuel {
    background: #2a3a30;
    border-color: #4CAF50;
    color: #81C784;
}

/* ── TASKS HEADER ── */
.tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.tasks-header h2 { color: #e0e0e0; font-size: 1.1em; }
.tasks-count { color: #888; font-size: 0.9em; }

/* ── ACTION BAR ── */
.action-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: #1a1e30;
    border: 1px solid #2a3050;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    z-index: 90;
    flex-wrap: wrap;
    justify-content: center;
}
.action-bar button {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    color: #eff4f9;
    transition: all 0.2s;
    background: #2a3050;
}
.action-bar button:hover {
    background: #3a4060;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.action-bar button.primary {
    background: #49b07b;
}
.action-bar button.primary:hover {
    background: #75ce86;
}
.action-bar button.active {
    background: #49b07b;
    border: 1px solid #75ce86;
}
.action-bar button.active:hover {
    background: #75ce86;
}
.action-bar button.danger {
    background: #574240;
}
.action-bar button.danger:hover {
    background: #725349;
}

/* ── MODAL FRAMEWORK ── */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s;
}
.modal-overlay.show {
    display: flex;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-content {
    background: #2a2a2a;
    border: 2px solid #4CAF50;
    border-radius: 12px;
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s;
}
@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.modal-header {
    background: #333;
    padding: 20px;
    border-bottom: 2px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 {
    color: #4CAF50;
    margin: 0;
    font-size: 1.4em;
}
.modal-close {
    background: transparent;
    border: none;
    color: #888;
    font-size: 1.8em;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.modal-close:hover {
    color: #f44336;
    transform: scale(1.2);
}
.modal-body {
    padding: 25px;
}
.modal-footer {
    padding: 20px;
    border-top: 2px solid #444;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
.modal-button {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
}
.modal-button-cancel {
    background: #444;
    color: #e0e0e0;
}
.modal-button-cancel:hover {
    background: #555;
}
.modal-button-send {
    background: #4CAF50;
    color: white;
}
.modal-button-send:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}
.modal-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.modal-section {
    margin-bottom: 25px;
}
.modal-section:last-child {
    margin-bottom: 0;
}
.modal-section-title {
    color: #64B5F6;
    font-size: 1.1em;
    margin-bottom: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── HIDDEN UTILITY ── */
.hidden { display: none !important; }

/* ── SCROLLBAR HIDE ── */
.noscrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.noscrollbar::-webkit-scrollbar { display: none; }

/* ── SEARCH BAR ── */
.search-container {
    background: #2a2a2a;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #4CAF50;
    margin-bottom: 20px;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    position: sticky;
    top: 0;
    z-index: 100;
}
.search-container.collapsed {
    max-height: 60px !important;
    padding: 10px 20px;
}
.search-container.collapsed .search-content { display: none; }
.search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-bottom: 15px;
}
.search-container.collapsed .search-header { margin-bottom: 0; }
.search-header h3 {
    margin: 0;
    color: #4CAF50;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-toggle-btn {
    background: none; border: none; color: #4CAF50;
    font-size: 1.5em; cursor: pointer;
    transition: transform 0.3s ease; padding: 0; line-height: 1;
}
.search-toggle-btn.collapsed { transform: rotate(-90deg); }
.search-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.search-input-wrapper { flex: 1; min-width: 200px; position: relative; }
.search-input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    background: #333; border: 2px solid #444;
    border-radius: 8px; color: #e0e0e0;
    font-size: 0.95em; transition: all 0.3s;
}
.search-input:focus {
    outline: none; border-color: #4CAF50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}
.search-input::placeholder { color: #888; }
.search-icon {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%); color: #888; font-size: 1.2em;
}
.search-select {
    padding: 12px 15px; background: #333;
    border: 2px solid #444; border-radius: 8px;
    color: #e0e0e0; font-size: 0.95em;
    cursor: pointer; transition: all 0.3s; min-width: 150px;
}
.search-select:focus { outline: none; border-color: #4CAF50; }
.date-range-wrapper { display: flex; gap: 10px; align-items: center; }
.date-input {
    padding: 12px 15px; background: #333;
    border: 2px solid #444; border-radius: 8px;
    color: #e0e0e0; font-size: 0.95em; transition: all 0.3s;
}
.date-input:focus { outline: none; border-color: #4CAF50; }
.search-buttons { display: flex; gap: 10px; }
.search-btn {
    padding: 12px 20px; border: none;
    border-radius: 8px; font-size: 0.95em;
    font-weight: 600; cursor: pointer; transition: all 0.3s;
}
.search-btn-primary { background: #4CAF50; color: white; }
.search-btn-primary:hover { background: #45a049; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(76,175,80,0.4); }
.search-btn-secondary { background: #444; color: #e0e0e0; }
.search-btn-secondary:hover { background: #555; }
.search-results-info {
    margin-top: 15px; padding: 12px; background: #333;
    border-radius: 8px; color: #4CAF50;
    font-weight: 600; text-align: center; display: none;
}
.search-results-info.active { display: block; }
.estado-checkbox-group { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 5px; }
.estado-checkbox { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.estado-checkbox input[type="checkbox"] {
    width: 18px; height: 18px; cursor: pointer; accent-color: #4CAF50;
}
.estado-checkbox label { color: #e0e0e0; font-size: 0.9em; cursor: pointer; }

/* ── DEPARTMENT / PERSON / TABLE ── */
.department-group { margin-bottom: 40px; }
.department-header {
    background: #333; padding: 15px 20px; border-radius: 8px;
    margin-bottom: 15px; cursor: pointer; display: flex;
    justify-content: space-between; align-items: center;
    transition: all 0.3s; border-left: 5px solid #4CAF50;
}
.department-header:hover { background: #3a3a3a; }
.department-title { font-size: 1.3em; color: #75ce86; font-weight: bold; }
.department-number { color: #a196eb; font-weight: 600; }
.department-stats { font-size: 0.9em; color: #888; }
.department-content { margin-left: 20px; }
.department-content.collapsed { display: none; }
.person-section {
    background: #2a2a2a; border-radius: 8px; padding: 20px;
    margin-bottom: 25px; box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.person-section.empty { background: #1f1f1f; opacity: 0.6; border: 1px dashed #444; }
.person-section.empty .person-name { color: #666; }
.person-header {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 15px;
    padding-bottom: 10px; border-bottom: 2px solid #444;
}
.person-name { font-size: 1.5em; color: #64B5F6; font-weight: bold; }
.person-name .highlight-name { color: #FFD700; text-shadow: 0 0 10px rgba(255,215,0,0.3); }
.sheet-link {
    color: #81C784; text-decoration: none; font-size: 0.9em;
    padding: 5px 10px; border: 1px solid #81C784; border-radius: 4px;
    transition: all 0.3s; display: inline-block; margin-right: 10px;
}
.sheet-link:hover { background: #81C784; color: #1a1a1a; }
.reload-sheet-btn {
    color: #FFB74D; background: transparent; border: 1px solid #FFB74D;
    padding: 5px 12px; border-radius: 4px; cursor: pointer;
    font-size: 0.9em; transition: all 0.3s; text-decoration: none;
}
.reload-sheet-btn:hover { background: #FFB74D; color: #1a1a1a; }
.reload-sheet-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sheet-actions { display: flex; gap: 10px; align-items: center; }

/* ── TABLE ── */
table { width: 100%; border-collapse: collapse; margin-top: 10px; table-layout: fixed; }
th {
    background: #333; color: #fff; padding: 12px;
    text-align: left; font-weight: 600;
    border-bottom: 2px solid #555; user-select: none; transition: background 0.2s;
}
th[onclick] { cursor: pointer; }
th[onclick]:hover { background: #444; }
th .sort-indicator { margin-left: 4px; color: #4CAF50; font-size: 0.9em; }
td {
    padding: 10px 12px; border-bottom: 1px solid #3a3a3a;
    overflow: hidden; text-overflow: ellipsis; word-wrap: break-word;
}
tr:hover { background: #333; }
tr.task-completed {
    background-color: rgba(100,100,100,0.1) !important; opacity: 0.6;
}
tr.task-completed td { color: #888 !important; }
tr.task-completed .priority-badge-1,
tr.task-completed .priority-badge-2,
tr.task-completed .priority-badge-3 { color: #666 !important; }
tr.task-completed .ddl-overdue,
tr.task-completed .ddl-urgent,
tr.task-completed .ddl-soon,
tr.task-completed .ddl-ok { color: #666 !important; font-weight: normal !important; animation: none !important; }

/* ── DDL COLORS (gradient) ── */
.ddl-overdue { color: #F44336; font-weight: bold; animation: pulse-red 2s infinite; }
.ddl-urgent-0 { color: #FF1744; font-weight: bold; animation: pulse-red 1.5s infinite; }
.ddl-urgent-1 { color: #FF5252; font-weight: bold; }
.ddl-urgent-2 { color: #FF6E40; font-weight: bold; }
.ddl-urgent-3 { color: #FF9800; font-weight: bold; }
.ddl-warning { color: #FFC107; font-weight: 600; }
.ddl-soon { color: #FFE082; font-weight: 600; }
.ddl-ok { color: #4CAF50; font-weight: 500; }
.ddl-no-date { color: #666; font-style: italic; }
.ddl-urgent { color: #FF9800; font-weight: bold; }
@keyframes pulse-red { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ── PRIORITY BADGES ── */
.priority-badge-1 { color: #F44336; font-weight: bold; font-size: 1.3em; }
.priority-badge-2 { color: #FF9800; font-weight: bold; font-size: 1.3em; }
.priority-badge-3 { color: #4CAF50; font-weight: bold; font-size: 1.3em; }
.area-tag {
    padding: 4px 10px; background: #333; border-radius: 12px;
    font-size: 0.85em; cursor: pointer; transition: all 0.2s; display: inline-block;
}
.area-tag:hover { background: #4CAF50; }
.active-tag { background: #4CAF50 !important; box-shadow: 0 0 10px rgba(76,175,80,0.5); }
.active-priority { background: rgba(76,175,80,0.3) !important; box-shadow: 0 0 8px rgba(76,175,80,0.5); }
.active-status { transform: scale(1.05) !important; box-shadow: 0 0 10px rgba(76,175,80,0.5); }
.task-row { transition: all 0.2s; }
.task-row:hover { transform: translateX(5px); }
.priority-0 { border-left: 4px solid #666; }

/* ── STATUS BADGE ── */
.status-badge {
    padding: 4px 12px; border-radius: 12px; font-size: 0.85em;
    font-weight: 600; display: inline-block;
}
.status-sin-comenzar { background: #424242; color: #fff; }
.status-en-progreso { background: #2196F3; color: #fff; }
.status-en-espera { background: #FF9800; color: #fff; }
.status-finalizado { background: #4CAF50; color: #fff; }
.status-cancelado { background: #F44336; color: #fff; }

/* ── LEGEND ── */
.legend {
    display: flex; justify-content: center; gap: 20px;
    margin-bottom: 30px; flex-wrap: wrap;
}
.legend-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 15px; background: #2a2a2a; border-radius: 20px;
}
.legend-color { width: 20px; height: 20px; border-radius: 4px; }

/* ── ACTION BUTTON ── */
.action-btn {
    padding: 5px 12px; background: #2196F3;
    color: white; border: none; border-radius: 4px;
    cursor: pointer; font-size: 0.85em; transition: background 0.3s;
}
.action-btn:hover { background: #1976D2; }
.action-btn:disabled { background: #555; cursor: not-allowed; }

/* ── CONTEXT MENU ── */
.context-menu {
    position: fixed; background: #2a2a2a;
    border: 2px solid #4CAF50; border-radius: 6px;
    padding: 4px 0; z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    min-width: 160px; display: none;
}
.context-menu.show { display: block; }
.context-menu-item {
    padding: 10px 16px; cursor: pointer;
    color: #e0e0e0; transition: all 0.2s;
}
.context-menu-item:hover { background: #4CAF50; color: #1a1a1a; }
.context-menu-item.active { background: #3a3a3a; font-weight: bold; }
.context-menu-divider { height: 1px; background: #444; margin: 5px 0; }

/* ── EDITABLE FIELD ── */
.editable-field {
    cursor: text; border: 1px dashed transparent;
    padding: 4px; border-radius: 4px; transition: all 0.2s;
}
.editable-field:hover { border-color: #4CAF50; background: rgba(76,175,80,0.1); }
.editing { background: #333 !important; border: 1px solid #4CAF50 !important; outline: none; }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 40px; color: #888; font-size: 1.2em; }

/* ── KPI DASHBOARD ── */
.kpi-dashboard {
    background: #2a2a2a; border-radius: 12px;
    border: 2px solid #4CAF50; margin-bottom: 20px; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.kpi-dashboard.collapsed { max-height: 60px !important; padding: 0 !important; }
.kpi-dashboard.collapsed .kpi-content { display: none; }
.kpi-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; cursor: pointer; user-select: none;
    border-bottom: 2px solid #444;
}
.kpi-dashboard.collapsed .kpi-header { border-bottom: none; }
.kpi-header h3 { margin: 0; color: #75ce86; font-size: 1.1em; display: flex; align-items: center; gap: 8px; }
.kpi-toggle-btn {
    background: none; border: none; color: #4CAF50;
    font-size: 1.5em; cursor: pointer;
    transition: transform 0.3s ease; padding: 0; line-height: 1;
}
.kpi-toggle-btn.collapsed { transform: rotate(-90deg); }
.kpi-content {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px; padding: 20px;
}
.kpi-card {
    background: linear-gradient(135deg, #333 0%, #2a2a2a 100%);
    padding: 20px; border-radius: 10px;
    border-left: 4px solid #4CAF50; transition: all 0.3s;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(76,175,80,0.3); }
.kpi-card.warning { border-left-color: #FF9800; }
.kpi-card.danger { border-left-color: #f44336; cursor: pointer; transition: all 0.3s; }
.kpi-card.danger:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(244,67,54,0.4); }
.kpi-icon { font-size: 2em; margin-bottom: 10px; }
.kpi-value { font-size: 2.2em; font-weight: bold; color: #4CAF50; margin-bottom: 5px; }
.kpi-card.warning .kpi-value { color: #FF9800; }
.kpi-card.danger .kpi-value { color: #f44336; }
.kpi-label { font-size: 0.9em; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-subtitle { font-size: 0.85em; color: #aaa; margin-top: 8px; }
.kpi-list { margin-top: 10px; font-size: 0.85em; max-height: 120px; overflow-y: auto; }
.kpi-list-item {
    padding: 5px 0; border-bottom: 1px solid #333;
    display: flex; justify-content: space-between;
}
.kpi-list-item:last-child { border-bottom: none; }

/* ── CHARTS ── */
.charts-section {
    background: #2a2a2a; border-radius: 12px;
    border: 2px solid #4CAF50; margin-bottom: 20px; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.charts-section.collapsed { max-height: 60px !important; padding: 0 !important; }
.charts-section.collapsed .charts-content,
.charts-section.collapsed .export-buttons { display: none; }
.charts-header-wrapper {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; cursor: pointer; user-select: none;
    border-bottom: 2px solid #444;
}
.charts-section.collapsed .charts-header-wrapper { border-bottom: none; }
.charts-toggle-btn {
    background: none; border: none; color: #4CAF50;
    font-size: 1.5em; cursor: pointer;
    transition: transform 0.3s ease; padding: 0; line-height: 1;
    margin-left: 15px;
}
.charts-toggle-btn.collapsed { transform: rotate(-90deg); }
.charts-content { padding: 20px; }
.charts-header { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0; }
.charts-title { font-size: 1.1em; color: #75ce86; font-weight: bold; }
.export-buttons { display: flex; gap: 10px; }
.export-btn {
    padding: 12px 20px; border: none; border-radius: 8px;
    font-size: 0.9em; font-weight: 600; cursor: pointer;
    transition: all 0.2s; display: flex; align-items: center;
    gap: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.export-btn-pdf { background: #574240; color: #eff4f9; }
.export-btn-pdf:hover { background: #725349; }
.export-btn-excel { background: #49b07b; color: #eff4f9; }
.export-btn-excel:hover { background: #75ce86; }
.charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.charts-grid-row { display: contents; }
.chart-card { background: #333; padding: 20px; border-radius: 10px; border: 1px solid #444; }
.chart-card h3 { color: #4CAF50; margin-bottom: 15px; font-size: 1.1em; text-align: center; }
.chart-container { position: relative; height: 300px; }
.heatmap-container { grid-column: 1 / -1; }
.heatmap-grid { display: grid; grid-template-columns: 200px repeat(auto-fit, minmax(80px, 1fr)); gap: 2px; margin-top: 10px; }
.heatmap-cell { padding: 12px; text-align: center; border-radius: 4px; font-size: 0.85em; font-weight: 600; }
.heatmap-header { background: #444; color: #4CAF50; font-weight: bold; }
.heatmap-name { background: #444; color: #e0e0e0; text-align: left; padding-left: 15px; }
.heatmap-value { background: #2a2a2a; color: white; cursor: help; transition: all 0.3s; }
.heatmap-value:hover { transform: scale(1.1); z-index: 10; }
@media (max-width: 1200px) { .charts-grid { grid-template-columns: 1fr; } }

/* ── DISCORD EMBED PREVIEW ── */
.channel-selector {
    width: 100%; padding: 12px; background: #333;
    border: 2px solid #444; border-radius: 6px;
    color: #e0e0e0; font-size: 1em; cursor: pointer; transition: all 0.3s;
}
.channel-selector:hover { border-color: #4CAF50; background: #3a3a3a; }
.channel-selector:focus { outline: none; border-color: #4CAF50; box-shadow: 0 0 0 3px rgba(76,175,80,0.2); }
.embed-preview {
    background: #36393f; border-left: 4px solid #4CAF50;
    border-radius: 4px; padding: 16px; margin-top: 10px;
}
.embed-preview.urgent { border-left-color: #f44336; }
.embed-preview.warning { border-left-color: #FF9800; }
.embed-preview.ok { border-left-color: #FFC107; }
.embed-preview.good { border-left-color: #4CAF50; }
.embed-author { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.embed-author-icon { width: 24px; height: 24px; border-radius: 50%; }
.embed-author-name { color: #fff; font-weight: 600; font-size: 0.9em; }
.embed-title { color: #fff; font-weight: bold; font-size: 1.1em; margin-bottom: 8px; }
.embed-description { color: #dcddde; font-size: 0.95em; line-height: 1.4; margin-bottom: 12px; }
.embed-field { margin-bottom: 12px; }
.embed-field-name { color: #fff; font-weight: 600; font-size: 0.9em; margin-bottom: 4px; }
.embed-field-value { color: #dcddde; font-size: 0.9em; white-space: pre-line; }
.embed-footer { color: #72767d; font-size: 0.8em; margin-top: 10px; padding-top: 10px; border-top: 1px solid #4f545c; }

/* ── DEBUG PANEL ── */
.debug-panel {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(20,20,20,0.98); color: #e0e0e0; font-size: 12px;
    padding: 8px 15px; border-top: 1px solid #333;
    display: none; z-index: 9999; max-height: 200px;
    overflow-x: hidden; overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}
.debug-panel.show { display: block; }
.debug-panel { display: block !important; }
.debug-header { display: none; }
.debug-toggle { display: none; }
.debug-toggle:hover { display: none; }
.debug-log { display: inline; margin: 0 8px 0 0; padding: 0; background: transparent; color: rgba(224,224,224,0.7); border: none; }
.debug-log.info { color: rgba(100,181,246,0.8); }
.debug-log.success { color: rgba(129,199,132,0.8); }
.debug-log.warning { color: rgba(255,183,77,0.8); }
.debug-log.error { color: rgba(239,83,80,0.9); font-weight: 600; }
.debug-time { display: none; }