/* 
   RetailOS 2026 / Aquí tu logo - Design System v2.0 (Redesign ML Style)
   AUDITORIA FORENSE: 2026-01-31 | ID: 001 | ESTADO: LIMPIO
   Fecha Actualización: 14 de Enero de 2026 13:08 PM (REVISION GLOBAL)
   Estado: VALIDADO (Digital Air + Glassmorphism + Scrollbar Fixes + Compact Cards)
   Colores: Rojo #E51147 | Celeste #1E70B7
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* ========================================= */
    /*  1. RETAIL OS: PSYCHOLOGICAL TOKENS       */
    /*     "Intentionality over Color"           */
    /*     Updated: 2026-02-05 (Pentagram Std)   */
    /* ========================================= */

    /* SURFACE (Focus & Depth) */
    --ui-surface-primary: #000000;
    /* Absolute Focus (The Void) */
    --ui-surface-secondary: #092944;
    /* Premium Depth (Authority) */
    --ui-surface-glass: rgba(255, 255, 255, 0.85);

    /* ACTION (Conversion) */
    --ui-accent-active: #E51147;
    /* The Action (Click Here) */
    --ui-accent-hover: #AA1739;
    /* Quality Feedback State */

    /* SYSTEM (Flow & Trust) */
    --ui-cyan-accent: #1E70B7;
    /* Trust Flow */
    --ui-border-subtle: #575555;
    /* Data Hierarchy */
    --ui-gray-structure: #C2C1C1;
    /* Skeleton */
    --ui-off-white: #F8F9FA;
    /* Canvas */
    --ui-white: #FFFFFF;
    /* Surface Card */

    /* ========================================= */
    /*  2. COMPATIBILITY LAYER (LEGACY MAPPING)  */
    /* ========================================= */
    --brand-red: var(--ui-accent-active);
    --brand-blue: var(--ui-cyan-accent);
    --brand-dark: var(--ui-surface-secondary);

    --brand-gradient: linear-gradient(135deg, var(--ui-accent-active) 0%, var(--ui-cyan-accent) 100%);

    /* Surface & Backgrounds */
    --bg-main: var(--ui-off-white);
    --bg-surface: var(--ui-white);
    --glass-bg: var(--ui-surface-glass);

    /* Typography */
    --text-primary: var(--ui-surface-primary);
    /* Forced Black for Clarity */
    --text-secondary: var(--ui-border-subtle);
    /* Hierarchy Gray */
    --text-light: #F1F5F9;

    /* Shadows & Depth */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

    /* Borders & Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    /* Helpers */
    --brand-blue-rgb: 30, 112, 183;
    --brand-red-rgb: 229, 17, 71;
}

/* ========================================= */
/*  HEADER ICONS ANIMATION (NEW)            */
/* ========================================= */
.nav-icon {
    width: 32px;
    /* Request: Icons slightly larger */
    height: 32px;
    object-fit: contain;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.icon-hover-container {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 6px;
    /* Optimized padding */
    border-radius: 999px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    position: relative;
    background-color: transparent;
    border: 1px solid transparent;
    /* Prevent layout shift */
}

/* Hover Effect: Expand Label & Background */
.icon-hover-container:hover {
    padding-right: 16px;
    /* Add space for text */
    padding-left: 10px;
    background-color: rgba(var(--brand-blue-rgb), 0.06);
    /* Very subtle Pill BG */
}

.icon-hover-container:hover .nav-icon {
    transform: scale(1.1);
    /* Slight pop */
}

.icon-hover-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    font-weight: 600;
    font-size: 0.9rem;
    /* Clearer text */
    color: var(--brand-blue);
    /* Brand color text logic */
    margin-left: 0;
    visibility: hidden;
    /* Ensure it doesn't take space */
}

/* ========================================= */
/*  WISHLIST ICON STYLING (NEW)             */
/* ========================================= */
/* Default: Faint / Grayscale */
.wishlist-icon {
    filter: grayscale(100%) opacity(0.5);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover: Slight Color Preview */
.btn-wishlist:hover .wishlist-icon {
    filter: grayscale(30%) opacity(0.8);
    transform: scale(1.1);
}

/* Active: Full Color (Applied by JS) */
.active-wishlist {
    filter: grayscale(0%) opacity(1) !important;
    transform: scale(1.1);
}

.icon-hover-container:hover .icon-hover-label {
    max-width: 150px;
    /* Reveal text */
    opacity: 1;
    margin-left: 10px;
    /* Space between icon and text */
    visibility: visible;
}

/* Badge Styling (Numeric Counter) */
.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    /* Fluid width for numbers */
    height: 18px;
    padding: 0 4px;
    background-color: var(--brand-red);
    color: white;
    border-radius: 9px;
    /* Pill shape */
    box-shadow: 0 0 0 2px #fff;
    /* White ring to separate from icon */
    z-index: 10;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- RESET & BASE --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

ul {
    list-style: none;
}

/* --- UTILITIES --- */
.text-brand-red {
    color: var(--brand-red) !important;
}

.bg-brand-red {
    background-color: var(--brand-red) !important;
}

.text-brand-blue {
    color: var(--brand-blue) !important;
}

.bg-brand-blue {
    background-color: var(--brand-blue) !important;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.hover-shadow:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg) !important;
}

