/* ============================================================
   La Coralería Platform — Design Tokens
   Versión: 1.2
   ============================================================ */

:root {
    /* --- Colores primarios (marca) --- */
    --lc-navy: #1E2D6B;
    --lc-purple: #7B3FA0;
    --lc-amber: #F5A623;
    --lc-white: #FFFFFF;
    /* --- Colores secundarios --- */
    --lc-purple-light: #9B5CC0;
    --lc-purple-soft: #F3EAF9;
    --lc-navy-light: #2E4080;
    --lc-amber-soft: #FEF3DC;
    /* --- Escala de grises --- */
    --lc-gray-50: #F8F9FA;
    --lc-gray-100: #F1F3F5;
    --lc-gray-200: #E9ECEF;
    --lc-gray-300: #DEE2E6;
    --lc-gray-400: #CED4DA;
    --lc-gray-500: #ADB5BD;
    --lc-gray-600: #6C757D;
    --lc-gray-700: #495057;
    --lc-gray-800: #343A40;
    --lc-gray-900: #212529;
    /* --- Colores de estado --- */
    --lc-success: #2E7D32;
    --lc-success-bg: #E8F5E9;
    --lc-error: #C62828;
    --lc-error-bg: #FFEBEE;
    --lc-warning: #E65100;
    --lc-warning-bg: #FFF3E0;
    --lc-info: #1565C0;
    --lc-info-bg: #E3F2FD;
    /* --- Fondos y superficies ---
       bg-body en blanco puro para que las tarjetas no floten
       sobre un fondo gris visible. */
    --lc-bg-body: #FFFFFF;
    --lc-bg-surface: #FFFFFF;
    --lc-bg-overlay: rgba(30, 45, 107, 0.06);
    --lc-bg-header: #1E2D6B;
    /* --- Tipografía --- */
    --lc-font-body: 'Nunito', system-ui, sans-serif;
    --lc-font-display: 'DM Serif Display', Georgia, serif;
    --lc-text-xs: 0.75rem;
    --lc-text-sm: 0.875rem;
    --lc-text-base: 1rem;
    --lc-text-lg: 1.125rem;
    --lc-text-xl: 1.25rem;
    --lc-text-2xl: 1.5rem;
    --lc-text-3xl: 1.875rem;
    --lc-text-4xl: 2.25rem;
    --lc-weight-light: 300;
    --lc-weight-regular: 400;
    --lc-weight-semibold: 600;
    --lc-weight-bold: 700;
    --lc-leading-tight: 1.25;
    --lc-leading-normal: 1.5;
    --lc-leading-relaxed: 1.75;
    /* --- Espaciado --- */
    --lc-space-1: 0.25rem; /*  4px */
    --lc-space-2: 0.5rem; /*  8px */
    --lc-space-3: 0.75rem; /* 12px */
    --lc-space-4: 1rem; /* 16px */
    --lc-space-5: 1.25rem; /* 20px */
    --lc-space-6: 1.5rem; /* 24px */
    --lc-space-8: 2rem; /* 32px */
    --lc-space-10: 2.5rem; /* 40px */
    --lc-space-12: 3rem; /* 48px */
    --lc-space-16: 4rem; /* 64px */
    /* --- Bordes y radios --- */
    --lc-radius-sm: 4px;
    --lc-radius-md: 8px;
    --lc-radius-lg: 12px;
    --lc-radius-xl: 16px;
    --lc-radius-full: 9999px;
    --lc-border-color: var(--lc-gray-200);
    --lc-border-color-focus: var(--lc-purple);
    /* --- Sombras --- */
    --lc-shadow-sm: 0 1px 3px rgba(30, 45, 107, 0.08);
    --lc-shadow-md: 0 4px 12px rgba(30, 45, 107, 0.10);
    --lc-shadow-lg: 0 8px 24px rgba(30, 45, 107, 0.12);
    --lc-shadow-card: 0 2px 8px rgba(30, 45, 107, 0.09);
    /* --- Transiciones --- */
    --lc-transition: 150ms ease;
    --lc-transition-slow: 250ms ease;
    /* --- Z-index --- */
    --lc-z-dropdown: 100;
    --lc-z-sticky: 200;
    --lc-z-modal: 300;
    --lc-z-toast: 400;
    /* --- Aliases de compatibilidad con _Layout.cshtml ---
       El <style> inline del layout usa estos nombres cortos.
       Los mapeamos a los tokens canonicos para que todo funcione
       sin necesidad de tocar el HTML. */
    --lc-primary: #1E2D6B;
    --lc-primary-mid: #7B3FA0;
    --lc-accent: #F5A623;
    --lc-text: #343A40;
    --lc-text-soft: #6C757D;
    --lc-border: #E9ECEF;
    --lc-surface-soft: #F8F9FA;
}


/* ============================================================
   Base
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--lc-font-body);
    font-size: var(--lc-text-base);
    font-weight: var(--lc-weight-regular);
    line-height: var(--lc-leading-normal);
    color: var(--lc-gray-800);
    background-color: var(--lc-bg-body);
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--lc-font-body);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-gray-900);
    line-height: var(--lc-leading-tight);
    margin-top: 0;
}

/* Titulos de impacto en tienda publica — aplicar clase .lc-display */
.lc-display {
    font-family: var(--lc-font-display);
    font-weight: var(--lc-weight-regular);
}

a {
    color: var(--lc-purple);
    text-decoration: none;
    transition: color var(--lc-transition);
}

    a:hover {
        color: var(--lc-purple-light);
        text-decoration: underline;
    }


/* ============================================================
   Overrides de Bootstrap — colores de marca
   Trabajan sobre clases Bootstrap existentes sin cambiar el HTML.
   ============================================================ */

/* Fuente base para todos los botones Bootstrap */
.btn {
    font-family: var(--lc-font-body);
    font-weight: var(--lc-weight-semibold);
    border-radius: var(--lc-radius-md);
}

/* btn-primary → navy de marca (antes era azul Bootstrap) */
.btn-primary {
    background-color: var(--lc-navy);
    border-color: var(--lc-navy);
    color: #fff;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .show > .btn-primary.dropdown-toggle {
        background-color: var(--lc-navy-light);
        border-color: var(--lc-navy-light);
        color: #fff;
    }

    .btn-primary:focus-visible {
        box-shadow: 0 0 0 0.25rem rgba(30, 45, 107, 0.35);
    }

/* btn-outline-secondary → ghost neutro de marca */
.btn-outline-secondary {
    color: var(--lc-gray-700);
    border-color: var(--lc-gray-300);
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        background-color: var(--lc-gray-100);
        border-color: var(--lc-gray-400);
        color: var(--lc-gray-800);
    }

/* btn-outline-primary → ghost morado de marca */
.btn-outline-primary {
    color: var(--lc-purple);
    border-color: var(--lc-purple);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: var(--lc-purple-soft);
        border-color: var(--lc-purple);
        color: var(--lc-purple);
    }

/* btn-success → verde WhatsApp refinado */
.btn-success {
    background-color: #25A244;
    border-color: #25A244;
}

    .btn-success:hover,
    .btn-success:focus {
        background-color: #1e8a39;
        border-color: #1e8a39;
    }

/* Links en Bootstrap nav */
.nav-link {
    font-family: var(--lc-font-body);
}

/* Bootstrap .card hereda la apariencia LC */
.card {
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    font-family: var(--lc-font-body);
}

.card-body {
    padding: var(--lc-space-5);
}

/* Bootstrap .badge hereda la apariencia LC */
.badge {
    font-family: var(--lc-font-body);
    font-weight: var(--lc-weight-semibold);
    border-radius: var(--lc-radius-full);
    font-size: var(--lc-text-xs);
    padding: 0.28em 0.65em;
    letter-spacing: 0.02em;
}

    /* "Pago pendiente" / warning → suave de marca */
    .badge.bg-warning,
    .badge.text-bg-warning {
        background-color: var(--lc-warning-bg) !important;
        color: var(--lc-warning) !important;
    }

    /* "Entrega pendiente" / secondary → amber suave */
    .badge.bg-secondary,
    .badge.text-bg-secondary {
        background-color: var(--lc-amber-soft) !important;
        color: #7a4400 !important;
    }

    /* "Pagado" / success → success de marca */
    .badge.bg-success,
    .badge.text-bg-success {
        background-color: var(--lc-success-bg) !important;
        color: var(--lc-success) !important;
    }

    /* "Exclusiva" / "Tienda publica" / primary → purple brand */
    .badge.bg-primary,
    .badge.text-bg-primary {
        background-color: var(--lc-purple-soft) !important;
        color: var(--lc-purple) !important;
    }

/* Tabla backoffice */
.table {
    font-family: var(--lc-font-body);
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-800);
}

    .table thead th {
        font-weight: var(--lc-weight-bold);
        color: var(--lc-gray-700);
        border-bottom: 2px solid var(--lc-gray-200);
        background-color: var(--lc-gray-50);
        padding: var(--lc-space-2) var(--lc-space-3);
    }

    .table tbody td {
        padding: var(--lc-space-2) var(--lc-space-3);
        border-bottom: 1px solid var(--lc-gray-100);
        vertical-align: middle;
    }

.table-hover tbody tr:hover {
    background-color: var(--lc-bg-overlay);
}

/* Links globales — evita que Bootstrap sobreescriba --lc-purple */
a:not(.btn):not(.nav-link):not(.lc-nav-link):not(.dropdown-item):not(.navbar-brand):not(.lc-brand) {
    color: var(--lc-purple);
}

    a:not(.btn):not(.nav-link):not(.lc-nav-link):not(.dropdown-item):not(.navbar-brand):not(.lc-brand):hover {
        color: var(--lc-purple-light);
    }


/* ============================================================
   Navbar — clases reales del _Layout.cshtml
   El layout usa .lc-navbar y .lc-nav-link
   ============================================================ */

.lc-navbar {
    background-color: var(--lc-navy) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}


/* Brand lockup — logotipo + texto en el navbar */
.lc-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: #ffffff !important;
    text-decoration: none;
}

    .lc-brand:hover,
    .lc-brand:focus {
        color: #ffffff !important;
        text-decoration: none;
    }

.lc-brand-logo {
    width: 42px;
    height: 42px;
    border-radius: var(--lc-radius-full);
    object-fit: cover;
    box-shadow: var(--lc-shadow-md);
    background: #ffffff;
}

.lc-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

/* Nav desktop — lista horizontal de links */
.lc-navbar-nav-desktop {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .lc-navbar-nav-desktop .lc-nav-link,
    .lc-navbar-nav-desktop .nav-link {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

/* Separador visual entre grupos de links del nav */
.lc-nav-divider {
    width: 1px;
    height: 1.4rem;
    background: rgba(255, 255, 255, 0.22);
    margin: 0 0.25rem;
    align-self: center;
    display: inline-block;
}

/* Link "Tienda ↗" — pill amber sobre fondo oscuro */
.lc-nav-link--store {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.85rem !important;
    border-radius: var(--lc-radius-full);
    background: rgba(245, 166, 35, 0.15);
    border: 1px solid rgba(245, 166, 35, 0.3);
    color: var(--lc-amber) !important;
    font-weight: var(--lc-weight-bold);
    font-size: var(--lc-text-sm);
    transition: background var(--lc-transition), border-color var(--lc-transition);
}

    .lc-nav-link--store:hover,
    .lc-nav-link--store:focus {
        background: rgba(245, 166, 35, 0.25);
        border-color: rgba(245, 166, 35, 0.5);
        color: var(--lc-amber) !important;
        text-decoration: none;
    }
    background-color: var(--lc-navy) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.lc-navbar .lc-brand-main {
    font-family: var(--lc-font-body);
    font-weight: var(--lc-weight-bold);
    font-size: var(--lc-text-lg);
    color: #ffffff;
    line-height: 1.1;
}

.lc-navbar .lc-brand-sub {
    font-family: var(--lc-font-body);
    font-size: 0.65rem;
    font-weight: var(--lc-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1;
}

.lc-nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: var(--lc-font-body);
    font-weight: var(--lc-weight-semibold);
    font-size: var(--lc-text-sm);
    border-radius: var(--lc-radius-sm);
    transition: color var(--lc-transition), background-color var(--lc-transition);
}

    .lc-nav-link:hover,
    .lc-nav-link:focus {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.10);
        text-decoration: none;
    }

    .lc-nav-link.active {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.15);
    }

