/* -------------------- FUENTES -------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

:root {
    --fondo: rgba(255, 255, 255, 0.92);
    --texto: #333;
    --panel: rgba(255,255,255,0.95);
    --input-bg: rgba(255,255,255,0.95);
    --gradiente: linear-gradient(to right, #00b894, #6c5ce7);
    --card-bg: rgba(240,240,240,0.9);

    /* Animaciones */
    --transicion: 0.35s ease;
}

/* MODO OSCURO */
.dark-mode {
    --fondo: rgba(35, 35, 35, 0.95);
    --texto: #f1f1f1;
    --panel: rgba(50, 50, 50, 0.95);
    --input-bg: rgba(75,75,75,0.95);
    --card-bg: rgba(60,60,60,0.9);
}

/* -------------------- BODY -------------------- */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: url('https://images.unsplash.com/photo-1620121692029-d088224ddc74?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3') no-repeat center center fixed;
    background-size: cover;
    color: var(--texto);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    transition: background-color var(--transicion), color var(--transicion);
}

/* -------------------- CONTENEDOR -------------------- */
.container {
    width: 95%;
    max-width: 1000px;
    background: var(--fondo);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.35);

    /* Animación inicial */
    animation: aparecer 0.8s ease;
}

@keyframes aparecer {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -------------------- TÍTULOS -------------------- */
h1 {
    text-align: center;
    color: white;
    background: var(--gradiente);
    padding: 14px;
    border-radius: 50px;
    margin-bottom: 10px;
    animation: slideDown 0.6s ease;
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

h2 {
    color: var(--texto);
    transition: var(--transicion);
}

/* -------------------- INPUTS -------------------- */
input, textarea {
    width: 100%;
    padding: 10px;
    margin: 8px 0 16px 0;
    border-radius: 8px;
    border: 2px solid #ccc;
    background: var(--input-bg);
    color: var(--texto);
    transition: background var(--transicion), color var(--transicion), border var(--transicion);
}

input:focus, textarea:focus {
    border-color: #6c5ce7;
    box-shadow: 0 0 8px rgba(108,92,231,0.4);
    outline: none;
    transform: scale(1.01);
    transition: 0.2s;
}

/* -------------------- PANELES -------------------- */
.panel {
    background: var(--panel);
    padding: 12px;
    border-radius: 8px;
    margin-top: 12px;
    transition: var(--transicion);
}

/* -------------------- BOTONES -------------------- */
button {
    background: var(--gradiente);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

button:hover {
    transform: scale(1.06);
    box-shadow: 0 0 12px rgba(108,92,231,0.5);
}

/* **Botón modo oscuro** */
#toggleDarkMode {
    float: right;
    margin-bottom: 10px;
    padding: 8px 14px;
    font-size: 0.9rem;
    border-radius: 20px;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* -------------------- RESULTADOS -------------------- */
.result-box {
    background: var(--panel);
    padding: 12px;
    border-radius: 8px;
    margin-top: 10px;
    transition: var(--transicion);
}

.result-box.ok { border-left: 4px solid #4caf50; }
.result-box.error { border-left: 4px solid #f44336; }

/* -------------------- ASIGNATURAS -------------------- */
.asignatura {
    background: var(--card-bg);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 12px;
    transition: var(--transicion);
    animation: fadeIn 0.4s ease;
}

.asignatura-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Animación al aparecer */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -------------------- LECTURA -------------------- */
.asignatura-read {
    margin-left: 10px;
}

/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 800px) {
    .asignatura-header { flex-direction: column; }
}