*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

/* VARIABLES LIGHT */
:root{
--bg-main:#ffffff;
--bg-body:#f1f5f9;
--sidebar-bg:#0a0c10;
--sidebar-text:#cbd5e1;
--primary:#0ea5e9; /* Nuevo Celeste Principal */
--primary-dark:#0284c7;
--card-bg:#f0f9ff;
--card-border:#bae6fd;
--table-head:#e0f2fe;
--text-main:#0c4a6e;
--text-bright:#0c4a6e;
--logout-bg:rgba(220,38,38,0.15);
--logout-hover:rgba(220,38,38,0.35);
--logout-text:#f87171;
}

/* VARIABLES DARK (CONTRASSTE INVERTIDO) */
body.dark{
--bg-main:#0b1120; /* Fondo azul noche muy profundo */
--bg-body:#020617;
--sidebar-bg:#0a0c10;
--sidebar-text:#cbd5e1;
--primary:#38bdf8;
--primary-dark:#0ea5e9;
--card-bg:#ffffff; 
--card-border:#e2e8f0;
--table-head:#f8fafc;
--text-main:#0c4a6e;
--text-bright:#ffffff; 
--logout-bg:rgba(220,38,38,0.05);
--logout-hover:rgba(220,38,38,0.15);
--logout-text:#ef4444;
}

body{
background:var(--bg-body);
display:flex;
min-height:100vh;
transition:.3s;
}

/* SIDEBAR */

.sidebar{
width:260px;
background:var(--sidebar-bg);
padding:2rem 1rem;
position:fixed;
height:100vh;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.sidebar-logo-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.logo-icon-wrapper {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #e0f2fe 0%, #7dd3fc 50%, #0ea5e9 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #0c4a6e;
    box-shadow: 
        0 4px 15px rgba(125, 211, 252, 0.4),
        inset 0 0 10px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: rotate(-5deg);
    transition: all 0.3s ease;
}

.sidebar-logo-centered:hover .logo-icon-wrapper {
    transform: rotate(0deg) scale(1.1);
    box-shadow: 0 8px 25px rgba(125, 211, 252, 0.6);
}

.logo-text {
    font-size: 1.1rem;
    font-weight: 800;
    color: #7dd3fc; /* Celeste Metalizado */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sidebar nav ul{
list-style:none;
}

.sidebar nav li{
margin-bottom:.5rem;
}

.sidebar nav a{
display:flex;
align-items:center;
gap:.7rem;
padding:.9rem 1rem;
border-radius:1rem;
color:var(--sidebar-text);
text-decoration:none;
transition:.2s;
}

.sidebar nav a:hover{
background:rgba(14, 165, 233, 0.15);
color:#fff;
}

.sidebar nav li.active a{
background:rgba(14, 165, 233, 0.2);
color:var(--primary);
border-left:3px solid var(--primary);
font-weight:700;
}

body.dark .sidebar nav li.active a{
background:rgba(255,255,255,0.1);
color:#fff;
border-left:3px solid var(--primary);
}

/* Toggle */

.theme-toggle{
margin-top:1rem;
}

.theme-toggle button{
width:100%;
background:var(--primary);
color:white;
border:none;
padding:.8rem;
border-radius:1rem;
cursor:pointer;
transition:.2s;
font-weight:600;
}

.theme-toggle button:hover{
background:var(--primary-dark);
}

/* Logout */

.sidebar-footer{
margin-top:auto;
padding-top:1.5rem;
border-top:1px solid rgba(255,80,80,0.2);
}

.logout-link{
display:flex;
align-items:center;
gap:.7rem;
padding:.9rem 1rem;
border-radius:1rem;
text-decoration:none;
background:var(--logout-bg);
color:var(--logout-text);
transition:.2s;
margin-top: 1rem;
border-top: 1px solid rgba(255,255,255,0.05);
}

.logout-link:hover{
background:var(--logout-hover);
color:#fff;
}

/* SECCIÓN PERFIL INFERIOR */
.sidebar-user-bottom {
    margin-bottom: 0.8rem;
}

.sidebar-user-bottom .user-bottom-link {
    display: flex !important;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem !important;
    border-radius: 1.2rem;
    text-decoration: none;
    background: #151a23 !important; /* Forzamos color oscuro exacto */
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.sidebar-user-bottom .user-bottom-link:hover {
    background: #1e2532 !important;
    border-color: var(--primary);
}

.user-bottom-link.active {
    background: var(--primary) !important;
    border-color: var(--primary);
}

.user-bottom-link.active .user-name,
.user-bottom-link.active .user-role,
.user-bottom-link.active .user-bottom-avatar i {
    color: #fff !important;
}

.user-bottom-avatar {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-bottom-avatar i {
    font-size: 1.2rem;
    color: #0c4a6e;
}

.user-bottom-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

.user-role {
    font-size: 0.75rem;
    color: var(--primary);
    opacity: 0.8;
}


/* MAIN */

.main-content{
margin-left:260px;
background:var(--bg-main);
flex:1;
padding:2rem;
min-height:100vh;
transition:.3s;
}

.main-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:2rem;
}

h1{
color:var(--text-bright);
}

/* Cards */

.card{
background:var(--card-bg);
padding:1.5rem;
border-radius:1rem;
border:1px solid var(--card-border);
box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

/* Tablas */

table{
width:100%;
border-collapse:collapse;
background:var(--card-bg);
border-radius:1rem;
overflow:hidden;
}

th,td{
padding:1rem;
border-bottom:1px solid var(--card-border);
}

th{
background:var(--table-head);
text-align:left;
color:var(--text-main);
}

/* Botones */

button,
a.btn{
background:var(--primary);
color:white;
padding:.5rem 1rem;
border-radius:1rem;
text-decoration:none;
border:none;
cursor:pointer;
transition:.2s;
font-weight:600;
}

button:hover,
a.btn:hover{
background:var(--primary-dark);
}
/* =========================
   BOTÓN DARK/LIGHT FLOTANTE
========================= */

/* BOTÓN DARK/LIGHT FLOTANTE - DERECHA ABAJO */
.theme-floating{
position:fixed;
right:2rem;
bottom:2rem;
z-index:9999;
}

.theme-floating button{
width:56px;
height:56px;
border-radius:50%;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background:#0a0c10;
color:#fff;
box-shadow:0 8px 25px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.1);
}

/* Hover */
.theme-floating button:hover{
transform:scale(1.15) rotate(15deg);
background:#1e293b;
}

/* En modo oscuro, el botón también cambia de estilo */
body.dark .theme-floating button{
background:#ffffff;
color:#0a0c10;
box-shadow:0 8px 25px rgba(255,255,255,0.2);
}

/* Transiciones suaves globales */
body,
.main-content,
.sidebar,
.card,
table{
transition:background .35s ease, color .35s ease, border .35s ease;
}
.login-error{
background:#fee2e2;
color:#b91c1c;
padding:.8rem 1rem;
border-radius:8px;
margin-bottom:1rem;
font-weight:600;
border:1px solid #fecaca;
}
body.dark .login-error{
background:#7f1d1d;
color:#fee2e2;
border:1px solid #991b1b;
}