@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap');

:root {
    /* --- PALETA CUTE --- */
    --main-bg-color: #fffafa; 
    --modal-bg-color: #ffffff;
    --drop-down-menu-bg: #fff0f5;
    
    --button-color: #ffb7ce;
    --button-color-hover: #ff85a1;
    --accent-color: 255, 183, 206;
    
    --text: #7d7d7d;
    --text-hover: #4a4a4a;
    --text-muted: #b5b5b5;

    --sidebar-pink: #ffeef2; 
}

/* --- ESTILOS GENERALES Y LOGIN --- */
body {
    font-family: 'Quicksand', sans-serif !important;
    background: var(--main-bg-color) !important;
}

#login { background: var(--main-bg-color) !important; }

.button, input[type="submit"] {
    background-color: var(--button-color) !important;
    border-radius: 50px !important;
    border: none !important;
    color: white !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 600 !important;
}

/* --- BARRA LATERAL (SIDEBAR) --- */
nav {
    background: var(--sidebar-pink) !important;
    border-right: 1px solid rgba(0,0,0,0.05) !important;
    width: 250px !important;
    
    /* REDUCCIÓN DE PADDING SUPERIOR */
    padding: 10px 0 !important; 
    
    display: flex !important;
    flex-direction: column !important;
    border-bottom-right-radius: 20px !important; 
    overflow: hidden !important;
}

/* Ajuste de los botones para que no estén tan separados */
nav .action {
    color: var(--text) !important;
    font-weight: 600;
    border-radius: 8px !important;
    
    /* Margen reducido para cohesión */
    margin: 2px 12px !important; 
    
    width: calc(100% - 24px) !important; 
    padding: 12px 15px !important;
    transition: background 0.2s ease !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

/* Eliminar el margen extra que Filebrowser pone al primer elemento */
nav .action:first-child {
    margin-top: 5px !important;
}

nav .action:hover {
    background: white !important;
    color: var(--button-color-hover) !important;
}

nav .action i {
    color: rgb(var(--accent-color)) !important;
    margin-right: 12px !important;
}

/* --- LIMPIEZA DE CRÉDITOS --- */
.credits { display: none !important; }

/* --- CABECERA --- */
header {
    background: white !important;
    border-bottom: 2px solid var(--sidebar-pink) !important;
    box-shadow: none !important;
}

#search #input {
    background: var(--drop-down-menu-bg) !important;
    border-radius: 20px !important;
    border: 1px solid #ffdae9 !important;
}

/* --- LISTADO DE ARCHIVOS --- */
#listing .item {
    background: white !important;
    border-radius: 15px !important;
    border: 1px solid #f0f0f0 !important;
}

#listing .item:hover {
    background: rgba(162, 210, 255, 0.1) !important;
    transform: translateY(-3px);
}

.material-icons, #listing .item i {
    color: rgb(var(--accent-color)) !important;
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { 
    background: var(--button-color); 
    border-radius: 10px; 
}