/* ========================
GLOBAL
======================== */

body{
font-family: 'Inter', Arial, sans-serif;
margin:0;
transition:0.3s;
}

/* DARK (menos agresivo) */
body.dark{
background:#0F1115;
color:#EAEAEA;
}

/* LIGHT (principal ahora) */
body.light{
background:#F7F8FA;
color:#1A1A1A;
}

/* ========================
HEADER
======================== */

.header{
padding:20px 30px;
border-bottom:1px solid #E5E7EB;
position:relative;
}

body.dark .header{
background:#111318;
border-bottom:1px solid #2A2A2A;
}

body.light .header{
background:#ffffff;
}

.header h1{
margin:0 0 10px 0;
font-weight:600;
}

.header p{
margin:5px 0;
opacity:0.8;
}

.header img{
height:55px;
margin-bottom:10px;
}

/* ========================
THEME TOGGLE
======================== */

.theme-toggle{
position:absolute;
top:20px;
right:20px;
background:#ffffff;
border:1px solid #E5E7EB;
color:#111;
border-radius:50%;
padding:10px;
cursor:pointer;
transition:0.3s;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

body.dark .theme-toggle{
background:#1A1A1A;
color:white;
border:1px solid #333;
}

.theme-toggle:hover{
background:#D4AF37;
color:black;
}

/* ========================
SIDEBAR
======================== */

.sidebar{
position:fixed;
left:0;
top:0;
width:250px;
height:100%;
padding:20px;
overflow-y:auto;
transition:0.3s;
}

body.dark .sidebar{
background:#0F1115;
border-right:1px solid #2A2A2A;
}

body.light .sidebar{
background:#ffffff;
border-right:1px solid #E5E7EB;
}

.sidebar.collapsed{
width:70px;
}

.logo{
font-size:20px;
font-weight:600;
color:#D4AF37;
margin-bottom:30px;
}

/* Links */

.sidebar a{
display:block;
padding:10px 12px;
text-decoration:none;
font-size:14px;
border-radius:8px;
margin-bottom:5px;
transition:0.3s;
}

body.dark .sidebar a{
color:#B0B0B0;
}

body.light .sidebar a{
color:#444;
}

.sidebar a:hover{
background:#D4AF37;
color:black;
}

/* ========================
MAIN
======================== */

.main{
margin-left:260px;
padding:30px;
transition:0.3s;
}

.sidebar.collapsed ~ .main{
margin-left:90px;
}

/* ========================
BOTÓN COLAPSAR
======================== */

.toggle-btn{
position:fixed;
top:20px;
left:260px;
z-index:1000;
background:#D4AF37;
border:none;
padding:8px 12px;
cursor:pointer;
border-radius:8px;
font-weight:bold;
transition:0.3s;
}

.sidebar.collapsed ~ .toggle-btn{
left:80px;
}

/* ========================
CARDS (ESTILO SaaS)
======================== */

.card{
padding:25px;
border-radius:16px;
margin-bottom:25px;
transition:0.3s;
max-width:500px;
margin-left:auto;
margin-right:auto;
}

body.dark .card{
background:#15171C;
border:1px solid #2A2A2A;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

body.light .card{
background:#ffffff;
border:1px solid #E5E7EB;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

/* ========================
GRID 3 COLUMNAS
======================== */

.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

/* ========================
BOTONES
======================== */

button{
background:#D4AF37;
color:black;
border:none;
padding:12px 18px;
cursor:pointer;
border-radius:10px;
font-weight:600;
transition:0.3s;
}

button:hover{
background:#caa52f;
transform:translateY(-2px);
}

/* ========================
INPUTS (MUY IMPORTANTE)
======================== */

input, textarea, select{
width:100%;
padding:10px;
border-radius:8px;
border:1px solid #E5E7EB;
margin-bottom:10px;
font-size:14px;
}

body.dark input,
body.dark textarea,
body.dark select{
background:#1A1A1A;
color:white;
border:1px solid #333;
}

/* ========================
DATETIME
======================== */

#datetime{
margin-top:10px;
color:#D4AF37;
font-size:14px;
}

/* ========================
METRICS
======================== */

.metrics{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap:20px;
margin-top:20px;
}

.metric-box{
padding:20px;
border-radius:14px;
text-align:center;
transition:0.3s;
}

body.dark .metric-box{
background:#1A1A1A;
border:1px solid #333;
}

body.light .metric-box{
background:#ffffff;
border:1px solid #E5E7EB;
}

.metric-box:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(212,175,55,0.2);
}

.metric-box h3{
color:#D4AF37;
margin-bottom:10px;
font-size:14px;
}

.metric-box p{
font-size:24px;
font-weight:bold;
}

/* ========================
FOOTER
======================== */

.footer{
margin-top:40px;
padding:20px;
text-align:center;
font-size:13px;
}

body.dark .footer{
border-top:1px solid #2A2A2A;
color:#aaa;
}

body.light .footer{
border-top:1px solid #E5E7EB;
color:#666;
}

/* ========================
SCROLL
======================== */

::-webkit-scrollbar{
width:6px;
}

::-webkit-scrollbar-thumb{
background:#D4AF37;
border-radius:10px;
}

/* ========================
RESPONSIVE
======================== */

@media(max-width:900px){

.grid-3{
grid-template-columns:1fr;
}

.metrics{
grid-template-columns:1fr 1fr;
}

.sidebar{
position:absolute;
z-index:999;
}

.main{
margin-left:0;
}

}