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

/* ========================= */
/* BODY */
/* ========================= */

body{
    font-family: 'Orbitron', sans-serif;

    background:
    linear-gradient(rgba(0,0,0,.7),
    rgba(0,0,0,.8)),
    url("../img/drl_lab.jpg");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    min-height: 100vh;

    color: white;

    overflow-x: hidden;
}

/* CAPA OSCURA */

.overlay{
    position: fixed;
    inset: 0;

    background:
    radial-gradient(circle at top,
    rgba(0,180,255,.15),
    transparent 60%);

    pointer-events: none;
}

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

.container{

    width: 90%;
    max-width: 750px;

    margin: 40px auto;

    padding: 30px;

    border-radius: 20px;

    background:
    linear-gradient(
    145deg,
    rgba(25,25,35,.95),
    rgba(10,10,20,.95));

    border: 2px solid #00bfff;

    box-shadow:
    0 0 20px rgba(0,191,255,.4),
    0 0 40px rgba(0,191,255,.2);

    backdrop-filter: blur(6px);

    animation: aparecer 1s ease;
}

/* ========================= */
/* TITULOS */
/* ========================= */

.titulo{

    text-align: center;

    font-size: 2.8rem;

    color: #7dd3fc;

    text-shadow:
    0 0 10px #38bdf8,
    0 0 20px #0ea5e9;

    margin-bottom: 10px;

    animation: brillo 3s infinite;
}

.subtitulo{

    text-align: center;

    margin-bottom: 25px;

    color: #94a3b8;

    letter-spacing: 2px;
}

/* ========================= */
/* BOTONES */
/* ========================= */

button{

    border: none;

    cursor: pointer;

    transition: .3s;
}

#btnPortafolio{

    width: 100%;

    margin-bottom: 25px;

    padding: 15px;

    border-radius: 12px;

    font-weight: bold;

    background:
    linear-gradient(90deg,
    #2563eb,
    #06b6d4);

    color: white;

    box-shadow:
    0 0 15px rgba(0,191,255,.5);
}

#btnPortafolio:hover{

    transform: scale(1.03);

    box-shadow:
    0 0 25px rgba(0,191,255,.8);
}

/* ========================= */
/* FORM */
/* ========================= */

.form{

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-bottom: 20px;
}

input,
select,
textarea{

    width: 100%;

    padding: 14px;

    border-radius: 10px;

    border: 2px solid #1e3a8a;

    background:
    rgba(15,23,42,.9);

    color: white;

    font-size: 15px;

    font-family: inherit;

    transition: .3s;
}

input:focus,
select:focus,
textarea:focus{

    outline: none;

    border-color: #38bdf8;

    box-shadow:
    0 0 15px rgba(56,189,248,.5);
}

textarea{

    resize: vertical;

    min-height: 120px;
}

/* ========================= */
/* BOTON AGREGAR */
/* ========================= */

#btnAgregar{

    padding: 15px;

    border-radius: 12px;

    background:
    linear-gradient(
    90deg,
    #0ea5e9,
    #2563eb);

    color: white;

    font-weight: bold;

    letter-spacing: 1px;
}

#btnAgregar:hover{

    transform: translateY(-2px);

    box-shadow:
    0 0 20px rgba(14,165,233,.6);
}

/* ========================= */
/* FILTROS */
/* ========================= */

.filtros{

    display: flex;

    gap: 10px;

    margin: 20px 0;
}

.filtros button{

    flex: 1;

    padding: 12px;

    border-radius: 10px;

    background:
    rgba(30,41,59,.9);

    color: white;

    border: 1px solid #334155;
}

.filtros button:hover{

    background: #0f172a;
}

.filtros .activo{

    background:
    linear-gradient(
    90deg,
    #0284c7,
    #2563eb);

    box-shadow:
    0 0 15px rgba(59,130,246,.5);
}

/* ========================= */
/* TAREAS */
/* ========================= */

.tarea{

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    padding: 18px;

    margin-bottom: 15px;

    border-radius: 14px;

    background:
    rgba(15,23,42,.95);

    border-left: 6px solid gray;

    transition: .3s;
}

.tarea:hover{

    transform: translateX(5px);

    box-shadow:
    0 0 20px rgba(59,130,246,.3);
}

.tarea strong{

    font-size: 1rem;

    color: #e2e8f0;
}

.tarea small{

    display: block;

    margin-top: 5px;

    color: #94a3b8;
}

.tarea p{

    margin-top: 8px;

    color: #cbd5e1;
}

/* COMPLETADA */

.completada{

    opacity: .5;

    text-decoration: line-through;
}

/* PRIORIDADES */

.prioridad-alta{

    border-left-color: #ef4444;
}

.prioridad-media{

    border-left-color: #f59e0b;
}

.prioridad-baja{

    border-left-color: #22c55e;
}

/* BOTONES TAREA */

.botones{

    display: flex;

    gap: 10px;
}

.btn-completar,
.btn-eliminar{

    width: 42px;
    height: 42px;

    border-radius: 50%;

    font-size: 18px;

    color: white;
}

.btn-completar{

    background:
    linear-gradient(
    135deg,
    #22c55e,
    #15803d);
}

.btn-eliminar{

    background:
    linear-gradient(
    135deg,
    #ef4444,
    #b91c1c);
}

.btn-completar:hover,
.btn-eliminar:hover{

    transform: scale(1.1);
}

/* ========================= */
/* ANIMACIONES */
/* ========================= */

@keyframes aparecer{

    from{

        opacity: 0;
        transform: translateY(30px);

    }

    to{

        opacity: 1;
        transform: translateY(0);

    }
}

@keyframes brillo{

    0%{

        text-shadow:
        0 0 10px #38bdf8;

    }

    50%{

        text-shadow:
        0 0 25px #0ea5e9,
        0 0 40px #38bdf8;

    }

    100%{

        text-shadow:
        0 0 10px #38bdf8;

    }
}