/* Dropdown del navbar */
.lc-dropdown-menu {
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    box-shadow: var(--lc-shadow-md);
    padding: 0.35rem 0;
}

.lc-dropdown-item {
    font-family: var(--lc-font-body);
    font-weight: var(--lc-weight-semibold);
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-800);
    padding: 0.45rem 1rem;
}

    .lc-dropdown-item:hover,
    .lc-dropdown-item:focus {
        background-color: var(--lc-purple-soft);
        color: var(--lc-purple);
    }

/* Toggler mobile sobre fondo oscuro */
.lc-navbar-toggler {
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: var(--lc-radius-sm);
    color: #ffffff;
}

    .lc-navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

/* Cart pill — versión nav (fondo blanco semitransparente sobre navbar navy) */
.lc-cart-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.lc-nav-inline-count {
    margin-left: 0.35rem;
}

.lc-cart-pill--nav {
    min-height: 2.5rem;
    padding: 0.3rem 0.55rem 0.3rem 0.9rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--lc-radius-full);
    color: var(--lc-gray-800);
    font-weight: var(--lc-weight-bold);
}

    .lc-cart-pill--nav:hover,
    .lc-cart-pill--nav:focus {
        background: #ffffff;
        color: var(--lc-navy);
        text-decoration: none;
    }

.lc-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    background-color: var(--lc-amber);
    color: var(--lc-navy);
    font-size: 0.72rem;
    font-weight: var(--lc-weight-bold);
    border-radius: var(--lc-radius-full);
    padding: 0 0.3rem;
}

.lc-user-pill {
    font-family: var(--lc-font-body);
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    color: rgba(255, 255, 255, 0.85);
}


/* ============================================================
   Home — clases del Index.cshtml
   ============================================================ */

/* Eyebrow pill sobre el H1 */
.lc-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: var(--lc-radius-full);
    background-color: var(--lc-purple-soft);
    border: 1px solid rgba(123, 63, 160, 0.18);
    color: var(--lc-purple);
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    letter-spacing: 0.01em;
}

/* Titulo principal de la home */
.lc-page-title {
    font-family: var(--lc-font-body);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: var(--lc-leading-tight);
}

.lc-lead {
    color: var(--lc-gray-700);
    font-size: var(--lc-text-lg);
    line-height: var(--lc-leading-relaxed);
}

.lc-muted {
    color: var(--lc-gray-600);
    font-size: var(--lc-text-base);
    line-height: var(--lc-leading-relaxed);
}

/* Hero store — variante de home pública con más peso visual */
.lc-hero--store {
    padding: var(--lc-space-10) 0 var(--lc-space-8);
}

@media (min-width: 768px) {
    .lc-hero--store {
        padding: var(--lc-space-12) 0 var(--lc-space-10);
    }
}

/* H1 en DM Serif Display para la home pública */
.lc-hero--store .lc-page-title {
    font-family: var(--lc-font-display);
    font-weight: var(--lc-weight-regular);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    max-width: 14ch;
}

/* Lead del hero — ancho controlado para que no se expanda a todo el container */
.lc-hero--store .lc-lead {
    max-width: 54ch;
}

/* Acciones del hero — separación y alineación */
.lc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-3);
    align-items: center;
}

/* Separador visual entre secciones de la home */
.lc-section-divider {
    height: 1px;
    background: linear-gradient(90deg, var(--lc-gray-200), transparent);
    margin: var(--lc-space-2) 0 var(--lc-space-6);
}

/* Franja de confianza — cierre de página con más respiro */
.lc-assurance-section {
    padding: var(--lc-space-6) 0 var(--lc-space-4);
    border-top: 1px solid var(--lc-gray-200);
    margin-top: var(--lc-space-4);
}


/* ============================================================
   Offcanvas mobile — menú lateral en pantallas pequeñas
   ============================================================ */

.lc-offcanvas-header {
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--lc-navy);
    flex-shrink: 0;
}

.lc-offcanvas-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lc-offcanvas-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: var(--lc-radius-full);
    object-fit: cover;
    background: #ffffff;
}

.lc-offcanvas-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.lc-offcanvas-brand-main {
    color: #ffffff;
    font-size: var(--lc-text-base);
    font-weight: var(--lc-weight-bold);
}

.lc-offcanvas-brand-sub {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* Botón de cerrar el offcanvas */
.lc-offcanvas-close {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--lc-radius-full);
    color: #ffffff;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: background var(--lc-transition);
    flex-shrink: 0;
}

    .lc-offcanvas-close:hover {
        background: rgba(255, 255, 255, 0.22);
    }

.lc-offcanvas-body {
    padding: 0;
    overflow-y: auto;
    background: var(--lc-bg-body);
    display: flex;
    flex-direction: column;
}

/* Secciones del menú mobile */
.lc-mobile-nav-section {
    padding: 0.75rem 1rem 0.5rem;
}

    .lc-mobile-nav-section + .lc-mobile-nav-section {
        border-top: 1px solid var(--lc-gray-200);
    }

.lc-mobile-nav-section-label {
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lc-gray-400);
    padding: 0 0.25rem;
    margin-bottom: 0.45rem;
}

/* Links del menú mobile */
.lc-mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.72rem 0.75rem;
    border-radius: var(--lc-radius-md);
    text-decoration: none;
    font-weight: var(--lc-weight-semibold);
    font-size: var(--lc-text-base);
    color: var(--lc-gray-800);
    transition: background var(--lc-transition), color var(--lc-transition);
}

    .lc-mobile-nav-link:hover,
    .lc-mobile-nav-link:focus {
        background: var(--lc-gray-50);
        color: var(--lc-navy);
        text-decoration: none;
    }

.lc-mobile-nav-link--primary {
    color: var(--lc-navy);
    font-weight: var(--lc-weight-bold);
}

/* Variante "Ver tienda" — pill amber en el menú mobile */
.lc-mobile-nav-link--store {
    background: rgba(245, 166, 35, 0.08);
    color: #b37400;
    font-weight: var(--lc-weight-bold);
    border: 1px solid rgba(245, 166, 35, 0.2);
    margin-top: 0.25rem;
}

    .lc-mobile-nav-link--store:hover,
    .lc-mobile-nav-link--store:focus {
        background: rgba(245, 166, 35, 0.14);
        color: #7a4e00;
    }

/* Sección de sesión al pie del offcanvas */
.lc-mobile-session {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--lc-gray-200);
    background: var(--lc-gray-50);
    margin-top: auto;
}

.lc-mobile-session-label {
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lc-gray-400);
    padding: 0 0.25rem;
    margin-bottom: 0.45rem;
}

.lc-mobile-session-user {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-radius: var(--lc-radius-md);
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-gray-700);
    margin-bottom: 0.4rem;
    background: #ffffff;
    border: 1px solid var(--lc-gray-200);
}


/* ============================================================
   Topbar público — franja informativa sobre el navbar en tienda
   ============================================================ */

.lc-public-topbar {
    background: var(--lc-purple-soft);
    border-bottom: 1px solid rgba(123, 63, 160, 0.12);
}

.lc-public-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
}

.lc-public-topbar-copy {
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-purple);
    text-align: center;
    letter-spacing: 0.01em;
}


/* ============================================================
   Main shell — contenedor principal de contenido
   ============================================================ */

.lc-main-shell {
    padding-top: 1.15rem;
}


/* ============================================================
   Footer público — pie de página en tienda
   ============================================================ */

.lc-public-footer {
    margin-top: 3rem;
    padding: 2.2rem 0 2.6rem;
    border-top: 1px solid var(--lc-gray-200);
    background: var(--lc-gray-50);
}

.lc-footer-grid {
    display: grid;
    gap: 1.3rem;
}

@media (min-width: 768px) {
    .lc-footer-grid {
        grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .lc-footer-brand-block {
        min-height: 100%;
    }
}

.lc-footer-brand-block,
.lc-footer-column {
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    background: var(--lc-white);
    box-shadow: var(--lc-shadow-card);
    padding: 1.25rem;
}

.lc-footer-kicker,
.lc-footer-column-title {
    color: var(--lc-gray-600);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}

.lc-footer-title {
    color: var(--lc-navy);
    font-size: var(--lc-text-xl);
    font-weight: var(--lc-weight-bold);
    margin-bottom: 0.65rem;
}

.lc-footer-copy,
.lc-footer-note {
    color: var(--lc-gray-600);
    margin: 0;
}

    .lc-footer-note + .lc-footer-note {
        margin-top: 0.5rem;
    }

.lc-footer-links-grid {
    display: grid;
    gap: 0.6rem;
}

    .lc-footer-links-grid a {
        text-decoration: none;
        color: var(--lc-gray-800);
        font-weight: var(--lc-weight-bold);
    }

    .lc-footer-links-grid a:hover,
    .lc-footer-links-grid a:focus {
        color: var(--lc-navy);
    }

.lc-footer-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.lc-footer-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    border-radius: var(--lc-radius-full);
    background: rgba(243, 237, 251, 0.55);
    border: 1px solid rgba(106, 51, 161, 0.12);
    color: var(--lc-navy);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
}


/* ============================================================
   Botones propios del sistema LC
   (para cuando se migren pantallas a clases -lc- en lugar de Bootstrap)
   ============================================================ */

.btn-lc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lc-space-2);
    padding: var(--lc-space-2) var(--lc-space-5);
    font-family: var(--lc-font-body);
    font-size: var(--lc-text-base);
    font-weight: var(--lc-weight-semibold);
    line-height: 1.5;
    border-radius: var(--lc-radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--lc-transition), border-color var(--lc-transition), color var(--lc-transition), box-shadow var(--lc-transition);
    white-space: nowrap;
    user-select: none;
}

    .btn-lc:focus-visible {
        outline: 3px solid var(--lc-purple);
        outline-offset: 2px;
    }

    .btn-lc:disabled,
    .btn-lc[aria-disabled="true"] {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

.btn-lc-primary {
    background-color: var(--lc-purple);
    color: var(--lc-white);
    border-color: var(--lc-purple);
}

    .btn-lc-primary:hover {
        background-color: var(--lc-purple-light);
        border-color: var(--lc-purple-light);
        color: var(--lc-white);
        box-shadow: var(--lc-shadow-sm);
        text-decoration: none;
    }

.btn-lc-secondary {
    background-color: var(--lc-navy);
    color: var(--lc-white);
    border-color: var(--lc-navy);
}

    .btn-lc-secondary:hover {
        background-color: var(--lc-navy-light);
        border-color: var(--lc-navy-light);
        color: var(--lc-white);
        text-decoration: none;
    }

.btn-lc-ghost {
    background-color: transparent;
    color: var(--lc-purple);
    border-color: var(--lc-purple);
}

    .btn-lc-ghost:hover {
        background-color: var(--lc-purple-soft);
        color: var(--lc-purple);
        text-decoration: none;
    }

.btn-lc-ghost-neutral {
    background-color: transparent;
    color: var(--lc-gray-600);
    border-color: var(--lc-gray-300);
}

    .btn-lc-ghost-neutral:hover {
        background-color: var(--lc-gray-100);
        color: var(--lc-gray-800);
        text-decoration: none;
    }

.btn-lc-danger {
    background-color: var(--lc-error);
    color: var(--lc-white);
    border-color: var(--lc-error);
}

    .btn-lc-danger:hover {
        background-color: #b71c1c;
        border-color: #b71c1c;
        color: var(--lc-white);
        text-decoration: none;
    }

.btn-lc-sm {
    padding: var(--lc-space-1) var(--lc-space-3);
    font-size: var(--lc-text-sm);
    border-radius: var(--lc-radius-sm);
}

.btn-lc-lg {
    padding: var(--lc-space-3) var(--lc-space-8);
    font-size: var(--lc-text-lg);
    border-radius: var(--lc-radius-lg);
}

.btn-lc-block {
    width: 100%;
}


/* ============================================================
   Badges propios LC
   ============================================================ */

.badge-lc {
    display: inline-flex;
    align-items: center;
    gap: var(--lc-space-1);
    padding: 2px var(--lc-space-2);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-semibold);
    font-family: var(--lc-font-body);
    border-radius: var(--lc-radius-full);
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.badge-lc-success {
    background-color: var(--lc-success-bg);
    color: var(--lc-success);
}

.badge-lc-error {
    background-color: var(--lc-error-bg);
    color: var(--lc-error);
}

.badge-lc-warning {
    background-color: var(--lc-warning-bg);
    color: var(--lc-warning);
}

.badge-lc-info {
    background-color: var(--lc-info-bg);
    color: var(--lc-info);
}

.badge-lc-brand {
    background-color: var(--lc-purple-soft);
    color: var(--lc-purple);
}

.badge-lc-amber {
    background-color: var(--lc-amber-soft);
    color: var(--lc-warning);
}

.badge-lc-neutral {
    background-color: var(--lc-gray-100);
    color: var(--lc-gray-700);
}


/* ============================================================
   Tarjetas propias LC
   ============================================================ */

.card-lc {
    background-color: var(--lc-bg-surface);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    overflow: hidden;
    transition: box-shadow var(--lc-transition-slow);
}

    .card-lc:hover {
        box-shadow: var(--lc-shadow-md);
    }

.card-lc-body {
    padding: var(--lc-space-5);
}

.card-lc-header {
    padding: var(--lc-space-4) var(--lc-space-5);
    border-bottom: 1px solid var(--lc-gray-200);
    font-weight: var(--lc-weight-semibold);
    font-size: var(--lc-text-lg);
    color: var(--lc-gray-900);
}

.card-lc-footer {
    padding: var(--lc-space-3) var(--lc-space-5);
    border-top: 1px solid var(--lc-gray-200);
    background-color: var(--lc-gray-50);
}

.card-lc-product {
    cursor: pointer;
}

    .card-lc-product .card-lc-img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
        background-color: var(--lc-gray-100);
    }

    .card-lc-product .card-lc-name {
        font-size: var(--lc-text-base);
        font-weight: var(--lc-weight-semibold);
        color: var(--lc-gray-900);
        margin-bottom: var(--lc-space-1);
    }

    .card-lc-product .card-lc-price {
        font-size: var(--lc-text-lg);
        font-weight: var(--lc-weight-bold);
        color: var(--lc-navy);
    }