.hover-opacity:hover {
    opacity: 0.8 !important;
}

.hover-text-primary:hover {
    color: var(--brand-blue) !important;
}

.hover-bg-light:hover {
    background-color: var(--bg-main) !important;
}

/* --- GLASSMORPHISM --- */
.navbar-glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.glass-card {
    background: var(--bg-surface);
    /* Fallback */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* --- BUTTONS --- */
.btn-brand {
    background: var(--brand-gradient);
    color: white;
    border: none;
    font-weight: 600;
    border-radius: var(--radius-full);
    /* Pill shape default */
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-brand:hover {
    box-shadow: 0 4px 12px rgba(229, 17, 71, 0.3);
    transform: translateY(-1px);
    color: white;
}

.btn-brand-outline {
    background: transparent;
    border: 2px solid var(--brand-red);
    /* Outline Red */
    color: var(--brand-red);
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-brand-outline:hover {
    background-color: var(--brand-red);
    color: white;
}

/* --- HEADER NAV LINK CUSTOM --- */
/* Simple Links in Navbar */
.nav-link-custom {
    color: var(--text-primary);
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    transition: all 0.2s;
}

.nav-link-custom:hover,
.nav-link-custom.active {
    color: var(--brand-blue);
    background-color: rgba(30, 112, 183, 0.1);
}

/* --- BADGES --- */
.badge-notification {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 0.65rem;
    padding: 0.25em 0.5em;
}

/* --- PRODUCT CARDS (Unified) --- */
.product-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-md);
    background: white;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.product-card-img-wrapper {
    position: relative;
    padding-top: 100%;
    /* Square Ratio 1:1 */
    overflow: hidden;
    background-color: #f8f9fa;
    /* Placeholder bg */
}

.product-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Maintain ratio, shows whitespace */
    padding: 1rem;
    /* Padding inside card so image doesn't touch edges */
    transition: transform 0.5s ease;
}

.product-card:hover .product-card-img {
    transform: scale(1.05);
}

.product-card-actions {
    position: absolute;
    bottom: 0px;
    /* Initially Hidden or at bottom */
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    padding: 0.75rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.product-card:hover .product-card-actions {
    transform: translateY(0);
}

/* --- SCROLLBAR (Modern Webkit) --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* --- FOOTER --- */
.footer-modern {
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 4rem;
    padding-bottom: 2rem;
}

.footer-heading {
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--brand-dark);
}

/* Wishlist Active State (Red Filter for SVG) */
.active-wishlist {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
    transition: filter 0.3s ease;
}

/* ========================================= */
/*  CRITICAL LAYOUT PROTECTION (GLOBAL)      */
/* ========================================= */
html,
body {
    width: 100% !important;
    overflow-x: hidden;
}

/* Ensure Body respects Grid/Block and doesn't collapse */
body {
    min-width: 100% !important;
}

/* Force Main to expand */
main {
    width: 100%;
    /* flex-grow: 1 hace que main ocupe todo el espacio sobrante entre header y footer */
    flex-grow: 1;
    display: block;
}

/* Container Hardening */
.container,
.container-fluid {
    width: 100% !important;
    max-width: 100% !important;
}

/* ========================================================= */
/* 🚑 PARCHE FINAL V3 - ESTILO PROFESIONAL (BOXED LAYOUT)  */
/* ========================================================= */

/* 1. MANTENER SOLUCIÓN DEL BUG (Esto evita que se vea flaco) */
.card,
.product-card,
div.card {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

/* 2. RECUPERAR ESTILO PROFESIONAL (Esto evita que se vea estirado) */
.container {
    /* Define un ancho máximo estándar (como Bootstrap XL) */
    max-width: 1320px !important;

    /* Centra el contenido en la pantalla */
    margin-left: auto !important;
    margin-right: auto !important;

    /* Asegura un pequeño margen en pantallas de móviles */
    width: 96% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 3. LIMPIEZA DE FILAS (Evita scroll horizontal innecesario) */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* --- SERVICES MODULE 2026 --- */
.hero-gradient {
    background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-blue) 100%);
    color: white;
}

.card-service {
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-radius: var(--radius-lg);
    background: white;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.card-service:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: var(--brand-blue);
}

.card-service.popular {
    border: 2px solid #E69B0C;
    box-shadow: 0 4px 12px rgba(230, 155, 12, 0.15);
}

.card-service .price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-dark);
}

.service-icon-box {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}

.timeline-step {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid #e2e8f0;
    padding-bottom: 2rem;
}

.timeline-step::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brand-blue);
    border: 4px solid white;
    box-shadow: 0 0 0 1px #e2e8f0;
}

.timeline-step:last-child {
    border-left: none;
}

.check-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.check-list-item i {
    color: #10b981;
    /* Green Success */
    margin-top: 4px;
}