/* ================= BASE ================= */

body{
    font-family:'Segoe UI', sans-serif;
    background: var(--beige-claro);
    margin:0;
    padding:40px;
    color: var(--gris);
}

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

.container{
    max-width:1100px;
    margin:auto;
    background: var(--blanco);
    padding:30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border:1px solid #f1e6dc;
    animation: fadeUp 0.3s ease;
}

.container h2{
    color: var(--marron-oscuro);
    margin-bottom:20px;
    font-size:20px;
    letter-spacing:0.5px;
}

/* ================= MENSAJES ================= */

.mensaje{
    padding:12px 16px;
    border-radius:10px;
    margin-bottom:20px;
    font-size:14px;
    font-weight:500;
    animation: fadeUp 0.3s ease;
}

.mensaje.exito{
    background:#eaf4e4;
    color: var(--verde);
    border:1px solid #d8e9ce;
}

.mensaje.error{
    background:#fbe4e6;
    color: var(--rojo);
    border:1px solid #f3c7cc;
}

.oculto{
    display:none;
}

/* ================= GRID PRODUCTOS ================= */

#listaIntermedios{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:18px;
}

/* ================= CARD PRODUCTO ================= */

.card-intermedio{
    background: linear-gradient(145deg,#ffffff,#f7f2ec);
    border-radius: var(--radius);
    padding:18px;
    box-shadow: var(--shadow);
    border:1px solid #f1e6dc;
    transition:0.25s ease;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.card-intermedio:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,0.06);
}

.card-intermedio h3{
    margin:0 0 10px 0;
    font-size:16px;
    color: var(--marron-oscuro);
}

.card-intermedio p{
    font-size:14px;
    margin-bottom:6px;
    color: var(--gris);
}

.card-intermedio .precio{
    margin-top:10px;
    font-weight:bold;
    font-size:16px;
    color: var(--marron);
}

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

.card-intermedio .acciones{
    margin-top:15px;
    display:flex;
    gap:10px;
}

.card-intermedio button{
    flex:1;
    padding:8px;
    font-size:13px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    transition:0.2s ease;
}

.card-intermedio .btn-editar{
    background: var(--acento);
    color:white;
}

.card-intermedio .btn-editar:hover{
    background:#c89263;
}

.card-intermedio .btn-eliminar{
    background: var(--rojo);
    color:white;
}

.card-intermedio .btn-eliminar:hover{
    background:#942f3c;
}

/* ================= EMPTY ================= */

.empty{
    color:#9b8c83;
    font-style:italic;
}

/* ================= ANIMACIÓN ================= */

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

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

@media(max-width:600px){
    body{
        padding:20px;
    }

    .container{
        padding:20px;
    }

    .container h2{
        font-size:18px;
    }
}