.card-lc-ops {
    border-radius: var(--lc-radius-md);
}

    .card-lc-ops .card-lc-body {
        padding: var(--lc-space-4);
    }


/* ============================================================
   Inputs y selects propios LC
   ============================================================ */

.input-lc,
.select-lc,
.textarea-lc {
    display: block;
    width: 100%;
    padding: var(--lc-space-2) var(--lc-space-3);
    font-family: var(--lc-font-body);
    font-size: var(--lc-text-base);
    font-weight: var(--lc-weight-regular);
    line-height: var(--lc-leading-normal);
    color: var(--lc-gray-800);
    background-color: var(--lc-white);
    border: 1.5px solid var(--lc-gray-300);
    border-radius: var(--lc-radius-md);
    transition: border-color var(--lc-transition), box-shadow var(--lc-transition);
    appearance: none;
}

    .input-lc::placeholder,
    .textarea-lc::placeholder {
        color: var(--lc-gray-400);
    }

    .input-lc:focus,
    .select-lc:focus,
    .textarea-lc:focus {
        outline: none;
        border-color: var(--lc-purple);
        box-shadow: 0 0 0 3px rgba(123, 63, 160, 0.15);
    }

    .input-lc:disabled,
    .select-lc:disabled,
    .textarea-lc:disabled {
        background-color: var(--lc-gray-100);
        color: var(--lc-gray-500);
        cursor: not-allowed;
    }

.input-lc-error,
.select-lc-error,
.textarea-lc-error {
    border-color: var(--lc-error);
}

    .input-lc-error:focus,
    .select-lc-error:focus,
    .textarea-lc-error:focus {
        box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
    }

.input-lc-error-msg {
    display: block;
    margin-top: var(--lc-space-1);
    font-size: var(--lc-text-sm);
    color: var(--lc-error);
}

.label-lc {
    display: block;
    margin-bottom: var(--lc-space-1);
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-gray-700);
}

.select-lc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236C757D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--lc-space-3) center;
    padding-right: var(--lc-space-8);
}

.field-lc {
    margin-bottom: var(--lc-space-4);
}

    .field-lc:last-child {
        margin-bottom: 0;
    }


/* ============================================================
   Alertas propias LC
   ============================================================ */

.alert-lc {
    padding: var(--lc-space-3) var(--lc-space-4);
    border-radius: var(--lc-radius-md);
    border-left: 4px solid transparent;
    font-size: var(--lc-text-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--lc-space-2);
}

.alert-lc-success {
    background-color: var(--lc-success-bg);
    border-left-color: var(--lc-success);
    color: var(--lc-success);
}

.alert-lc-error {
    background-color: var(--lc-error-bg);
    border-left-color: var(--lc-error);
    color: var(--lc-error);
}

.alert-lc-warning {
    background-color: var(--lc-warning-bg);
    border-left-color: var(--lc-warning);
    color: var(--lc-warning);
}

.alert-lc-info {
    background-color: var(--lc-info-bg);
    border-left-color: var(--lc-info);
    color: var(--lc-info);
}

/* ============================================================
   Backoffice — componentes del Dashboard y pantallas internas
   PEGAR AL FINAL de site.css
   ============================================================ */


/* --- Page head (encabezado de sección con kicker + H1) --- */

.lc-page-head {
    margin-bottom: var(--lc-space-6);
}

.lc-kicker {
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lc-gray-500);
    margin-bottom: var(--lc-space-1);
}


/* --- Stat cards (métricas del dashboard) --- */

.lc-stat-card {
    background-color: var(--lc-bg-surface);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-4) var(--lc-space-5);
    height: 100%;
}

.lc-stat-label {
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-gray-600);
    margin-bottom: var(--lc-space-1);
}

.lc-stat-value {
    font-size: var(--lc-text-3xl);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: 1;
    margin-bottom: var(--lc-space-1);
}

.lc-stat-help {
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-500);
}


/* --- Mini stat (contador compacto dentro de panels) --- */

.lc-mini-stat {
    background-color: var(--lc-gray-50);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    padding: var(--lc-space-3) var(--lc-space-4);
}

.lc-mini-stat-label {
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-gray-500);
    margin-bottom: var(--lc-space-1);
}

.lc-mini-stat-value {
    font-size: var(--lc-text-2xl);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: 1;
}


/* --- Panel (contenedor de sección con header y body) --- */

.lc-panel {
    background-color: var(--lc-bg-surface);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    overflow: hidden;
}

.lc-panel-header {
    padding: var(--lc-space-4) var(--lc-space-5);
    border-bottom: 1px solid rgba(30, 45, 107, 0.12);
    background-color: rgba(30, 45, 107, 0.11);
}

.lc-panel-body {
    padding: var(--lc-space-5);
}


/* --- List stack (lista de filas en el dashboard) --- */

.lc-list-stack {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-3);
}

.lc-list-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lc-space-4);
    padding: var(--lc-space-3) var(--lc-space-4);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    background-color: var(--lc-bg-surface);
    transition: background-color var(--lc-transition);
}

    .lc-list-row:hover {
        background-color: var(--lc-bg-overlay);
    }

/* Variante clickable (cuando el row entero es un enlace) */
a.lc-list-row {
    color: inherit;
    text-decoration: none;
    display: flex;
}

    a.lc-list-row:hover {
        color: inherit;
        text-decoration: none;
    }


/* --- Action row (fila de botones de acciones rápidas) --- */

.lc-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
    align-items: center;
}


/* --- Empty state --- */

.lc-empty-state {
    text-align: center;
    padding: var(--lc-space-8) var(--lc-space-4);
    color: var(--lc-gray-500);
}

    .lc-empty-state.compact {
        padding: var(--lc-space-4);
        text-align: left;
        background-color: var(--lc-gray-50);
        border: 1px solid var(--lc-gray-200);
        border-radius: var(--lc-radius-md);
    }


/* --- btn-outline-dark usado en botones "Ver venta" / "Abrir" --- */

.btn-outline-dark {
    color: var(--lc-gray-800);
    border-color: var(--lc-gray-300);
}

    .btn-outline-dark:hover,
    .btn-outline-dark:focus {
        background-color: var(--lc-gray-100);
        border-color: var(--lc-gray-400);
        color: var(--lc-gray-900);
    }


/* --- Badge text-bg-light (canal: Exclusiva, Tienda pública) --- */

.badge.text-bg-light {
    background-color: var(--lc-gray-100) !important;
    color: var(--lc-gray-700) !important;
}


/* ============================================================
   Tienda pública y home — componentes de catálogo
   PEGAR AL FINAL de site.css (después del bloque de backoffice)
   ============================================================ */


/* --- Hero sections --- */

.lc-hero {
    padding: var(--lc-space-4) 0 var(--lc-space-6);
}

.lc-hero--compact {
    padding-bottom: var(--lc-space-4);
}


/* --- Section head (título de sección + botón alineado) --- */

.lc-section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--lc-space-3);
    margin-bottom: var(--lc-space-4);
}

.lc-section-title {
    color: var(--lc-gray-900);
    font-weight: var(--lc-weight-bold);
    margin-bottom: 0.15rem;
}

.lc-section-copy {
    color: var(--lc-gray-600);
    font-size: var(--lc-text-sm);
    margin-bottom: 0;
}


/* --- Chip list y chips (categorías, tags) --- */

.lc-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
    margin-bottom: var(--lc-space-4);
}

.lc-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: var(--lc-radius-full);
    border: 1.5px solid var(--lc-gray-300);
    background-color: var(--lc-white);
    color: var(--lc-gray-700);
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    text-decoration: none;
    transition: border-color var(--lc-transition), color var(--lc-transition), background-color var(--lc-transition);
    white-space: nowrap;
}

a.lc-chip:hover,
a.lc-chip:focus {
    border-color: var(--lc-purple);
    color: var(--lc-purple);
    background-color: var(--lc-purple-soft);
    text-decoration: none;
}


/* --- Tarjeta de catálogo (producto/grupo) --- */

.lc-catalog-card {
    background-color: var(--lc-bg-surface);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--lc-transition-slow), transform var(--lc-transition-slow);
    position: relative;
}

    .lc-catalog-card:hover {
        box-shadow: var(--lc-shadow-md);
        transform: translateY(-2px);
    }

    /* Línea de acento inferior al hover */
    .lc-catalog-card::after {
        content: "";
        position: absolute;
        inset: auto 1rem 0 1rem;
        height: 3px;
        border-radius: var(--lc-radius-full);
        background: linear-gradient(90deg, var(--lc-navy), var(--lc-amber));
        opacity: 0;
        transform: translateY(4px);
        transition: opacity var(--lc-transition-slow), transform var(--lc-transition-slow);
    }

    .lc-catalog-card:hover::after,
    .lc-catalog-card:focus-within::after {
        opacity: 1;
        transform: translateY(0);
    }


/* Variante destacada */
.lc-catalog-card--featured .lc-price {
    font-size: var(--lc-text-xl);
}


/* --- Media frame (contenedor de imagen de tarjeta) --- */

.lc-media-frame {
    overflow: hidden;
    background-color: var(--lc-gray-100);
    flex-shrink: 0;
}

    .lc-media-frame img {
        width: 100%;
        display: block;
        object-fit: cover;
        transition: transform 0.35s ease;
    }

.lc-catalog-card:hover .lc-media-frame img {
    transform: scale(1.03);
}


/* --- Card body (contenido textual de la tarjeta) --- */

.lc-card-body {
    padding: var(--lc-space-4);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0;
}


/* --- Meta row (badges sobre el título) --- */

.lc-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-1);
    margin-bottom: var(--lc-space-2);
}


/* --- Soft badges (Destacado, LPS, Nuevo, etc.) --- */

.lc-soft-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: var(--lc-radius-full);
    border: 1px solid var(--lc-gray-300);
    background-color: var(--lc-white);
    color: var(--lc-gray-600);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-semibold);
    white-space: nowrap;
}

/* Variante warning: "Destacado", "Nuevo" */
.lc-soft-badge-warning {
    background-color: var(--lc-amber-soft);
    border-color: rgba(245, 166, 35, 0.35);
    color: #7a4400;
}


