/* ================================================================
   BASE - Tipografía, Navbar, Botones, Cards, Footer, Forms
   ================================================================ */

/* ── Tipografía ─────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-weight: 400; color: var(--color-text); }
.display-4 { font-weight: 300 !important; letter-spacing: 2px; }

body {
    background: var(--color-bg);
    color: var(--color-text);
}

/* ── Navbar ──────────────────────────────────────── */
.navbar {
    background: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.navbar-brand { 
    color: var(--color-primary-dark) !important; 
    letter-spacing: 1px;
    font-weight: 500;
}
.nav-link { color: var(--color-text-light) !important; }
.nav-link:hover { color: var(--color-primary) !important; }
.navbar .btn-outline-secondary {
    border-color: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--border-radius);
}
.navbar .btn-outline-secondary:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ── Botones globales ────────────────────────────── */
.btn-dark {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: var(--border-radius) !important;
    padding: 12px 28px !important;
    font-weight: 500;
}
.btn-dark:hover {
    background: var(--color-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn-outline-dark {
    border-color: var(--color-primary) !important;
    border-radius: var(--border-radius) !important;
    color: var(--color-primary) !important;
}
.btn-outline-dark:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* ── Cards ───────────────────────────────────────── */
.card {
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-white);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { 
    transform: translateY(-2px); 
    box-shadow: var(--shadow-md); 
}

/* ── Footer ──────────────────────────────────────── */
footer { 
    background: #3D2C4A !important;
    color: #B19CD9 !important;
}
footer a { color: #B19CD9 !important; }
footer a:hover { color: #E6E6FA !important; }
footer hr { border-color: #5E3F82 !important; }

/* ── Badges ──────────────────────────────────────── */
.badge.bg-success { background: var(--color-success) !important; }
.badge.bg-warning { background: var(--color-warning) !important; color: #fff !important; }
.badge.bg-danger { background: var(--color-danger) !important; }
.badge.bg-info { background: var(--color-info) !important; color: #fff !important; }
.badge.bg-primary { background: var(--color-primary) !important; }

/* ── Breadcrumb ──────────────────────────────────── */
.breadcrumb {
    background: transparent;
    padding: 0;
}
.breadcrumb-item a { color: var(--color-text-muted); }
.breadcrumb-item.active { color: var(--color-text); }

/* ── Alert ───────────────────────────────────────── */
.alert {
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

/* ── Form controls ───────────────────────────────── */
.form-control, .form-select {
    border-color: var(--color-border);
    border-radius: var(--border-radius);
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(125, 91, 166, 0.15);
}

/* ── Paginación ──────────────────────────────────── */
.pagination .page-link {
    border-radius: var(--border-radius-sm);
    border-color: var(--color-border);
    color: var(--color-text);
}
.pagination .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.pagination .page-link:hover {
    background: var(--color-surface);
    color: var(--color-primary-dark);
}

/* ── Dropdown ────────────────────────────────────── */
.dropdown-menu {
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}
.dropdown-item:hover {
    background: var(--color-surface);
}

/* ── Nav icon only (accesibilidad) ───────────────── */
.nav-icon-only {
    font-size: 1.2rem;
    padding: 0.4rem 0.6rem;
    line-height: 1;
    border-radius: var(--border-radius-sm);
    transition: background 0.2s ease;
}
.nav-icon-only:hover {
    background: var(--color-surface);
}

/* ── Botón Entrar navbar ─────────────────────────── */
.navbar .btn-outline-dark.btn-sm {
    padding: 8px 16px;
    font-weight: 500;
    font-size: 0.9rem;
}

/* ── Admin: formulario producto ─────────────────── */
.admin-img-preview {
    max-width: 200px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.admin-thumb-preview {
    max-width: 80px;
    border-radius: 4px;
}
.admin-color-preview {
    max-width: 60px;
    border-radius: 4px;
}
.admin-input-talla { width: 80px; }
.admin-input-precio { width: 100px; }
.admin-input-stock { width: 80px; }
.admin-input-peso { width: 80px; }