/* style.css - PANEL TIENDA SOFTWARE AUTOMATICO */

/* DESIGN SYSTEM VARIABLES */
:root {
    --bg-dark: #020205;
    --bg-card: rgba(8, 8, 16, 0.65);
    --border-color: rgba(255, 255, 255, 0.06);
    --text-primary: #F2F2F2;
    --text-secondary: rgba(242, 242, 242, 0.7);
    --text-muted: rgba(242, 242, 242, 0.4);
    
    /* Carrd Brand Colors */
    --color-gold: #FCBA3A;
    --color-red: #ff4c4c;
    
    /* Neons & Interactive Glows */
    --neon-cyan: #00f0ff;
    --neon-cyan-glow: rgba(0, 240, 255, 0.3);
    --neon-purple: #9d4edd;
    --neon-purple-glow: rgba(157, 78, 221, 0.3);
    --neon-green: #39ff14;
    --neon-green-glow: rgba(57, 255, 20, 0.3);
    --neon-yellow: #FCBA3A;
    --neon-yellow-glow: rgba(252, 186, 58, 0.3);
    --neon-gold: #FCBA3A;
    --neon-gold-glow: rgba(252, 186, 58, 0.35);
    --neon-red: #ff4c4c;
    --neon-red-glow: rgba(255, 76, 76, 0.3);
    
    --font-main: 'Alegreya Sans', sans-serif;
    --font-serif: 'Alegreya', serif;
    --font-terminal: 'JetBrains Mono', monospace;
    --transition-smooth: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* RESET & CORE STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-main);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Fondo fijo al VIEWPORT, no al contenido (pedido explícito del dueño 2026-08-03):
   antes el fondo vivía en `body` con background-attachment:scroll + background-size:
   cover -- ese "cover" se calcula sobre el alto TOTAL del documento, no solo la
   pantalla visible. En "Empresa" (una pantalla, sin scroll) se veía bien, pero en
   "Servicios" (una lista larga con scroll) el navegador estiraba/recortaba la MISMA
   imagen de otra forma para cubrir esa altura mucho mayor -- por eso se veía "con
   zoom" o "desde otra toma" al cambiar de pestaña, aunque era la misma imagen.
   Con esta capa aparte, fija a la pantalla (no al documento), se ve exactamente
   igual sin importar cuánto contenido/scroll tenga cada pestaña. */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    /* CRÍTICO: NO usar top/left/right/bottom:0 (equivale a 100% del viewport
       ACTUAL) ni 100vh -- en Safari/iOS, al hacer scroll la barra de
       direcciones se oculta y el navegador agranda el área visible real EN
       VIVO durante el gesto; como background-size:cover recalcula contra el
       tamaño del elemento, verlo crecer mientras haces scroll hacía que la
       imagen se "ampliara"/reescalara delante de tus ojos (justo lo que
       reportó el dueño). 100lvh ("large viewport height") es el tamaño MÁS
       GRANDE posible (con la barra ya oculta) y nunca cambia con ese gesto,
       así que el cover nunca se recalcula -- puede que el elemento sobre un
       poco cuando la barra sí está visible, pero eso no se nota (solo hay más
       fondo fijo del necesario, nunca menos). */
    width: 100vw;
    height: 100lvh;
    z-index: -1;
    background-image: url('images/bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* iOS Safari a veces "arrastra" los elementos position:fixed durante el
       gesto de scroll en vez de tratarlos como una capa fija de verdad (se ve
       como si el fondo se moviera mientras se hace scroll, aunque se quede
       quieto al soltar) -- forzar su propia capa de composición con
       translateZ/will-change es la solución estándar para eso. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

body.no-scroll, html.no-scroll {
    overflow: hidden !important;
}

/* Ambient Cyber Glows */
.cyber-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(150px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.15;
}

.glow-1 {
    width: 600px;
    height: 600px;
    background: var(--neon-cyan);
    top: -200px;
    right: -200px;
}

.glow-2 {
    width: 500px;
    height: 500px;
    background: var(--neon-purple);
    bottom: -150px;
    left: -150px;
}

/* CUSTOM SCROLLBARS */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(2, 2, 5, 0.8);
}

::-webkit-scrollbar-thumb {
    background: rgba(252, 186, 58, 0.35) !important;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #FCBA3A !important;
}

/* APP CONTAINER */
.app-container {
    max-width: 580px; /* Constrained elegant mobile frame max-width */
    width: 100%;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* HEADER BAR */
.app-header {
    display: none !important;
    justify-content: center;
    align-items: center;
    padding: 18px 24px;
    margin-bottom: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    text-align: center;
}

.header-logo {
    display: flex;
    flex-direction: column; /* Stack logo icon and text vertically for perfect mobile symmetry */
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 100%;
}

.logo-icon {
    font-size: 28px;
    color: var(--neon-cyan);
    text-shadow: 0 0 10px var(--neon-cyan-glow);
    animation: floating-logo 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 50%;
    border: 1.5px solid var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan-glow);
}

.logo-text h1 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--text-primary);
}

.logo-text h1 span {
    color: var(--neon-cyan);
    text-shadow: 0 0 8px var(--neon-cyan-glow);
}

.logo-text .tagline {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 2.5px;
    display: block;
    margin-top: -2px;
}

/* Global Statistics Pills */
.global-stats {
    display: flex;
    gap: 12px;
    align-items: center;
}

.stat-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    padding: 8px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.stat-pill .lbl {
    color: var(--text-secondary);
}

.stat-pill .val {
    color: var(--text-primary);
}

.stat-pill i {
    font-size: 13px;
}

/* Pulsing Status Dot */
.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.pulse-green {
    background-color: var(--neon-green);
    box-shadow: 0 0 8px var(--neon-green);
    animation: status-pulse 1.5s infinite;
}

.credits-pill {
    cursor: pointer;
    background: rgba(157, 78, 221, 0.08);
    border: 1px solid rgba(157, 78, 221, 0.2);
    transition: var(--transition-smooth);
}

.credits-pill:hover {
    background: rgba(157, 78, 221, 0.16);
    border-color: var(--neon-purple);
    box-shadow: 0 0 10px rgba(157, 78, 221, 0.2);
}

/* Text Accent Colors */
.text-green { color: var(--neon-green) !important; text-shadow: 0 0 8px rgba(57, 255, 20, 0.2); }
.text-cyan { color: var(--neon-cyan) !important; text-shadow: 0 0 8px rgba(0, 240, 255, 0.2); }
.text-purple { color: var(--neon-purple) !important; text-shadow: 0 0 8px rgba(157, 78, 221, 0.2); }
.text-yellow { color: var(--neon-yellow) !important; text-shadow: 0 0 8px rgba(255, 189, 0, 0.2); }

