/* ======================= 
   🎨 Estilos Generales
 ========================= */
body {
    font-family: arial, sans-serif;
    text-align: center;
    background-color: #f5f5f5;
    padding: 20px;
    transition: background-color 0.3s, color 0.3s;
}

.contenedor {
    margin-bottom: 20px;
}

input, textarea, button, select {
    margin: 8px;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.buscar {
    width: 80%;
    max-width: 400px;
    border-radius: 8px;
    border: 1px solid #aaa;
    padding: 8px 2px;
    font-size: 16px;
}

/* 🗒️ Contenedor de notas */
#notasContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* 🗒️ Cada nota */
.nota {
    background-color: white;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    width: 250px;
    text-align: left;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.nota:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* =======================
    BOTONES Y ACCIONES
==========================     */
button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.3s, fransform 0.2s;
}

button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* Boton de exportar / importar */
.acciones {
    margin-top: 25px;
}

.acciones button {
    margin: 5px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    background-color: #673ab7;
    color: white;
}

.acciones button:hover {
    background-color: #5e35b1;
}

/* ============================
    COLORES DE CATEGORIAS
=============================== */
.nota.personal { border-left: 6px solid #2196f3; }
.nota.trabajo { border-left: 6px solid #4caf50; }
.nota.estudio { border-left: 6px solid #9c27b0; }
.nota.sin-categoria { border-left: 6px solid #ccc; }

/* ============================
   MODO OSCURO  
=============================== */
.dark {
    background-color: #1e1e1e;
    color: white;
}

.dark .nota {
    background-color: #333;
    color: white;
    border-color: #444;
} 

.dark.nota.personal { border-left: 6px solid #64b5f6; }
.dark.nota.trabajo { border-left: 6px solid #81c784; }
.dark.nota.estudio { border-left: 6px solid #ba68c8; }
.dark.nota.otros { border-left: 6px solid #ffb74d; }
.dark.nota.sin-categoria { border-left: 6px solid #999; }

/* =============================
   FILTROS Y FORMULARIOS
================================ */
.filtros, .filtros-fecha {
    margin-bottom: 20px;
}

.filtros select,
.filtros-fecha input {
    padding: 8px;
    border-radius: 5px;
    font-size: 16px;
}

/* ========================================
   BLOQUES PLEGABLES (secciones animadas)
=========================================== */
.bloque {
    margin: 20px 0;
    border-radius: 12px;
    background: var(--bg2, #f9f9f9);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.titulo-bloque {
    cursor: pointer;
    background: var(--accent, #2196f3);
    color: white;
    padding: 10px 15px;
    font-size: 1.2em;
    user-select: none;
    transition: background 0.3s ease;
}

.titulo-bloque:hover {
    background: var(--accent-hover, #1976d2);
}

/* Titulo de bloque activo */
.titulo-bloque.abierto {
    background: linear-gradient(135deg, #00bcd4, #2196f3);
    color: white;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 00.2);
}

/* 🎞️ Transición de apertura/cierre suave */
.contenido-bloque {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease;
}

.contenido-bloque.activo {
    max-height: 500px; /* suficiente para contenido mediano */
    opacity: 1;
    padding: 10px 15px;
}