/* --- Card kicker (etiqueta uppercase dentro de tarjeta de catálogo) --- */

.lc-card-kicker {
    color: var(--lc-gray-600);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--lc-space-2);
}


/* --- Price --- */

.lc-price {
    font-size: var(--lc-text-lg);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
}


/* --- Card footnote (pie de tarjeta con "Compra con foto real / Seguimiento directo") --- */

.lc-card-footnote {
    display: flex;
    justify-content: space-between;
    gap: var(--lc-space-2);
    margin-top: auto;
    padding-top: var(--lc-space-3);
    border-top: 1px solid var(--lc-gray-200);
    color: var(--lc-gray-500);
    font-size: var(--lc-text-xs);
}

    .lc-card-footnote strong {
        color: var(--lc-navy);
    }


/* --- Step cards (pasos "Cómo comprar aquí") --- */

.lc-step-card {
    display: flex;
    align-items: flex-start;
    gap: var(--lc-space-3);
    padding: var(--lc-space-3);
    border-radius: var(--lc-radius-md);
    background-color: var(--lc-gray-50);
    border: 1px solid var(--lc-gray-200);
}

.lc-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--lc-radius-full);
    background-color: var(--lc-navy);
    color: #ffffff;
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-bold);
    flex-shrink: 0;
    line-height: 1;
}


/* --- Mini stat card (WYSIWYG real / Seguimiento / Envíos en el hero home) ---
   Distinta de lc-mini-stat del dashboard: más grande, con copy. */

.lc-mini-stat-card {
    background-color: var(--lc-white);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    box-shadow: var(--lc-shadow-sm);
    padding: var(--lc-space-3) var(--lc-space-4);
}

/* lc-mini-stat-label y lc-mini-stat-value ya definidos en el bloque de
   backoffice; aquí solo agregamos lc-mini-stat-copy */
.lc-mini-stat-copy {
    color: var(--lc-gray-600);
    font-size: var(--lc-text-sm);
    margin: var(--lc-space-1) 0 0;
}


/* --- Assurance grid y cards (garantías debajo del hero) --- */

.lc-assurance-grid {
    display: grid;
    gap: var(--lc-space-3);
}

@media (min-width: 768px) {
    .lc-assurance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.lc-assurance-card {
    background-color: var(--lc-white);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    box-shadow: var(--lc-shadow-sm);
    padding: var(--lc-space-4);
}

.lc-assurance-eyebrow {
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-gray-500);
    margin-bottom: var(--lc-space-1);
}

.lc-assurance-title {
    font-size: var(--lc-text-base);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    margin-bottom: var(--lc-space-1);
}

.lc-assurance-copy {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-600);
    margin: 0;
}


/* --- Merch band (franja CTA en home) --- */

.lc-merch-band {
    display: grid;
    gap: var(--lc-space-4);
    padding: var(--lc-space-6);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-xl);
    background: linear-gradient(135deg, rgba(30, 45, 107, 0.05), var(--lc-white));
    box-shadow: var(--lc-shadow-card);
}

@media (min-width: 992px) {
    .lc-merch-band {
        grid-template-columns: minmax(0, 1.5fr) auto;
        align-items: center;
    }
}

.lc-merch-band-title {
    font-size: var(--lc-text-lg);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    margin-bottom: var(--lc-space-2);
}

.lc-merch-band-copy {
    color: var(--lc-gray-600);
    font-size: var(--lc-text-sm);
    margin: 0;
}

.lc-merch-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
}


/* --- Panel soft (panel sin fondo gris en header, más limpio) --- */

.lc-panel-soft {
    box-shadow: var(--lc-shadow-sm);
}

    .lc-panel-soft .lc-panel-header {
        background-color: var(--lc-white);
    }


/* --- Divider --- */

.lc-divider {
    height: 1px;
    background-color: var(--lc-gray-200);
    margin: var(--lc-space-4) 0;
}


/* --- Inline pill (contadores en header de catálogo, breadcrumb de tienda) --- */

.lc-inline-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    border-radius: var(--lc-radius-full);
    background-color: var(--lc-gray-100);
    border: 1px solid var(--lc-gray-300);
    color: var(--lc-gray-600);
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-bold);
}


/* --- Bootstrap overrides adicionales para la tienda pública --- */

/* btn-outline-warning → "Ver tienda completa" amber de marca */
.btn-outline-warning {
    color: #7a4400;
    border-color: var(--lc-amber);
    background-color: transparent;
    font-family: var(--lc-font-body);
    font-weight: var(--lc-weight-semibold);
}

    .btn-outline-warning:hover,
    .btn-outline-warning:focus {
        background-color: var(--lc-amber-soft);
        border-color: var(--lc-amber);
        color: #7a4400;
    }

/* btn-outline-success → WhatsApp outline */
.btn-outline-success {
    color: #1e8a39;
    border-color: #25A244;
    font-family: var(--lc-font-body);
    font-weight: var(--lc-weight-semibold);
}

    .btn-outline-success:hover,
    .btn-outline-success:focus {
        background-color: #e8f5e9;
        border-color: #25A244;
        color: #1e8a39;
    }

/* lc-catalog-card como <a> — resetear color de link para que el texto
   interno no herede el morado global de los anchors */
a.lc-catalog-card {
    color: inherit;
    display: flex;
    flex-direction: column;
}

    a.lc-catalog-card:hover {
        color: inherit;
        text-decoration: none;
    }

        /* El botón span dentro de la card-link no necesita cambio de color al hover
       de la tarjeta porque el hover ya lo maneja la card */
        a.lc-catalog-card:hover .btn-primary {
            background-color: var(--lc-navy-light);
            border-color: var(--lc-navy-light);
        }

        a.lc-catalog-card:hover .btn-outline-secondary {
            background-color: var(--lc-gray-100);
            border-color: var(--lc-gray-400);
        }

/* --- Hero mini grid (contenedor de mini-stat-cards en el hero) --- */

.lc-hero-mini-grid,
.lc-summary-mini-grid {
    display: grid;
    gap: var(--lc-space-3);
}

@media (min-width: 768px) {
    .lc-hero-mini-grid,
    .lc-summary-mini-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* --- Section intro (título + botón en línea, variante de sección) --- */

.lc-section-intro {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--lc-space-4);
    align-items: center;
    margin-bottom: var(--lc-space-4);
}


/* --- Catalog filter shell (contenedor de filtros del catálogo) --- */

.lc-catalog-filter-shell {
    display: grid;
    gap: var(--lc-space-4);
}


/* ============================================================
   Detalle de pieza — PublicCatalog/Details.cshtml
   ============================================================ */

/* Breadcrumb de navegación */
.lc-breadcrumb-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: var(--lc-space-4);
}

.lc-breadcrumb-link {
    color: var(--lc-gray-600);
    font-weight: var(--lc-weight-bold);
    text-decoration: none;
}

    .lc-breadcrumb-link:hover,
    .lc-breadcrumb-link:focus {
        color: var(--lc-navy);
    }

/* Tarjeta de imagen principal del producto */
.lc-product-gallery-card {
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-xl);
    overflow: hidden;
    background: var(--lc-white);
    box-shadow: var(--lc-shadow-md);
}

    .lc-product-gallery-card img {
        width: 100%;
        display: block;
        object-fit: cover;
    }

/* Panel de resumen lateral — sticky en desktop */
.lc-product-summary-panel {
    position: sticky;
    top: 6rem;
}

@media (max-width: 991.98px) {
    .lc-product-summary-panel {
        position: static;
    }
}

/* Stack de botones de acción en el panel de resumen */
.lc-product-action-stack {
    display: grid;
    gap: var(--lc-space-3);
}

/* Nota informativa dentro del panel de resumen */
.lc-product-note {
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    background: var(--lc-gray-50);
    padding: 0.95rem var(--lc-space-4);
    color: var(--lc-gray-600);
    font-size: var(--lc-text-sm);
}

/* Fila de badges en el detalle de pieza */
.lc-detail-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
    margin-bottom: var(--lc-space-4);
}

/* Acciones dentro de tarjeta de frag (carrito + WhatsApp) */
.lc-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-2);
    margin-top: auto;
    padding-top: var(--lc-space-3);
}


/* ============================================================
   Módulos de backoffice compartidos — clases misceláneas
   ============================================================ */

/* Local nav — fila de botones de navegación interna */
.lc-local-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
}

    .lc-local-nav .btn {
        border-radius: var(--lc-radius-full);
    }

/* Mobile account card (perfil del usuario en mobile) */
.lc-mobile-account-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-xl);
    padding: 0.95rem;
    margin-top: 0.85rem;
    box-shadow: var(--lc-shadow-sm);
}

/* Action grid (cuadrícula de accesos rápidos en dashboard) */
.lc-action-grid {
    display: grid;
    gap: var(--lc-space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: var(--lc-space-6);
}

/* Action card (tarjeta de acceso rápido en dashboard) */
.lc-action-card {
    display: block;
    height: 100%;
    padding: var(--lc-space-4) 1.05rem;
    border-radius: var(--lc-radius-xl);
    border: 1px solid var(--lc-gray-200);
    background: rgba(255, 255, 255, 0.94);
    text-decoration: none;
    color: var(--lc-gray-800);
    box-shadow: var(--lc-shadow-sm);
    transition: transform var(--lc-transition-slow), box-shadow var(--lc-transition-slow), border-color var(--lc-transition-slow);
}

    .lc-action-card:hover,
    .lc-action-card:focus {
        color: var(--lc-gray-800);
        transform: translateY(-1px);
        border-color: rgba(30, 45, 107, 0.16);
        box-shadow: var(--lc-shadow-md);
    }

.lc-action-card-title {
    font-weight: var(--lc-weight-bold);
    margin-bottom: 0.25rem;
}

.lc-action-card-copy {
    color: var(--lc-gray-600);
    font-size: var(--lc-text-sm);
    line-height: var(--lc-leading-relaxed);
}


/* ============================================================
   Módulo: Sales/Pending — Chat 4 Rediseño
   ============================================================ */

/* --- lc-stat-card variante alerta --- */
.lc-stat-card--alert {
    border-left: 3px solid var(--lc-warning);
}

    .lc-stat-card--alert .lc-stat-value {
        color: var(--lc-warning);
    }

/* --- Resumen de monto total (barra de búsqueda) --- */
.lc-pending-amount-summary {
    flex-shrink: 0;
    white-space: nowrap;
}

.lc-pending-amount-value {
    font-size: var(--lc-text-xl);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: 1.2;
}

/* ── BLOQUE POR CLIENTE ─────────────────────────────────────
   El bloque completo (header + envío + ventas) se lee como
   una sola unidad por cliente gracias a la sombra elevada,
   el borde definido y el radio pronunciado.
   ──────────────────────────────────────────────────────────── */

.lc-customer-block {
    border: 1px solid var(--lc-gray-300);
    border-radius: var(--lc-radius-lg);
    overflow: hidden;
    background: var(--lc-bg-surface);
    box-shadow: 0 2px 12px rgba(30, 45, 107, 0.10), 0 1px 3px rgba(30, 45, 107, 0.06);
}

/* ── Header del cliente ── */
.lc-customer-block-header {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-3);
    padding: var(--lc-space-4) var(--lc-space-5);
    background: var(--lc-gray-50);
    border-bottom: 1px solid var(--lc-gray-200);
    border-left: 4px solid var(--lc-navy);
}

@media (min-width: 768px) {
    .lc-customer-block-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.lc-customer-block-identity {
    flex: 1;
    min-width: 0;
}

.lc-customer-block-name {
    font-size: var(--lc-text-lg);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: var(--lc-leading-tight);
}

.lc-customer-block-number {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-500);
    margin-top: var(--lc-space-1);
}

.lc-customer-block-summary {
    text-align: left;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .lc-customer-block-summary {
        text-align: right;
    }
}

.lc-customer-block-total {
    font-size: var(--lc-text-2xl);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: 1.15;
    margin-top: 2px;
}

.lc-customer-block-total-detail {
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-500);
    margin-top: 2px;
    white-space: nowrap;
}

/* ── Panel de envío ── */
.lc-shipment-panel {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-2);
    padding: var(--lc-space-3) var(--lc-space-5);
    background: var(--lc-gray-50);
    border-bottom: 1px solid var(--lc-gray-200);
}

