/* public/css/styles.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #050608;
    color: #e0e0e0;
    font-family: 'Rajdhani', sans-serif;
    /* Quitamos el scroll de afuera para que no se vea doble barra */
    overflow: hidden; 
    height: 100vh;
}

.app-container {
    display: flex; /* Esto pone el menú y el contenido lado a lado */
    width: 100%;
    height: 100vh;
}

/* Ajuste para el contenedor del Menú */
#menu-container {
    width: 300px; /* Ancho fijo para el menú */
    height: 100%;
    flex-shrink: 0; /* Evita que el menú se aplaste */
}

/* Ajuste para el Área de Contenido */
.main-content {
    flex-grow: 1; /* Ocupa todo el resto del espacio */
    height: 100%;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at center, #0d1117 0%, #050608 100%);
    overflow-y: auto; /* Solo el contenido tiene scroll si es muy largo */
}

.top-bar {
    height: 60px;
    border-bottom: 1px solid rgba(0, 242, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    background: rgba(10, 11, 16, 0.8);
    flex-shrink: 0;
}

.display-area {
    padding: 40px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Personalización del Scrollbar (General) --- */

/* 1. Tamaño y fondo del canal (la parte de atrás) */
::-webkit-scrollbar {
    width: 6px; /* Muy delgada para que sea elegante */
    height: 6px;
    background-color: #050608;
}

/* 2. El "pulgar" (la parte que se mueve) */
::-webkit-scrollbar-thumb {
    background: var(--accent-cyan);
    border-radius: 10px;
    /* Efecto de brillo de neón */
    box-shadow: 0 0 10px var(--accent-cyan);
}

/* 3. Cuando pasas el mouse por encima del scroll */
::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
    box-shadow: 0 0 15px #ffffff;
}

/* 4. Esquina (si hay scroll horizontal y vertical) */
::-webkit-scrollbar-corner {
    background: transparent;
}

/* --- Para Firefox (opcional) --- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-cyan) #050608;
}
.logout-btn{background:transparent;color:#00f2ff;border:1px solid #00f2ff;padding:6px 12px;border-radius:8px;cursor:pointer}
@media (max-width: 1024px){
  body{overflow:auto}
  .app-container{flex-direction:column;height:auto;min-height:100vh}
  #menu-container{width:100%;height:auto}
  .sidebar-cyber{height:auto;max-height:280px}
  .top-bar{padding:12px;gap:10px;flex-wrap:wrap;height:auto}
  .display-area{padding:16px}
}

.admin-open-btn{background:#00f2ff;color:#00131d;border:0;padding:7px 12px;border-radius:8px;font-weight:700;cursor:pointer}.admin-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:9999;padding:12px}.admin-modal.hidden{display:none}.admin-modal-content{width:min(1100px,96vw);max-height:92vh;overflow:auto;background:#071121;border:1px solid #00f2ff;border-radius:12px;padding:14px}.admin-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.admin-modal-header button{background:transparent;color:#fff;border:1px solid #00f2ff;border-radius:8px;padding:4px 10px}.admin-create-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin-bottom:12px}.admin-create-form input,.admin-create-form button{padding:10px;border-radius:8px;border:1px solid #1d3f52}.admin-create-form button{background:#00f2ff;color:#00131d;font-weight:700}.admin-table{display:grid;gap:8px}.admin-row{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:10px;align-items:center;background:#0b1828;padding:10px;border-radius:10px}.admin-row small{display:block;opacity:.8}.days-ctrl{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.days-ctrl button{padding:6px 8px;border:1px solid #00f2ff;background:transparent;color:#00f2ff;border-radius:8px}@media (max-width:768px){.admin-create-form{grid-template-columns:1fr}.admin-row{grid-template-columns:1fr;gap:6px}.admin-open-btn{width:100%}}
.user-edit-form{display:grid;grid-template-columns:1fr 1fr 1fr .8fr auto;gap:6px;margin-top:8px}.user-edit-form input,.user-edit-form button{padding:8px;border-radius:8px;border:1px solid #1d3f52}.user-edit-form button{background:#1be4ff;color:#00131d;font-weight:700}@media (max-width:768px){.user-edit-form{grid-template-columns:1fr}}