.icon-blue { color: #0088ff; }
.icon-cyan { color: var(--neon-cyan); }
.icon-purple { color: var(--neon-purple); }

/* MAIN LAYOUT */
.main-layout {
    display: block;
    flex: 1;
}

/* GLASS PANELS */
.glass-panel {
    background: rgba(16, 12, 12, 0.45) !important;
    border: 1px solid rgba(252, 186, 58, 0.12) !important;
    border-radius: 16px;
    backdrop-filter: blur(10px) saturate(140%) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

/* SIDEBAR PANEL */
.sidebar-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.panel-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px;
    backdrop-filter: blur(12px);
}

.section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

/* Automation Switch Cards */
.automation-switches {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.switch-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: var(--transition-smooth);
}

.switch-card:hover {
    border-color: rgba(0, 240, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
}

.switch-card.active {
    background: rgba(0, 240, 255, 0.02);
    border-color: rgba(0, 240, 255, 0.25);
}

.switch-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.switch-info .bot-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.switch-info .bot-status {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.text-muted {
    color: var(--text-secondary) !important;
}

/* Premium IOS Switch design */
.ios-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.ios-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--text-muted);
    border-radius: 24px;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.ios-switch input:checked + .switch-slider {
    background-color: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan-glow);
}

.ios-switch input:checked + .switch-slider:before {
    transform: translateX(20px);
}

/* Metrics Grid styling */
.metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.metric-mini-card {
    padding: 10px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-mini-card .lbl {
    font-size: 9px;
    color: var(--text-secondary);
    font-weight: 500;
}

.metric-mini-card .val {
    font-size: 16px;
    font-weight: 700;
}

/* CONTENT PANEL */
.content-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* SOFTWARE GRID */
.software-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.software-card {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.card-glow-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 16px;
    pointer-events: none;
    opacity: 0;
    transition: var(--transition-smooth);
    z-index: -1;
}

.software-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.software-card:hover .card-glow-bg {
    opacity: 0.04;
}

/* Highlighting card classes */
.highlight-cyan { border-color: rgba(0, 240, 255, 0.15); }
.highlight-cyan:hover { border-color: var(--neon-cyan); box-shadow: 0 0 20px rgba(0, 240, 255, 0.15); }
.highlight-cyan .card-glow-bg { background: var(--neon-cyan); }
.highlight-cyan .software-icon { color: var(--neon-cyan); background: rgba(0, 240, 255, 0.08); }

.highlight-purple { border-color: rgba(157, 78, 221, 0.15); }
.highlight-purple:hover { border-color: var(--neon-purple); box-shadow: 0 0 20px rgba(157, 78, 221, 0.15); }
.highlight-purple .card-glow-bg { background: var(--neon-purple); }
.highlight-purple .software-icon { color: var(--neon-purple); background: rgba(157, 78, 221, 0.08); }

.highlight-green { border-color: rgba(57, 255, 20, 0.15); }
.highlight-green:hover { border-color: var(--neon-green); box-shadow: 0 0 20px rgba(57, 255, 20, 0.15); }
.highlight-green .card-glow-bg { background: var(--neon-green); }
.highlight-green .software-icon { color: var(--neon-green); background: rgba(57, 255, 20, 0.08); }

.highlight-yellow { border-color: rgba(255, 189, 0, 0.15); }
.highlight-yellow:hover { border-color: var(--neon-yellow); box-shadow: 0 0 20px rgba(255, 189, 0, 0.15); }
.highlight-yellow .card-glow-bg { background: var(--neon-yellow); }
.highlight-yellow .software-icon { color: var(--neon-yellow); background: rgba(255, 189, 0, 0.08); }

.software-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.software-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.software-badge {
    font-size: 8px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 12px;
    letter-spacing: 1px;
}

.software-badge.cyan { background: rgba(0, 240, 255, 0.12); color: var(--neon-cyan); }
.software-badge.purple { background: rgba(157, 78, 221, 0.12); color: #b566ff; }
.software-badge.green { background: rgba(57, 255, 20, 0.12); color: var(--neon-green); }
.software-badge.yellow { background: rgba(255, 189, 0, 0.12); color: var(--neon-yellow); }

.software-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.software-description {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
    flex: 1;
}

.software-features {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 5px;
}

.software-features span {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.software-features i {
    font-size: 10px;
}

.software-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.price-container {
    display: flex;
    flex-direction: column;
}

.original-price {
    font-size: 10px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.current-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

/* Buy buttons */
.buy-btn {
    border: none;
    outline: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
}

.buy-btn:hover {
    transform: scale(1.05);
}

.buy-btn:active {
    transform: scale(0.95);
}

.btn-cyan { background: var(--neon-cyan); color: #000; box-shadow: 0 0 10px rgba(0, 240, 255, 0.25); }
.btn-cyan:hover { box-shadow: 0 0 16px var(--neon-cyan); }

.btn-purple { background: var(--neon-purple); color: #fff; box-shadow: 0 0 10px rgba(157, 78, 221, 0.25); }
.btn-purple:hover { box-shadow: 0 0 16px var(--neon-purple); }

.btn-green { background: var(--neon-green); color: #000; box-shadow: 0 0 10px rgba(57, 255, 20, 0.25); }
.btn-green:hover { box-shadow: 0 0 16px var(--neon-green); }

.btn-yellow { background: var(--neon-yellow); color: #000; box-shadow: 0 0 10px rgba(255, 189, 0, 0.25); }
.btn-yellow:hover { box-shadow: 0 0 16px var(--neon-yellow); }


/* LIVE CONSOLE TERMINAL */
.terminal-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    border-color: rgba(0, 240, 255, 0.1);
}

.terminal-container:focus-within {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
}

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(2, 2, 5, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.terminal-dots {
    display: flex;
    gap: 6px;
}

.terminal-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.terminal-dots .dot.red { background-color: var(--neon-red); }
.terminal-dots .dot.yellow { background-color: var(--neon-yellow); }
.terminal-dots .dot.green { background-color: var(--neon-green); }

.terminal-title {
    font-family: var(--font-terminal);
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.clear-terminal-btn {
    background: none;
    border: none;
    outline: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: var(--transition-smooth);
}

.clear-terminal-btn:hover {
    color: var(--neon-cyan);
}

.terminal-body {
    flex: 1;
    background: rgba(1, 1, 3, 0.95);
    padding: 14px;
    font-family: var(--font-terminal);
    font-size: 11px;
    line-height: 1.6;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    max-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.terminal-line {
    word-break: break-all;
    color: rgba(255,255,255,0.7);
}

.t-system { color: var(--neon-purple); font-weight: bold; }
.t-success { color: var(--neon-green); font-weight: bold; }
.t-info { color: var(--neon-cyan); font-weight: bold; }
.t-warning { color: var(--neon-yellow); font-weight: bold; }
.t-error { color: var(--neon-red); font-weight: bold; }
.t-user { color: #fff; font-weight: bold; }

.terminal-input-bar {
    background: rgba(2, 2, 5, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.prompt-symbol {
    font-family: var(--font-terminal);
    font-size: 12px;
    font-weight: 700;
    color: var(--neon-cyan);
}

#terminal-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: var(--font-terminal);
    /* 16px minimo: evita el auto-zoom de iOS Safari al enfocar el campo. */
    font-size: 16px;
    color: #fff;
}

#terminal-input::placeholder {
    color: var(--text-muted);
}


/* INTERACTIVE MODALS AND DRAWERS */
.modal-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(2, 2, 5, 0.8);
    backdrop-filter: blur(8px);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%) scale(0.9);
    width: 90%;
    max-width: 440px;
    z-index: 101;
    opacity: 0;
    pointer-events: none;
    padding: 24px;
    border-color: rgba(0, 240, 255, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.modal-glow {
    position: absolute;
    top: -50px; left: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.modal-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.gradient-text-cyan {
    background: linear-gradient(135deg, #fff 30%, var(--neon-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.close-modal-btn {
    background: none;
    border: none;
    outline: none;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.close-modal-btn:hover {
    color: var(--neon-red);
}

/* Success details in modal */
.modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.success-icon {
    font-size: 48px;
    color: var(--neon-green);
    text-shadow: 0 0 15px var(--neon-green-glow);
    margin-bottom: 5px;
    animation: success-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-body h4 {
    font-size: 18px;
    font-weight: 700;
}

.modal-body p {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* License key container design */
.license-display-card {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px dashed rgba(0, 240, 255, 0.2);
    border-radius: 12px;
    padding: 14px;
    margin: 10px 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.license-display-card .card-lbl {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.key-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 240, 255, 0.04);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
}

.key-val {
    font-family: var(--font-terminal);
    font-size: 11px;
    font-weight: 700;
    color: var(--neon-cyan);
    letter-spacing: 1px;
    user-select: all;
}

.copy-key-btn {
    background: none;
    border: none;
    outline: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: var(--transition-smooth);
}

.copy-key-btn:hover {
    color: var(--neon-cyan);
    transform: scale(1.1);
}

.modal-actions {
    width: 100%;
    margin-top: 8px;
}

.modal-btn-confirm {
    width: 100%;
    border: none;
    outline: none;
    background: linear-gradient(90deg, var(--neon-cyan), #0077ff);
    color: #000;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 800;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
    transition: var(--transition-smooth);
}

.modal-btn-confirm:hover {
    box-shadow: 0 6px 20px rgba(0, 240, 255, 0.5);
    transform: translateY(-1px);
}

/* LIVE TOAST NOTIFICATION */
.toast-notification {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(10, 10, 20, 0.95);
    border: 1px solid var(--neon-cyan);
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1000;
    transform: translateY(100px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-notification.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.toast-icon {
    font-size: 16px;
    color: var(--neon-cyan);
    text-shadow: 0 0 8px var(--neon-cyan-glow);
}

.toast-message {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}


/* ANIMATIONS */
@keyframes floating-logo {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes status-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.4; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes success-pop {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* TAB VIEWS CONTROLLERS */
.tab-view {
    display: none;
    width: 100%;
}

.tab-view.active {
    display: block;
}

#view-empresa.tab-view.active {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 0px;
    padding-bottom: 85px; /* Accounting for fixed bottom nav bar */
    min-height: calc(100vh - 85px);
    width: 100%;
}

/* ========================================================
   EMPRESA MAIN PORTAL PRESENTATION PANEL STYLES
   ======================================================== */
/* ========================================================
   EMPRESA MAIN PORTAL PRESENTATION PANEL STYLES (CARRD REPLICATION)
   ======================================================== */
.empresa-presentation-panel {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 0 !important;
    border: none !important;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: none !important;
    animation: fade-in-scale 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    background: transparent !important;
    backdrop-filter: none !important;
}

/* Carrd Style Colors */
.text-gold {
    color: #FCBA3A !important;
}

.text-red {
    color: #ff4c4c !important;
}

/* Brand Text (Top) */
.carrd-brand-text {
    font-family: 'Alegreya', serif;
    font-size: 1.25em;
    font-weight: 900;
    color: #F2F2F2;
    letter-spacing: 0.35rem;
    width: calc(100% + 0.35rem);
    text-align: center;
    line-height: 2.0;
    -webkit-text-stroke: 0.03em #000000;
    text-stroke: 0.03em #000000;
    margin-bottom: 4px;
}

/* Titles */
.carrd-main-title {
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1.625em;
    font-weight: 900;
    color: #F2F2F2;
    line-height: 1.375;
    text-align: center;
    -webkit-text-stroke: 0.03em #000000;
    text-stroke: 0.03em #000000;
    margin-bottom: 8px;
}

.carrd-sub-title {
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1.625em;
    font-weight: 900;
    color: #F2F2F2;
    line-height: 1.375;
    text-align: center;
    -webkit-text-stroke: 0.03em #000000;
    text-stroke: 0.03em #000000;
    margin-bottom: 12px;
}

.carrd-sub-title-2 {
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1.625em;
    font-weight: 900;
    color: #F2F2F2;
    line-height: 1.375;
    text-align: center;
    -webkit-text-stroke: 0.03em #000000;
    text-stroke: 0.03em #000000;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Video Frame (Rounded with Gold outline & Glow) */
.carrd-video-frame {
    border-radius: 28px !important;
    border: 2px solid #FFD700 !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.85), 0 0 65px rgba(255, 185, 0, 0.55), 0 0 110px rgba(255, 160, 0, 0.3), 0 0 160px rgba(255, 140, 0, 0.15) !important;
    width: 100%;
}

.carrd-video-frame .video-wrapper {
    border-radius: 26px !important;
    overflow: hidden;
}

.carrd-video-frame iframe {
    border-radius: 26px !important;
    border: none;
}

/* Central Video Play Trigger Circle (Solid Yellow with Black Icon) */
.play-trigger-btn-custom {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    background: #FFC107 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.85), 0 0 50px rgba(255, 193, 7, 0.55) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.play-trigger-btn-custom:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.95), 0 0 65px rgba(255, 193, 7, 0.7) !important;
}

/* Pitch Text Card */
.carrd-pitch-card {
    text-align: center;
    margin: 8px 0;
}

.carrd-desc-text {
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1.25em;
    font-weight: 900;
    color: #F2F2F2;
    line-height: 1.375;
    -webkit-text-stroke: 0.03em #000000;
    text-stroke: 0.03em #000000;
}

/* Carrd CTA Button (Capsule, gold text, red gradient, red glowing aura) */
.carrd-cta-btn {
    width: 100%;
    display: inline-block;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1.5em;
    font-weight: 900;
    color: #FFD700 !important;
    background-color: #8b0000 !important;
    background-image: linear-gradient(180deg, #d32f2f 0%, #8b0000 100%) !important;
    border: 1px solid #FF3333 !important;
    border-radius: 3rem !important;
    box-shadow: 0 0 30px rgba(255, 30, 30, 0.85), 0 0 60px rgba(200, 0, 0, 0.5), 0 0 100px rgba(150, 0, 0, 0.3) !important;
    padding: 14px 20px;
    letter-spacing: 0.075rem;
    text-align: center;
    cursor: pointer;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.1s ease;
    outline: none;
}

.carrd-cta-btn:hover {
    background-color: #e53935 !important;
    color: #FFFFFF !important;
    background-image: linear-gradient(180deg, #f44336 0%, #b71c1c 100%) !important;
    box-shadow: 0 0 40px rgba(255, 50, 50, 0.95), 0 0 75px rgba(220, 0, 0, 0.65) !important;
}

.carrd-cta-btn:active {
    transform: scale(0.98);
}

/* ========================================================
   SYSTEM LAYOUT & METRICS SPLIT IN OPERATIONS PANEL
   ======================================================== */
.empresa-operations-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.empresa-system-widgets {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 20px;
}

@media (max-width: 1150px) {
    .empresa-system-widgets {
        grid-template-columns: 1fr;
    }
}

/* ========================================================
   ADVISORY ADVISOR FORM MODAL FIELDS STYLING
   ======================================================== */
.advisory-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 9px;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.adv-input, .adv-select {
    background: rgba(2, 2, 5, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--font-main);
    /* 16px minimo: por debajo de eso, iOS Safari hace zoom automatico de TODA la
       pagina al enfocar el campo (y no siempre regresa solo al tamaño normal despues). */
    font-size: 16px;
    color: #fff;
    outline: none;
    transition: var(--transition-smooth);
}

.adv-input:focus, .adv-select:focus {
    border-color: var(--neon-purple);
    box-shadow: 0 0 10px rgba(157, 78, 221, 0.2);
}

.adv-select option {
    background: #0d0d1b;
    color: #fff;
}


#view-tienda.tab-view.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0px;
    padding-bottom: 85px; /* Accounting for fixed bottom nav bar */
    min-height: calc(100vh - 85px);
    width: 100%;
}

#view-asistente.tab-view.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0px;
    padding-bottom: 85px; /* Accounting for fixed bottom nav bar */
    width: 100%;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* OPERATIONS PANEL & SERVERS */
.operations-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.server-clusters-card {
    padding: 20px;
    border: 1px solid rgba(0, 240, 255, 0.12);
}

.panel-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}

.panel-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.pulse-cyan-text {
    font-size: 9px;
    font-weight: 800;
    color: var(--neon-cyan);
    letter-spacing: 1px;
    text-shadow: 0 0 8px var(--neon-cyan-glow);
}

.clusters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.cluster-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border-color);
    padding: 12px 14px;
    border-radius: 12px;
    transition: var(--transition-smooth);
}

.cluster-item:hover {
    border-color: rgba(0, 240, 255, 0.15);
    background: rgba(255, 255, 255, 0.02);
}

.cluster-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cluster-dot.online {
    background-color: var(--neon-green);
    box-shadow: 0 0 8px var(--neon-green);
    animation: status-pulse 1.5s infinite;
}

.cluster-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cluster-info .name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.cluster-info .stats {
    font-size: 9px;
    color: var(--text-secondary);
    font-weight: 500;
}


/* ASISTENTE AI CHAT VIEW */
.asistente-section {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 70px auto;
}

.agent-chat-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 520px;
    max-height: 750px;
    background: rgba(16, 12, 12, 0.7) !important;
    border: 1px solid rgba(252, 186, 58, 0.2) !important;
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(25px) saturate(180%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
    transition: var(--transition-smooth);
}

.agent-chat-container:focus-within {
    border-color: rgba(252, 186, 58, 0.4) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 25px rgba(252, 186, 58, 0.06) !important;
}

.agent-chat-header {
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(16, 12, 12, 0.9);
    border-bottom: 1px solid rgba(252, 186, 58, 0.15) !important;
    backdrop-filter: blur(10px);
    z-index: 10;
}

.agent-avatar-glowing-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(252, 186, 58, 0.25) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 10px rgba(252, 186, 58, 0.05);
}

.agent-avatar-glowing-wrapper .status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid rgba(16, 12, 12, 1);
}

.pulsing-green {
    background-color: var(--neon-green);
    box-shadow: 0 0 8px var(--neon-green);
    animation: status-pulse 1.5s infinite;
}

.agent-header-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.agent-header-info h4 {
    font-family: 'Alegreya Sans', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 900 !important;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.agent-header-info .agent-badge {
    font-size: 8px;
    font-weight: 700;
    color: #FCBA3A !important;
    letter-spacing: 1.5px;
    text-shadow: 0 0 8px rgba(252, 186, 58, 0.35);
}

.clear-chat-history-btn {
    background: none;
    border: none;
    outline: none;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

.clear-chat-history-btn:hover {
    color: #ff4c4c !important;
    background: rgba(255, 76, 76, 0.08) !important;
}

.agent-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: rgba(2, 2, 5, 0.95);
    scroll-behavior: smooth;
}

/* ========================================================
   MÓNICA SPARK STAR LOGO DESIGN (PURE CSS & GRADIENT)
   ======================================================== */
.monica-spark-mini {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #00f0ff, #9d4edd, #ff2a6d, #ffd700);
    clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}

.monica-spark-large {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #00f0ff, #9d4edd, #ff2a6d, #ffd700);
    clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
    margin: 0 auto;
}

.welcome-spark-container {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ya no hay texto "Bot" debajo -- sin margen inferior asimétrico, la estrella
       queda perfectamente centrada en el panel del chat. */
    margin: 0 auto;
}

/* Pulsing backdrop ring for spark */
.welcome-spark-container::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.4) 0%, transparent 70%);
    z-index: -1;
    filter: blur(8px);
    animation: spark-glow-breathe 3s infinite ease-in-out;
}

.animate-spark-pulse {
    animation: spark-pulse 4s infinite ease-in-out;
}

.animate-spark {
    animation: spark-twinkle 3s infinite ease-in-out;
}

@keyframes spark-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.3)); }
    50% { transform: scale(1.15) rotate(15deg); filter: drop-shadow(0 0 20px rgba(157, 78, 221, 0.5)); }
}

@keyframes spark-twinkle {
    0%, 100% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes spark-glow-breathe {
    0%, 100% { width: 35px; height: 35px; opacity: 0.4; }
    50% { width: 65px; height: 65px; opacity: 0.8; }
}

/* ========================================================
   CYBER WELCOME SCREEN (SOCIALLY ENGAGING SUGGESTIONS)
   ======================================================== */
.chat-welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: auto 0;
    padding: 20px 10px;
    width: 100%;
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-welcome-screen.hidden {
    opacity: 0 !important;
    transform: translateY(-20px);
    pointer-events: none;
    position: absolute;
    width: 0; height: 0; overflow: hidden; padding: 0; margin: 0;
}

.welcome-title {
    font-family: 'Alegreya Sans', sans-serif !important;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: #fff;
    -webkit-text-stroke: 0.02em #000000;
    text-stroke: 0.02em #000000;
}

.welcome-title span {
    background: linear-gradient(135deg, #FCBA3A 30%, #ff4c4c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(252, 186, 58, 0.25);
}

.welcome-subtitle {
    font-size: 11px;
    color: var(--text-secondary);
    max-width: 320px;
    line-height: 1.5;
    margin-bottom: 30px;
    font-weight: 500;
}

.welcome-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    max-width: 580px;
    width: 100%;
}

@media (max-width: 520px) {
    .welcome-suggestions-grid {
        grid-template-columns: 1fr;
    }
}

.suggestion-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
    user-select: none;
}

.suggestion-card i {
    font-size: 16px;
    transition: var(--transition-smooth);
}

.suggestion-card span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: var(--transition-smooth);
}

.suggestion-card:hover {
    background: rgba(255, 255, 255, 0.035);
    transform: translateY(-2px);
}

.suggestion-card:hover span {
    color: #fff;
}

.suggestion-card:hover i {
    transform: scale(1.15);
}

.suggestion-card:hover:has(.text-cyan) { border-color: rgba(252, 186, 58, 0.4) !important; box-shadow: 0 4px 15px rgba(252, 186, 58, 0.1) !important; }
.suggestion-card:hover:has(.text-purple) { border-color: rgba(252, 186, 58, 0.4) !important; box-shadow: 0 4px 15px rgba(252, 186, 58, 0.1) !important; }
.suggestion-card:hover:has(.text-green) { border-color: rgba(252, 186, 58, 0.4) !important; box-shadow: 0 4px 15px rgba(252, 186, 58, 0.1) !important; }

/* ========================================================
   CHAT MESSAGE BUBBLES (CLEAN & SPOKEN AI WRAPPER)
   ======================================================== */
.chat-msg {
    max-width: 85%;
    padding: 14px 18px;
    font-size: 13px !important;
    font-family: 'Alegreya Sans', sans-serif !important;
    line-height: 1.6;
    word-wrap: break-word;
    animation: bubble-entrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bubble-entrance {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-msg.user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(252, 186, 58, 0.12) 0%, rgba(204, 0, 0, 0.06) 100%) !important;
    border: 1px solid rgba(252, 186, 58, 0.25) !important;
    color: #F2F2F2 !important;
    border-radius: 18px;
    border-top-right-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.chat-msg.agent {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    color: #e4e4e9;
    border-radius: 18px;
    border-top-left-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    width: 100%;
}

/* Format markdown components inside chat agent responses */
.chat-msg.agent strong {
    color: #fff;
    font-weight: 700;
}

.chat-msg.agent a,
.chat-msg.agent a:link,
.chat-msg.agent a:visited {
    color: #FCBA3A !important;
    text-decoration: underline;
    font-weight: bold;
    transition: all 0.2s ease;
}

.chat-msg.agent a:hover {
    color: #ffd070 !important;
    text-shadow: 0 0 8px rgba(252, 186, 58, 0.4);
}

.chat-msg.agent br {
    line-height: 1.6;
}

/* Monospace inline codes */
.inline-code {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-terminal);
    font-size: 10.5px;
    color: #FCBA3A !important;
}

/* Dynamic Structured list styling */
.chat-msg.agent ul {
    margin: 8px 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.chat-msg.agent li {
    list-style-type: none;
    position: relative;
}

.chat-msg.agent li::before {
    content: "✓";
    position: absolute;
    left: -16px;
    color: #FCBA3A !important;
    font-weight: bold;
    font-size: 11px;
}

/* ========================================================
   PREMIUM CODE BLOCK TERMINALS IN MESSAGES
   ======================================================== */
.code-block-container {
    background: rgba(2, 2, 5, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    margin: 10px 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.code-block-header {
    background: rgba(8, 8, 16, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: 8px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.code-block-header span {
    font-family: var(--font-terminal);
    font-size: 9px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.code-copy-btn {
    background: none;
    border: none;
    outline: none;
    color: var(--text-secondary);
    font-size: 10.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: var(--transition-smooth);
}

.code-copy-btn:hover {
    color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.06);
}

.code-block-container pre {
    margin: 0 !important;
    padding: 14px !important;
    font-family: var(--font-terminal) !important;
    font-size: 11px !important;
    overflow-x: auto;
    background: none !important;
    border: none !important;
    line-height: 1.5;
}

/* ========================================================
   FLOATING GLASS INPUT CAPSULE
   ======================================================== */
.agent-input-wrapper {
    padding: 16px 24px 20px 24px;
    background: rgba(2, 2, 5, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    position: relative;
    z-index: 10;
}

.agent-input-bar-capsule {
    max-width: 680px;
    width: 100%;
    display: flex;
    align-items: center;
    background: rgba(8, 8, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 30px;
    padding: 5px 5px 5px 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    transition: var(--transition-smooth);
}

.agent-input-bar-capsule:focus-within {
    border-color: rgba(252, 186, 58, 0.45) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 18px rgba(252, 186, 58, 0.15) !important;
}

#agent-chat-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: var(--font-main);
    /* 16px minimo: evita el auto-zoom de iOS Safari al enfocar el campo. */
    font-size: 16px !important;
    color: #fff;
    padding: 6px 0;
}

#agent-chat-input::placeholder {
    color: var(--text-muted);
}

#agent-send-btn {
    background: #FCBA3A !important;
    border: none;
    outline: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000 !important;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 0 12px rgba(252, 186, 58, 0.45) !important;
}

/* Estado transformado: cuando el usuario sube en el historial, el botón de
   enviar se convierte en un botón rojo de "bajar" que brilla, hasta que lo
   toque y el chat vuelva al final (ahí regresa a amarillo para enviar). */
#agent-send-btn.scroll-mode-active {
    background: #ff4c4c !important;
    color: #ffffff !important;
    animation: redPulseGlow 1.6s ease-in-out infinite;
}

@keyframes redPulseGlow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 76, 76, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 22px rgba(255, 76, 76, 0.95), 0 0 35px rgba(255, 76, 76, 0.6);
        transform: scale(1.12);
    }
}

#agent-send-btn:hover {
    transform: scale(1.08);
}

#agent-send-btn:active {
    transform: scale(0.94);
}

.chat-input-disclaimer {
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* FIXED BOTTOM NAVIGATION DOCK */
.fixed-bottom-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 580px !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(8, 8, 16, 0.6) !important;
    border: none !important;
    border-top: 1px solid rgba(252, 186, 58, 0.15) !important;
    padding: 10px 12px calc(env(safe-area-inset-bottom, 8px) + 6px) 12px;
    border-radius: 0 !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
    z-index: 1000;
    transition: var(--transition-smooth);
}

.dock-btn {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(242, 242, 242, 0.5) !important;
    font-family: 'Alegreya Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    cursor: pointer;
    padding: 6px 0;
    transition: var(--transition-smooth);
    letter-spacing: 0.03rem !important;
    text-transform: uppercase !important;
    -webkit-text-stroke: 0.01em #000000;
    text-stroke: 0.01em #000000;
}

.dock-btn i {
    font-size: 18px;
    transition: var(--transition-smooth);
}

.dock-btn:hover {
    color: #FCBA3A !important;
}

.dock-btn.active {
    color: #FCBA3A !important;
    text-shadow: 0 0 10px rgba(252, 186, 58, 0.4) !important;
}

.dock-btn.active i {
    transform: translateY(-2px);
    text-shadow: 0 0 12px rgba(252, 186, 58, 0.5) !important;
}


/* RESPONSIVE DESIGN */
@media (max-width: 900px) {
    #view-empresa.tab-view.active {
        grid-template-columns: 1fr;
    }
    
    .sidebar-panel {
        order: 2;
    }
    
    .operations-panel {
        order: 1;
    }
}

@media (max-width: 600px) {
    .app-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .global-stats {
        width: 100%;
        justify-content: space-between;
    }
    
    .hidden-mobile {
        display: none !important;
    }
    
    .toast-notification {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }
    
    .fixed-bottom-bar {
        width: 100% !important;
        max-width: 580px !important;
        bottom: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        border-radius: 0 !important;
        background: rgba(8, 8, 16, 0.6) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        padding: 10px 12px calc(env(safe-area-inset-bottom, 8px) + 6px) 12px !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    .dock-btn {
        font-size: 10px;
        gap: 3px;
    }
    
    .dock-btn i {
        font-size: 16px;
    }
    
    .dock-btn span {
        display: block !important;
    }
}

/* ==========================================
   NICHE SOFTWARE STORE EXPANSION STYLES
   ========================================== */

/* ADDED ROOT VARIABLES */
:root {
    --neon-orange: #ff6b00;
    --neon-orange-glow: rgba(255, 107, 0, 0.35);
    --neon-pink: #ff007f;
    --neon-pink-glow: rgba(255, 0, 127, 0.35);
}

/* Extra Highlights & Buttons for Red, Orange, and Pink */
.highlight-red { border-color: rgba(255, 42, 109, 0.15); }
.highlight-red:hover { border-color: var(--neon-red); box-shadow: 0 0 20px rgba(255, 42, 109, 0.15); }
.highlight-red .card-glow-bg { background: var(--neon-red); }
.highlight-red .software-icon { color: var(--neon-red); background: rgba(255, 42, 109, 0.08); }

.highlight-orange { border-color: rgba(255, 107, 0, 0.15); }
.highlight-orange:hover { border-color: var(--neon-orange); box-shadow: 0 0 20px rgba(255, 107, 0, 0.15); }
.highlight-orange .card-glow-bg { background: var(--neon-orange); }
.highlight-orange .software-icon { color: var(--neon-orange); background: rgba(255, 107, 0, 0.08); }

.highlight-pink { border-color: rgba(255, 0, 127, 0.15); }
.highlight-pink:hover { border-color: var(--neon-pink); box-shadow: 0 0 20px rgba(255, 0, 127, 0.15); }
.highlight-pink .card-glow-bg { background: var(--neon-pink); }
.highlight-pink .software-icon { color: var(--neon-pink); background: rgba(255, 0, 127, 0.08); }

.btn-red { background: var(--neon-red); color: #fff; box-shadow: 0 0 10px rgba(255, 42, 109, 0.25); }
.btn-red:hover { box-shadow: 0 0 16px var(--neon-red); color: #fff; }

.btn-orange { background: var(--neon-orange); color: #000; box-shadow: 0 0 10px rgba(255, 107, 0, 0.25); }
.btn-orange:hover { box-shadow: 0 0 16px var(--neon-orange); color: #000; }

.btn-pink { background: var(--neon-pink); color: #fff; box-shadow: 0 0 10px rgba(255, 0, 127, 0.25); }
.btn-pink:hover { box-shadow: 0 0 16px var(--neon-pink); color: #fff; }

.software-badge.red { background: rgba(255, 42, 109, 0.12); color: var(--neon-red); }
.software-badge.orange { background: rgba(255, 107, 0, 0.12); color: var(--neon-orange); }
.software-badge.pink { background: rgba(255, 0, 127, 0.12); color: var(--neon-pink); }

/* NICHE FILTER BAR & CHIPS */
.niche-filter-bar {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 10px 4px 18px 4px;
    margin-bottom: 20px;
    scrollbar-width: none; /* Hide Firefox scrollbar */
    -webkit-overflow-scrolling: touch;
}

.niche-filter-bar::-webkit-scrollbar {
    display: none; /* Hide Chrome/Safari/Edge scrollbar for dynamic app store feel */
}

.niche-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(8, 8, 16, 0.65);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 30px;
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
    white-space: nowrap;
    user-select: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.niche-chip i {
    font-size: 13px;
    transition: var(--transition-smooth);
}

.niche-chip:hover {
    color: var(--text-primary);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Niche chip active glowing colors */
.niche-chip.active {
    color: #fff;
    transform: translateY(-2px);
}

.niche-chip.active.cyan {
    border-color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.08);
    color: var(--neon-cyan);
    box-shadow: 0 0 15px var(--neon-cyan-glow);
}

.niche-chip.active.purple {
    border-color: var(--neon-purple);
    background: rgba(157, 78, 221, 0.08);
    color: #c98eff;
    box-shadow: 0 0 15px var(--neon-purple-glow);
}

.niche-chip.active.yellow {
    border-color: var(--neon-yellow);
    background: rgba(255, 189, 0, 0.08);
    color: var(--neon-yellow);
    box-shadow: 0 0 15px var(--neon-yellow-glow);
}

.niche-chip.active.green {
    border-color: var(--neon-green);
    background: rgba(57, 255, 20, 0.08);
    color: var(--neon-green);
    box-shadow: 0 0 15px var(--neon-green-glow);
}

.niche-chip.active.red {
    border-color: var(--neon-red);
    background: rgba(255, 42, 109, 0.08);
    color: var(--neon-red);
    box-shadow: 0 0 15px var(--neon-red-glow);
}

.niche-chip.active.orange {
    border-color: var(--neon-orange);
    background: rgba(255, 107, 0, 0.08);
    color: var(--neon-orange);
    box-shadow: 0 0 15px var(--neon-orange-glow);
}

/* NICHE POTENTIAL CLIENT PROFILE CARD */
.niche-profile-card {
    padding: 22px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    background: rgba(8, 8, 18, 0.85);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    animation: fade-in-scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Thematic border glows for profile card */
.niche-profile-card.border-cyan { border-color: rgba(0, 240, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(0, 240, 255, 0.03); }
.niche-profile-card.border-purple { border-color: rgba(157, 78, 221, 0.3); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(157, 78, 221, 0.03); }
.niche-profile-card.border-yellow { border-color: rgba(255, 189, 0, 0.3); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 189, 0, 0.03); }
.niche-profile-card.border-green { border-color: rgba(57, 255, 20, 0.3); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(57, 255, 20, 0.03); }
.niche-profile-card.border-red { border-color: rgba(255, 42, 109, 0.3); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 42, 109, 0.03); }
.niche-profile-card.border-orange { border-color: rgba(255, 107, 0, 0.3); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 107, 0, 0.03); }

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

.profile-card-header .profile-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-icon-box.cyan { color: var(--neon-cyan); background: rgba(0, 240, 255, 0.08); }
.profile-icon-box.purple { color: #c98eff; background: rgba(157, 78, 221, 0.08); }
.profile-icon-box.yellow { color: var(--neon-yellow); background: rgba(255, 189, 0, 0.08); }
.profile-icon-box.green { color: var(--neon-green); background: rgba(57, 255, 20, 0.08); }
.profile-icon-box.red { color: var(--neon-red); background: rgba(255, 42, 109, 0.08); }
.profile-icon-box.orange { color: var(--neon-orange); background: rgba(255, 107, 0, 0.08); }

.profile-card-header h3 {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-card-header h3 span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 3px 8px;
    border-radius: 10px;
}

.profile-card-header h3 span.cyan { background: rgba(0, 240, 255, 0.1); color: var(--neon-cyan); }
.profile-card-header h3 span.purple { background: rgba(157, 78, 221, 0.1); color: #c98eff; }
.profile-card-header h3 span.yellow { background: rgba(255, 189, 0, 0.1); color: var(--neon-yellow); }
.profile-card-header h3 span.green { background: rgba(57, 255, 20, 0.1); color: var(--neon-green); }
.profile-card-header h3 span.red { background: rgba(255, 42, 109, 0.1); color: var(--neon-red); }
.profile-card-header h3 span.orange { background: rgba(255, 107, 0, 0.1); color: var(--neon-orange); }

.profile-body-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-info-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-info-row .label {
    font-size: 9px;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.profile-info-row .value {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.5;
}

/* Animations */
@keyframes fade-in-scale {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.fade-in-scale-animation {
    animation: fade-in-scale 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* ========================================================
   PREMIUM CYBER-HIVE PORTAL STYLING (7 PILLARS CORE)
   ======================================================== */

.hidden {
    display: none !important;
}

/* Keyframes for premium pulsating border flows */
@keyframes cyber-border-flow {
    0% { border-color: rgba(0, 240, 255, 0.25); box-shadow: 0 0 15px rgba(0, 240, 255, 0.05); }
    50% { border-color: rgba(157, 78, 221, 0.45); box-shadow: 0 0 25px rgba(157, 78, 221, 0.15); }
    100% { border-color: rgba(0, 240, 255, 0.25); box-shadow: 0 0 15px rgba(0, 240, 255, 0.05); }
}

@keyframes pulse-red-status {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.4; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes scanner-sweep {
    0% { top: 0%; }
    50% { top: 100%; }
    100% { top: 0%; }
}

/* ADVANCED GLASSMORPHISM OVERRIDES */
.glass-panel {
    background: rgba(8, 8, 18, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(25px) saturate(210%) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

/* NICHE CHIPS ACTIVE STATES ENHANCEMENTS */
.niche-chip {
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(12, 12, 24, 0.6);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.niche-chip:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 240, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.05);
}
.niche-chip.active {
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%) !important;
}

/* HERO SHOWCASE CARD (Featured Suite) */
.hero-showcase-container {
    margin-bottom: 30px;
    perspective: 1000px;
}

.hero-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(10, 10, 22, 0.8) 0%, rgba(5, 5, 12, 0.9) 100%);
    border: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), inset 0 0 20px rgba(0, 240, 255, 0.02);
    animation: cyber-border-flow 6s infinite ease-in-out, fade-in-scale 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    position: relative;
    overflow: hidden;
}

.hero-card-glow-layer {
    position: absolute;
    top: -100px; left: -100px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Hero Left Column (Image Block) */
.hero-img-block {
    width: 100%;
    aspect-ratio: 16 / 9 !important;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-img-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hero-card:hover .hero-img-block img {
    transform: scale(1.04);
}

/* Hero Right Column (Metadata & Details) */
.hero-details-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 1;
}

.hero-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-badge {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.15);
    padding: 5px 12px;
    border-radius: 20px;
    text-shadow: 0 0 5px var(--neon-cyan-glow);
}

.hero-kpi-pill {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(90deg, var(--neon-purple) 0%, rgba(157,78,221,0.3) 100%);
    border: 1px solid rgba(157, 78, 221, 0.3);
    padding: 4px 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(157, 78, 221, 0.25);
}

.hero-title {
    font-size: 23px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #fff 50%, var(--neon-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Business Metrics Grid in Hero Card */
.hero-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 4px 0;
}

@media (max-width: 480px) {
    .hero-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.hero-metric-item {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

.hero-metric-item .val {
    font-size: 13px;
    font-weight: 800;
    color: var(--neon-cyan);
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}

.hero-metric-item .lbl {
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-action-row {
    margin-top: 6px;
}

.hero-cta-btn {
    border: none; outline: none;
    background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-purple) 100%);
    color: #000;
    padding: 12px 22px;
    border-radius: 10px;
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.2);
    transition: var(--transition-smooth);
    text-transform: uppercase;
}

.hero-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 240, 255, 0.35);
    color: #fff;
}

.secondary-grid-section {
    border-top: none;
    padding-top: 0px;
    margin-top: 0px;
}

.software-grid-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
}

.software-grid-header h3 {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.software-grid-header span {
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 1px;
}

/* SOFTWARE GRID CARD ENHANCEMENTS */
.software-card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(8, 8, 16, 0.6);
    padding: 16px;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.software-card:hover {
    border-color: rgba(0, 240, 255, 0.25) !important;
    background: rgba(12, 12, 26, 0.7);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
}

/* Card image premium HUD overlay */
.software-img-container {
    aspect-ratio: 16 / 9 !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}

/* DETAILED PAGE OVERHAUL (CYBER-HUD & BUSINESS KPIS) */
.store-section {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    padding: 0px 0 26px 0;
    border: none !important;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    animation: fade-in-scale 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.product-detail-view {
    max-width: 520px;
    width: 100%;
    margin: 0 auto 0 auto;
    padding: 30px 30px 85px 30px;
    border: 1px solid rgba(0, 240, 255, 0.15) !important;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55) !important;
}

/* Salida hacia abajo (al oprimir "Pedir"/"Obtener Servicio"): pasa por detrás
   de la penumbra y el carrito, en vez del deslizamiento normal hacia la derecha.
   Necesita !important + esta especificidad para ganarle a las reglas de
   .product-detail-view:not(.hidden) definidas más abajo en este archivo. */
.product-detail-view.pd-exit-down {
    transform: translateY(100%) !important;
    z-index: 40 !important;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.back-to-store-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 18px;
    font-size: 11px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
}

.back-to-store-btn:hover {
    background: rgba(157, 78, 221, 0.08);
    border-color: var(--neon-purple);
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.25);
    color: #fff;
    transform: translateY(-1px);
}

.back-to-store-btn:active {
    transform: translateY(1px);
}

.product-detail-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 580px;
    margin: 0 auto;
    gap: 24px;
    width: 100%;
}

@media (min-width: 768px) {
    .pd-left-col, .pd-right-col {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

/* LEFT COLUMN: CYBER-HUD VIDEO FRAME */
.cyber-hud-wrapper {
    border: 1px solid rgba(0, 240, 255, 0.15) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.04), inset 0 0 30px rgba(0,0,0,0.9) !important;
    position: relative;
}

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-wrapper video,
.video-wrapper iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
    pointer-events: none;
}

/* Premium Floating Cyberpunk HUD Status Bar Overlay */
.hud-status-bar {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(2, 2, 8, 0.75);
    border: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 240, 255, 0.05);
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    backdrop-filter: blur(5px);
}

.hud-status-led {
    width: 6px;
    height: 6px;
    background-color: var(--neon-red);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--neon-red);
}

.hud-status-led.pulse-red {
    animation: pulse-red-status 1.5s infinite ease-in-out;
}

.hud-status-label {
    font-family: var(--font-terminal) !important;
    font-size: 8px !important;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.video-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s ease;
    background: linear-gradient(135deg, rgba(2, 2, 8, 0.85) 0%, rgba(6, 6, 16, 0.65) 100%) !important;
}

.video-overlay.playing {
    opacity: 0;
    pointer-events: none;
}

.video-overlay i {
    z-index: 2;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.overlay-controls i:hover {
    transform: scale(1.15);
    opacity: 1 !important;
    color: var(--color-gold) !important;
}

/* Tactical log console below Video */
.hud-console-card {
    background: rgba(8, 8, 16, 0.85);
    border: 1px solid rgba(157, 78, 221, 0.2);
    border-radius: 14px;
    margin-top: 18px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.hud-console-header {
    background: rgba(15, 15, 30, 0.9);
    padding: 10px 16px;
    border-bottom: 1px solid rgba(157, 78, 221, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-terminal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.hud-console-body {
    padding: 14px 16px;
    font-family: var(--font-terminal);
    font-size: 11px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

.hud-line {
    word-break: break-all;
}

.hud-line .lbl-cyan {
    color: var(--neon-cyan);
    font-weight: bold;
}

/* RIGHT COLUMN: DETAILS, KPIS & SPECS */
.pd-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pd-kpi-bubble {
    font-size: 8px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--neon-purple) 0%, rgba(157, 78, 221, 0.2) 100%);
    color: #fff;
    border: 1px solid rgba(157, 78, 221, 0.25);
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(157, 78, 221, 0.15);
}

.product-detail-title {
    font-size: 26px !important;
}

.product-detail-description-long {
    font-size: 12.5px !important;
}

/* KPI Metrics Showcase Grid */
.pd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 12px 0;
}

.pd-kpi-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 16px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: var(--transition-smooth);
}

.pd-kpi-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(157, 78, 221, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(157, 78, 221, 0.15);
}

.pd-kpi-card .metric-val {
    font-size: 24px;
    font-weight: 900;
    color: var(--neon-cyan);
    text-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

.pd-kpi-card .metric-lbl {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.product-detail-benefits {
    background: rgba(255, 255, 255, 0.015);
}

/* Solicitar Gratis button styling (Adopted from Carrd) */
.solicitar-gratis-btn, .solicitar-obtener-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 36px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    outline: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.solicitar-gratis-btn:active, .solicitar-obtener-btn:active {
    transform: scale(0.97);
}

/* Premium gradient overlays for niche buttons */
.btn-gold {
    background: linear-gradient(135deg, var(--neon-gold) 0%, #e6a124 100%) !important;
    color: #020205 !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.2) !important;
}
.btn-gold:hover {
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.45) !important;
    transform: translateY(-2px);
}

.btn-cyan {
    background: linear-gradient(135deg, var(--neon-cyan) 0%, #0096c7 100%) !important;
    color: #020205 !important;
    box-shadow: 0 4px 20px rgba(0, 240, 255, 0.2) !important;
}
.btn-cyan:hover {
    box-shadow: 0 8px 30px rgba(0, 240, 255, 0.45) !important;
    transform: translateY(-2px);
}

.btn-purple {
    background: linear-gradient(135deg, var(--neon-purple) 0%, #6a0dad 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(157, 78, 221, 0.2) !important;
}
.btn-purple:hover {
    box-shadow: 0 8px 30px rgba(157, 78, 221, 0.45) !important;
    transform: translateY(-2px);
}

.btn-green {
    background: linear-gradient(135deg, var(--neon-green) 0%, #20722e 100%) !important;
    color: #020205 !important;
    box-shadow: 0 4px 20px rgba(57, 255, 20, 0.2) !important;
}
.btn-green:hover {
    box-shadow: 0 8px 30px rgba(57, 255, 20, 0.45) !important;
    transform: translateY(-2px);
}

.solicitar-gratis-btn:active {
    transform: scale(0.97);
}

/* ========================================================
   GOLD NEON CLASSES FOR MÓNICA'S ADAPTIVE AGENT SERVICES
   ======================================================== */
.text-gold { 
    color: var(--neon-gold) !important; 
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.2); 
}

.border-gold { 
    border-color: rgba(255, 215, 0, 0.3) !important; 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 215, 0, 0.03) !important; 
}

.highlight-gold { 
    border-color: rgba(255, 215, 0, 0.15); 
}

.highlight-gold:hover { 
    border-color: var(--neon-gold); 
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.25); 
}

.highlight-gold .card-glow-bg { 
    background: var(--neon-gold); 
}

.highlight-gold .software-icon { 
    color: var(--neon-gold); 
    background: rgba(255, 215, 0, 0.08); 
}

.btn-gold { 
    background: var(--neon-gold); 
    color: #000; 
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.25); 
}

.btn-gold:hover { 
    box-shadow: 0 0 16px var(--neon-gold); 
    color: #000; 
}

.software-badge.gold { 
    background: rgba(255, 215, 0, 0.12); 
    color: var(--neon-gold); 
}

.niche-chip.active.gold { 
    border-color: var(--neon-gold); 
    background: rgba(255, 215, 0, 0.08); 
    color: var(--neon-gold); 
    box-shadow: 0 0 15px var(--neon-gold-glow); 
}

.profile-icon-box.gold { 
    color: var(--neon-gold); 
    background: rgba(255, 215, 0, 0.08); 
}

.profile-card-header h3 span.gold { 
    background: rgba(255, 215, 0, 0.1); 
    color: var(--neon-gold); 
}

/* ========================================================
   GEMINI AI CHAT TYPING LOADING INDICATORS
   ======================================================== */
.typing-indicator-bubble {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    width: fit-content !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 14px !important;
    border-top-left-radius: 0 !important;
    margin-top: 5px !important;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background-color: var(--neon-cyan);
    border-radius: 50%;
    display: inline-block;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0.3); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* HORIZONTAL SOFTWARE CARD LAYOUT */
.software-card {
    cursor: pointer;
    padding: 16px !important;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(8, 8, 16, 0.6);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    width: 100%;
}

.software-horizontal-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.software-img-container-horizontal {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}

.software-img-container-horizontal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.software-info-horizontal {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.software-info-horizontal .software-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.software-info-horizontal .software-description {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* HIDES APP-HEADER ON ASSISTANT & PANELS VIEWS */
.app-container.hide-header .app-header {
    display: none !important;
}

/* Prevent page scrolling completely in chat mode */
body:has(.app-container.chat-mode) {
    overflow: hidden !important;
    height: 100vh !important;
}

.app-container.chat-mode {
    height: 100vh !important;
    
    overflow: hidden !important;
    padding: 0 12px 65px 12px !important; /* Fixed footer spacing */
    display: flex;
    flex-direction: column;
}

.app-container.chat-mode .main-layout {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.app-container.chat-mode #view-asistente.tab-view.active {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Center the floating card vertically */
    align-items: center !important;
    padding: 10px 4px 16px 4px !important; /* Perfect margins around the floating card */
    overflow: hidden !important;
}

.app-container.chat-mode .asistente-section {
    width: 100% !important;
    max-width: 520px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.app-container.chat-mode .agent-chat-container {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(6, 6, 16, 0.4) !important; /* Original gorgeous glass background */
    border: 1px solid rgba(0, 240, 255, 0.15) !important; /* Original glowing cyan border */
    border-radius: 20px !important; /* Original rounded corners */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55) !important; /* Original shadow */
    overflow: hidden !important;
}

.app-container.chat-mode .agent-chat-body {
    flex: 1 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    background: rgba(2, 2, 5, 0.5) !important;
    padding: 24px !important;
}

.app-container.chat-mode .agent-input-wrapper {
    padding: 16px 24px 20px 24px !important; /* Original input capsule padding */
    background: rgba(2, 2, 5, 0.92) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* SUBPANEL CARDS STYLING */
.subpanel-card {
    padding: 18px 24px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(157, 78, 221, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    width: 100%;
}

.subpanel-card:hover {
    transform: translateX(4px);
    border-color: var(--neon-purple);
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.2);
    background: rgba(157, 78, 221, 0.03);
}

.subpanel-card-content {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.subpanel-icon {
    font-size: 16px;
    color: var(--neon-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(157, 78, 221, 0.1);
    transition: all 0.3s ease;
}

.subpanel-card:hover .subpanel-icon {
    transform: scale(1.1) rotate(5deg);
    background: rgba(157, 78, 221, 0.2);
    box-shadow: 0 0 8px rgba(157, 78, 221, 0.4);
}

.subpanel-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.subpanel-arrow {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.subpanel-card:hover .subpanel-arrow {
    color: var(--neon-purple);
    transform: translateX(3px);
}

/* ========================================================
   CARRD STYLED B2B CRM QUIZ FORM & FIELD INPUTS
   ======================================================== */
.quiz-section label {
    font-family: 'Alegreya Sans', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08rem !important;
    text-transform: uppercase !important;
    color: rgba(242, 242, 242, 0.7) !important;
    -webkit-text-stroke: 0.015em #000000;
    text-stroke: 0.015em #000000;
}

#pyme-sector-input, #custom-software-desc {
    width: 100% !important;
    padding: 14px !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border: 1px solid rgba(252, 186, 58, 0.2) !important;
    border-radius: 12px !important;
    color: #FFFFFF !important;
    font-family: 'Alegreya Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    outline: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

#pyme-sector-input:focus, #custom-software-desc:focus {
    border-color: #FCBA3A !important;
    box-shadow: 0 0 12px rgba(252, 186, 58, 0.25) !important;
}

.quiz-chk-label {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 14px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    color: #FFFFFF !important;
    transition: all 0.25s ease !important;
}

.quiz-chk-label:hover {
    border-color: rgba(252, 186, 58, 0.3) !important;
    background: rgba(252, 186, 58, 0.02) !important;
}

.quiz-chk-label:has(input[type="checkbox"]:checked) {
    border-color: #FCBA3A !important;
    background: rgba(252, 186, 58, 0.06) !important;
    box-shadow: 0 4px 15px rgba(252, 186, 58, 0.15) !important;
}

.quiz-chk-label input[type="checkbox"] {
    accent-color: #FCBA3A !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 3px !important;
}

.quiz-chk-label strong {
    font-family: 'Alegreya Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.02rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.quiz-chk-label span {
    font-family: 'Alegreya Sans', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: rgba(242, 242, 242, 0.6) !important;
    line-height: 1.4 !important;
}

/* CUSTOM SOFTWARE QUIZ VIEW OVERRIDE FOR 100% TRANSPARENCY */
.custom-software-view {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 24px 0 !important;
}

/* ========================================================
   B2B RESTYLING: ACCORDION GRID LAYOUT & DETAILS
   ======================================================== */
.software-card-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.software-horizontal-layout {
    width: 100%;
}

.software-img-container-horizontal {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    flex-shrink: 0;
    overflow: hidden;
}

.software-info-horizontal {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.software-accordion-trigger {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(252, 186, 58, 0.08);
    border: 1px solid rgba(252, 186, 58, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.software-card:hover .software-accordion-trigger {
    background: var(--color-gold);
    color: #000;
}

.accordion-chevron {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-size: 12px;
}

.accordion-chevron.rotated {
    transform: rotate(180deg);
}

.software-card-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-top: 0 solid rgba(252, 186, 58, 0.08);
    margin-top: 0;
}

.software-card-details.expanded {
    max-height: 800px; /* Large enough to display description, video and button */
    border-top: 1px solid rgba(252, 186, 58, 0.08);
    margin-top: 16px;
    padding-top: 16px;
}

.details-inner-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.details-video-wrapper {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.details-video-wrapper video {
    width: 100%;
    display: block;
    border-radius: 14px;
}

.details-description-long {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.details-actions {
    display: flex;
    justify-content: flex-end;
}

.me-interesa-btn {
    border: none;
    outline: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
}

.me-interesa-btn:hover {
    transform: scale(1.04);
}

.me-interesa-btn:active {
    transform: scale(0.96);
}

/* ========================================================
   B2B CYBERPUNK SHOPPING CART DRAWER STYLES
   ======================================================== */
.cart-drawer {
    position: fixed;
    left: 50%;
    bottom: 0;
    width: 100%;
    max-width: 580px; /* Aligned withconstrained elegance width */
    height: auto;
    max-height: 70vh;
    background: rgba(6, 6, 16, 0.98);
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(252, 186, 58, 0.2);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
    z-index: 1200;
    transform: translate(-50%, 100%);
    display: flex;
    flex-direction: column;
    border-radius: 24px 24px 0 0; /* Nice rounded corners at the top */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cart-drawer.active {
    transform: translate(-50%, 0);
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(252, 186, 58, 0.12);
}

.drawer-title {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-drawer-btn {
    background: none;
    border: none;
    outline: none;
    color: var(--text-secondary);
    font-size: 22px;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 1000000 !important;
    pointer-events: auto !important;
}

.close-drawer-btn:hover {
    color: var(--neon-red);
    transform: rotate(90deg);
}

.drawer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cart-items-container {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.empty-cart-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    height: 100%;
}

.empty-emoji {
    font-size: 32px;
}

.empty-cart-state p {
    font-family: var(--font-serif);
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

.empty-cart-state span {
    font-size: 10.5px;
    color: var(--text-muted);
}

.cart-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(252, 186, 58, 0.1);
    padding: 10px 14px;
    border-radius: 10px;
    transition: var(--transition-smooth);
}

.cart-item-row:hover {
    border-color: rgba(252, 186, 58, 0.25);
    background: rgba(252, 186, 58, 0.02);
}

.cart-item-row img, .cart-item-row .item-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.cart-item-row .item-icon-box {
    background: rgba(252, 186, 58, 0.08);
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1.5px solid rgba(252, 186, 58, 0.15);
}

.cart-item-row .item-meta {
    flex: 1;
}

.cart-item-row .item-meta h4 {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.cart-footer-block {
    background: rgba(2, 2, 5, 0.95);
    border-top: 1px solid rgba(252, 186, 58, 0.12);
    padding: 20px 24px;
}

.checkout-submit-btn {
    border: none;
    outline: none;
    width: 100%;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 800;
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px var(--neon-gold-glow);
    transition: var(--transition-smooth);
}

/* ========================================================
   MOBILE RESPONSIVENESS AND iOS COMPATIBILITY FIXES
   ======================================================== */
@media (max-width: 768px) {
    body {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* Fix iOS/mobile hardware-accelerated white washed-out rendering bug by disabling background blur glow objects */
    .cyber-glow {
        display: none !important;
    }

    .app-container {
        padding: 8px !important;
    }

    /* Full screen adapters for Factura / Shopping Cart list on narrow viewports */
    .cart-drawer {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .cart-items-container {
        padding: 16px !important;
        gap: 10px !important;
    }
    
    .cart-footer-block {
        padding: 16px !important;
    }
    
    /* Make accordion cards compact on small screens */
    .software-card {
        padding: 12px 14px !important;
    }
    
    .details-inner-wrapper {
        padding: 10px 4px !important;
    }

    /* Optimize the custom software quiz page for mobile */
    .custom-software-view {
        padding: 16px 8px !important; /* Narrower padding on mobile to save space */
    }
    
    .custom-software-title {
        font-size: 19px !important; /* Slightly smaller title so it doesn't wrap awkwardly */
        line-height: 1.3 !important;
    }
    
    .quiz-chk-label {
        padding: 10px !important; /* More compact checklist padding on mobile */
        gap: 10px !important;
    }
    
    .quiz-chk-label strong {
        font-size: 11.5px !important;
    }
    
    .quiz-chk-label span {
        font-size: 10px !important;
    }
    
    /* Make the submit button center and fit beautifully */
    #btn-submit-custom-software {
        width: 100% !important; /* Full width on mobile for easier tapping */
        max-width: 320px !important;
        margin: 25px auto 0 auto !important; /* Centered with auto margins */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* Dock Cart Badge Glow and Pulse Animations */
.dock-cart-badge.pulse-glowing {
    animation: badgeScalePulse 0.4s ease-out;
}

@keyframes badgeScalePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.45);
        box-shadow: 0 0 15px var(--neon-red, #ff0055);
    }
    100% {
        transform: scale(1);
    }
}

/* Upward Glowing Waves for Services bottom button when it has items */
.wave-glow-container {
    position: absolute;
    bottom: 24px; /* Centered right above the text, behind/around the icon */
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 50px;
    pointer-events: none;
    display: none; /* Hidden by default */
    z-index: 0;
    overflow: visible;
}

#dock-btn-tienda.has-items .wave-glow-container {
    display: block; /* Shown when cart has items */
}

.glow-wave {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    border-radius: 50% 50% 0 0; /* Semi-circle dome pointing upwards */
    border-top: 2px solid var(--color-gold, #FCBA3A);
    box-shadow: 0 -2px 6px rgba(252, 186, 58, 0.5);
    opacity: 0;
    pointer-events: none;
}

#dock-btn-tienda.has-items .wave-1 {
    animation: upwardWave 1.8s infinite cubic-bezier(0.25, 0.8, 0.25, 1);
}

#dock-btn-tienda.has-items .wave-2 {
    animation: upwardWave 1.8s infinite cubic-bezier(0.25, 0.8, 0.25, 1) 0.6s;
}

#dock-btn-tienda.has-items .wave-3 {
    animation: upwardWave 1.8s infinite cubic-bezier(0.25, 0.8, 0.25, 1) 1.2s;
}

@keyframes upwardWave {
    0% {
        bottom: 8px;
        width: 12px;
        height: 6px;
        opacity: 0;
        filter: blur(0.2px);
    }
    15% {
        opacity: 1;
        filter: blur(0.5px);
    }
    50% {
        opacity: 0.6;
        border-top-color: var(--color-gold, #FCBA3A);
        box-shadow: 0 -3px 8px rgba(252, 186, 58, 0.6);
    }
    100% {
        bottom: 60px; /* Shoots high up past the bottom nav bar */
        width: 44px;
        height: 22px;
        opacity: 0;
        filter: blur(3px);
    }
}

/* Pulsing and glowing gold effect for the services bag icon when items are in cart */
#dock-btn-tienda.has-items i {
    color: var(--color-gold, #FCBA3A) !important;
    text-shadow: 0 0 10px rgba(252, 186, 58, 0.8), 0 0 20px rgba(252, 186, 58, 0.4);
    animation: goldIconPulse 2s infinite ease-in-out;
}

@keyframes goldIconPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(252, 186, 58, 0.5));
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 8px rgba(252, 186, 58, 0.9));
    }
}



/* Clicking rectangles layout for B2B Services */
.software-card-rect {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(252, 186, 58, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    margin-bottom: 16px;
}

.software-card-rect::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(2, 2, 5, 0.3) 0%, rgba(2, 2, 5, 0.8) 100%);
    z-index: 1;
    transition: all 0.3s ease;
}

.software-card-rect:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: var(--color-gold);
    box-shadow: 0 12px 35px rgba(252, 186, 58, 0.35);
}

.software-card-rect:hover::before {
    background: linear-gradient(180deg, rgba(2, 2, 5, 0.15) 0%, rgba(2, 2, 5, 0.65) 100%);
}

.software-card-rect-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.software-card-rect-icon {
    font-size: 28px;
    color: var(--color-gold);
    text-shadow: 0 0 10px rgba(252, 186, 58, 0.4);
    margin-bottom: 4px;
}

.software-card-rect-title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    -webkit-text-stroke: 0.02em #000000;
    text-stroke: 0.02em #000000;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.software-card-rect-desc {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 90%;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.product-detail-view, 
.custom-software-view, 
.subpanels-section {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #04040a !important; /* Luxury deep dark background */
    z-index: 2000 !important; /* Layer above everything else */
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth momentum scrolling on iOS */
    padding: 24px 24px 85px 24px !important; /* Bottom padding to clear nav bar */
    box-sizing: border-box !important;
    transform: translateX(100%); /* Start completely off-screen on the right */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: block !important; /* Always block, controlled by transform and pointer-events */
}

/* When the hidden class is present, we push it off-screen */
.product-detail-view.hidden, 
.custom-software-view.hidden, 
.subpanels-section.hidden {
    transform: translateX(100%);
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Active state - slid into view */
.product-detail-view:not(.hidden), 
.custom-software-view:not(.hidden), 
.subpanels-section:not(.hidden) {
    transform: translateX(0);
    pointer-events: auto;
}



/* Premium Click-to-Play Video Cover & Play Trigger */
.video-wrapper.cyber-hud-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.video-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    border-radius: inherit;
    overflow: hidden;
    background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

.play-trigger-btn {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #fcba3a; /* Gold color */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(252, 186, 58, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 12;
    animation: playPulse 2s infinite;
}

.play-trigger-btn i {
    color: #020205;
    font-size: 28px;
    margin-left: 6px; /* Offset to center the triangle perfectly */
}

.video-cover:hover .play-trigger-btn {
    transform: scale(1.15);
    box-shadow: 0 0 45px rgba(252, 186, 58, 0.8);
    background: #ffc857;
}

@keyframes playPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(252, 186, 58, 0.6);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(252, 186, 58, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(252, 186, 58, 0);
    }
}


/* Premium Click-to-Play Centered Play Trigger & Label (Fixed layout) */
.play-button-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 12;
    pointer-events: none; /* Make sure click goes through to the cover trigger */
}

.play-trigger-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fcba3a; /* Gold color */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 35px rgba(252, 186, 58, 0.6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: playPulse 2s infinite;
}

.play-trigger-btn i {
    color: #020205;
    font-size: 32px;
    margin-left: 8px; /* Perfectly centers the triangle icon */
}

.play-text-label {
    font-family: var(--font-main, sans-serif);
    font-size: 13px;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    transition: all 0.3s ease;
}

.video-cover:hover .play-trigger-btn {
    transform: scale(1.15);
    box-shadow: 0 0 50px rgba(252, 186, 58, 0.9);
    background: #ffc857;
}

.video-cover:hover .play-text-label {
    color: #fcba3a;
    text-shadow: 0 2px 15px rgba(252, 186, 58, 0.4);
}


/* Direct absolute centering for play-trigger-btn when used without wrapper */
.video-cover #play-btn-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fcba3a; /* Gold color */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 35px rgba(252, 186, 58, 0.6);
    z-index: 12;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: playPulse 2s infinite;
}

.video-cover #play-btn-centered i {
    color: #020205;
    font-size: 32px;
    margin-left: 8px; /* Perfectly centers the triangle icon */
}

.video-cover:hover #play-btn-centered {
    transform: translate(-50%, -50%) scale(1.15) !important;
    box-shadow: 0 0 50px rgba(252, 186, 58, 0.9);
    background: #ffc857;
}

/* --- PREMIUM UI REFACTORING FOR PRODUCT DETAIL (v1.2) --- */
.product-detail-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.premium-card-glow {
    margin: 20px 0 0 0;
    padding: 24px;
    background: rgba(10, 10, 20, 0.7);
    border: 1px solid rgba(252, 186, 58, 0.3);
    border-radius: 16px;
    text-align: center;
    backdrop-filter: blur(15px);
    box-shadow: 0 0 20px rgba(252, 186, 58, 0.1), inset 0 0 10px rgba(255,255,255,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.premium-card-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(252, 186, 58, 0.2), inset 0 0 15px rgba(255,255,255,0.05);
}

.certificates-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.product-detail-certificates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.certificate-card {
    background: rgba(255, 255, 255, 0.02);
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform 0.3s ease, background 0.3s ease;
}
.certificate-card:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.05);
}

.premium-card-dark {
    padding: 24px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(20,20,30,0.8) 0%, rgba(10,10,15,0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.benefits-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 12px;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.benefits-list li i {
    color: var(--color-gold);
    margin-top: 3px;
}


/* ========================================================
   MOBILE RESPONSIVENESS FIXES FOR GANA DINERO / ASISTENTE
   ======================================================== */
@media (max-width: 768px) {
    .app-container.chat-mode .asistente-section,
    .agent-chat-container {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    .app-container.chat-mode {
        padding: 0 5px 65px 5px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .agent-chat-container {
        border-radius: 12px !important; /* Slightly smaller radius for mobile */
    }
    
    .app-container.chat-mode #view-asistente.tab-view.active {
        padding: 5px 0 10px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* Responsive Modals Fix */
@media (max-width: 768px) {
    .modal-content, #referrals-modal, .referrals-modal {
        width: 95% !important;
        max-width: 95% !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }
}

/* ENHANCED REFERRALS MODAL FIXES */
#referrals-modal {
    position: fixed !important;
    top: 45% !important; /* Slightly higher to avoid bottom nav */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-height: 80vh !important; /* Leave room for bottom nav */
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    overflow-x: hidden !important;
    z-index: 999999 !important; /* Ensure it is above the bottom nav */
    width: 92% !important;
    max-width: 400px !important;
    padding-bottom: 20px !important;
}

body {
    overflow-x: hidden !important;
}

/* Ensure the modal overlay covers everything, including bottom nav if possible */
#referrals-modal-overlay {
    z-index: 999998 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

/* Fix the video so it fits properly and doesn't cause horizontal overflow */
#referrals-modal video {
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
}

/* MOBILE MODAL FIX V2 */
#referrals-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-height: 75vh !important; /* Leave plenty of room for bottom nav */
     /* Force scroll */
    -webkit-overflow-scrolling: touch !important; /* Smooth scroll on iOS */
    z-index: 999999 !important; /* Above everything */
    width: 90% !important;
    max-width: 400px !important;
}

/* Add massive padding to the bottom of the modal content so it can be scrolled up */
#referrals-modal .modal-body {
    padding-bottom: 20px !important; 
}

/* Force bottom nav to be lower z-index than modal */
.bottom-nav {
    z-index: 99999 !important;
}

html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
    overscroll-behavior: none !important;
}

/* Evita que el "rebote" del scroll dentro del chat se escape hacia el fondo
   de la página (bug de iOS Safari: al llegar al tope/final del chat interno,
   el gesto de deslizar se lo "come" el fondo en vez de quedarse contenido). */
#agent-chat-body {
    overscroll-behavior-y: contain;
}
/* FIX FOR MODALS BLOCKED BY BOTTOM NAV */  
.modal-body { overflow-y: auto !important; max-height: calc(100vh - 150px) !important; padding-bottom: 80px !important; } 
  
/* MOBILE MODAL SCROLL FIX */  
.modal { max-height: 85vh !important; display: flex !important; flex-direction: column !important; z-index: 9999 !important; }  
.modal-body { overflow-y: auto !important; max-height: 100% !important; padding-bottom: 30px !important; }  
.fixed-bottom-bar { z-index: 5000 !important; }  



/* === PROFESSIONAL UX FIX v2.0 === */

/* Modal overlay: siempre encima de todo */
.modal-backdrop.active {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(6px) !important;
    z-index: 999990 !important; /* Higher than bottom-nav */
}

/* Modal general: centrado, scroll interno, siempre visible */
.modal.active {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999999 !important;
    max-height: 85vh !important;
    max-width: 92vw !important;
    width: 420px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    animation: modalSlideIn 0.3s ease-out !important;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Modal body: scroll interno */
.modal .modal-body {
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    max-height: 60vh !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 20px !important;
}

/* Modal actions (botones): siempre visibles al fondo */
.modal .modal-actions {
    flex-shrink: 0 !important;
    padding: 14px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(10, 10, 15, 0.95) !important;
}

/* Cart Drawer: encima del dock */
.cart-drawer.active {
    z-index: 999999 !important; /* Higher than backdrop */
}

/* Fixed bottom bar (dock): no tape los modales */
.fixed-bottom-bar {
    z-index: 5000 !important;
}

/* Botón "Gana Dinero" - estilo premium con animación.
   `overflow:hidden` en el mismo elemento que el box-shadow del resplandor era la
   causa real de las "líneas invisibles" reportadas en Safari/iOS (bug de WebKit:
   overflow:hidden + border-radius + box-shadow en un mismo elemento recorta el
   brillo en un rectángulo duro). El botón no tiene contenido interno que necesite
   recortarse, así que overflow:hidden no cumplía ningún propósito real aquí. */
.carrd-cta-btn {
    position: relative !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 40px rgba(255, 0, 0, 0.8), 0 0 80px rgba(204, 0, 0, 0.5), 0 0 130px rgba(255, 0, 0, 0.25), 0 4px 20px rgba(245, 158, 11, 0.3) !important;
}

.carrd-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 45px rgba(255, 0, 0, 0.9), 0 0 90px rgba(204, 0, 0, 0.55), 0 0 150px rgba(255, 0, 0, 0.3), 0 8px 30px rgba(245, 158, 11, 0.5) !important;
}

.carrd-cta-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Botón "Solicitar Gratis" en detail view - siempre accesible.
   z-index era 50 -- muy por debajo de .fixed-bottom-bar (5000), así que la barra
   inferior fija quedaba ENCIMA del botón y se robaba el toque/clic (el botón se
   veía pero no respondía, o el toque activaba la barra de navegación de abajo en
   su lugar). Confirmado con Playwright: el centro del botón devolvía la barra
   inferior como elemento receptor del clic, no el botón. Ahora gana siempre a la
   barra, y se agrega margen inferior extra para que tampoco quede tapado visualmente. */
.solicitar-gratis-btn, .solicitar-obtener-btn {
    position: relative !important;
    z-index: 5001 !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
}

/* Product detail view: scroll suave */
.product-detail-view {
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

/* Video container: aspecto 16:9 limpio */
.product-detail-video-container .video-wrapper {
    aspect-ratio: 16/9 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

.product-detail-video-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

/* Product cards: hover premium */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
    .modal.active {
        width: 94vw !important;
        max-height: 80vh !important;
        top: 48% !important;
    }
    
    .modal .modal-body {
        max-height: 55vh !important;
        padding-bottom: 16px !important;
    }
    
    /* Asegurar que el contenido no quede tapado por el dock */
    .main-layout {
        padding-bottom: 80px !important;
    }
    
    .product-detail-view {
        padding-bottom: 85px !important;
    }
}

/* === END PROFESSIONAL UX FIX === */


/* === REFERRALS MODAL PREMIUM STYLE === */
#referrals-modal {
    border-color: rgba(252, 186, 58, 0.25) !important;
}

#referrals-modal.active {
    z-index: 999999 !important;
}

#referrals-modal .modal-body {
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    max-height: 60vh !important;
    padding-bottom: 20px !important;
}

/* Fix double scrollbar when modal is open */
body.modal-open {
    overflow: hidden !important;
}


/* ==========================================================================
   MOBILE HARDWARE ACCELERATION PATCH (REMOVES BLACK SCROLLING SPOTS ON MOBILE)
   ========================================================================== */
@media (max-width: 480px) {
    /* Prevent redraw delay/black patches under fixed bottom bar by disabling blur filter on mobile */
    .fixed-bottom-bar {
        -webkit-transform: translate3d(0, 0, 0) translateX(-50%) !important;
        transform: translate3d(0, 0, 0) translateX(-50%) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        will-change: transform !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        background: rgba(8, 8, 16, 0.6) !important; /* Premium translucent glass overlay */
    }

    /* Force hardware compositor layer ONLY on scrollable views, preventing fixed positioning context break */
    .tab-view {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}


}


/* ==========================================================================
   PAGE 1 SCROLL FREEZER & VIEWPORT LOCK (PREVENTS SWIPING & BOTTOM EMPTY SPACE)
   ========================================================================== */
@media (max-width: 480px) {
    /* Freeze html, body, and layout containers when Empresa view is active */
    html:has(#view-empresa.active),
    body:has(#view-empresa.active),
    .app-container:has(#view-empresa.active),
    .main-layout:has(#view-empresa.active) {
        overflow: hidden !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        width: 100% !important;
    }

    /* Lock view-empresa exactly above the bottom navigation bar */
    #view-empresa.tab-view.active {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100dvh - 65px) !important;
        min-height: calc(100dvh - 65px) !important;
        max-height: calc(100dvh - 65px) !important;
        overflow: hidden !important;
        padding-top: 10px !important;
        padding-bottom: 0px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        justify-content: space-between !important;
    }

    /* Presentation panel fills the height and distributes spaces */
    .empresa-presentation-panel {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        justify-content: space-between !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Sizing adjustments to guarantee everything fits without overlap */
    .carrd-brand-text {
        font-size: 1.05em !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        text-align: center !important;
    }

    .carrd-main-title {
        font-size: 1.3em !important;
        margin-bottom: 2px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .carrd-sub-title {
        font-size: 1.3em !important;
        margin-bottom: 2px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    /* Video frame scales dynamically to fit the viewport */
    .carrd-video-frame {
        width: 100% !important;
        aspect-ratio: 16/9 !important;
        margin: 0 auto !important;
        border: 2px solid #FFD700 !important;
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.85), 0 0 65px rgba(255, 185, 0, 0.55), 0 0 110px rgba(255, 160, 0, 0.3), 0 0 160px rgba(255, 140, 0, 0.15) !important;
        border-radius: 1.5rem !important;
    }
    
    .carrd-video-frame .video-wrapper {
        border-radius: 1.4rem !important;
        height: 100% !important;
        width: 100% !important;
    }

    .carrd-video-frame video,
    .empresa-presentation-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .carrd-sub-title-2 {
        font-size: 1.3em !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .carrd-pitch-card {
        margin: 2px 0 !important;
        text-align: center !important;
    }

    .carrd-desc-text {
        font-size: 1.1em !important;
        line-height: 1.25 !important;
    }

    /* Sits perfectly touching the bottom bar */
    .empresa-cta-wrapper {
        width: 100% !important;
        margin-top: auto !important;
        padding-bottom: 8px !important; 
    }

    .carrd-cta-btn {
        width: 100% !important;
        padding: 12px 0 !important;
        font-size: 1.35em !important;
        font-weight: 900 !important;
        margin: 0 !important;
        border-radius: 3rem !important;
        color: #FFD700 !important;
        background-color: #8b0000 !important;
        background-image: linear-gradient(180deg, #d32f2f 0%, #8b0000 100%) !important;
        border: 1px solid #FF3333 !important;
        box-shadow: 0 0 30px rgba(255, 30, 30, 0.85), 0 0 60px rgba(200, 0, 0, 0.5), 0 0 100px rgba(150, 0, 0, 0.3) !important;
    }
}

/* ==========================================================================
   IPAD/TABLET: MISMO LOCK DE ALTURA QUE ARRIBA, SIN TOCAR TAMAÑOS DE FUENTE
   (pedido explícito del dueño 2026-08-03: en iPad "Empresa" se veía bien
   distribuida, pero sobraba espacio vacío abajo antes de la barra inferior
   -- en el navegador se disimulaba porque se podía seguir bajando, pero en
   la app instalada (sin scroll extra) el vacío quedaba muy visible. Es SOLO
   el bloqueo de altura de arriba, sin los ajustes de fuente/tamaño de
   celular, para no cambiar en nada cómo se ve en iPhone.) */
@media (min-width: 481px) and (max-width: 1024px) {
    /* CAMBIO IMPORTANTE (2026-08-03, tras reporte del dueño en su iPad): la versión
       anterior forzaba height/max-height EXACTOS (100dvh, calc(100dvh-65px)) con
       overflow:hidden !important -- eso asume que YO sé con precisión cuánto mide
       TODO lo demás en pantalla (el .app-header de arriba con el logo, el dock de
       abajo), pero esa cuenta NO daba igual en la app instalada en pantalla de
       inicio del iPad que en Safari normal (probablemente por cómo cada modo
       calcula dvh) -- el resultado real: el contenido superior ("Software
       Automático" y el texto) quedaba empujado fuera de la vista, con un hueco
       vacío antes del botón. En vez de FORZAR una altura exacta (frágil, se rompe
       si mi cuenta de "lo demás en pantalla" no es perfecta en cada entorno), se
       usa min-height: si el contenido cabe en una pantalla, se ve idéntico a
       antes; si en algún entorno específico sobra un poco, como mucho se puede
       bajar un poquito -- nunca se empuja ni se esconde nada. */
    #view-empresa.tab-view.active {
        display: flex !important;
        flex-direction: column !important;
        min-height: calc(100dvh - 65px) !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
    }

    .empresa-presentation-panel {
        display: flex !important;
        flex-direction: column !important;
        /* flex:1 (no height:100%) -- con el padre en min-height (no height fija),
           un hijo con height:100% no siempre resuelve bien contra un flex column;
           flex:1 sí lo estira de forma confiable para llenar el espacio real
           disponible, sea cual sea, sin depender de porcentajes. */
        flex: 1 !important;
        /* Pedido del dueño (2026-08-03): en vez de pegar todo arriba y dejar el
           hueco sobrante solo antes del botón, centrar el bloque completo
           (título, texto, video, botón) como grupo -- el espacio libre queda
           repartido igual arriba y abajo, simétrico, sin tocar el espaciado
           natural QUE YA HABÍA entre cada elemento (center no lo estira, solo
           mueve el bloque entero). */
        justify-content: center !important;
    }

    .empresa-cta-wrapper {
        width: 100% !important;
        /* Ya no hace falta margin-top:auto -- con el bloque centrado como grupo
           (justify-content:center arriba), el botón queda en su lugar natural
           dentro del grupo, no empujado al fondo. */
    }
}


/* ==========================================================================
   MOBILE CHAT DOCKING PATCH (ALIGNS CHAT CARD DIRECTLY TO THE BOTTOM DOCK)
   NOTA: el selector viejo (".app-container.chat-mode #view-asistente...")
   nunca funcionó -- #view-asistente es hijo directo de <body>, NO de
   .app-container (son hermanos en el DOM real), así que esa regla jamás
   coincidía. Se corrige apuntando directo a #view-asistente.tab-view.active,
   fijándolo a pantalla completa y reservando exactamente el alto del dock
   inferior en el padding, para que el panel conecte con la barra siempre,
   sin importar el alto real del viewport del dispositivo.
   Ampliado de max-width:480px a 1024px (2026-08-03): antes solo cubría
   celulares -- en iPad (768-1024px) el chat se veía flotando en la mitad de
   la pantalla, despegado de la barra inferior, porque esta regla nunca se
   aplicaba ahí. El dueño pidió que este fix (y el de fondo consistente)
   corra en TODOS los dispositivos, no solo celulares.
   ========================================================================== */
@media (max-width: 1024px) {
    #view-asistente.tab-view.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 65px 10px calc(64px + env(safe-area-inset-bottom, 8px)) 10px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 10 !important;
    }

    /* Eslabón intermedio: sin esto, el 100% del panel no tiene de dónde heredar altura */
    #view-asistente.tab-view.active .asistente-section {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Elegant card format docked to the bottom dock */
    #view-asistente.tab-view.active .agent-chat-container {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        margin: 0 !important;
        box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.6) !important;
    }
}


/* --- TYPING INDICATOR ANIMATIONS FOR MONICA AI --- */
.typing-indicator-bubble {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    align-self: flex-start !important;
    margin: 8px 0 !important;
    width: fit-content !important;
    min-width: 50px !important;
}

.typing-dot {
    width: 6px !important;
    height: 6px !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: bounce 1.4s infinite ease-in-out both !important;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s !important;
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s !important;
}

@keyframes bounce {
    0%, 80%, 100% { 
        transform: scale(0.6);
        opacity: 0.4;
    } 40% { 
        transform: scale(1.2);
        opacity: 1;
    }
}

/* ========================================================
   STORE HEADER BAR AND CART TRIGGER BUTTON STYLES
   ======================================================== */
.store-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}

.store-header-bar h2.section-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    letter-spacing: 0.5px;
    margin: 0;
    border: none;
    padding: 0;
    text-transform: uppercase;
}

.cart-trigger-btn {
    position: relative;
    background: rgba(252, 186, 58, 0.08);
    border: 1px solid rgba(252, 186, 58, 0.25);
    color: var(--color-gold);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
}

.cart-trigger-btn:hover {
    background: rgba(252, 186, 58, 0.18);
    border-color: rgba(252, 186, 58, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(252, 186, 58, 0.2);
}

.cart-trigger-btn:active {
    transform: scale(0.96);
}

.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--neon-red, #ff0055);
    color: #fff;
    font-family: var(--font-terminal);
    font-size: 9px;
    font-weight: 900;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.6);
    border: 1.5px solid #020205;
}

/* ==========================================
   INTERACTIVE CHAT CALENDAR & REGISTRATION CARD
   ========================================== */
.interactive-chat-calendar, .booking-registration-card {
    background: rgba(20, 15, 15, 0.85) !important;
    border: 1px solid rgba(252, 186, 58, 0.25) !important;
    border-radius: 14px;
    padding: 16px;
    margin: 12px 0;
    font-family: var(--font-main), sans-serif;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    text-align: left;
}

.interactive-chat-calendar .chat-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.interactive-chat-calendar .chat-cal-month-year {
    font-weight: 800;
    font-size: 13.5px;
    color: #fcba3a;
    letter-spacing: 0.5px;
}

.interactive-chat-calendar .chat-cal-nav-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(252, 186, 58, 0.15);
    color: #fcba3a;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.interactive-chat-calendar .chat-cal-nav-btn:hover {
    background: rgba(252, 186, 58, 0.15);
    border-color: #fcba3a;
}

.interactive-chat-calendar .chat-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 6px;
}

.interactive-chat-calendar .chat-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.interactive-chat-calendar .chat-cal-day-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    color: #fff;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.interactive-chat-calendar .chat-cal-day-cell:hover:not(.disabled):not(.active) {
    background: rgba(252, 186, 58, 0.15);
    border-color: rgba(252, 186, 58, 0.3);
}

.interactive-chat-calendar .chat-cal-day-cell.today {
    border: 1.5px solid #fcba3a;
    color: #fcba3a;
}

.interactive-chat-calendar .chat-cal-day-cell.active {
    background: #fcba3a !important;
    color: #000 !important;
    font-weight: 700;
    border-color: #fcba3a !important;
    box-shadow: 0 0 10px rgba(252, 186, 58, 0.3);
}

.interactive-chat-calendar .chat-cal-day-cell.disabled {
    opacity: 0.2;
    cursor: not-allowed;
    background: none;
    border-color: transparent;
}

.interactive-chat-calendar .chat-cal-hours-panel {
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 12px;
}

.interactive-chat-calendar .chat-cal-hours-panel h4 {
    margin: 0 0 8px 0;
    font-size: 11.5px;
    color: #fff;
    font-weight: 700;
}

.interactive-chat-calendar .chat-cal-hours-panel h4 span {
    color: #fcba3a;
}

.interactive-chat-calendar .chat-cal-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.interactive-chat-calendar .chat-cal-slot-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 6px 0;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.interactive-chat-calendar .chat-cal-slot-btn:hover:not(.active) {
    background: rgba(252, 186, 58, 0.1);
    border-color: rgba(252, 186, 58, 0.25);
}

.interactive-chat-calendar .chat-cal-slot-btn.active {
    background: #fcba3a !important;
    color: #000 !important;
    font-weight: 700;
    border-color: #fcba3a !important;
    box-shadow: 0 0 10px rgba(252, 186, 58, 0.3);
}

.interactive-chat-calendar .chat-cal-confirm-btn, 
.booking-registration-card .form-submit-btn {
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    background: #fcba3a;
    color: #000;
    border: none;
    border-radius: 6px;
    font-weight: 800;
    font-size: 11.5px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.interactive-chat-calendar .chat-cal-confirm-btn:hover:not(:disabled),
.booking-registration-card .form-submit-btn:hover:not(:disabled) {
    background: #e5a12b;
    box-shadow: 0 0 15px rgba(252, 186, 58, 0.4);
}

.interactive-chat-calendar .chat-cal-confirm-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: #666;
    cursor: not-allowed;
}

/* REGISTRATION CARD STYLE */
.booking-registration-card h4 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #fcba3a;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(252, 186, 58, 0.2);
    padding-bottom: 6px;
}

.booking-registration-card .form-group {
    margin-bottom: 10px;
}

.booking-registration-card label {
    display: block;
    font-size: 9.5px;
    color: #aaa;
    margin-bottom: 4px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.booking-registration-card input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(252, 186, 58, 0.15);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 12px;
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.booking-registration-card input:focus {
    border-color: #fcba3a;
    outline: none;
    background: rgba(0, 0, 0, 0.6);
}


/* ========================================================
   PREMIUM CUSTOM WEBRTC & NOTIFICATIONS CUSTOM STYLES
   ======================================================== */

/* Envelope notification button in Chat Header */
.chat-notifications-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #ffffff);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-left: 8px;
}

.chat-notifications-btn:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--neon-cyan, #00f0ff);
    color: var(--neon-cyan, #00f0ff);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

/* Botón de perfil "alumbrando" hasta que el visitante enlace su cédula (pedido
   explícito del dueño 2026-08-03, en vez de agregar un botón nuevo en el chat). */
.profile-btn-glow {
    animation: profileBtnGlowPulse 1.8s ease-in-out infinite;
}
@keyframes profileBtnGlowPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(0, 240, 255, 0.5); border-color: rgba(0, 240, 255, 0.5); }
    50% { box-shadow: 0 0 16px rgba(0, 240, 255, 0.95); border-color: rgba(0, 240, 255, 0.95); }
}

/* WhatsApp Header Button Custom Styles */
.chat-whatsapp-btn {
    background: rgba(37, 211, 102, 0.12) !important;
    border: 1px solid rgba(37, 211, 102, 0.35) !important;
    color: #25d366 !important;
    text-decoration: none !important;
}

.chat-whatsapp-btn:hover {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
    border-color: #25d366 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(37, 211, 102, 0.6) !important;
    transform: scale(1.08);
}

.chat-notifications-btn .notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--neon-red, #ff0055);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(6, 6, 16, 0.9);
    box-shadow: 0 0 8px var(--neon-red, #ff0055);
}

/* Widget de sesión de IA (botón "IA" + 3 rayas de uso diario + temporizador,
   pedido explícito del dueño 2026-08-03) en el header del chat de la tienda. */
.ia-session-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.ia-session-dashes {
    display: flex;
    gap: 3px;
}

.ia-dash {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.3s ease;
}

.ia-dash.used {
    background: #00f0ff;
}

.ia-dash.active {
    background: #ffb020;
    animation: iaDashActivePulse 1.2s ease-in-out infinite;
}

@keyframes iaDashActivePulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.ia-session-btn {
    background: rgba(0, 240, 255, 0.15);
    border: 1px solid rgba(0, 240, 255, 0.4);
    color: #00f0ff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ia-session-btn:hover:not(:disabled) {
    background: rgba(0, 240, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.ia-session-btn.ia-active {
    background: rgba(255, 176, 32, 0.18);
    border-color: rgba(255, 176, 32, 0.5);
    color: #ffb020;
    cursor: default;
}

.ia-session-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ia-session-timer {
    font-size: 0.62rem;
    color: var(--text-secondary, #94a3b8);
    font-variant-numeric: tabular-nums;
}

/* Glowing Micro-Animations for Voice Recording Button */
.input-icon-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #aaaaaa);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.input-icon-btn:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--neon-cyan, #00f0ff);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.input-icon-btn.recording {
    background: var(--neon-red, #ff0055) !important;
    color: #fff !important;
    border-color: var(--neon-red, #ff0055) !important;
    animation: pulse-recording-btn 1.2s infinite ease-in-out;
}

@keyframes pulse-recording-btn {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 85, 0.6); }
    70% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(255, 0, 85, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 85, 0); }
}

/* WebRTC Call Container - Premium Glassmorphism & Letterboxing */
.webrtc-call-container {
    position: absolute;
    top: 60px; /* Right below chat header */
    left: 12px;
    right: 12px;
    bottom: 80px; /* Above input capsule */
    background: #000000;
    border: 2px solid var(--neon-green, #39ff14);
    border-radius: 16px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(57, 255, 20, 0.25);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.webrtc-call-container.hidden {
    display: none !important;
}

/* Letterboxing aspect ratio wrapper with black franjas */
.webrtc-video-wrapper {
    flex: 1;
    position: relative;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.remote-video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Forces letterboxing on different dimensions */
    background: #000000;
}

.local-video {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 90px;
    height: 120px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    object-fit: cover;
    background: #111;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

/* Audio call fallback text display */
.webrtc-audio-indicator {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--neon-green, #39ff14);
    z-index: 2;
}

.webrtc-audio-indicator i {
    font-size: 40px;
    animation: audio-pulse 1.5s infinite ease-in-out;
}

@keyframes audio-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; text-shadow: 0 0 15px var(--neon-green); }
    100% { transform: scale(1); opacity: 0.7; }
}

/* WebRTC Controls (Rendered on top of bottom black franja) */
.webrtc-controls {
    height: 65px;
    background: rgba(0, 0, 0, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
    z-index: 20;
}

.webrtc-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.webrtc-btn.btn-danger {
    background: var(--neon-red, #ff0055);
    color: #fff;
}

.webrtc-btn.btn-danger:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--neon-red, #ff0055);
}

.webrtc-btn.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.webrtc-btn.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.08);
}

/* Expanded state for videocall grid container */
.webrtc-call-container.expanded {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    z-index: 10000 !important;
}

.webrtc-call-container.expanded .local-video {
    width: 130px;
    height: 180px;
}

/* Custom Audio message bubble */
.chat-audio-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    min-width: 200px;
}

.chat-audio-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--neon-cyan, #00f0ff);
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0,240,255,0.3);
}

.chat-audio-waveform {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.chat-audio-progress {
    height: 100%;
    width: 0%;
    background: var(--neon-cyan, #00f0ff);
    border-radius: 2px;
    transition: width 0.1s linear;
}

/* Cita agendamiento alert button green */
.join-call-btn-wrapper {
    text-align: center;
    margin: 12px 0;
}

.join-call-btn {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: #fff !important;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.join-call-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.6);
}

/* Notifications layout inside Modal */
.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 350px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 5px 0;
}

.notification-item-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.25s ease;
    cursor: pointer;
}

.notification-item-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(0, 240, 255, 0.15);
}

.notification-item-card.unread {
    border-left: 3px solid var(--neon-cyan, #00f0ff);
    background: rgba(0, 240, 255, 0.02);
}

.notification-item-card .noti-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--text-muted, #777777);
    font-family: var(--font-terminal);
}

.notification-item-card .noti-body {
    font-size: 12px;
    color: var(--text-primary, #ffffff);
    line-height: 1.4;
}

.notification-item-card .noti-type-tag {
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

.noti-type-tag.message {
    background: rgba(0, 240, 255, 0.1);
    color: var(--neon-cyan, #00f0ff);
}

.noti-type-tag.appointment {
    background: rgba(157, 78, 221, 0.1);
    color: var(--neon-purple, #9d4edd);
}

/* Mailbox Popover - Ultra Premium Cyber Design */
.mailbox-popover {
    position: absolute;
    top: 62px;
    right: 10px;
    background: linear-gradient(145deg, rgba(18, 19, 32, 0.98) 0%, rgba(10, 10, 20, 0.99) 100%);
    border: 1px solid rgba(0, 240, 255, 0.25);
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 240, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: 320px;
    max-height: 400px;
    overflow: hidden;
    animation: popoverFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mailbox-popover.hidden {
    display: none !important;
}

.mailbox-popover .popover-arrow {
    position: absolute;
    top: -6px;
    right: 18px;
    width: 12px;
    height: 12px;
    background: rgba(18, 19, 32, 0.98);
    border-top: 1px solid rgba(0, 240, 255, 0.25);
    border-left: 1px solid rgba(0, 240, 255, 0.25);
    transform: rotate(45deg);
}

.mailbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.mailbox-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #f4f4f5;
}

.mailbox-title i {
    color: var(--neon-cyan, #00f0ff);
}

.mailbox-unread-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--neon-cyan, #00f0ff);
    background: rgba(0, 240, 255, 0.1);
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid rgba(0, 240, 255, 0.2);
}

.mailbox-content {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    flex-grow: 1;
    height: 100%;
    max-height: 330px;
}

.mailbox-content::-webkit-scrollbar,
.mailbox-detail-body::-webkit-scrollbar {
    width: 4px;
}

.mailbox-content::-webkit-scrollbar-track,
.mailbox-detail-body::-webkit-scrollbar-track {
    background: transparent;
}

.mailbox-content::-webkit-scrollbar-thumb,
.mailbox-detail-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.mailbox-content::-webkit-scrollbar-thumb:hover,
.mailbox-detail-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 240, 255, 0.3);
}

.mailbox-list {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

.mailbox-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

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

.mailbox-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.mailbox-item.unread {
    background: rgba(0, 240, 255, 0.02);
}

.mailbox-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #a1a1aa;
    flex-shrink: 0;
    position: relative;
}

.mailbox-item.unread .mailbox-item-icon {
    background: rgba(0, 240, 255, 0.1);
    color: var(--neon-cyan, #00f0ff);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

.mailbox-item.unread .mailbox-item-icon::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: var(--neon-red, #ff0055);
    border-radius: 50%;
    border: 1.5px solid rgba(18, 19, 32, 0.98);
    box-shadow: 0 0 6px var(--neon-red, #ff0055);
}

.mailbox-item-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
    min-width: 0;
}

.mailbox-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.mailbox-item-sender {
    font-size: 11px;
    color: #a1a1aa;
    font-weight: 500;
}

.mailbox-item-date {
    font-size: 10px;
    color: #71717a;
}

.mailbox-item-subject {
    font-size: 12.5px;
    font-weight: 600;
    color: #f4f4f5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mailbox-item.unread .mailbox-item-subject {
    color: #ffffff;
    font-weight: 700;
}

.mailbox-item-preview {
    font-size: 11.5px;
    color: #71717a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mailbox-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    color: #71717a;
    gap: 10px;
}

.mailbox-empty i {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.05);
}

.mailbox-empty span {
    font-size: 12px;
}

.mailbox-detail {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
}

.mailbox-detail-back {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--neon-cyan, #00f0ff);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease;
}

.mailbox-detail-back:hover {
    transform: translateX(-3px);
}

.mailbox-detail-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
}

.mailbox-detail-subject {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.mailbox-detail-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #a1a1aa;
}

.mailbox-detail-body {
    font-size: 12px;
    color: #d4d4d8;
    line-height: 1.5;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    max-height: 200px;
    padding-right: 4px;
}

.mailbox-detail-body strong {
    color: #ffffff;
}

.mailbox-detail-body a {
    color: var(--neon-cyan, #00f0ff);
    text-decoration: underline;
}


}

@keyframes popoverFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Unfolding Letter Overlay & Animation Styles */
.unfolding-letter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(12, 4, 28, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    perspective: 1500px;
}

.envelope-wrapper {
    position: relative;
    width: 450px;
    height: 300px;
    background: linear-gradient(135deg, #1e0b36, #120524);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transform-style: preserve-3d;
}

/* When the letter is fully opened, the envelope itself scales out or goes behind */
.envelope-wrapper.open {
    height: auto;
    min-height: 500px;
    max-height: 85vh;
    width: 90%;
    max-width: 600px;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Flap at the top of the envelope */
.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: #1e0b36;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    transform-origin: top center;
    transition: transform 0.4s ease;
    z-index: 3;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.envelope-wrapper.open .envelope-flap {
    transform: rotateX(180deg);
    z-index: 1;
}

/* Front of the envelope pocket */
.envelope-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(135deg, #250f44, #120524);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 0 12px 12px;
    z-index: 3;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 50% 60%, 0% 0%);
}

.envelope-wrapper.open .envelope-front {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* The actual letter paper sheet */
.letter-sheet {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 90%;
    height: 80%;
    background: #faf8f5; /* Mónica light premium maderoso background */
    border: 1px solid #e7dfd5;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 2;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateY(0) scale(0.95);
    opacity: 0.5;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* When envelope is opened, the letter slides out, expands and unfolds */
.envelope-wrapper.open .letter-sheet {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 450px;
    max-height: 80vh;
    transform: translateY(0) scale(1);
    opacity: 1;
    z-index: 5;
    animation: paperUnfold 0.8s forwards;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
}

@keyframes paperUnfold {
    0% {
        transform: translateY(80px) rotateX(-20deg) scale(0.85);
        transform-origin: bottom center;
        max-height: 200px;
    }
    40% {
        transform: translateY(-20px) rotateX(10deg) scale(0.95);
        max-height: 400px;
    }
    100% {
        transform: translateY(0) rotateX(0deg) scale(1);
        transform-origin: center center;
        max-height: 80vh;
    }
}

.letter-paper-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(0,0,0,0.01) 1px, transparent 0), radial-gradient(rgba(0,0,0,0.01) 1px, transparent 0);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    pointer-events: none;
    opacity: 0.5;
}

.letter-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    color: #4a3728;
    position: relative;
    z-index: 2;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: #d97706 #faf8f5;
}

.letter-content::-webkit-scrollbar {
    width: 6px;
}
.letter-content::-webkit-scrollbar-track {
    background: #faf8f5;
}
.letter-content::-webkit-scrollbar-thumb {
    background: #d97706;
    border-radius: 3px;
}

.close-letter-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(74, 55, 40, 0.1);
    border: none;
    color: #4a3728;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, transform 0.2s;
}

.close-letter-btn:hover {
    background: rgba(74, 55, 40, 0.2);
    transform: scale(1.1);
}

@media (max-width: 480px) {
    .envelope-wrapper {
        width: 90%;
        max-width: 360px;
        height: 240px;
    }
    .envelope-wrapper.open {
        width: 95%;
        max-width: 100%;
        min-height: 400px;
    }
    .letter-content {
        padding: 20px 15px;
    }
}



/* --- CHAT MENU DESPLEGABLE & CONSULTA PERSONALIZADA STYLES --- */
.chat-menu-desplegable-card,
.custom-inquiry-card {
    background: rgba(20, 20, 25, 0.85);
    border: 1px solid rgba(252, 186, 58, 0.35);
    border-radius: 14px;
    padding: 16px;
    margin: 12px 0 6px 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.chat-menu-desplegable-card:hover,
.custom-inquiry-card:hover {
    border-color: rgba(252, 186, 58, 0.6);
    box-shadow: 0 10px 30px rgba(252, 186, 58, 0.15);
}

.chat-menu-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fcba3a;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chat-service-select {
    width: 100%;
    padding: 12px 14px;
    background: rgba(10, 10, 15, 0.95);
    color: #f1f5f9;
    border: 1px solid rgba(252, 186, 58, 0.4);
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: all 0.25s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fcba3a'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}

.chat-service-select:focus,
.chat-service-select:hover {
    border-color: #fcba3a;
    box-shadow: 0 0 12px rgba(252, 186, 58, 0.3);
    background-color: rgba(15, 15, 22, 0.98);
}

.chat-service-select option {
    background: #0f1117;
    color: #f1f5f9;
    padding: 10px;
}

.custom-inquiry-textarea {
    width: 100%;
    padding: 12px;
    background: rgba(10, 10, 15, 0.95);
    color: #f1f5f9;
    border: 1px solid rgba(252, 186, 58, 0.35);
    border-radius: 10px;
    font-size: 13.5px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    margin-bottom: 12px;
    transition: all 0.25s ease;
}

.custom-inquiry-textarea:focus {
    border-color: #fcba3a;
    box-shadow: 0 0 12px rgba(252, 186, 58, 0.3);
}

.custom-inquiry-btn {
    width: 100%;
    padding: 12px 18px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.custom-inquiry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
    filter: brightness(1.1);
}

/* ==========================================================================
   ESTILOS DE ALERTA RESPLANDECIENTE (BUZÓN) Y PARGAMINO ANCESTRAL
   ========================================================================== */

/* Resplandor pulsante del botón de buzón cuando hay correos sin leer */
.mailbox-pulse-glow {
    position: relative !important;
    animation: mailboxPulseGlow 1.8s ease-in-out infinite !important;
    border-color: rgba(252, 186, 58, 0.8) !important;
}

.mailbox-pulse-glow::after {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border-radius: 50%;
    border: 2px solid var(--color-gold);
    box-shadow: 0 0 15px var(--color-gold), inset 0 0 10px var(--color-gold);
    animation: mailboxBorderGlow 1.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mailboxPulseGlow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(252, 186, 58, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 22px rgba(252, 186, 58, 0.95), 0 0 35px rgba(252, 186, 58, 0.6);
        transform: scale(1.12);
    }
}

@keyframes mailboxBorderGlow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* MODAL DE MANUSCRITO ANCESTRAL Y GUÍA DE APP WEB (ESTILO STORE LUXURY GOLD & GLASS) */
/* MODAL DE MANUSCRITO ANCESTRAL Y GUÍA DE APP WEB (ESTILO STORE LUXURY GOLD & GLASS) */
.ancient-parchment-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(5, 7, 13, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.ancient-parchment-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.ancient-parchment-scroll {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    background: linear-gradient(165deg, rgba(23, 26, 41, 0.98) 0%, rgba(12, 14, 23, 0.99) 100%);
    border: 2px solid rgba(234, 179, 8, 0.6);
    border-radius: 24px;
    box-shadow: 
        0 25px 70px rgba(0, 0, 0, 0.95),
        inset 0 0 30px rgba(234, 179, 8, 0.1),
        0 0 40px rgba(234, 179, 8, 0.25);
    color: #f3f4f6;
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    padding: 36px 28px 28px 28px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    transform: scale(0.92) translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(234, 179, 8, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 90% 90%, rgba(234, 179, 8, 0.08) 0%, transparent 50%);
}

.ancient-parchment-backdrop.active .ancient-parchment-scroll {
    transform: scale(1) translateY(0);
}

.parchment-handle-top, .parchment-handle-bottom {
    position: absolute;
    left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, #ca8a04 0%, #fef08a 50%, #ca8a04 100%);
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.6);
    z-index: 2;
}
.parchment-handle-top { top: 0; border-radius: 24px 24px 0 0; }
.parchment-handle-bottom { bottom: 0; border-radius: 0 0 24px 24px; }

.parchment-wax-seal {
    width: 64px;
    height: 64px;
    background: radial-gradient(circle at 35% 35%, #ef4444 0%, #b91c1c 60%, #7f1d1d 100%);
    border-radius: 50%;
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fef08a;
    font-size: 26px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 0 20px rgba(239, 68, 68, 0.3), inset 0 2px 4px rgba(255,255,255,0.4);
    border: 2px solid #eab308;
}

.parchment-close-btn {
    position: absolute;
    top: 18px; right: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.4);
    color: #e5e7eb;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 10;
}

.parchment-close-btn:hover {
    background: rgba(234, 179, 8, 0.25);
    color: #ffffff;
    border-color: #eab308;
    transform: rotate(90deg);
}

.parchment-header-title {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #fef08a 40%, #eab308 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.35;
    border-bottom: 1px solid rgba(234, 179, 8, 0.25);
    padding-bottom: 14px;
}

.parchment-sub-meta {
    font-size: 13px;
    font-style: italic;
    font-weight: 600;
    color: #fbbf24;
    text-align: center;
    margin-bottom: 22px;
}

.parchment-content-body {
    font-size: 15px;
    line-height: 1.8;
    color: #e5e7eb;
    font-weight: 400;
    text-align: left;
    margin-bottom: 24px;
}

.parchment-content-body p {
    margin-bottom: 14px;
}

.parchment-content-body strong {
    color: #fef08a;
    font-weight: 700;
}

.highlight-badge {
    display: inline-block;
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.4);
    color: #fef08a !important;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 14px;
    margin-bottom: 8px;
}

.parchment-benefits-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.parchment-benefits-list li {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(234, 179, 8, 0.2);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    color: #f3f4f6;
    display: flex;
    align-items: center;
    gap: 10px;
}

.parchment-benefits-list i {
    color: #eab308;
    font-size: 16px;
    flex-shrink: 0;
}

.parchment-action-box {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(234, 179, 8, 0.25);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.parchment-btn-install {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-weight: 800;
    font-size: 16px;
    padding: 16px 28px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    border: 1px solid #fef08a;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    max-width: 420px;
}

.parchment-btn-install:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 40px rgba(245, 158, 11, 0.6);
    color: #ffffff;
    border-color: #ffffff;
}

/* ============================================================
   PROFILE / VINCULAR FICHA MODAL OVERLAY STYLES
   ============================================================ */
.profile-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85) !important;
    z-index: 100050 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.25s ease-in-out !important;
}

.profile-modal-backdrop.hidden {
    display: none !important;
    pointer-events: none !important;
}

.profile-modal-card {
    background: linear-gradient(135deg, rgba(10, 10, 25, 0.98), rgba(20, 20, 40, 0.98)) !important;
    border: 1px solid rgba(0, 240, 255, 0.4) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    width: 90% !important;
    max-width: 360px !important;
    box-shadow: 0 10px 40px rgba(0, 240, 255, 0.35) !important;
    text-align: center !important;
    position: relative !important;
    z-index: 100051 !important;
    animation: modalPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes modalPop {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}





/* === RESTORED ORIGINAL REFERRALS MODAL STYLING === */
#referrals-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 92% !important;
    max-width: 480px !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    overflow-x: hidden !important;
    z-index: 9999999 !important;
    border: 1px solid rgba(252, 186, 58, 0.3) !important;
    border-radius: 20px !important;
    background: rgba(12, 12, 22, 0.96) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8), 0 0 20px rgba(252, 186, 58, 0.15) !important;
}

