/* ==========================
   VARIABLES
========================== */

:root{
    --color-principal:#2563eb;
    --color-exito:#22c55e;
    --color-alerta:#f59e0b;
    --color-peligro:#ef4444;

    --fondo:#f4f7fb;
    --tarjeta:#ffffff;
    --texto:#1e293b;
    --texto-secundario:#64748b;
    --borde:#dbe4ee;

    --sombra:0 8px 25px rgba(0,0,0,.08);
}

/* ==========================
   MODO OSCURO
========================== */

body.dark{

    --fondo:#0f172a;
    --tarjeta:#1e293b;
    --texto:#f8fafc;
    --texto-secundario:#cbd5e1;
    --borde:#334155;
    --sombra:0 8px 25px rgba(0,0,0,.35);

}

/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;

    background:var(--fondo);

    color:var(--texto);

    transition:.3s;

}

/* ==========================
   CONTENEDOR
========================== */

.contenedor{

    width:min(1100px,95%);
    margin:auto;
    padding:40px 0;

}

/* ==========================
   HEADER
========================== */

.header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:30px;

}

.header h1{

    font-size:2rem;

}

.fecha-hora{

    text-align:right;

}

#diaActual{

    font-size:1.2rem;
    font-weight:bold;

}

#horaActual{

    color:var(--texto-secundario);

}

/* ==========================
   TARJETAS
========================== */

.card{

    background:var(--tarjeta);

    border-radius:18px;

    padding:25px;

    margin-bottom:25px;

    box-shadow:var(--sombra);

    border:1px solid var(--borde);

}

/* ==========================
   BADGE
========================== */

.badge{

    display:inline-block;

    padding:6px 14px;

    background:var(--color-principal);

    color:white;

    border-radius:30px;

    font-size:.85rem;

    margin-bottom:15px;

}

/* ==========================
   SIGUIENTE CLASE
========================== */

.siguiente-clase h2{

    margin-bottom:20px;

    font-size:2rem;

}

.datos{

    display:flex;

    flex-direction:column;

    gap:12px;

    font-size:1.05rem;

}

/* ==========================
   BARRA
========================== */

.barra{

    margin-top:25px;

    width:100%;

    height:12px;

    border-radius:20px;

    overflow:hidden;

    background:#d1d5db;

}

.progreso{

    width:0%;

    height:100%;

    background:var(--color-principal);

    transition:.5s;

}

/* ==========================
   LISTA HORARIO
========================== */

#listaHorario{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-top:20px;

}

.clase{

    display:grid;

    grid-template-columns:90px 1fr auto;

    align-items:center;

    gap:20px;

    padding:18px;

    border-radius:14px;

    border:1px solid var(--borde);

    transition:.25s;

}

.clase:hover{

    transform:translateY(-2px);

    box-shadow:var(--sombra);

}

.hora{

    font-weight:bold;

    font-size:1.1rem;

}

.info h3{

    margin-bottom:5px;

}

.info p{

    color:var(--texto-secundario);

}

.estado{

    font-weight:bold;

}

/* ==========================
   ESTADOS
========================== */

.futura{

    border-left:8px solid var(--color-principal);

}

.actual{

    border-left:8px solid var(--color-exito);

    background:rgba(34,197,94,.08);

}

.terminada{

    opacity:.55;

    border-left:8px solid var(--color-peligro);

}

.proxima{

    border-left:8px solid var(--color-alerta);

}

/* ==========================
   BOTON TEMA
========================== */

.tema{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:1.5rem;

    background:var(--color-principal);

    color:white;

    box-shadow:var(--sombra);

    transition:.25s;

}

.tema:hover{

    transform:scale(1.08);

}

/* ==========================
   OCULTO
========================== */

.oculto{

    display:none;

}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:768px){

    .header{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }

    .fecha-hora{

        text-align:center;

    }

    .clase{

        grid-template-columns:1fr;

        text-align:center;

    }

    .estado{

        margin-top:10px;

    }

    .siguiente-clase h2{

        font-size:1.5rem;

    }

}