/* Importar una fuente más elegante */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

/* Estilos generales */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #121212; /* Un negro más profundo */
    color: #BB86FC; /* Morado claro para texto principal */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para el modo */
}

/* Estilo del encabezado */
header {
    background: #6200EE; /* Un morado más oscuro para el encabezado */
    padding: 15px;
    text-align: center;
    color: white; /* Texto blanco para el encabezado */
    font-size: 24px;
    font-weight: 600;
    display: flex; /* Para alinear el botón */
    justify-content: center;
    align-items: center;
    position: relative; /* Para posicionar el botón */
}

/* Contenedor de carpetas */
.file-explorer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Cuadrícula responsiva */
    gap: 20px;
    max-width: 900px;
    margin: 30px auto;
    padding: 20px;
    border-radius: 8px;
    background: #1E1E1E; /* Fondo más oscuro para la sección */
    box-shadow: 0px 4px 10px rgba(187, 134, 252, 0.3); /* Sombra morada */
    flex-grow: 1; /* Permite que la cuadrícula ocupe el espacio disponible */
}

/* Estilo de los ítems de cuadrícula (carpetas/archivos) */
.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    background: rgba(187, 134, 252, 0.1); /* Morado muy tenue de fondo */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    text-decoration: none; /* Para enlaces de archivos */
    color: #BB86FC; /* Color de texto morado claro */
}

.grid-item:hover {
    background: rgba(187, 134, 252, 0.3); /* Morado más intenso al pasar el ratón */
    transform: translateY(-5px);
}

.grid-item .icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.grid-item .label {
    font-size: 14px;
    font-weight: 400;
    word-break: break-word; /* Evita que los nombres largos se desborden */
}

/* Estilos del Modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Permanece en su lugar */
    z-index: 100; /* Se sitúa encima */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    overflow: auto; /* Habilita el scroll si es necesario */
    background-color: rgba(0,0,0,0.7); /* Negro con opacidad */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #1E1E1E; /* Fondo oscuro para el modal */
    margin: auto;
    padding: 25px;
    border: 1px solid #BB86FC; /* Borde morado */
    border-radius: 10px;
    width: 80%; /* Podría ser responsivo */
    max-width: 700px;
    position: relative;
    box-shadow: 0px 5px 15px rgba(187, 134, 252, 0.4); /* Sombra morada */
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #BB86FC; /* Morado claro al pasar el ratón */
    text-decoration: none;
    cursor: pointer;
}

#modalFolderName {
    color: #BB86FC; /* Morado claro para el nombre de la carpeta en el modal */
    text-align: center;
    margin-bottom: 20px;
    font-size: 22px;
}

/* Ajuste de ítems en el modal */
#modalFileGrid .grid-item {
    background: rgba(187, 134, 252, 0.05); /* Fondo más claro para archivos en el modal */
}

#modalFileGrid .grid-item:hover {
    background: rgba(187, 134, 252, 0.2);
}

/* --- Botón de Modo Oscuro/Claro --- */
.theme-toggle-button {
    background-color: #BB86FC; /* Morado claro */
    color: #121212; /* Texto oscuro */
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: absolute; /* Posiciona el botón */
    right: 20px; /* Distancia desde la derecha */
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajuste fino para centrar */
}

.theme-toggle-button:hover {
    background-color: #D0BCFF; /* Morado más claro al pasar el ratón */
}


/* --- Estilos para el Modo Claro --- */
body.light-mode {
    background-color: #F0F2F5; /* Fondo blanco/gris claro */
    color: #333333; /* Texto oscuro */
}

body.light-mode header {
    background: #9C27B0; /* Morado oscuro para el encabezado en modo claro */
    color: white;
}

body.light-mode .file-explorer-grid,
body.light-mode .modal-content {
    background: #FFFFFF; /* Fondo blanco para las secciones y el modal */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra más sutil */
    border: 1px solid #E0E0E0; /* Borde más claro */
}

body.light-mode .grid-item {
    background: #ECEFF1; /* Fondo gris claro para ítems */
    color: #333333; /* Texto oscuro */
}

body.light-mode .grid-item:hover {
    background: #CFD8DC; /* Gris un poco más oscuro al pasar el ratón */
}

body.light-mode a {
    color: #333333; /* Enlaces oscuros */
}

body.light-mode a:hover {
    color: #555555;
}

body.light-mode .close-button {
    color: #666;
}

body.light-mode .close-button:hover,
body.light-mode .close-button:focus {
    color: #9C27B0; /* Morado del encabezado al pasar el ratón */
}

body.light-mode #modalFolderName {
    color: #333333; /* Texto oscuro para el nombre de la carpeta en el modal */
}

body.light-mode #modalFileGrid .grid-item {
    background: #F8F8F8; /* Fondo más claro para archivos en el modal */
}

body.light-mode #modalFileGrid .grid-item:hover {
    background: #E0E0E0;
}

body.light-mode .theme-toggle-button {
    background-color: #6200EE; /* Morado más oscuro para el botón en modo claro */
    color: white;
}

body.light-mode .theme-toggle-button:hover {
    background-color: #9C27B0; /* Morado más claro al pasar el ratón */
}


/* Pie de página */
footer {
    text-align: center;
    padding: 15px;
    color: #888;
    font-size: 14px;
    margin-top: auto; /* Empuja el pie de página hacia abajo */
}