.lc-shipment-panel--active {
    background: var(--lc-bg-surface);
}

.lc-shipment-panel-label {
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lc-gray-400);
}

.lc-shipment-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
    align-items: center;
}

.lc-shipment-field {
    flex: 1 1 180px;
    min-width: 0;
}

.lc-shipment-button {
    flex: 0 0 160px;
}

.lc-shipment-notes-col {
    flex: 0 0 100%;
}

.lc-shipment-notes summary {
    cursor: pointer;
    user-select: none;
    color: var(--lc-gray-400);
    font-size: var(--lc-text-xs);
}

    .lc-shipment-notes summary::-webkit-details-marker {
        display: none;
    }

@media (max-width: 767.98px) {
    .lc-shipment-button {
        flex-basis: 100%;
    }
}

/* ── Lista de ventas ── */
.lc-customer-sales {
    display: flex;
    flex-direction: column;
}

/* ── Fila de venta individual ── */
.lc-sale-row {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-3);
    padding: var(--lc-space-4) var(--lc-space-5);
    border-bottom: 1px solid var(--lc-gray-200);
    transition: background var(--lc-transition);
}

    .lc-sale-row:last-child {
        border-bottom: none;
    }

    .lc-sale-row:hover {
        background: var(--lc-bg-overlay);
    }

@media (min-width: 1200px) {
    .lc-sale-row {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--lc-space-6);
    }
}

.lc-sale-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-2);
}

.lc-sale-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lc-space-2);
}

.lc-sale-folio {
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-navy);
    font-size: var(--lc-text-base);
}

.lc-sale-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
}

.lc-sale-thumb {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: var(--lc-radius-md);
    border: 1px solid var(--lc-gray-200);
}

.lc-sale-row-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lc-sale-summary {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-700);
}

/* Columna de acciones:
   Siempre columna, siempre ancho completo del contenedor.
   En mobile ocupa todo el ancho disponible.
   En desktop ≥1200px se convierte en columna lateral fija. */
.lc-sale-row-actions {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-2);
    align-items: stretch;
    flex-shrink: 0;
    width: 100%;
}

    .lc-sale-row-actions .btn,
    .lc-sale-row-actions form .btn,
    .lc-sale-row-actions form {
        width: 100%;
    }

@media (min-width: 1200px) {
    .lc-sale-row-actions {
        width: 200px;
    }
}

/* ── Chips variantes ── */
.lc-chip--active {
    background: var(--lc-navy);
    color: var(--lc-white);
    border-color: var(--lc-navy);
}

.lc-chip--clear {
    background: transparent;
    color: var(--lc-gray-500);
    border-color: var(--lc-gray-300);
}

    .lc-chip--clear:hover {
        background: var(--lc-gray-100);
        color: var(--lc-gray-700);
        border-color: var(--lc-gray-400);
    }

/* ============================================================
   Módulo: Sales/Details — Chat 4 Rediseño
   ============================================================ */

/* ── Franja de estado de la venta ── */
.lc-sale-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--lc-space-4) var(--lc-space-6);
    padding: var(--lc-space-4) var(--lc-space-5);
    background: var(--lc-gray-50);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    border-left: 4px solid var(--lc-navy);
}

.lc-sale-status-bar-amount {
    flex: 1 1 180px;
    min-width: 0;
}

.lc-sale-status-total {
    font-size: var(--lc-text-3xl);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: 1.1;
    margin-top: 2px;
}

.lc-sale-status-bar-states {
    display: flex;
    gap: var(--lc-space-5);
    flex-shrink: 0;
}

.lc-sale-status-state {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-1);
}

.lc-sale-status-badge {
    font-size: var(--lc-text-sm);
    padding: 0.35em 0.75em;
}

.lc-sale-status-bar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lc-space-2);
    flex: 0 0 100%;
    padding-top: var(--lc-space-2);
    border-top: 1px solid var(--lc-gray-200);
}

@media (min-width: 992px) {
    .lc-sale-status-bar {
        flex-wrap: nowrap;
        align-items: center;
    }

    .lc-sale-status-bar-meta {
        flex: 0 0 auto;
        border-top: none;
        padding-top: 0;
        border-left: 1px solid var(--lc-gray-200);
        padding-left: var(--lc-space-5);
    }
}

/* ── Tarjeta de acciones (columna derecha de Details) ── */
.lc-details-action-card {
    background: var(--lc-bg-surface);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    overflow: hidden;
}

.lc-details-action-states {
    display: flex;
    gap: var(--lc-space-5);
    padding-bottom: var(--lc-space-4);
    border-bottom: 1px solid var(--lc-gray-200);
}

.lc-details-action-state {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-1);
}

.lc-details-meta-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: var(--lc-space-4);
    border-top: 1px solid var(--lc-gray-200);
}

.lc-details-action-card .lc-action-stack {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-2);
}

    .lc-details-action-card .lc-action-stack form {
        width: 100%;
    }

/* ── Thumbs de piezas — tamaño fijo universal ──
   Aplica en cualquier contexto: tarjetas mobile, tabla desktop.
   Ningún contenedor padre puede estirarla.
   ──────────────────────────────────────────────────────────── */
.lc-thumb-sm {
    width: 56px;
    height: 56px;
    min-width: 56px;
    max-width: 56px;
    min-height: 56px;
    max-height: 56px;
    object-fit: cover;
    border-radius: var(--lc-radius-md);
    border: 1px solid var(--lc-gray-200);
    flex-shrink: 0;
    display: block;
}

.lc-thumb-placeholder {
    width: 56px;
    height: 56px;
    min-width: 56px;
    max-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lc-gray-100);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-400);
    flex-shrink: 0;
    text-align: center;
    line-height: 1.2;
}

/* ── Tarjetas mobile de piezas ── */
.lc-mobile-records {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-3);
}

.lc-mobile-record {
    padding: var(--lc-space-4);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    background: var(--lc-bg-surface);
}

.lc-mobile-record-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--lc-space-3);
    padding: var(--lc-space-2) 0;
    border-bottom: 1px solid var(--lc-gray-100);
}

    .lc-mobile-record-row:last-of-type {
        border-bottom: none;
    }

.lc-mobile-record-label {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-500);
    flex-shrink: 0;
}

.lc-mobile-record-value {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-800);
    text-align: right;
}

/* ── Visibilidad mobile / desktop para tabla de piezas ──
   Mobile (< 992px): tarjetas apiladas.
   Desktop (≥ 992px): tabla con espacio real.
   ──────────────────────────────────────────────────────────── */
.lc-desktop-table {
    display: none;
}

@media (min-width: 992px) {
    .lc-mobile-records {
        display: none;
    }

    .lc-desktop-table {
        display: block;
    }
}


/* ============================================================
   Módulo: Exclusives/Index — Chat 4 Rediseño
   ============================================================ */

/* ── Sidebar sticky (formulario de creación en desktop) ── */
.lc-sticky-aside {
    position: sticky;
    top: 1.5rem;
}

/* ── Formulario con gap vertical consistente ── */
.lc-form-shell {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-4);
}

/* ── Nota informativa dentro de formularios ── */
.lc-note-box {
    padding: var(--lc-space-3) var(--lc-space-4);
    background: var(--lc-gray-50);
    border: 1px solid var(--lc-gray-200);
    border-left: 3px solid var(--lc-purple);
    border-radius: var(--lc-radius-md);
    color: var(--lc-gray-700);
    font-size: var(--lc-text-sm);
    line-height: var(--lc-leading-relaxed);
}

/* ── Stack de entidad en tabla (nombre + metadata) ── */
.lc-entity-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lc-entity-kicker {
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-500);
    line-height: var(--lc-leading-normal);
}

/* ── Lista de exclusivas en mobile ── */
.lc-exclusive-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--lc-gray-200);
}

.lc-exclusive-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lc-space-4);
    padding: var(--lc-space-4) var(--lc-space-5);
    border-bottom: 1px solid var(--lc-gray-200);
    transition: background var(--lc-transition);
}

    .lc-exclusive-row:last-child {
        border-bottom: none;
    }

    .lc-exclusive-row:hover {
        background: var(--lc-bg-overlay);
    }

.lc-exclusive-row-main {
    flex: 1;
    min-width: 0;
}

.lc-exclusive-row-name {
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-navy);
    font-size: var(--lc-text-base);
    line-height: var(--lc-leading-tight);
}

.lc-exclusive-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-500);
    margin-top: 2px;
}

.lc-exclusive-row-counters {
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-500);
    margin-top: var(--lc-space-2);
}

.lc-exclusive-row-action {
    flex-shrink: 0;
}

/* ── Visibilidad mobile / desktop para lista vs tabla ──
   mobile (< 992px): tarjetas lc-exclusive-list.
   desktop (≥ 992px): tabla.
   ──────────────────────────────────────────────────────────── */
.lc-desktop-hide {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.lc-mobile-hide {
    display: none;
}

@media (min-width: 992px) {
    .lc-desktop-hide {
        display: none !important;
    }

    .lc-mobile-hide {
        display: block;
    }
}


/* ============================================================
   Módulo: Exclusives/Details — Chat 4 Rediseño
   ============================================================ */

/* ── Toolbar del page-head ── */
.lc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
    align-items: center;
}

@media (min-width: 768px) {
    .lc-page-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--lc-space-4);
    }
}

/* ── Nav local de ventas — ver definición en sección "Módulos de backoffice compartidos" ── */

/* ── Franja de estado de la exclusiva ── */
.lc-excl-status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-4) var(--lc-space-6);
    padding: var(--lc-space-4) var(--lc-space-5);
    background: var(--lc-gray-50);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    border-left: 4px solid var(--lc-navy);
}

.lc-excl-status-bar-main {
    flex: 1 1 200px;
    min-width: 0;
}

.lc-excl-status-name {
    font-size: var(--lc-text-lg);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: var(--lc-leading-tight);
}

.lc-excl-status-meta {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-500);
    margin-top: 2px;
}

.lc-excl-status-stats {
    display: flex;
    gap: var(--lc-space-5);
    flex-shrink: 0;
}

.lc-excl-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lc-excl-stat-value {
    font-size: var(--lc-text-2xl);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: 1.1;
}

.lc-excl-stat-value--success {
    color: var(--lc-success);
}

.lc-excl-stat-value--muted {
    color: var(--lc-gray-500);
}

.lc-excl-status-totals {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.lc-excl-total-amount {
    font-size: var(--lc-text-2xl);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: 1.1;
    margin-top: 2px;
}

/* ── Filas de cliente en mobile ── */
.lc-excl-customer-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--lc-space-3);
    padding: var(--lc-space-4) var(--lc-space-5);
    border-bottom: 1px solid var(--lc-gray-200);
    transition: background var(--lc-transition);
    width: 100%;
}

    .lc-excl-customer-row:last-child {
        border-bottom: none;
    }

    .lc-excl-customer-row:hover {
        background: var(--lc-bg-overlay);
    }

.lc-excl-customer-row-info {
    flex: 1;
    min-width: 0;
}

.lc-excl-customer-row-action {
    flex-shrink: 0;
}

/* ── Tarjetas de pieza en mobile ── */
.lc-excl-item-card {
    padding: var(--lc-space-4) var(--lc-space-5);
    border-bottom: 1px solid var(--lc-gray-200);
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-3);
    width: 100%;
}

    .lc-excl-item-card:last-child {
        border-bottom: none;
    }

.lc-excl-item-title {
    font-size: var(--lc-text-base);
    line-height: var(--lc-leading-tight);
}

.lc-excl-item-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--lc-gray-100);
    border-radius: var(--lc-radius-md);
    overflow: hidden;
}

.lc-excl-item-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--lc-space-3);
    padding: var(--lc-space-2) var(--lc-space-3);
    border-bottom: 1px solid var(--lc-gray-100);
}

    .lc-excl-item-meta-row:last-child {
        border-bottom: none;
    }

.lc-excl-price-form {
    /* El formulario de editar precio es compacto inline */
}

.lc-excl-item-actions {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-2);
}

/* ── Lista de piezas seleccionables ── */
.lc-product-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    overflow: hidden;
    max-height: 480px;
    overflow-y: auto;
}

