.login-box {
    max-width: 400px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.login-box input {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.login-box button {
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: #d60000;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.login-switch {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.login-switch button {
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: #eee;
    cursor: pointer;
    font-weight: bold;
}

.login-switch button:hover {
    background: #d60000;
    color: white;
}

/* ================= BOTÓN PUBLICAR PRO ================= */

.btn-publicar,
button[onclick*="publicar"],
button[onclick*="publicar.html"] {
    background: #d60000 !important;
    color: white !important;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 12px rgba(214, 0, 0, 0.25);
}

.btn-publicar:hover,
button[onclick*="publicar"]:hover {
    background: #b80000 !important;
    transform: scale(1.05);
}

/* ================= BOTÓN LOGIN / INICIAR SESIÓN ================= */

.login-btn,
button[onclick*="login"],
button[onclick*="login.html"],
button[onclick*="Iniciar"] {
    background: #ffe600 !important;
    color: #000 !important;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.login-btn:hover {
    background: #f5d800 !important;
    transform: scale(1.05);
}


/* iniciar sesion */

.perfil-btn{
    text-decoration:none;
}

.perfil-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#d60000;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:18px;
    cursor:pointer;
    transition:.2s;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.perfil-avatar:hover{
    transform:scale(1.08);
    background:#b30000;
}