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

body{
    font-family:Arial, Helvetica, sans-serif;
    height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#000;
    color:white;
    position:relative;
}

/* FONDO */

.background{

    position:absolute;

    width:100%;
    height:100%;

    background-image:
    url("./img/elpueblo.png");

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

    filter:
    blur(3px)
    brightness(0.35);

    transform:scale(1.05);
}

.overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:
    linear-gradient(
        rgba(0,0,0,0.3),
        rgba(0,0,0,0.7)
    );
}

/* CONTENEDOR */

.container{

    position:relative;
    z-index:2;

    width:460px;

    padding:35px;

    border-radius:25px;

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,0.15);

    box-shadow:
    0 0 25px rgba(0,255,255,0.25),
    0 0 60px rgba(0,0,0,0.7);

    text-align:center;
}

h1{

    margin-bottom:25px;

    color:#00e5ff;

    font-size:34px;

    letter-spacing:2px;

    text-shadow:
    0 0 15px #00e5ff;
}

/* TIMER */

.timer{

    font-size:52px;

    margin-bottom:30px;

    font-weight:bold;

    text-shadow:
    0 0 10px #00e5ff,
    0 0 25px #00e5ff;
}

/* BOTONES */

.buttons{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;
}

button{

    border:none;

    padding:14px;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:bold;

    transition:0.3s;
}

button:hover{

    transform:scale(1.05);
}

.start-btn{
    background:#00c853;
    color:white;
}

.lap-btn{
    background:#2962ff;
    color:white;
}

.reset-btn{
    background:#ff9100;
    color:white;
}

.delete-btn{

    background:#d50000;

    color:white;

    grid-column:span 2;
}

/* LISTA */

.laps-container{

    margin-top:30px;

    text-align:left;
}

.laps-container h2{

    margin-bottom:15px;

    color:#00e5ff;
}

#lapsList{

    list-style:none;

    max-height:220px;

    overflow-y:auto;
}

#lapsList li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

    padding:12px;

    border-radius:10px;

    background:rgba(255,255,255,0.08);

    border-left:4px solid #00e5ff;
}

.delete-item{

    background:#ff1744;

    color:white;

    border:none;

    padding:8px 12px;

    border-radius:8px;

    cursor:pointer;
}

/* MODAL */

.modal{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,0.8);

    z-index:10;
}

.modal-content{

    width:320px;

    padding:30px;

    border-radius:20px;

    background:#111827;

    text-align:center;
}

.modal-content h3{

    margin-bottom:15px;
}

.modal-content p{

    margin-bottom:20px;

    color:#cbd5e1;
}

.modal-buttons{

    display:flex;

    gap:10px;
}

.modal-buttons button{

    flex:1;
}

.confirm-btn{

    background:#d50000;

    color:white;
}

.cancel-btn{

    background:#475569;

    color:white;
}