.lc-product-pick {
    display: flex;
    align-items: center;
    gap: var(--lc-space-3);
    padding: var(--lc-space-3) var(--lc-space-4);
    border-bottom: 1px solid var(--lc-gray-100);
    cursor: pointer;
    transition: background var(--lc-transition);
    margin: 0;
}

    .lc-product-pick:last-child {
        border-bottom: none;
    }

    .lc-product-pick:hover {
        background: var(--lc-purple-soft);
    }

    .lc-product-pick:has(.lc-product-pick-check:checked) {
        background: var(--lc-purple-soft);
        border-left: 3px solid var(--lc-purple);
    }

.lc-product-pick-check {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--lc-purple);
}

.lc-product-pick-body {
    display: flex;
    gap: var(--lc-space-3);
    align-items: center;
    flex: 1;
    min-width: 0;
}

.lc-product-pick-info {
    flex: 1;
    min-width: 0;
}

.lc-product-pick-title {
    font-size: var(--lc-text-sm);
    line-height: var(--lc-leading-tight);
}

/* ── Panel de agregar cliente (unificado) ── */
.lc-excl-customer-step {
    padding: var(--lc-space-4) 0;
}

    .lc-excl-customer-step:first-child {
        padding-top: 0;
    }

    .lc-excl-customer-step:last-child {
        padding-bottom: 0;
    }

.lc-excl-customer-step-label {
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-gray-500);
    margin-bottom: var(--lc-space-3);
}

.lc-excl-customer-divider {
    display: flex;
    align-items: center;
    gap: var(--lc-space-3);
    color: var(--lc-gray-400);
    font-size: var(--lc-text-xs);
    margin: 0;
}

    .lc-excl-customer-divider::before,
    .lc-excl-customer-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--lc-gray-200);
    }

/* ── Autocomplete suggest ── */
.lc-suggest {
    position: relative;
}

.lc-suggest-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--lc-z-dropdown);
    background: var(--lc-bg-surface);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    box-shadow: var(--lc-shadow-md);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}

.lc-suggest-head {
    padding: var(--lc-space-2) var(--lc-space-3);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lc-gray-500);
    border-bottom: 1px solid var(--lc-gray-200);
    background: var(--lc-gray-50);
}

.lc-suggest-list {
    display: flex;
    flex-direction: column;
}

.lc-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--lc-space-3) var(--lc-space-4);
    background: none;
    border: none;
    border-bottom: 1px solid var(--lc-gray-100);
    cursor: pointer;
    transition: background var(--lc-transition);
}

    .lc-suggest-item:last-child {
        border-bottom: none;
    }

    .lc-suggest-item:hover {
        background: var(--lc-purple-soft);
    }

.lc-suggest-title {
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-gray-900);
}

.lc-suggest-meta {
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-500);
    margin-top: 1px;
}

.lc-suggest-note {
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-500);
    margin-top: var(--lc-space-1);
}

/* ── Summary lines (resumen lateral) ── */
.lc-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--lc-space-3);
    padding: var(--lc-space-2) 0;
    border-bottom: 1px solid var(--lc-gray-100);
    font-size: var(--lc-text-sm);
}

    .lc-summary-line:last-child {
        border-bottom: none;
    }

.lc-summary-total {
    font-size: var(--lc-text-base);
    font-weight: var(--lc-weight-semibold);
    padding-top: var(--lc-space-3);
}

/* ── Badge row ── */
.lc-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-1);
    align-items: center;
}

/* ── Card head (título + copy + badge dentro de panel) ── */
.lc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--lc-space-3);
    margin-bottom: var(--lc-space-4);
}

.lc-card-head-copy {
    flex: 1;
    min-width: 0;
}

.lc-card-title {
    font-size: var(--lc-text-lg);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-gray-900);
    margin-bottom: var(--lc-space-1);
    line-height: var(--lc-leading-tight);
}

.lc-card-copy {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-600);
    margin-bottom: 0;
}

/* ── Flow note (nota informativa inline) ── */
.lc-flow-note {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-600);
    padding: var(--lc-space-2) var(--lc-space-3);
    background: var(--lc-gray-50);
    border-radius: var(--lc-radius-sm);
    border-left: 3px solid var(--lc-gray-300);
}

/* ── Data grid (cuadrícula de datos label/valor) ── */
.lc-data-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 576px) {
    .lc-data-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lc-data-item {
    padding: var(--lc-space-3) 0;
    border-bottom: 1px solid var(--lc-gray-100);
}

    .lc-data-item:last-child {
        border-bottom: none;
    }

.lc-data-label {
    display: block;
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lc-gray-500);
    margin-bottom: 2px;
}

.lc-data-value {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-800);
}

.lc-data-value--strong {
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-navy);
}

/* ── Action stack (columna de botones en sidebar) ── */
.lc-action-stack {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-2);
}

    .lc-action-stack form {
        width: 100%;
    }

    .lc-action-stack .btn {
        width: 100%;
    }


/* ============================================================
   CUSTOMERS — Index
   Agregar al final de wwwroot/css/site.css
   ============================================================ */

/* Stat card clickeable */
.lc-stat-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--lc-transition), border-color var(--lc-transition);
}

    .lc-stat-card--link:hover {
        box-shadow: var(--lc-shadow-md);
        border-color: var(--lc-gray-300);
        color: inherit;
    }

.lc-stat-card--active {
    border-color: var(--lc-navy) !important;
    box-shadow: 0 0 0 2px rgba(30, 45, 107, 0.12);
}

    .lc-stat-card--active .lc-stat-label {
        color: var(--lc-navy);
    }

    .lc-stat-card--active .lc-stat-value {
        color: var(--lc-navy);
    }

/* Chip activo */
.lc-chip--active {
    background-color: var(--lc-navy);
    color: var(--lc-white);
    border-color: var(--lc-navy);
}

    .lc-chip--active:hover {
        background-color: var(--lc-navy-light);
        color: var(--lc-white);
    }

/* Toggle del filtro colapsable (mobile) */
.lc-filter-toggle {
    display: flex;
    align-items: center;
    gap: var(--lc-space-2);
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-gray-800);
    cursor: pointer;
}

.lc-filter-chevron {
    color: var(--lc-gray-500);
    transition: transform var(--lc-transition);
}

.lc-filter-toggle[aria-expanded="true"] .lc-filter-chevron {
    transform: rotate(180deg);
}

/* Jerarquía de tarjeta de cliente (mobile) */
.lc-customer-name {
    font-size: var(--lc-text-base);
    line-height: var(--lc-leading-tight);
}

.lc-customer-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lc-customer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lc-space-1);
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-500);
}

.lc-meta-dot {
    color: var(--lc-gray-300);
    font-size: var(--lc-text-xs);
}

/* ── Filter card y filter bar ── */
.lc-filter-card {
    background: var(--lc-bg-surface);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    padding: var(--lc-space-4) var(--lc-space-5);
}

.lc-filter-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lc-space-4);
    align-items: end;
}

@media (min-width: 768px) {
    .lc-filter-bar.cols-4 {
        grid-template-columns: 2fr 1fr 1fr auto auto;
    }

    .lc-filter-bar.cols-3 {
        grid-template-columns: 2fr 1fr 1fr auto;
    }
}

.lc-stat-value--sm {
    font-size: var(--lc-text-lg);
    font-weight: var(--lc-weight-semibold);
}

/* ============================================================
   SELECTIONS — Agregar al final de wwwroot/css/site.css
   ============================================================ */

/* Badge de orden en Details */
.lc-sort-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--lc-space-2);
    background: var(--lc-gray-50);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-sm);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-gray-600);
    flex-shrink: 0;
}

/* Fila de acciones compacta en mobile (Details) */
.lc-item-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
    align-items: center;
}

/* Grid de selección mobile (AddItems) */
.lc-selection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--lc-space-3);
}

@media (min-width: 480px) {
    .lc-selection-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lc-selection-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--lc-bg-surface);
    transition: border-color var(--lc-transition), box-shadow var(--lc-transition);
}

    .lc-selection-card:hover {
        border-color: var(--lc-purple);
        box-shadow: var(--lc-shadow-sm);
    }

.lc-selection-card--selected {
    border-color: var(--lc-navy);
    box-shadow: 0 0 0 2px rgba(30, 45, 107, 0.15);
}

.lc-selection-card--added {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.lc-selection-card-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.lc-selection-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.lc-selection-card-body {
    padding: var(--lc-space-2) var(--lc-space-2);
}

.lc-selection-card-title {
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-semibold);
    line-height: var(--lc-leading-tight);
    color: var(--lc-gray-900);
    margin-bottom: 2px;
}

.lc-selection-card-meta {
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-500);
}

.lc-selection-card-check-indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--lc-gray-300);
    background: var(--lc-white);
    transition: border-color var(--lc-transition), background var(--lc-transition);
}

.lc-selection-card--selected .lc-selection-card-check-indicator {
    border-color: var(--lc-navy);
    background: var(--lc-navy);
}

    .lc-selection-card--selected .lc-selection-card-check-indicator::after {
        content: '';
        display: block;
        width: 5px;
        height: 9px;
        border: 2px solid var(--lc-white);
        border-top: none;
        border-left: none;
        transform: rotate(45deg) translate(1px, -1px);
        margin: 2px auto 0;
    }

/* Barra flotante inferior (AddItems + Present) */
.lc-float-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--lc-bg-surface);
    border-top: 1px solid var(--lc-gray-200);
    display: flex;
    align-items: center;
    gap: var(--lc-space-3);
}

/* Miniatura activa en Present */
.lc-thumb-active {
    outline: 3px solid var(--lc-navy);
    outline-offset: 2px;
    border-radius: var(--lc-radius-md);
}

/* Cuadro de texto de publicación */
.lc-publish-copy-box {
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    background: var(--lc-gray-50);
    padding: var(--lc-space-3);
}

.lc-publish-copy-text {
    white-space: pre-line;
    font-size: var(--lc-text-sm);
    line-height: var(--lc-leading-relaxed);
    color: var(--lc-gray-800);
}

/* ── Tabla con scroll interno y header sticky ── */
.lc-table-scroll-container {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 480px;
}

.lc-table-sticky-head thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--lc-gray-50);
    border-bottom: 1px solid var(--lc-gray-200);
}

/* ============================================================
   _StoreOpeningNotice — Franja informativa de tienda pública
   ============================================================ */

.lc-store-note {
    background-color: var(--lc-gray-50);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    padding: var(--lc-space-4) var(--lc-space-5);
}

.lc-store-note-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lc-space-4);
}

@media (min-width: 768px) {
    .lc-store-note-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--lc-space-5);
    }
}

.lc-store-note-item {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-1);
}

@media (min-width: 768px) {
    .lc-store-note-item + .lc-store-note-item {
        border-left: 1px solid var(--lc-gray-200);
        padding-left: var(--lc-space-5);
    }
}

.lc-store-note-label {
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-navy);
}

.lc-store-note-copy {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-600);
    line-height: var(--lc-leading-relaxed);
}


/* ============================================================
   CART — Cart/Index.cshtml
   ============================================================ */

.lc-cart-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--lc-space-3);
    padding: var(--lc-space-3) var(--lc-space-4);
    background-color: rgba(30, 45, 107, 0.05);
    border: 1px solid rgba(30, 45, 107, 0.12);
    border-left: 3px solid var(--lc-navy);
    border-radius: var(--lc-radius-md);
}

.lc-cart-banner-icon {
    color: var(--lc-navy);
    flex-shrink: 0;
    margin-top: 1px;
}

.lc-cart-banner-text {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-700);
    line-height: var(--lc-leading-relaxed);
}

.lc-cart-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto;
    background-color: var(--lc-bg-surface);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    overflow: hidden;
}

@media (min-width: 576px) {
    .lc-cart-item {
        grid-template-columns: 120px 1fr auto;
        grid-template-rows: 1fr;
    }
}

.lc-cart-item-img {
    background-color: var(--lc-gray-100);
    overflow: hidden;
}

    .lc-cart-item-img img {
        width: 100%;
        height: 100%;
        min-height: 96px;
        object-fit: cover;
        display: block;
    }

@media (min-width: 576px) {
    .lc-cart-item-img img {
        min-height: 120px;
    }
}

