:root {
    --brand-purple: #311959; 
    --brand-pink: #EA0E71;   
    --brand-yellow: #FFE100; 
    --brand-green: #00A045;  

    --primary: var(--brand-purple);
    --primary-hover: #221040;
    --accent: var(--brand-pink);
    --accent-hover: #C70A5E;
    
    --bg-color: #F5F4F8; 
    --surface: #FFFFFF;
    --text-main: #1F1735; 
    --text-muted: #6B7280;
    --border: #E5E7EB;
    
    --crit-bg: #FCE8F0; --crit-txt: var(--brand-pink);
    --high-bg: #FFFBD6; --high-txt: #9E8E00; 
    --med-bg: #EAE8F2; --med-txt: var(--brand-purple);
    --low-bg: #E5F6EC; --low-txt: var(--brand-green);
}

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

/* Control de vistas de la App */
.app-layout { width: 100%; height: 100%; display: none; }
.app-layout.active-layout { display: flex; }

/* Pantalla Login */
.login-wrapper { justify-content: center; align-items: center; background: linear-gradient(135deg, var(--bg-color) 0%, #e2ddec 100%); }
.login-box { background: var(--surface); padding: 40px; border-radius: 16px; box-shadow: 0 10px 25px rgba(49, 25, 89, 0.1); width: 100%; max-width: 400px; border: 1px solid var(--border); }

/* Sidebar */
.sidebar { width: 260px; background-color: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 24px 16px; }
.sidebar-header { display: flex; align-items: center; padding: 0 10px 32px 10px; color: var(--primary); }
.sidebar-header .material-symbols-outlined { font-size: 28px; margin-right: 12px; color: var(--accent); }
.sidebar-header h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 8px; }
.nav-item { display: flex; align-items: center; text-decoration: none; color: var(--text-muted); padding: 12px 16px; border-radius: 8px; font-size: 15px; font-weight: 500; transition: all 0.2s ease; cursor: pointer; }
.nav-item .material-symbols-outlined { margin-right: 16px; font-size: 22px; color: #9CA3AF; transition: color 0.2s; }
.nav-item:hover { background-color: #F9FAFB; color: var(--primary); }
.nav-item:hover .material-symbols-outlined { color: var(--primary); }
.nav-item.active { background-color: var(--med-bg); color: var(--primary); font-weight: 600; }
.nav-item.active .material-symbols-outlined { color: var(--primary); }

/* Contenido Principal y Topbar */
.main-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
.topbar { background-color: var(--surface); padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.search-bar { display: flex; align-items: center; background-color: var(--bg-color); padding: 8px 16px; border-radius: 8px; width: 400px; border: 1px solid transparent; transition: border 0.2s;}
.search-bar:focus-within { border-color: var(--primary); background-color: var(--surface); }
.search-bar input { border: none; background: none; outline: none; width: 100%; margin-left: 8px; font-size: 0.875rem; color: var(--text-main);}

.top-actions { display: flex; align-items: center; gap: 20px; }
.btn-primary { background-color: var(--accent); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.2s, transform 0.1s; }
.btn-primary:hover { background-color: var(--accent-hover); transform: translateY(-1px); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--brand-green); display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; box-shadow: 0 2px 4px rgba(0,160,69,0.2); }

/* Vistas dinámicas */
.view { display: none; padding: 32px; flex-direction: column; gap: 24px; }
.view.active { display: flex; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Utilidades de UI */
.panel { background-color: var(--surface); border-radius: 12px; border: 1px solid var(--border); padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.panel-title { font-size: 1.125rem; font-weight: 600; color: var(--primary); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; }
tr { transition: background-color 0.2s; }
tr:hover { background-color: var(--bg-color); }

.badge { padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; display: inline-block; }
.badge.resuelto { background: var(--low-bg); color: var(--low-txt); }
.badge.nuevo { background: var(--crit-bg); color: var(--crit-txt); }
.badge.espera { background: var(--high-bg); color: var(--high-txt); }
.badge.revision { background: var(--med-bg); color: var(--med-txt); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.kpi-card { background-color: var(--surface); padding: 24px; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.05); border-left: 4px solid var(--primary); }
.kpi-card:nth-child(3) { border-left-color: var(--brand-pink); }
.kpi-title { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; }
.kpi-value { font-size: 2rem; font-weight: 700; margin-top: 8px; color: var(--primary); }

/* Modales y Formularios */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(31, 23, 53, 0.6); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(2px); }
.modal.show { display: flex; }
.modal-content { background: var(--surface); padding: 32px; border-radius: 12px; width: 500px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; color: var(--primary); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--med-bg); }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.btn-outline { background: transparent; border: 1px solid var(--border); padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--text-muted); transition: all 0.2s; }
.btn-outline:hover { background: var(--bg-color); color: var(--text-main); }
.action-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1.2rem; margin-right: 8px; transition: color 0.2s, transform 0.1s; }
.action-btn:hover { color: var(--accent); transform: scale(1.1); }