#referrals-modal.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#referrals-modal .modal-body {
    max-height: none !important;
    padding-bottom: 20px !important;
}



@keyframes pulse-mailbox-glow {
    0% { box-shadow: 0 0 4px #00f0ff, inset 0 0 4px #00f0ff; transform: scale(1); border-color: rgba(0, 240, 255, 0.6); }
    50% { box-shadow: 0 0 16px #00f0ff, inset 0 0 10px #00f0ff; transform: scale(1.08); background: rgba(0, 240, 255, 0.35); border-color: #00f0ff; }
    100% { box-shadow: 0 0 4px #00f0ff, inset 0 0 4px #00f0ff; transform: scale(1); border-color: rgba(0, 240, 255, 0.6); }
}

.glowing-mailbox-btn {
    animation: pulse-mailbox-glow 1.4s infinite ease-in-out !important;
    border-color: #00f0ff !important;
    color: #00f0ff !important;
}


.play-text-label { display: none !important; opacity: 0 !important; visibility: hidden !important; }


/* === REFERRAL BANNER 1376x768 PERFECT ASPECT RATIO FIT === */
#referral-video-slot {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1376 / 768 !important;
    max-height: none !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(252, 186, 58, 0.45) !important;
    box-shadow: 0 6px 20px rgba(252, 186, 58, 0.2), 0 4px 15px rgba(0, 0, 0, 0.65) !important;
    background: #0c0c14 !important;
    margin-bottom: 12px !important;
}
#referral-video-slot img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 12px !important;
}


/* ========================================================
   WHATSAPP-STYLE ROUND YELLOW PULSATING SCROLL BUTTON
   ======================================================== */
.chat-scroll-down-btn {
    position: absolute;
    bottom: 85px;
    left: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
    color: #0f172a;
    border: 2px solid rgba(254, 240, 138, 0.9);
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: yellowPulse 2s infinite ease-in-out;
    outline: none;
}

.chat-scroll-down-btn:hover {
    transform: scale(1.12);
    background: linear-gradient(135deg, #fef08a 0%, #facc15 100%);
    box-shadow: 0 8px 25px rgba(250, 204, 21, 0.7);
    color: #000000;
}

.chat-scroll-down-btn:active {
    transform: scale(0.95);
}

.chat-scroll-down-btn.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.7) translateY(10px) !important;
    pointer-events: none !important;
}

@keyframes yellowPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.7), 0 6px 20px rgba(234, 179, 8, 0.5);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(250, 204, 21, 0), 0 8px 22px rgba(234, 179, 8, 0.6);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0), 0 6px 20px rgba(234, 179, 8, 0.5);
    }
}


.btn-blue {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4) !important;
}
.btn-blue:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.65) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   FIX DE ESPACIADO (v2, seguro): #view-tienda arranca sin hueco arriba.
   Para Empresa NO forzamos altura/overflow (eso cortaba el boton en
   pantallas reales mas altas) -- solo evitamos el padding-bottom duplicado
   que sumaba .main-layout (80px) + #view-empresa (85px) = ~165px de hueco.
   ========================================================================== */
@media (max-width: 480px) {
    #view-tienda.tab-view.active {
        margin-top: 0 !important;
        /* Servicios es ahora la página de aterrizaje (lo primero que se ve),
           así que necesita su propio respiro arriba para no quedar debajo
           del notch / Dynamic Island / reloj del teléfono. */
        padding-top: calc(18px + env(safe-area-inset-top, 20px)) !important;
    }

    .main-layout {
        padding-bottom: 0 !important;
    }
}