/* =========================================================
   Natura Consultora - Tema blanco + rosa pastel
   ========================================================= */

:root {
    --np-pink: #f4b8cf;
    --np-pink-dark: #e08bae;
    --np-pink-darker: #c96b90;
    --np-pink-light: #fdf1f6;
    --np-pink-lighter: #fff8fb;
    --np-white: #ffffff;
    --np-text: #4a3b42;
    --np-text-soft: #8a7680;
    --np-border: #f2d9e4;
    --np-success: #7fb88f;
    --np-shadow: 0 6px 20px rgba(224, 139, 174, 0.15);
}

body {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    background-color: var(--np-pink-lighter);
    color: var(--np-text);
}

/* ---------- Encabezados y marca ---------- */
.navbar-natura {
    background-color: var(--np-white);
    box-shadow: var(--np-shadow);
}

.navbar-natura .navbar-brand {
    font-weight: 600;
    color: var(--np-pink-darker) !important;
    letter-spacing: .5px;
}

.navbar-natura .nav-link {
    color: var(--np-text) !important;
    font-weight: 500;
}

.navbar-natura .nav-link.active,
.navbar-natura .nav-link:hover {
    color: var(--np-pink-darker) !important;
}

/* ---------- Botones ---------- */
.btn-natura {
    background-color: var(--np-pink);
    border-color: var(--np-pink);
    color: #5c2f43;
    font-weight: 600;
}

.btn-natura:hover,
.btn-natura:focus {
    background-color: var(--np-pink-dark);
    border-color: var(--np-pink-dark);
    color: #ffffff;
}

.btn-outline-natura {
    border-color: var(--np-pink-dark);
    color: var(--np-pink-darker);
    font-weight: 600;
    background-color: transparent;
}

.btn-outline-natura:hover {
    background-color: var(--np-pink-dark);
    color: #fff;
}

.btn-whatsapp {
    background-color: #25D366;
    border-color: #25D366;
    color: #fff;
    font-weight: 600;
}

.btn-whatsapp:hover {
    background-color: #1ebc59;
    border-color: #1ebc59;
    color: #fff;
}

/* ---------- Tarjetas de producto ---------- */
.card-producto {
    border: 1px solid var(--np-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--np-white);
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}

.card-producto:hover {
    transform: translateY(-4px);
    box-shadow: var(--np-shadow);
}

.card-producto .card-img-top {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--np-pink-light);
}

.card-producto .categoria-badge {
    background-color: var(--np-pink-light);
    color: var(--np-pink-darker);
    font-weight: 600;
    font-size: .75rem;
}

.card-producto .precio {
    color: var(--np-pink-darker);
    font-weight: 700;
    font-size: 1.15rem;
}

.badge-agotado {
    background-color: #d98a8a;
}

/* ---------- Secciones / hero ---------- */
.hero-natura {
    background: linear-gradient(135deg, var(--np-pink-light) 0%, var(--np-white) 100%);
    border-bottom: 1px solid var(--np-border);
}

.section-title {
    color: var(--np-pink-darker);
    font-weight: 700;
}

footer.footer-natura {
    background-color: var(--np-white);
    border-top: 1px solid var(--np-border);
    color: var(--np-text-soft);
}

/* ---------- Panel de administración ---------- */
.sidebar-admin {
    background-color: var(--np-white);
    min-height: 100vh;
    border-right: 1px solid var(--np-border);
}

.sidebar-admin .nav-link {
    color: var(--np-text);
    border-radius: 10px;
    margin-bottom: 4px;
    font-weight: 500;
}

.sidebar-admin .nav-link.active {
    background-color: var(--np-pink-light);
    color: var(--np-pink-darker);
    font-weight: 600;
}

.sidebar-admin .nav-link:hover {
    background-color: var(--np-pink-light);
}

.topbar-admin {
    background-color: var(--np-white);
    border-bottom: 1px solid var(--np-border);
}

/* El panel de administración usa un layout flex (sidebar + contenido).
   Sin esto, un elemento ancho dentro del contenido (una tabla grande,
   por ejemplo) empuja todo el contenedor flex y aparece scroll
   horizontal en toda la página en vez de solo dentro de la tabla. */
.contenido-admin {
    min-width: 0;
}

.stat-card {
    background: var(--np-white);
    border: 1px solid var(--np-border);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: var(--np-shadow);
}

.stat-card .stat-valor {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--np-pink-darker);
}

.stat-card .stat-icono {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background-color: var(--np-pink-light);
    color: var(--np-pink-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.login-natura {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--np-pink-light) 0%, var(--np-white) 60%);
    display: flex;
    align-items: center;
}

.login-natura .card {
    border: none;
    border-radius: 18px;
    box-shadow: var(--np-shadow);
}

.table-natura thead {
    background-color: var(--np-pink-light);
}

.table-natura thead th {
    color: var(--np-pink-darker);
    border-bottom: none;
    font-weight: 600;
}

/* miniatura de producto en tablas admin */
.foto-mini {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--np-border);
}

.form-label {
    font-weight: 600;
    color: var(--np-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--np-pink-dark);
    box-shadow: 0 0 0 .2rem rgba(224, 139, 174, .25);
}