.lc-cart-item-body {
    padding: var(--lc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-1);
}

.lc-cart-item-title {
    font-size: var(--lc-text-base);
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-gray-900);
    line-height: var(--lc-leading-tight);
    margin: 0;
}

.lc-cart-item-price {
    font-size: var(--lc-text-lg);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    margin-top: var(--lc-space-1);
}

.lc-cart-item-avail {
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-500);
}

.lc-cart-item-controls {
    grid-column: 1 / -1;
    padding: var(--lc-space-3) var(--lc-space-4);
    border-top: 1px solid var(--lc-gray-100);
    background-color: var(--lc-gray-50);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lc-space-4);
}

@media (min-width: 576px) {
    .lc-cart-item-controls {
        grid-column: auto;
        border-top: none;
        border-left: 1px solid var(--lc-gray-200);
        background-color: var(--lc-bg-surface);
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        padding: var(--lc-space-4);
        min-width: 180px;
    }
}

.lc-cart-qty-form {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-1);
}

.lc-cart-qty-input {
    width: 72px;
}

.lc-cart-qty-label {
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-gray-600);
}

.lc-cart-qty-fixed {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lc-cart-item-line-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lc-cart-remove-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--lc-text-sm);
    font-family: var(--lc-font-body);
    color: var(--lc-gray-400);
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--lc-transition);
    text-align: left;
}

    .lc-cart-remove-btn:hover {
        color: var(--lc-error);
    }

.lc-summary-card {
    background-color: var(--lc-bg-surface);
    border: 1px solid var(--lc-gray-200);
    border-top: 3px solid var(--lc-navy);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-5);
}

.lc-summary-title {
    font-size: var(--lc-text-base);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    margin-bottom: var(--lc-space-4);
}

.lc-sticky-card {
    position: sticky;
    top: 1rem;
}

.lc-form-note {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-500);
    line-height: var(--lc-leading-relaxed);
}


/* ============================================================
   CHECKOUT — Checkout/Index.cshtml
   ============================================================ */

.lc-checkout-form-header {
    display: flex;
    align-items: flex-start;
    gap: var(--lc-space-3);
    padding: var(--lc-space-4) var(--lc-space-5);
    border-bottom: 1px solid var(--lc-gray-200);
    background-color: var(--lc-gray-50);
}

.lc-checkout-form-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--lc-radius-full);
    background-color: var(--lc-navy);
    color: var(--lc-white);
    flex-shrink: 0;
    margin-top: 1px;
}

.lc-checkout-form-header-title {
    font-size: var(--lc-text-base);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: var(--lc-leading-tight);
    margin-bottom: 2px;
}

.lc-checkout-form-header-sub {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-600);
    line-height: var(--lc-leading-normal);
}

.lc-checkout-actions {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-2);
    margin-top: var(--lc-space-2);
}

.lc-checkout-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--lc-space-3);
    padding: var(--lc-space-2) 0;
    border-bottom: 1px solid var(--lc-gray-100);
}

    .lc-checkout-item:last-of-type {
        border-bottom: none;
    }

.lc-checkout-item-info {
    flex: 1;
    min-width: 0;
}

.lc-checkout-item-name {
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-gray-900);
    line-height: var(--lc-leading-tight);
    margin-bottom: 2px;
}

.lc-checkout-item-qty {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-500);
}

.lc-checkout-item-total {
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    white-space: nowrap;
    flex-shrink: 0;
}

.lc-checkout-summary-divider {
    height: 1px;
    background-color: var(--lc-gray-200);
    margin: var(--lc-space-3) 0;
}

/* ============================================================
   CHECKOUT SUCCESS — Checkout/Success.cshtml
   ============================================================ */

.lc-success-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--lc-space-3);
    padding: var(--lc-space-4) var(--lc-space-5);
    background-color: var(--lc-success-bg);
    border-bottom: 1px solid rgba(46, 125, 50, 0.15);
}

.lc-success-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--lc-radius-full);
    background-color: var(--lc-success);
    color: var(--lc-white);
    flex-shrink: 0;
    margin-top: 1px;
}

.lc-success-banner-title {
    font-size: var(--lc-text-base);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-success);
    line-height: var(--lc-leading-tight);
    margin-bottom: 2px;
}

.lc-success-banner-sub {
    font-size: var(--lc-text-sm);
    color: var(--lc-success);
    opacity: 0.85;
    line-height: var(--lc-leading-normal);
}

.lc-success-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lc-space-3);
}

.lc-success-data-card {
    background-color: var(--lc-gray-50);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    padding: var(--lc-space-3) var(--lc-space-4);
}

.lc-success-data-label {
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-gray-500);
    margin-bottom: var(--lc-space-1);
}

.lc-success-data-value {
    font-size: var(--lc-text-lg);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: var(--lc-leading-tight);
}

.lc-success-steps-title {
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-gray-500);
    margin-bottom: var(--lc-space-3);
}

.lc-success-steps {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-2);
}

.lc-success-step-text {
    font-size: var(--lc-text-sm);
    color: var(--lc-gray-700);
    line-height: var(--lc-leading-relaxed);
}

/* ============================================================
   TOAST DE CONFIRMACIÓN — PublicCatalog/Details.cshtml
   ============================================================ */

.lc-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: var(--lc-z-toast);
    min-width: 280px;
    max-width: calc(100vw - 2rem);
    background-color: var(--lc-bg-surface);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-lg);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    opacity: 0;
}

.lc-toast--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.lc-toast--hiding {
    transform: translateX(-50%) translateY(120%);
    opacity: 0;
}

.lc-toast-body {
    display: flex;
    align-items: center;
    gap: var(--lc-space-3);
    padding: var(--lc-space-3) var(--lc-space-4);
}

.lc-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--lc-radius-full);
    background-color: var(--lc-success-bg);
    color: var(--lc-success);
    flex-shrink: 0;
}

.lc-toast-content {
    flex: 1;
    min-width: 0;
}

.lc-toast-title {
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-gray-900);
    line-height: var(--lc-leading-tight);
    margin-bottom: 1px;
}

.lc-toast-sub {
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-500);
}

.lc-toast-action {
    flex-shrink: 0;
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    color: var(--lc-navy);
    text-decoration: none;
    white-space: nowrap;
    padding: var(--lc-space-1) var(--lc-space-2);
    border-radius: var(--lc-radius-sm);
    transition: background-color var(--lc-transition);
}

    .lc-toast-action:hover {
        background-color: var(--lc-bg-overlay);
        color: var(--lc-navy);
        text-decoration: none;
    }

.lc-toast-progress {
    height: 3px;
    background-color: var(--lc-gray-100);
}

.lc-toast-progress-bar {
    height: 100%;
    background-color: var(--lc-success);
    width: 100%;
    transform-origin: left;
    transition: transform linear;
}

/* ── Ola 4.1: Exclusivas / captura rápida ── */
.lc-excl-status-bar {
    align-items: center;
    gap: var(--lc-space-3) var(--lc-space-5);
    padding: var(--lc-space-3) var(--lc-space-4);
}

.lc-excl-status-stats {
    gap: var(--lc-space-4);
}

.lc-excl-stat-value,
.lc-excl-total-amount {
    font-size: var(--lc-text-xl);
}

.lc-excl-status-totals {
    align-items: flex-end;
}

.lc-quick-product-list {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-2);
}

.lc-quick-product-pick {
    display: flex;
    align-items: center;
    gap: var(--lc-space-3);
    width: 100%;
    padding: var(--lc-space-3);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    background: var(--lc-bg-surface);
    text-align: left;
    cursor: pointer;
    transition: background var(--lc-transition), border-color var(--lc-transition), box-shadow var(--lc-transition);
}

    .lc-quick-product-pick:hover,
    .lc-quick-product-pick.is-selected {
        background: var(--lc-purple-soft);
        border-color: var(--lc-purple);
        box-shadow: var(--lc-shadow-sm);
    }

.lc-selected-product-box {
    padding: var(--lc-space-3);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    background: var(--lc-gray-50);
}

@media (max-width: 767.98px) {
    .lc-excl-status-bar {
        padding: var(--lc-space-3);
    }

    .lc-excl-status-stats {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--lc-space-2);
    }

    .lc-excl-status-totals {
        width: 100%;
        align-items: flex-start;
    }

    .lc-excl-stat-value,
    .lc-excl-total-amount {
        font-size: var(--lc-text-lg);
    }
}

.lc-product-suggest-panel {
    max-height: 380px;
    overflow-y: auto;
}

.lc-product-suggest-item {
    display: flex;
    align-items: center;
    gap: var(--lc-space-3);
    width: 100%;
    text-align: left;
}

.lc-quick-add-fields {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-3);
}

.lc-selected-product-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-3);
}

.lc-suggest-empty {
    padding: var(--lc-space-3);
    color: var(--lc-text-muted);
    font-size: var(--lc-text-sm);
}

/* Exclusivas: el autocomplete de captura rápida debe poder crecer sin cortarse por el panel. */
.lc-panel--suggest-open {
    overflow: visible;
}

.lc-panel--suggest-open .lc-panel-body {
    overflow: visible;
}

.lc-inline-divider {
    height: 1px;
    margin: var(--lc-space-4) 0;
    background: var(--lc-gray-200);
}

.lc-linked-customer-picker {
    padding: var(--lc-space-3);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    background: var(--lc-gray-50);
}

.lc-linked-customer-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
}

.lc-linked-customer-button {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.lc-linked-customer-button small {
    color: var(--lc-text-muted);
    font-size: var(--lc-text-xs);
}

/* ============================================================
   Módulo: Sales/Pending — Ola 4.2 seguimiento compacto por exclusiva
   ============================================================ */

.lc-local-nav--compact {
    gap: 0.4rem;
}

.lc-exclusive-focus-nav .lc-panel-body,
.lc-exclusive-picker .lc-panel-body {
    padding: 0.85rem 1rem;
}


.lc-exclusive-picker--featured {
    border: 1px solid rgba(122, 50, 161, 0.22);
    border-left: 5px solid var(--lc-accent);
    background: linear-gradient(135deg, rgba(122, 50, 161, 0.08), rgba(255, 255, 255, 0.96));
    box-shadow: 0 16px 34px rgba(12, 25, 74, 0.09);
}

.lc-exclusive-picker--featured .lc-panel-body {
    padding: 1rem 1.15rem;
}

.lc-exclusive-picker--featured .lc-kicker {
    color: var(--lc-navy);
    letter-spacing: 0.1em;
}

.lc-exclusive-picker--featured .lc-chip {
    background: #fff;
    border-color: rgba(122, 50, 161, 0.26);
    box-shadow: 0 4px 12px rgba(12, 25, 74, 0.06);
}

.lc-exclusive-picker--featured .lc-chip:hover,
.lc-exclusive-picker--featured .lc-chip--active {
    transform: translateY(-1px);
}

.lc-chip-list--compact {
    gap: 0.45rem;
}

.lc-chip-list--compact .lc-chip {
    padding: 0.22rem 0.65rem;
    font-size: var(--lc-text-xs);
}

.lc-exclusive-focus-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-lg);
    background: rgba(255, 255, 255, 0.86);
}

@media (min-width: 768px) {
    .lc-exclusive-focus-summary {
        grid-template-columns: minmax(220px, 1fr) auto auto;
        min-width: 520px;
    }
}

.lc-exclusive-focus-title {
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    line-height: var(--lc-leading-tight);
}

.lc-exclusive-focus-total {
    font-size: var(--lc-text-xl);
    font-weight: var(--lc-weight-bold);
    color: var(--lc-navy);
    white-space: nowrap;
}

.lc-exclusive-focus-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
}

.lc-exclusive-focus-actions .btn {
    white-space: nowrap;
}

/* En modo exclusiva la pantalla sirve para screenshot y primer contacto.
   Por eso compactamos la tarjeta sin tocar reglas de venta, cobro ni paquetes. */
.lc-exclusive-picker + .lc-panel-soft {
    margin-bottom: var(--lc-space-3) !important;
}

.lc-stats-row--exclusive-focus .lc-stat-card {
    padding: 0.85rem 1rem;
}

.lc-stats-row--exclusive-focus .lc-stat-value {
    font-size: var(--lc-text-2xl);
}

