:root {
    --rojo: #c41e2a; --dorado: #d4a017; --azul: #1a1a5e;
    --verde: #22c55e; --gris: #64748b;
    --font: 'Inter', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font); background:#f0f2f5; color:#1a1a2e; }

/* LOGIN */
.login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a1a2e 0%,#c41e2a 50%,#1a1a5e 100%); padding:20px; }
.login-card { background:#fff; border-radius:24px; padding:40px; max-width:420px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.login-card h1 { font-size:1.5rem; font-weight:700; color:var(--azul); }
.login-card .sub { color:var(--gris); font-size:0.9rem; margin-bottom:24px; }
.login-card label { font-size:0.85rem; font-weight:600; color:var(--azul); display:block; margin-bottom:6px; }
.login-card input, .login-card select { width:100%; padding:12px 16px; border:2px solid #e2e8f0; border-radius:12px; font-size:0.95rem; font-family:inherit; margin-bottom:16px; }
.login-card input:focus { outline:none; border-color:var(--rojo); box-shadow:0 0 0 4px rgba(196,30,42,0.08); }
.roles { display:flex; gap:8px; margin-bottom:20px; }
.role-btn { flex:1; padding:10px; border:2px solid #e2e8f0; border-radius:10px; background:#fff; cursor:pointer; text-align:center; font-size:0.85rem; font-weight:500; color:var(--gris); transition:all 0.3s; }
.role-btn.active { border-color:var(--rojo); background:rgba(196,30,42,0.04); color:var(--rojo); font-weight:600; }
.role-btn i { display:block; font-size:1.2rem; margin-bottom:4px; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 30px; border:none; border-radius:12px; font-weight:600; font-size:1rem; cursor:pointer; transition:all 0.3s; justify-content:center; }
.btn-primary { background:linear-gradient(135deg,var(--rojo),#e0202e); color:#fff; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(196,30,42,0.3); }

/* DASHBOARD */
.dashboard { display:none; min-height:100vh; }
.dashboard.active { display:flex; }
.sidebar { width:250px; background:var(--azul); color:#fff; padding:24px 16px; display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100; }
.sidebar-logo { display:flex; align-items:center; gap:10px; margin-bottom:32px; }
.sidebar-logo h2 { font-size:1.05rem; font-weight:700; }
.sidebar-logo span { font-size:0.7rem; color:rgba(255,255,255,0.5); display:block; }
.sidebar nav { flex:1; }
.sidebar a { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; color:rgba(255,255,255,0.6); text-decoration:none; font-size:0.88rem; font-weight:500; transition:all 0.3s; }
.sidebar a i { width:20px; text-align:center; }
.sidebar a:hover, .sidebar a.active { background:rgba(255,255,255,0.08); color:#fff; }
.sidebar a.active { border-left:3px solid var(--dorado); }
.sidebar .user { padding-top:16px; border-top:1px solid rgba(255,255,255,0.08); margin-top:auto; }
.user-info { display:flex; align-items:center; gap:10px; }
.user-avatar { width:36px; height:36px; border-radius:50%; background:var(--rojo); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; }
.main { margin-left:250px; flex:1; padding:24px 32px; }
.header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; padding-bottom:16px; border-bottom:1px solid #e2e8f0; }
.header h1 { font-size:1.4rem; font-weight:700; color:var(--azul); }
.header-right { display:flex; align-items:center; gap:16px; }
.header-right .date { font-size:0.85rem; color:var(--gris); }
.badge { padding:4px 12px; border-radius:50px; font-size:0.75rem; font-weight:600; }
.badge-success { background:#dcfce7; color:#166534; }
.badge-warning { background:#fef3c7; color:#92400e; }
.badge-info { background:#dbeafe; color:#1e40af; }

/* STATS */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.stat-card { background:#fff; border-radius:16px; padding:20px 24px; box-shadow:0 1px 3px rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.03); }
.stat-card .icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:12px; }
.stat-card h3 { font-size:1.6rem; font-weight:700; color:var(--azul); }
.stat-card p { font-size:0.82rem; color:var(--gris); }
.stat-card .change { font-size:0.78rem; font-weight:600; margin-top:4px; }
.stat-card .change.up { color:var(--verde); }

/* CHARTS */
.charts-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:28px; }
.chart-card { background:#fff; border-radius:16px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.03); }
.chart-card h3 { font-size:0.95rem; font-weight:600; color:var(--azul); margin-bottom:16px; }
.chart-bar { display:flex; align-items:end; gap:8px; height:120px; }
.chart-bar .bar { flex:1; border-radius:4px 4px 0 0; min-height:4px; position:relative; }
.chart-bar .bar .label { position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-size:0.65rem; color:var(--gris); white-space:nowrap; }
.pie-legend-item { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:0.82rem; color:var(--gris); }
.pie-legend-item .dot { width:10px; height:10px; border-radius:3px; }

/* TABLE */
.table-card { background:#fff; border-radius:16px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.03); margin-bottom:16px; }
.table-card h3 { font-size:0.95rem; font-weight:600; color:var(--azul); margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
.table-card table { width:100%; border-collapse:collapse; }
.table-card th { text-align:left; padding:10px 12px; font-size:0.78rem; font-weight:600; color:var(--gris); text-transform:uppercase; letter-spacing:0.5px; border-bottom:2px solid #f1f5f9; }
.table-card td { padding:10px 12px; font-size:0.88rem; border-bottom:1px solid #f1f5f9; }
.table-card tr:hover td { background:#f8fafc; }
.table-card .view-all { font-size:0.8rem; color:var(--rojo); text-decoration:none; font-weight:500; }

/* CODE */
.section-title { font-size:1.1rem; font-weight:700; color:var(--azul); margin-bottom:16px; }
.code-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; }
.code-card { background:#fff; border-radius:16px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.03); }
.code-card h3 { font-size:0.95rem; font-weight:600; color:var(--azul); margin-bottom:12px; }
.code-generator { display:flex; gap:8px; margin-bottom:12px; }
.code-generator input { width:60px; padding:8px; border:2px solid #e2e8f0; border-radius:8px; font-size:0.9rem; }
.code-generator select { flex:1; padding:8px; border:2px solid #e2e8f0; border-radius:8px; font-size:0.9rem; }
.code-btn { padding:8px 20px; background:var(--rojo); color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:600; transition:all 0.3s; }
.code-btn:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(196,30,42,0.3); }
.code-item { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-radius:8px; background:#f8fafc; margin-bottom:4px; font-size:0.85rem; }
.code-item .code { font-family:monospace; font-weight:700; color:var(--azul); letter-spacing:1px; }

.flow-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:28px; }
.step { text-align:center; padding:20px 12px; background:#fff; border-radius:16px; border:1px solid rgba(0,0,0,0.03); }
.step .num { width:32px; height:32px; border-radius:50%; background:var(--rojo); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 10px; }
.step h4 { font-size:0.85rem; font-weight:600; color:var(--azul); margin-bottom:4px; }
.step p { font-size:0.75rem; color:var(--gris); line-height:1.4; }

/* PRICING */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px; }
.pricing-card { background:#fff; border-radius:16px; padding:28px 24px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.03); position:relative; }
.pricing-card.featured { border:2px solid var(--rojo); box-shadow:0 4px 20px rgba(196,30,42,0.1); }
.pricing-card .popular { position:absolute; top:-10px; right:16px; background:var(--rojo); color:#fff; padding:2px 12px; border-radius:50px; font-size:0.7rem; font-weight:600; }
.pricing-card h3 { font-size:1.1rem; font-weight:700; color:var(--azul); }
.pricing-card .price { font-size:2rem; font-weight:800; color:var(--rojo); margin:8px 0; }
.pricing-card .price span { font-size:0.9rem; font-weight:400; color:var(--gris); }
.pricing-card ul { list-style:none; margin:16px 0; }
.pricing-card li { padding:6px 0; font-size:0.85rem; color:var(--gris); border-bottom:1px solid #f1f5f9; }
.pricing-card li i { color:var(--verde); margin-right:8px; }

.login-footer { text-align:center; margin-top:16px; font-size:0.8rem; color:var(--gris); }
.os-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:50px; font-size:0.7rem; font-weight:500; background:#f1f5f9; color:var(--gris); }
.back-to-top { position:fixed; bottom:24px; right:24px; z-index:999; width:42px; height:42px; border-radius:50%; background:var(--rojo); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:0 4px 12px rgba(0,0,0,0.15); opacity:0; visibility:hidden; transform:translateY(12px); transition:all 0.3s; text-decoration:none; }
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }

@media(max-width:1024px) { .stats-grid, .pricing-grid { grid-template-columns:repeat(2,1fr); } .charts-grid { grid-template-columns:1fr; } .code-grid, .flow-steps { grid-template-columns:1fr 1fr; } }
@media(max-width:768px) {
    .sidebar { width:60px; padding:16px 8px; }
    .sidebar-logo h2, .sidebar-logo span, .sidebar a span, .sidebar .user-info div { display:none; }
    .sidebar a { justify-content:center; }
    .main { margin-left:60px; padding:16px; }
    .stats-grid, .pricing-grid, .code-grid { grid-template-columns:1fr; }
    .flow-steps { grid-template-columns:1fr 1fr; }
}