/* Tarjetas más modernas */
    .producto-card .card

{
    border-radius: 10px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.producto-card .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Imágenes con fondo limpio */
.producto-card .card-img-top {
    background: #fafafa;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

/* Títulos de producto más claros */
.producto-card .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
}


/* Sidebar más elegante */
.sidebar-card {
    border-radius: 12px;
    overflow: hidden;
}

    .sidebar-card .card-header {
        font-size: 1.05rem;
        letter-spacing: .5px;
    }

    .sidebar-card ul li {
        padding: 6px 0;
    }

        .sidebar-card ul li a:hover {
            color: #d00;
        }

/* Imágenes con fondo limpio */
.producto-card .card-img-top {
    background: #fafafa;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

/* Animación suave al cargar */
.producto-card {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp .4s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Botones más profesionales */
.btn-primary {
    background-color: #007bff;
    border: none;
    font-weight: 600;
    transition: background-color .15s ease, transform .15s ease;
}

    .btn-primary:hover {
        background-color: #0056d2;
        transform: translateY(-2px);
    }

.btn-outline-primary {
    font-weight: 600;
    border-width: 2px;
}

    .btn-outline-primary:hover {
        background-color: #007bff;
        color: white;
    }


/* Tema Rojo Corporativo */
h1, h2, h3, h4, h5 {
    color: #b30000;
    font-weight: 700;
}

/* Bordes y detalles */
.card {
    border-color: #e6b3b3;
}

/* Sidebar rojo corporativo */
.sidebar-card .card-header {
    background-color: #b30000;
    color: white;
}

/* Enlaces con hover rojo */
a:hover {
    color: #b30000;
}

/* Botón primario rojo corporativo */
.btn-primary {
    background-color: #b30000;
}

    .btn-primary:hover {
        background-color: #8a0000;
    }

/* Botón primario rojo corporativo */
.btn-primary {
    background-color: #b30000;
}

    .btn-primary:hover {
        background-color: #8a0000;
    }

/* Sidebar con scroll interno */
.sidebar-card {
    max-height: 70vh; /* Altura máxima del sidebar */
    overflow-y: auto; /* Scroll vertical */
    scrollbar-width: thin; /* Scroll delgado (Firefox) */
}

    /* Scrollbar estilizado (Chrome, Edge) */
    .sidebar-card::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-card::-webkit-scrollbar-thumb {
        background-color: #b30000;
        border-radius: 10px;
    }

    .sidebar-card::-webkit-scrollbar-track {
        background: #f2f2f2;
    }

/* Sidebar con scroll interno */
.sidebar-card {
    max-height: 70vh; /* Altura máxima del sidebar */
    overflow-y: auto; /* Scroll vertical */
    scrollbar-width: thin; /* Scroll delgado (Firefox) */
}

    /* Scrollbar estilizado (Chrome, Edge) */
    .sidebar-card::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-card::-webkit-scrollbar-thumb {
        background-color: #b30000;
        border-radius: 10px;
    }

    .sidebar-card::-webkit-scrollbar-track {
        background: #f2f2f2;
    }

/* Header moderno y corporativo */
.header-principal {
    background-color: #b30000; /* rojo corporativo */
    padding: 12px 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

    .header-principal .navbar-brand {
        font-size: 1.4rem;
        font-weight: 100;
        color: white !important;
        letter-spacing: 0.5px;
    }

    .header-principal .nav-link {
        color: white !important;
        font-weight: 500;
        margin-right: 15px;
        transition: color .2s ease;
    }

        .header-principal .nav-link:hover {
            color: #ffe6e6 !important;
        }

    .header-principal .form-control {
        border-radius: 20px;
        padding-left: 15px;
    }

    .header-principal .btn-search {
        background-color: white;
        color: #b30000;
        font-weight: 700;
        border-radius: 20px;
        padding: 6px 15px;
    }

        .header-principal .btn-search:hover {
            background-color: #ffe6e6;
        }