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

body {
        background-color: #f8f9fa;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #333;
}

/* ===== NAVBAR ===== */
.navbar {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        background-color: #fff !important;
}

.navbar-brand {
        font-weight: 700;
        color: #667eea !important;
        font-size: 1.5rem;
}

.nav-link {
        font-weight: 500;
        color: #333 !important;
        transition: color 0.3s ease;
}

.nav-link:hover {
        color: #667eea !important;
}

/* ===== FOOTER ===== */
footer {
        background-color: #2c3e50;
        color: white;
        margin-top: 50px;
}

footer a {
        transition: color 0.3s ease;
}

footer a:hover {
        color: #667eea;
}

/* ===== CARDS ===== */
.card {
        border: none;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
}

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

/* ===== BOTONES ===== */
.btn {
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
}

.btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
}

.btn-primary:hover {
        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        color: white;
}

.btn-success {
        background-color: #2ecc71;
        border: none;
}

.btn-success:hover {
        background-color: #27ae60;
        color: white;
}

.btn-danger {
        background-color: #e74c3c;
        border: none;
}

.btn-danger:hover {
        background-color: #c0392b;
        color: white;
}

.btn-submit {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        font-weight: 600;
        width: 100%;
        padding: 12px;
        border-radius: 8px;
        transition: all 0.3s ease;
}

.btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        color: white;
}

/* ===== FORMULARIOS ===== */
.form-control,
.form-select {
        border-radius: 8px;
        border: 1px solid #ddd;
        padding: 10px 15px;
        transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-label {
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
}

/* ===== ALERTAS ===== */
.alert {
        border: none;
        border-radius: 8px;
        border-left: 4px solid;
}

.alert-success {
        border-left-color: #2ecc71;
        background-color: #ecf7ee;
        color: #27ae60;
}

.alert-danger {
        border-left-color: #e74c3c;
        background-color: #fdeaea;
        color: #c0392b;
}

.alert-warning {
        border-left-color: #f39c12;
        background-color: #fef5e7;
        color: #d68910;
}

.alert-info {
        border-left-color: #3498db;
        background-color: #ebf5fb;
        color: #2874a6;
}

/* ===== PRODUCTOS ===== */
.producto-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
        overflow: hidden;
        transition: all 0.3s ease;
}

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

.producto-imagen {
        max-height: 300px;
        object-fit: cover;
        width: 100%;
}

.producto-info {
        padding: 20px;
}

.producto-precio {
        font-size: 1.8rem;
        color: #2ecc71;
        font-weight: bold;
        margin: 15px 0;
}

.producto-titulo {
        color: #333;
        margin-bottom: 10px;
        font-weight: 600;
}

.producto-codigo {
        color: #6c757d;
        font-size: 0.9rem;
}

.frase-promocional {
        font-style: italic;
        color: #555;
        border-left: 4px solid #f39c12;
        padding-left: 15px;
        margin: 15px 0;
}

.btn-comprar {
        width: 100%;
        margin-top: 15px;
}

/* ===== FILTROS ===== */
.filtros-panel {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 30px;
}

.categoria-btn {
        margin-bottom: 8px;
}

.badge-categoria {
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 8px;
}

.buscador-seccion {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 30px;
}

.filtros-activos {
        background: #ebf5fb;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
        border-left: 4px solid #3498db;
}

.filtro-tag {
        display: inline-block;
        background: #667eea;
        color: white;
        padding: 8px 15px;
        border-radius: 20px;
        margin-right: 8px;
        margin-bottom: 8px;
        font-size: 0.85rem;
}

.no-resultados {
        text-align: center;
        padding: 40px 20px;
}

/* ===== TABLAS ===== */
.table {
        background: white;
        border-radius: 8px;
        overflow: hidden;
}

.table thead {
        background-color: #667eea;
        color: white;
}

.table tbody tr:hover {
        background-color: #f8f9fa;
}

/* ===== CONTACTO ===== */
.contacto-container {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 30px;
}

/* ===== LOGIN/REGISTRO ===== */
.auth-container {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 30px;
}

/* ===== PERFIL ===== */
.perfil-container {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.perfil-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px;
        border-radius: 8px 8px 0 0;
}

.perfil-header h2 {
        margin: 0;
        font-weight: 700;
}

.perfil-body {
        padding: 30px;
}

.form-section {
        margin-bottom: 30px;
}

.form-section h5 {
        color: #667eea;
        font-weight: 600;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #667eea;
}

/* ===== ADMIN ===== */
.sidebar {
        background: #2c3e50;
        color: white;
        min-height: 100vh;
        padding: 20px 0;
}

.sidebar a {
        color: #ecf0f1;
        text-decoration: none;
        padding: 10px 20px;
        display: block;
        transition: 0.3s;
}

.sidebar a:hover,
.sidebar a.active {
        background: #34495e;
        color: #667eea;
}

.card-stat {
        background: white;
        border-left: 4px solid #3498db;
        border-radius: 8px;
}

.card-stat.usuarios {
        border-left-color: #2ecc71;
}

.card-stat.productos {
        border-left-color: #f39c12;
}

.card-stat.contactos {
        border-left-color: #e74c3c;
}

.stat-number {
        font-size: 2rem;
        font-weight: bold;
}

/* ===== CARRITO ===== */
.tabla-carrito {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.resumen-carrito {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
}

.vacio-carrito {
        text-align: center;
        padding: 60px 20px;
}

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {
        .producto-precio {
                font-size: 1.5rem;
        }

        .card {
                margin-bottom: 20px;
        }
}