.lc-customer-block--exclusive-focus .lc-customer-block-header {
    padding: 0.85rem 1rem;
}

.lc-customer-block--exclusive-focus .lc-customer-block-total {
    font-size: var(--lc-text-xl);
}

.lc-customer-block--exclusive-focus .lc-sale-row {
    padding: 0.8rem 1rem;
    gap: var(--lc-space-2);
}

.lc-customer-block--exclusive-focus .lc-sale-row-main {
    gap: 0.4rem;
}

.lc-customer-block--exclusive-focus .lc-sale-thumb {
    width: 48px;
    height: 48px;
}

.lc-customer-block--exclusive-focus .lc-sale-row-actions {
    gap: 0.45rem;
}

@media (min-width: 1200px) {
    .lc-customer-block--exclusive-focus .lc-sale-row-actions {
        width: 170px;
    }
}

/* ============================================================
   Ajustes Ola 4.2 — densidad real para notificación de exclusivas
   ============================================================ */

.lc-sales-quick-nav .lc-panel-body {
    padding: 0.75rem 1rem;
}

.lc-sales-quick-note {
    color: var(--lc-gray-500);
    font-size: var(--lc-text-sm);
}

.lc-sales-quick-nav .lc-local-nav .btn,
.lc-exclusive-picker .lc-chip,
.lc-exclusive-inline-actions .btn {
    line-height: 1.1;
}

.lc-stats-row--exclusive-focus {
    margin-bottom: var(--lc-space-3) !important;
}

.lc-stat-card {
    padding: 0.9rem 1.15rem;
}

.lc-stat-value {
    font-size: var(--lc-text-2xl);
}

.lc-exclusive-picker .lc-panel-body {
    padding: 0.8rem 1rem;
}

.lc-exclusive-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
    flex-shrink: 0;
}

.lc-exclusive-inline-actions .btn {
    white-space: nowrap;
}

/* Ya no usamos un recuadro grande de “Mostrando”; el filtro activo se entiende por el chip marcado. */
.lc-exclusive-focus-summary {
    display: none;
}

.lc-customer-block--exclusive-focus .lc-customer-block-header {
    align-items: center;
    gap: var(--lc-space-3);
    padding: 0.65rem 0.9rem;
}

.lc-customer-block--exclusive-focus .lc-customer-block-name {
    font-size: var(--lc-text-base);
}

.lc-customer-block--exclusive-focus .lc-customer-block-summary {
    display: flex;
    align-items: center;
    gap: var(--lc-space-3);
    text-align: right;
}

.lc-customer-block--exclusive-focus .lc-customer-block-summary .lc-stat-label {
    margin: 0;
    white-space: nowrap;
}

.lc-customer-block--exclusive-focus .lc-customer-block-total {
    font-size: var(--lc-text-xl);
    white-space: nowrap;
}

.lc-customer-block--exclusive-focus .lc-customer-block-summary .btn {
    margin-top: 0 !important;
    white-space: nowrap;
}

.lc-customer-block--exclusive-focus .lc-sale-row {
    padding: 0.65rem 0.9rem;
}

.lc-customer-block--exclusive-focus .lc-sale-row-head--exclusive {
    gap: 0.35rem;
}

.lc-customer-block--exclusive-focus .lc-badge-row {
    gap: 0.35rem;
}

.lc-customer-block--exclusive-focus .lc-sale-thumbs {
    gap: 0.4rem;
}

.lc-customer-block--exclusive-focus .lc-sale-thumb {
    width: 44px;
    height: 44px;
}

.lc-exclusive-sale-items {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.45rem 0.6rem;
}

.lc-piece-count-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--lc-gray-100);
    border: 1px solid var(--lc-gray-200);
    color: var(--lc-navy);
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    white-space: nowrap;
}

.lc-piece-name-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.lc-piece-name-chip {
    display: inline-flex;
    align-items: center;
    max-width: 260px;
    min-height: 1.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--lc-bg-surface);
    border: 1px solid var(--lc-gray-200);
    color: var(--lc-gray-700);
    font-size: var(--lc-text-xs);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .lc-customer-block--exclusive-focus .lc-customer-block-summary {
        width: 100%;
        justify-content: space-between;
        text-align: left;
    }

    .lc-customer-block--exclusive-focus .lc-customer-block-summary .lc-stat-label {
        display: none;
    }

    .lc-piece-name-chip {
        max-width: 100%;
    }
}

/* ============================================================
   Ola 4.2 v3 — limpieza general de Sales/Pending
   ============================================================ */

.lc-stats-row--compact .lc-stat-card {
    padding: 0.65rem 0.9rem;
}

.lc-stats-row--compact .lc-stat-value {
    font-size: var(--lc-text-xl);
    line-height: 1.05;
}

.lc-stats-row--compact .lc-stat-label {
    font-size: var(--lc-text-xs);
}

.lc-exclusive-picker .lc-panel-body,
.lc-panel-soft .lc-panel-body {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.lc-customer-block-header {
    padding: 0.75rem 1rem;
    align-items: center;
}

.lc-customer-block-name {
    font-size: var(--lc-text-base);
}

.lc-customer-block-summary {
    display: flex;
    align-items: center;
    gap: var(--lc-space-3);
}

.lc-customer-block-summary .lc-stat-label {
    margin: 0;
    white-space: nowrap;
}

.lc-customer-block-total {
    font-size: var(--lc-text-xl);
    margin-top: 0;
    white-space: nowrap;
}

.lc-customer-block-summary .btn {
    margin-top: 0 !important;
    white-space: nowrap;
}

.lc-sale-row {
    padding: 0.85rem 1rem;
    gap: var(--lc-space-3);
}

.lc-sale-thumb {
    width: 46px;
    height: 46px;
}

@media (max-width: 767.98px) {
    .lc-customer-block-summary {
        width: 100%;
        justify-content: space-between;
        text-align: left;
    }

    .lc-customer-block-summary .lc-stat-label {
        display: none;
    }
}

/* ============================================================
   Ola 4.2 v4 — misma lectura visual con y sin filtro
   ============================================================ */

.lc-sale-row-head {
    margin-bottom: 0.15rem;
}

.lc-sale-row-info .lc-exclusive-sale-items {
    margin-top: 0.1rem;
}

.lc-sale-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.8rem;
    color: var(--lc-gray-500);
    font-size: var(--lc-text-xs);
    margin-top: 0.25rem;
}

.lc-sale-meta-line span + span::before {
    content: "•";
    margin-right: 0.8rem;
    color: var(--lc-gray-300);
}

@media (max-width: 767.98px) {
    .lc-sale-meta-line {
        gap: 0.15rem 0.55rem;
    }

    .lc-sale-meta-line span + span::before {
        margin-right: 0.55rem;
    }
}

/* ============================================================
   Ola 4.2 — thumbs ligeros con ampliación en modal
   ============================================================ */

.lc-sale-thumb-button {
    display: inline-flex;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: var(--lc-radius-md);
    background: transparent;
    cursor: zoom-in;
}

.lc-sale-thumb-button:focus-visible {
    outline: 3px solid rgba(33, 54, 132, 0.35);
    outline-offset: 2px;
}

.lc-sale-thumb-button .lc-sale-thumb {
    display: block;
}

.lc-customer-block--exclusive-focus .lc-sale-thumb-button {
    width: 44px;
    height: 44px;
}

.lc-image-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lc-image-modal.is-open {
    display: flex;
}

.lc-image-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 46, 0.72);
}

.lc-image-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(960px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--lc-radius-xl);
    background: var(--lc-bg-surface);
    box-shadow: var(--lc-shadow-lg);
}

.lc-image-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-3);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--lc-gray-200);
}

.lc-image-modal-title {
    min-width: 0;
    color: var(--lc-navy);
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-image-modal-close {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lc-gray-200);
    border-radius: 999px;
    background: var(--lc-bg-surface);
    color: var(--lc-gray-700);
    font-size: 1.35rem;
    line-height: 1;
}

.lc-image-modal-close:hover {
    color: var(--lc-navy);
    border-color: var(--lc-navy);
}

.lc-image-modal-body {
    padding: 1rem;
    overflow: auto;
    background: var(--lc-gray-50);
}

.lc-image-modal-img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    object-fit: contain;
    border-radius: var(--lc-radius-lg);
}

body.lc-modal-open {
    overflow: hidden;
}

/* ============================================================
   Ola 4.3 — Dashboard operativo: ventas nuevas
   ============================================================ */

.lc-dashboard-new-sales-panel {
    border-color: rgba(245, 166, 35, 0.42);
    box-shadow: 0 8px 22px rgba(30, 45, 107, 0.10);
}

.lc-dashboard-new-sales-header {
    background: linear-gradient(135deg, rgba(254, 243, 220, 0.92), rgba(255, 255, 255, 0.96));
}

.lc-dashboard-new-sales-count {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--lc-radius-full);
    background: var(--lc-amber-soft);
    color: var(--lc-warning);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    line-height: 1;
}

.lc-dashboard-new-sales-stack {
    gap: 0.65rem;
}

.lc-dashboard-new-sale-row {
    position: relative;
    overflow: hidden;
    border-color: rgba(245, 166, 35, 0.34);
    background: linear-gradient(90deg, rgba(254, 243, 220, 0.58), var(--lc-bg-surface) 38%);
}

.lc-dashboard-new-sale-row::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--lc-amber);
}

.lc-dashboard-new-sale-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.16rem 0.5rem;
    border-radius: var(--lc-radius-full);
    background: var(--lc-warning-bg);
    color: var(--lc-warning);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-weight-bold);
    line-height: 1;
}

.lc-dashboard-new-sale-meta {
    color: var(--lc-gray-800);
    font-weight: var(--lc-weight-semibold);
}

@media (max-width: 575.98px) {
    .lc-dashboard-new-sale-row {
        align-items: stretch;
    }
}

/* ============================================================
   Ola 4.3 — Ajuste de densidad en Dashboard operativo
   ============================================================ */

.lc-dashboard-package-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.45rem;
}

.lc-dashboard-package-summary span:not(:last-child)::after {
    content: "·";
    margin-left: 0.45rem;
    color: var(--lc-gray-500);
}

.lc-dashboard-new-sale-row {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.lc-dashboard-new-sales-stack {
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .lc-dashboard-package-summary {
        gap: 0.15rem 0.35rem;
    }

    .lc-dashboard-package-summary span:not(:last-child)::after {
        margin-left: 0.35rem;
    }
}

/* ============================================================
   Ola 4.3 — Dashboard operativo: paquetes compactos
   ============================================================ */

.lc-dashboard-package-row {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.lc-dashboard-package-amount {
    margin-left: auto;
    color: var(--lc-navy);
    font-size: var(--lc-text-base);
    font-weight: var(--lc-weight-bold);
    white-space: nowrap;
}

.lc-dashboard-package-context {
    color: var(--lc-gray-600);
}

@media (max-width: 575.98px) {
    .lc-dashboard-package-amount {
        width: 100%;
        margin-left: 0;
    }

    .lc-dashboard-package-row {
        align-items: stretch;
    }
}

/* ============================================================
   Ola 4.3 — Dashboard operativo: exclusivas recientes compactas
   ============================================================ */

.lc-dashboard-exclusives-header {
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
}

.lc-dashboard-exclusives-body {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.lc-dashboard-exclusives-stack {
    gap: 0.65rem;
}

.lc-dashboard-exclusive-row {
    align-items: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

@media (max-width: 575.98px) {
    .lc-dashboard-exclusive-row {
        gap: 0.75rem;
    }
}

/* ============================================================
   ANALÍTICAS COMERCIALES
   ============================================================ */
.lc-analytics-range-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lc-space-3);
    align-items: end;
}

.lc-analytics-range-summary {
    background: var(--lc-gray-50);
    border: 1px solid var(--lc-gray-200);
    border-radius: var(--lc-radius-md);
    padding: var(--lc-space-3) var(--lc-space-4);
}

.lc-break-anywhere {
    overflow-wrap: anywhere;
}

.lc-table th {
    font-size: var(--lc-text-xs);
    color: var(--lc-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.lc-table td {
    font-size: var(--lc-text-sm);
}

@media (min-width: 768px) {
    .lc-analytics-range-form {
        grid-template-columns: minmax(220px, 320px) 1fr;
    }
}