/* ==========================================================================
   NEUROESTHETIC SYSTEM: SURGICAL SAPPHIRE & ARGON SLATE (485-492nm)
   Armonía tonal monocromática en diferentes grados: serenidad visual,
   reducción de fatiga foveal y cumplimiento riguroso WCAG AAA.
   ========================================================================== */

:root {
    /* --- Escala Tonal Armónica Monocromática Zafiro Borosilicato --- */
    --sapphire-950: #050b14; /* Fondo Abisal Base, antideslumbrante */
    --sapphire-900: #0a1322; /* Canvas de Plataforma */
    --sapphire-850: #0f1d33; /* Superficie Card */
    --sapphire-800: #152946; /* Elevacion y Modales */
    --sapphire-700: #1d375d; /* Bordes Estructurales */
    --sapphire-600: #294d80; /* Bordes Activos */
    --sapphire-500: #0284c7; /* Acento Primario Quirurgico */
    --sapphire-400: #38bdf8; /* Bioluminiscencia / Badges */
    --sapphire-300: #7dd3fc; /* Hover Haptico */
    --sapphire-200: #bae6fd; /* Metadatos y Subtitulos */
    --sapphire-100: #e2edfa; /* Texto Primario Polar, contraste 14.2:1 WCAG AAA */
    --sapphire-50:  #f0f7ff; /* Luz Especular Titulos */

    /* --- Tokens Semánticos Compatibles con la Plataforma --- */
    --primary-navy: var(--sapphire-950);
    --deep-blue: var(--sapphire-900);
    --surface-dark: var(--sapphire-900);
    --surface-card: rgba(15, 29, 51, 0.88);
    --accent-cyan: var(--sapphire-500);
    --accent-sky: var(--sapphire-400);
    --accent-teal: var(--sapphire-500);
    --accent-emerald: var(--sapphire-400);
    --accent-purple: var(--sapphire-600);
    --accent-amber: var(--sapphire-300);
    --accent-rose: #f43f5e;
    --text-primary: var(--sapphire-100);
    --text-secondary: var(--sapphire-200);
    --text-muted: #829ab1;
    --border-glass: rgba(56, 189, 248, 0.14);
    --border-light: rgba(56, 189, 248, 0.10);
    --glow-cyan: rgba(56, 189, 248, 0.25);
    --glow-emerald: rgba(56, 189, 248, 0.25);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);

    /* --- Geometría 100vh Single-Screen (Zero Scrollbars) --- */
    --top-navbar-height: 67px;
    --specialties-subnav-height: 42px;
    --navbar-total-height: 104px;
    --screen-slide-height: calc(100vh - var(--navbar-total-height));
    --screen-slide-height-dvh: calc(100dvh - var(--navbar-total-height));
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

html, body {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden !important;
    margin: 0;
    padding: 0;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--sapphire-950);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Tipografía Monospace para Datos Patológicos */
.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Efectos de Iluminación Ambiental */
.ambient-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.15;
}
.glow-top-left {
    top: -200px;
    left: -200px;
    background: radial-gradient(circle, var(--sapphire-500), transparent 70%);
}
.glow-mid-right {
    top: 40%;
    right: -250px;
    background: radial-gradient(circle, var(--sapphire-700), transparent 70%);
}
.glow-bottom-left {
    bottom: -150px;
    left: 10%;
    background: radial-gradient(circle, var(--sapphire-600), transparent 70%);
}

/* Glassmorphism Reutilizable */
.glass-panel {
    background: var(--surface-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(5, 11, 20, 0.55);
}

.glass-pill {
    background: rgba(15, 29, 51, 0.72);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: 30px;
}

/* Borosilicato Médico Pulcro - Neuroestética Quirúrgica */
.surgical-glass {
    background: rgba(15, 29, 51, 0.72);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(56, 189, 248, 0.14);
    box-shadow: 0 8px 32px 0 rgba(5, 11, 20, 0.55), inset 0 1px 0 0 rgba(240, 247, 255, 0.08);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.surgical-glass:hover {
    border-color: rgba(56, 189, 248, 0.28);
    box-shadow: 0 12px 40px 0 rgba(5, 11, 20, 0.65), 0 0 20px rgba(56, 189, 248, 0.12), inset 0 1px 0 0 rgba(240, 247, 255, 0.14);
    transform: translateY(-2px);
}

/* ==========================================================================
   CABECERA SUPERIOR Y NAVEGACIÓN INSTITUCIONAL
   ========================================================================== */
.top-navbar {
    position: sticky;
    top: 0;
    height: 67px;
    max-height: 67px;
    z-index: 1000;
    background: rgba(5, 11, 20, 0.92);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    padding: 0 clamp(16px, 2vw, 36px);
    display: flex;
    align-items: center;
}

.nav-container {
    width: 100%;
    max-width: min(1920px, 97vw);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(14px, 1.6vw, 28px);
    padding: 0 4px;
}

.brand-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-logo-glow {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sapphire-600), var(--sapphire-400));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    box-shadow: 0 0 18px var(--glow-cyan);
    flex-shrink: 0;
}

.brand-title-group h1 {
    font-size: 16.5px;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #ffffff;
    line-height: 1.1;
    font-family: 'Montserrat', 'Inter', sans-serif;
    margin: 0;
}

.brand-title-group span {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--accent-sky);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-family: 'Montserrat', 'Inter', sans-serif;
    white-space: nowrap;
    display: block;
    margin-top: 1px;
}

/* Menú Central con Enlaces del Dossier */
.nav-links-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}

.nav-link-btn {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 8px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-link-btn:hover, .nav-link-btn.active {
    color: #ffffff;
    background: rgba(2, 132, 199, 0.25);
    border: 1px solid var(--accent-cyan);
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.3);
}

.nav-link-btn i {
    font-size: 13px;
    color: var(--accent-sky);
}

/* Botones de Acción Rápida en Header */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-header {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-header-portal {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border: 1px solid var(--accent-sky);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

.btn-header-portal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--glow-cyan);
}

.btn-header-wa {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #ffffff;
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 4px 14px rgba(5, 11, 20, 0.35);
}

.btn-header-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25);
}

/* Botón Quirúrgico Creador de Paneles IHQ (AI Studio) */
.btn-header-ihq-builder {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(2, 132, 199, 0.95)) !important;
    color: #ffffff !important;
    border: 1px solid #38bdf8 !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.35) !important;
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-weight: 800 !important;
    position: relative !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-radius: 24px !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.3px !important;
}

.btn-header-ihq-builder::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.btn-header-ihq-builder:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1) !important;
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.55), 0 0 14px rgba(16, 185, 129, 0.45) !important;
    border-color: #67e8f9 !important;
    color: #ffffff !important;
}

.btn-header-ihq-builder:hover::before {
    opacity: 1;
}

.btn-header-ihq-builder:active {
    transform: translateY(0) !important;
}

.btn-header-ihq-builder i {
    color: #a7f3d0 !important;
    font-size: 13px !important;
    filter: drop-shadow(0 0 6px rgba(167, 243, 208, 0.75)) !important;
    transition: transform 0.25s ease;
}

.btn-header-ihq-builder:hover i {
    transform: rotate(15deg) scale(1.18);
}

.btn-badge-ai {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.6px;
    background: rgba(6, 182, 212, 0.25);
    border: 1px solid rgba(103, 232, 249, 0.65);
    border-radius: 10px;
    color: #67e8f9;
    line-height: 1;
    box-shadow: 0 0 8px rgba(103, 232, 249, 0.3);
    margin-left: 2px;
    text-transform: uppercase;
}

.btn-header-ihq-builder .ihq-btn-text-short {
    display: none;
}

@media (max-width: 1400px) {
    .btn-header-ihq-builder .ihq-btn-text-full {
        display: none !important;
    }
    .btn-header-ihq-builder .ihq-btn-text-short {
        display: inline !important;
    }
}

@media (max-width: 1100px) {
    .btn-header-ihq-builder {
        padding: 6px 11px !important;
        font-size: 11.5px !important;
    }
    .btn-header-ihq-builder .ihq-btn-text-short {
        display: none !important;
    }
}


/* Barra de Switcher de 5 Especialidades */
.specialties-subnav {
    background: rgba(10, 19, 34, 0.95);
    border-bottom: 1px solid rgba(56, 189, 248, 0.12);
    padding: 6px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
}

.specialty-tab {
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

.specialty-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.specialty-tab.active {
    color: #38bdf8;
    background: rgba(2, 132, 199, 0.18);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

/* ==========================================================================
   ARQUITECTURA SINGLE-SCREEN 100VH & TRANSICIONES CINEMÁTICAS (CÁMARA QUIRÚRGICA)
   Cero Scrollbars • Visor/Imagen al 100% • Controles Flotantes 'Surgical-Glass'
   ========================================================================== */

/* Contenedor Viewport Principal 100vh */
.main-wrapper,
.slides-viewport-container {
    width: 100vw;
    max-width: 100vw;
    height: var(--screen-slide-height);
    height: var(--screen-slide-height-dvh);
    max-height: var(--screen-slide-height);
    max-height: var(--screen-slide-height-dvh);
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    perspective: 1200px;
}

/* Base de Pantalla Slide (100% Viewport Ajustado al Header) */
.screen-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: var(--screen-slide-height);
    height: var(--screen-slide-height-dvh);
    max-height: var(--screen-slide-height);
    max-height: var(--screen-slide-height-dvh);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    overflow: hidden;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    transform: translate3d(0, 0, 0) scale(0.96);
    filter: blur(6px) contrast(105%);
    transition: 
        opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.65s ease;
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: strict;
}

/* Pantalla Slide Activa: Foco Óptico Quirúrgico Nítido Inmediato */
.screen-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 10;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0px) contrast(100%);
    transition: 
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Transiciones Cinematográficas Direccionales (Deslizamiento de Lente) */
.screen-slide.slide-entering-right {
    transform: translate3d(60px, 0, 0) scale(0.96);
}

.screen-slide.slide-entering-left {
    transform: translate3d(-60px, 0, 0) scale(0.96);
}

/* Compatibilidad para Bloques Existentes dentro de Slides */
.section-block {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    scroll-margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   CONTENEDOR DE IMAGEN / VISOR 3D / WSI (100% PROTAGONISMO VISUAL)
   ========================================================================== */
.slide-media-stage,
.slide-media-container,
.slide-image-viewport,
.scanner-viewport-frame,
.wsi-cinematic-stage,
.specimen-3d-stage,
.screen-slide .wsi-cinematic-stage,
.screen-slide .scanner-viewport-frame,
.screen-slide .slide-media-container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    background: #020617;
    z-index: 2;
    contain: strict;
}

/* Imagen Panorámica o Visor a Superficie Máxima Visible */
.slide-panoramic-img,
.slide-media-stage img,
.slide-media-container img,
.scanner-interactive-slide,
.screen-slide img.slide-hero-img,
.screen-slide img.panoramic-image,
.screen-slide img,
.slide-full-media {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

/* Variante de Ajuste Puro 'contain' (Para especímenes que requieran visión completa sin recorte) */
.slide-media-stage img.fit-contain,
.slide-media-container img.fit-contain,
.screen-slide img.fit-contain,
.scanner-interactive-slide.fit-contain,
.fit-contain {
    object-fit: contain !important;
}

/* Canvas 3D / Visor OpenSeadragon / Video WSI */
.screen-slide canvas,
.screen-slide .three-canvas,
.screen-slide .specimen-3d-render,
.screen-slide .wsi-openseadragon-viewport {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 12px;
    display: block;
}

/* ==========================================================================
   OVERLAYS FLOTANTES TRANSLÚCIDOS ('SURGICAL-GLASS') & CONTRASTE WCAG 2.2 AAA
   Ubicados en zona superior e inferior sin obstruir la imagen central
   ========================================================================== */

/* Overlay Flotante Superior (Badges, Telemetría, Breadcrumbs) */
.slide-floating-overlay-top,
.screen-slide .slide-floating-overlay-top {
    position: absolute;
    top: 16px;
    left: clamp(14px, 1.8vw, 32px);
    right: clamp(14px, 1.8vw, 32px);
    margin: 0 auto;
    max-width: min(1880px, 96vw);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    z-index: 25;
    pointer-events: none; /* No bloquea interactividad con la imagen central */
}

/* Overlay Flotante Inferior (Títulos, Captions, CTAs de Alta Conversión) */
.slide-floating-overlay-bottom,
.screen-slide .slide-floating-overlay-bottom {
    position: absolute;
    bottom: 20px;
    left: clamp(14px, 1.8vw, 32px);
    right: clamp(14px, 1.8vw, 32px);
    margin: 0 auto;
    max-width: min(1880px, 96vw);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    z-index: 25;
    pointer-events: none; /* No bloquea interactividad con la imagen central */
}

/* Reactivación de Eventos Puntero en Elementos Interactivos */
.slide-floating-overlay-top > *,
.slide-floating-overlay-bottom > * {
    pointer-events: auto;
}

/* Panel Surgical-Glass para Overlays Flotantes (Contraste Máximo y Borosilicato) */
.floating-surgical-card,
.slide-floating-top-card,
.slide-floating-bottom-card,
.slide-floating-hud,
.slide-floating-caption,
.slide-floating-actions {
    background: rgba(7, 14, 26, 0.88); /* Fondo Abisal Ultra Denso */
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1.5px solid rgba(56, 189, 248, 0.28);
    box-shadow: 
        0 14px 40px 0 rgba(5, 11, 20, 0.85),
        inset 0 1px 0 0 rgba(240, 247, 255, 0.16);
    border-radius: var(--radius-md);
    padding: 14px 22px;
    transition: var(--transition);
}

.floating-surgical-card:hover,
.slide-floating-hud:hover,
.slide-floating-bottom-card:hover {
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 
        0 16px 48px 0 rgba(5, 11, 20, 0.95),
        0 0 24px rgba(56, 189, 248, 0.22),
        inset 0 1px 0 0 rgba(240, 247, 255, 0.25);
    transform: translateY(-2px);
}

/* Tipografía y Textos con Cumplimiento Riguroso WCAG 2.2 AAA */
.slide-floating-title,
.slide-floating-caption h3,
.slide-floating-caption h4 {
    color: #ffffff; /* Ratio 17.5:1 sobre fondo abisal (WCAG 2.2 AAA) */
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.2px;
    margin-bottom: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.slide-floating-subtitle,
.slide-floating-caption p {
    color: #e2edfa; /* Ratio 14.2:1 Sapphire-100 Polar (WCAG 2.2 AAA) */
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Badges y Chips Flotantes */
.slide-floating-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(2, 132, 199, 0.25);
    color: #f0f7ff; /* Ratio 16.2:1 (WCAG AAA) */
    border: 1px solid rgba(56, 189, 248, 0.45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.slide-floating-telemetry-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: #bae6fd; /* Ratio 11.2:1 Sapphire-200 (WCAG AAA) */
    background: rgba(15, 29, 51, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 5px 12px;
    border-radius: 8px;
}

/* Grupo de Acciones / CTAs Flotantes */
.slide-cta-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-floating-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #047857, #065f46); /* Emerald Profundo WCAG AAA */
    color: #ffffff; /* Ratio 7.8:1 (WCAG AAA) */
    font-size: 13px;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #34d399;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(5, 150, 105, 0.45);
    transition: var(--transition);
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.btn-floating-cta-primary:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 6px 24px rgba(52, 211, 153, 0.55);
    transform: translateY(-2px);
}

.btn-floating-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 29, 51, 0.95);
    color: #ffffff; /* Ratio > 15:1 (WCAG AAA) */
    font-size: 13px;
    font-weight: 800;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid rgba(56, 189, 248, 0.5);
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(5, 11, 20, 0.5);
    transition: var(--transition);
    cursor: pointer;
}

.btn-floating-cta-secondary:hover {
    background: #0284c7;
    color: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.35);
    transform: translateY(-2px);
}

/* Indicadores de Foco Accesible por Teclado (WCAG 2.2 Focus Appearance 2.4.13) */
.btn-floating-cta-primary:focus-visible,
.btn-floating-cta-secondary:focus-visible,
.nav-link-btn:focus-visible,
.specialty-tab:focus-visible {
    outline: 2px solid #38bdf8 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.75) !important;
}

/* Responsividad en Dispositivos Móviles y Tablets */
@media (max-width: 900px) {
    .slide-floating-overlay-top,
    .slide-floating-overlay-bottom {
        left: 12px;
        right: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .slide-cta-group {
        width: 100%;
        flex-direction: column;
    }
    .btn-floating-cta-primary,
    .btn-floating-cta-secondary {
        width: 100%;
        justify-content: center;
    }
    .slide-floating-caption {
        text-align: center;
    }
}

.section-badge-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(2, 132, 199, 0.15);
    color: var(--accent-sky);
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.section-title {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 900px;
    line-height: 1.5;
    margin-bottom: 24px;
}

/* ==========================================================================
   HERO COMMAND CENTER EN 3 SEGUNDOS & MANIFIESTO INSTITUCIONAL (PÁGINA 1)
   Kahneman Sistema 1 + Jerarquía de Pirámide Invertida
   ========================================================================== */
.hero-command-block {
    position: relative;
}

/* Indicador de Estado en Vivo (Pill) */
.section-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sapphire-300);
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    padding: 3px 10px;
    border-radius: 16px;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sapphire-400);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
    animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #34d399; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

/* Cinta de Telemetría Rápida (Kahneman Sistema 1) */
.command-telemetry-ribbon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 14px 0 24px 0;
    padding: 10px 16px;
    background: rgba(15, 26, 46, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.telemetry-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--sapphire-200);
    padding: 4px 10px;
    background: rgba(2, 132, 199, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(56, 189, 248, 0.15);
}

.telemetry-chip strong {
    color: #ffffff;
}

/* Grilla de 4 Tarjetas de Impacto Clínico en 3 Segundos */
.command-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 32px;
}

.command-card {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    transition: var(--transition);
    border-radius: var(--radius-md);
    background: rgba(15, 26, 46, 0.88);
    border: 1px solid rgba(56, 189, 248, 0.18);
    overflow: hidden;
}

.command-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-cyan);
    transition: var(--transition);
}

.command-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

/* Variantes Cromáticas por Pilar Clínico */
.command-card.card-smartphone {
    border-color: rgba(56, 189, 248, 0.28);
}
.command-card.card-smartphone::before {
    background: linear-gradient(90deg, var(--sapphire-400), var(--sapphire-300));
}
.command-card.card-smartphone:hover {
    box-shadow: 0 12px 30px rgba(56, 189, 248, 0.22);
    border-color: var(--sapphire-400);
}

.command-card.card-server {
    border-color: rgba(56, 189, 248, 0.25);
}
.command-card.card-server::before {
    background: linear-gradient(90deg, var(--sapphire-600), var(--sapphire-400));
}
.command-card.card-server:hover {
    box-shadow: 0 12px 30px rgba(56, 189, 248, 0.22);
    border-color: var(--sapphire-400);
}

.command-card.card-3d {
    border-color: rgba(129, 140, 248, 0.25);
}
.command-card.card-3d::before {
    background: linear-gradient(90deg, #818cf8, #a5b4fc);
}
.command-card.card-3d:hover {
    box-shadow: 0 12px 30px rgba(129, 140, 248, 0.22);
    border-color: #a5b4fc;
}

.command-card.card-ihq {
    border-color: rgba(245, 158, 11, 0.25);
}
.command-card.card-ihq::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.command-card.card-ihq:hover {
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.22);
    border-color: #fbbf24;
}

/* Elementos Internos de la Tarjeta */
.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.card-badge-pill {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--sapphire-200);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-smartphone .card-badge-pill {
    color: var(--sapphire-300);
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
}

.card-server .card-badge-pill {
    color: var(--sapphire-300);
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
}

.card-3d .card-badge-pill {
    color: #c7d2fe;
    background: rgba(129, 140, 248, 0.12);
    border-color: rgba(129, 140, 248, 0.3);
}

.card-ihq .card-badge-pill {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
}

.card-icon-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.05);
}

.card-smartphone .card-icon-avatar {
    color: var(--sapphire-400);
    background: rgba(2, 132, 199, 0.18);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.card-server .card-icon-avatar {
    color: var(--sapphire-400);
    background: rgba(2, 132, 199, 0.18);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.card-3d .card-icon-avatar {
    color: #a5b4fc;
    background: rgba(129, 140, 248, 0.18);
    box-shadow: 0 0 12px rgba(129, 140, 248, 0.25);
}

.card-ihq .card-icon-avatar {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.18);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.card-title {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 4px;
}

.card-subtitle {
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.35;
}

.card-smartphone .card-subtitle { color: var(--sapphire-300); }
.card-server .card-subtitle { color: #6ee7b7; }
.card-3d .card-subtitle { color: #c7d2fe; }
.card-ihq .card-subtitle { color: #fde68a; }

.card-body-text {
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.5;
    margin-bottom: 14px;
    flex-grow: 1;
}

.card-kpi-footer {
    font-size: 10px;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
}

.card-smartphone .card-kpi-footer { color: var(--sapphire-200); }
.card-server .card-kpi-footer { color: #86efac; }
.card-3d .card-kpi-footer { color: #c7d2fe; }
.card-ihq .card-kpi-footer { color: #fde68a; }

.card-action-btn {
    font-size: 11.5px;
    font-weight: 800;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}

.card-smartphone .card-action-btn { color: var(--sapphire-400); }
.card-server .card-action-btn { color: #34d399; }
.card-3d .card-action-btn { color: #a5b4fc; }
.card-ihq .card-action-btn { color: #fbbf24; }

.command-card:hover .card-action-btn {
    transform: translateX(4px);
}

/* ==========================================================================
   MANIFIESTO INSTITUCIONAL DE AUTORIDAD CIENTÍFICA (DR. JOSEPH CASTILLO)
   ========================================================================== */
.official-manifesto-card {
    padding: 32px;
    position: relative;
    border-left: 5px solid var(--accent-cyan);
    border-radius: var(--radius-lg);
    background: rgba(15, 26, 46, 0.92);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.manifesto-recipient-banner {
    background: rgba(2, 132, 199, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 22px;
}

.manifesto-badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.manifesto-subtag {
    font-size: 10px;
    font-weight: 800;
    color: var(--accent-sky);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.manifesto-cmp-tag {
    font-size: 10px;
    font-weight: 800;
    color: var(--sapphire-300);
    background: rgba(56, 189, 248, 0.12);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.manifesto-header-title {
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 2px;
}

.manifesto-recipient-desc {
    font-size: 12.5px;
    color: #94a3b8;
    font-weight: 600;
}

.manifesto-body-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.manifesto-lead-quote {
    position: relative;
    padding: 14px 20px 14px 46px;
    background: rgba(2, 132, 199, 0.06);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent-sky);
}

.manifesto-lead-quote .quote-icon {
    position: absolute;
    left: 16px;
    top: 16px;
    font-size: 18px;
    color: var(--accent-sky);
    opacity: 0.6;
}

.manifesto-lead-quote p {
    font-size: 13.5px;
    color: #e2edfa;
    line-height: 1.65;
}

.manifesto-lead-quote strong {
    color: #ffffff;
}

/* Grilla Modular de 3 Pilares del Manifiesto */
.manifesto-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.manifesto-mod-item {
    background: rgba(10, 18, 32, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.14);
    border-radius: var(--radius-sm);
    padding: 16px;
    transition: var(--transition);
}

.manifesto-mod-item:hover {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(15, 26, 46, 0.85);
}

.mod-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.mod-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(2, 132, 199, 0.16);
    color: var(--accent-sky);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.mod-item-header h4 {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
}

.manifesto-mod-item p {
    font-size: 12px;
    color: var(--sapphire-200);
    line-height: 1.5;
}

.manifesto-conclusion-text p {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.6;
}

.manifesto-conclusion-text strong {
    color: #ffffff;
}

/* Pie del Manifiesto: Firma y CTAs */
.manifesto-footer-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid var(--border-light);
    padding-top: 20px;
    margin-top: 8px;
}

.seal-signature-box {
    display: flex;
    align-items: center;
    gap: 14px;
}

.signature-png {
    height: 54px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.doctor-cred h4 {
    font-size: 14px;
    font-weight: 900;
    color: #ffffff;
}

.doctor-cred span {
    font-size: 11px;
    color: var(--text-secondary);
    display: block;
}

/* Grupo de Acciones CTA */
.manifesto-cta-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-cta-wa {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #ffffff;
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 4px 14px rgba(5, 11, 20, 0.35);
}

.btn-cta-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(56, 189, 248, 0.25);
}

.btn-cta-portal {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border: 1px solid var(--accent-sky);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

.btn-cta-portal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px var(--glow-cyan);
}

.btn-cta-phone {
    background: rgba(15, 26, 46, 0.9);
    color: #cbd5e1;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.btn-cta-phone:hover {
    color: #ffffff;
    border-color: var(--accent-sky);
    transform: translateY(-2px);
}

/* ==========================================================================
   EJE 01 • SMARTPHONE QUIRÚRGICO INTERACTIVO (PÁGINA 2)
   ========================================================================== */
.app-showcase-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 32px;
    align-items: center;
}

/* Marco Físico del Teléfono (Agrandado en un 20% para máximo impacto visual clínico) */
.phone-mockup-container {
    width: 420px;
    height: 88vh;
    max-height: 780px;
    min-height: 520px;
    background: var(--sapphire-950);
    border: 5px solid #1e293b;
    border-radius: 46px;
    padding: 10px;
    box-shadow: 0 25px 65px -15px rgba(2, 6, 23, 0.95), 0 0 45px rgba(56, 189, 248, 0.28);
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #020617;
    border-radius: 38px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    user-select: none;
}

.phone-dynamic-notch {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 20px;
    background: #000000;
    border-radius: 20px;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.8);
    transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    overflow: hidden;
}

.phone-dynamic-notch.expanded {
    width: calc(100% - 24px);
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, #09152b 0%, #030712 100%);
    border: 1px solid rgba(56, 189, 248, 0.55);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9), 0 0 24px rgba(56, 189, 248, 0.45);
    padding: 6px 12px;
    z-index: 300;
}

.phone-dynamic-notch.pulse-alert {
    animation: notchAlertGlow 1.2s infinite alternate ease-in-out;
}

@keyframes notchAlertGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7), 0 2px 8px rgba(0,0,0,0.8);
        border-color: rgba(239, 68, 68, 0.8);
    }
    100% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0), 0 4px 16px rgba(239, 68, 68, 0.5);
        border-color: #ef4444;
    }
}

.phone-notch-content {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 100%;
    margin-left: 6px;
    user-select: none;
}

.phone-dynamic-notch.expanded .phone-notch-content {
    display: flex;
}

.phone-notch-live-badge {
    font-size: 7.5px;
    font-weight: 900;
    color: #ef4444;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.phone-notch-live-badge i {
    font-size: 6px;
    animation: blinkNotchDot 1s infinite alternate;
}

@keyframes blinkNotchDot {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

.phone-notch-msg {
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.phone-notch-action-hint {
    font-size: 7.5px;
    color: #38bdf8;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

.phone-notch-pulse-ring {
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    border: 2px solid transparent;
    pointer-events: none;
}

.phone-camera-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0f172a;
    border: 1.5px solid #1e293b;
    position: relative;
}
.phone-camera-dot::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #0284c7;
    top: 1.5px;
    left: 1.5px;
}

.phone-sensor-pill {
    width: 38px;
    height: 4px;
    background: #1e293b;
    border-radius: 4px;
}

/* Barra de Estado del Smartphone (En vivo: Hora, 5G, Wi-Fi, Batería 100%) */
.phone-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 18px 3px 18px;
    font-size: 11px;
    color: #cbd5e1;
    font-weight: 700;
    background: #020617;
    z-index: 90;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.phone-live-clock {
    font-size: 11.5px;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.2px;
}

.phone-status-icons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.phone-net-badge {
    font-size: 8px;
    font-weight: 900;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    padding: 1px 3px;
    border-radius: 3px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    margin-right: 2px;
}

.phone-bat-val {
    font-size: 9px;
    color: #10b981;
    font-weight: 800;
    margin-left: 2px;
}

/* Cabecera de la App Móvil JC PATH SURGICAL */
.phone-app-header {
    background: linear-gradient(180deg, #091528 0%, #060e1c 100%);
    padding: 8px 14px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    z-index: 80;
}

.phone-app-brand {
    font-size: 11.5px;
    font-weight: 900;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 7px;
    letter-spacing: 0.3px;
}

.phone-app-brand strong {
    color: #38bdf8;
}

.phone-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.phone-header-btn {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #e2e8f0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    font-size: 11px;
    transition: all 0.2s ease;
}

.phone-header-btn:hover {
    background: rgba(2, 132, 199, 0.3);
    border-color: #38bdf8;
    color: #fff;
}

.phone-header-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #ef4444;
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    min-width: 13px;
    height: 13px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
    animation: pulseBadge 2.2s infinite ease-in-out;
}

@keyframes pulseBadge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

/* Selector / Tabs de la App Móvil (Biopsias, En Proceso, Completados) */
.phone-subtabs-bar {
    display: flex;
    padding: 6px 10px 4px 10px;
    gap: 6px;
    background: #081122;
    border-bottom: 1px solid rgba(56, 189, 248, 0.12);
    flex-shrink: 0;
}

.phone-subtab-btn {
    flex: 1;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #94a3b8;
    border-radius: 8px;
    padding: 6px 4px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.phone-subtab-btn:hover {
    color: #f1f5f9;
    border-color: rgba(56, 189, 248, 0.35);
}

.phone-subtab-btn.active {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.35) 0%, rgba(14, 165, 233, 0.15) 100%);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.phone-subtab-count {
    background: #1e293b;
    color: #cbd5e1;
    font-size: 8px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 10px;
}

.phone-subtab-btn.active .phone-subtab-count {
    background: #0284c7;
    color: #ffffff;
}

.phone-subtab-count.warn {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.phone-subtab-count.success {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

/* Buscador Interno del Smartphone */
.phone-search-box {
    padding: 6px 12px;
    background: #081122;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    flex-shrink: 0;
}

.phone-search-icon {
    color: #64748b;
    font-size: 11px;
    position: absolute;
    left: 22px;
    pointer-events: none;
}

.phone-search-input {
    width: 100%;
    background: #0f1c33;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 9px;
    padding: 6px 28px 6px 30px;
    font-size: 11px;
    color: #ffffff;
    outline: none;
    transition: all 0.2s ease;
    font-family: inherit;
}

.phone-search-input:focus {
    border-color: #38bdf8;
    background: #132442;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.phone-search-clear {
    position: absolute;
    right: 20px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    font-weight: 800;
    line-height: 1;
    padding: 2px 4px;
}
.phone-search-clear:hover { color: #f8fafc; }

/* Contenedor Principal de Vistas del Smartphone */
.phone-body-viewport {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: #020617;
}

.phone-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #020617;
}

.phone-patients-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px 4px 12px;
    font-size: 9.5px;
    color: #94a3b8;
    background: rgba(11, 22, 42, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.btn-phone-sync {
    background: transparent;
    border: none;
    color: #38bdf8;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s;
}
.btn-phone-sync:hover {
    color: #ffffff;
    background: rgba(56, 189, 248, 0.15);
}

/* Lista Interactiva de Pacientes en el Móvil */
.phone-patients-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: #0284c7 rgba(15, 23, 42, 0.6);
}

.phone-patients-list::-webkit-scrollbar {
    width: 4px;
}
.phone-patients-list::-webkit-scrollbar-thumb {
    background: #0284c7;
    border-radius: 3px;
}

/* Tarjeta de Paciente Quirúrgico Real */
.phone-patient-card {
    background: linear-gradient(180deg, #0d192f 0%, #091223 100%);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 12px;
    padding: 10px 11px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.phone-patient-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #38bdf8;
    opacity: 0;
    transition: opacity 0.2s;
}

.phone-patient-card.active, .phone-patient-card:hover {
    border-color: #38bdf8;
    background: linear-gradient(180deg, #122442 0%, #0d1a33 100%);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.32);
    transform: translateY(-1px);
}

.phone-patient-card.active::before, .phone-patient-card:hover::before {
    opacity: 1;
}

.p-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    gap: 6px;
}

.p-card-name {
    font-size: 11.5px;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.2px;
    line-height: 1.25;
}

.p-card-status {
    font-size: 8px;
    font-weight: 800;
    padding: 2.5px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-ready {
    background: rgba(5, 150, 105, 0.22);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.4);
}

.status-process {
    background: rgba(217, 119, 6, 0.22);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.status-completed {
    background: rgba(30, 58, 138, 0.35);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.4);
}

.p-card-proc {
    font-size: 10px;
    color: #93c5fd;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.p-card-diag-preview {
    font-size: 9px;
    color: #cbd5e1;
    line-height: 1.35;
    margin-bottom: 6px;
    background: rgba(2, 6, 23, 0.55);
    padding: 4px 7px;
    border-radius: 6px;
    border-left: 2px solid #0284c7;
}

.p-card-diag-preview strong {
    color: #38bdf8;
    font-weight: 700;
}

.p-card-meta {
    font-size: 8.5px;
    color: #64748b;
    margin-bottom: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 4px;
}

.p-card-meta .p-dr {
    color: #94a3b8;
    font-weight: 600;
}

.p-card-meta .p-id {
    font-family: 'JetBrains Mono', monospace;
    color: #38bdf8;
    font-weight: 700;
    background: rgba(56, 189, 248, 0.1);
    padding: 1px 4px;
    border-radius: 4px;
}

.p-card-actions {
    display: flex;
    gap: 6px;
}

.btn-phone-action {
    flex: 1;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-phone-pdf {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}
.btn-phone-pdf:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 3px 12px rgba(14, 165, 233, 0.5);
    transform: translateY(-1px);
}

.btn-phone-360 {
    background: rgba(30, 41, 59, 0.85);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.25);
}
.btn-phone-360:hover {
    background: rgba(51, 65, 85, 0.95);
    color: #ffffff;
    border-color: #a855f7;
}

/* Modal / Vista de Informe Patológico Completo dentro del Smartphone */
.phone-report-preview-modal {
    position: absolute;
    inset: 0;
    background: #020617;
    z-index: 200;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.phone-report-preview-modal.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.phone-report-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #081122;
    border-bottom: 1px solid rgba(56, 189, 248, 0.25);
    flex-shrink: 0;
}

.phone-back-btn {
    background: rgba(2, 132, 199, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}
.phone-back-btn:hover {
    background: #0284c7;
    color: #ffffff;
}

.phone-report-case-id {
    font-size: 11px;
    font-weight: 800;
    color: #f8fafc;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(56, 189, 248, 0.12);
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.phone-close-btn {
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s;
}
.phone-close-btn:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.phone-report-scroll-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 10px 14px 10px;
    scrollbar-width: thin;
    scrollbar-color: #0284c7 rgba(15, 23, 42, 0.8);
}
.phone-report-scroll-wrapper::-webkit-scrollbar {
    width: 4px;
}
.phone-report-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #0284c7;
    border-radius: 3px;
}

/* Hoja Clínica del Informe Oficial */
.phone-report-doc {
    background: #091322;
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 12px;
    padding: 12px;
    font-size: 9.5px;
    color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.p-rep-letterhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #0284c7;
    padding-bottom: 8px;
    margin-bottom: 9px;
}

.p-rep-brand-title {
    font-size: 11px;
    font-weight: 900;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 5px;
}
.p-rep-brand-title strong { color: #38bdf8; }

.p-rep-doc-auth {
    font-size: 8px;
    color: #94a3b8;
    line-height: 1.25;
}

.p-rep-badge-val {
    font-size: 7.5px;
    font-weight: 800;
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid #059669;
    padding: 2px 5px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Grilla de Datos del Paciente */
.p-rep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 10px;
    background: rgba(15, 29, 51, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.12);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 9px;
}

.p-rep-field {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.p-rep-label {
    font-size: 7.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.p-rep-value {
    font-size: 9.5px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Secciones Médicas */
.p-rep-section {
    margin-bottom: 9px;
}

.p-rep-sec-title {
    font-size: 9px;
    font-weight: 800;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.p-rep-sec-content {
    font-size: 9px;
    color: #cbd5e1;
    line-height: 1.4;
    background: rgba(15, 23, 42, 0.45);
    padding: 6px 8px;
    border-radius: 6px;
    border-left: 3px solid #334155;
}

.p-rep-sec-content.diagnosis-box {
    border-left-color: #0284c7;
    background: rgba(2, 132, 199, 0.12);
    color: #f1f5f9;
}

.p-rep-sec-content.diagnosis-box strong {
    color: #ffffff;
    font-weight: 800;
}

.p-rep-margins-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 7px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    border-radius: 4px;
    color: #34d399;
    font-weight: 800;
    font-size: 8.5px;
}

/* Certificación y Firma Digital */
.p-rep-legal-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    border-top: 1px solid rgba(56, 189, 248, 0.2);
    padding-top: 8px;
    margin-top: 8px;
}

.p-rep-legal-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.p-rep-qr-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.p-rep-qr-code {
    width: 44px;
    height: 44px;
    background: #ffffff;
    padding: 2px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.p-rep-seal-img {
    height: 38px;
    object-fit: contain;
}

/* Botonera de Acciones Médicas del Informe */
.p-rep-action-toolbar {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.btn-rep-action {
    flex: 1;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 9.5px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.btn-rep-action.pdf {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}
.btn-rep-action.pdf:hover {
    background: #0ea5e9;
    transform: translateY(-1px);
}

.btn-rep-action.wsp {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4);
}
.btn-rep-action.wsp:hover {
    background: #10b981;
    transform: translateY(-1px);
}

/* Vista de Notificaciones Push dentro del Móvil */
.phone-subview-header {
    padding: 8px 12px;
    background: #081122;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.phone-subview-header h6 {
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.phone-badge-mini {
    font-size: 8px;
    font-weight: 800;
    background: #ef4444;
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 10px;
}

.phone-notifications-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.phone-notification-card {
    background: #0d192e;
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 10px;
    padding: 9px 10px;
    display: flex;
    gap: 9px;
    cursor: pointer;
    transition: all 0.2s;
}

.phone-notification-card:hover {
    background: #132442;
    border-color: #38bdf8;
    transform: translateY(-1px);
}

.phone-notification-card.unread {
    border-left: 3px solid #38bdf8;
}

.p-notif-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.p-notif-icon.blue { background: rgba(2, 132, 199, 0.2); color: #38bdf8; }
.p-notif-icon.green { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.p-notif-icon.amber { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }

.p-notif-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.p-notif-title {
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
}

.p-notif-desc {
    font-size: 8.5px;
    color: #94a3b8;
    line-height: 1.3;
}

.p-notif-time {
    font-size: 7.5px;
    color: #64748b;
    margin-top: 2px;
}

/* Vista de Ajustes del Smartphone */
.phone-settings-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.phone-setting-card {
    background: #0d192e;
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 10px;
    padding: 10px;
}

.phone-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.phone-setting-row:last-child { border-bottom: none; }

.p-set-label {
    font-size: 10px;
    font-weight: 700;
    color: #e2e8f0;
}
.p-set-desc {
    font-size: 8px;
    color: #64748b;
}

.phone-toggle-switch {
    width: 36px;
    height: 19px;
    background: #0284c7;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}
.phone-toggle-knob {
    width: 15px;
    height: 15px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    right: 2px;
    transition: transform 0.2s;
}

/* Barra de Navegación Inferior del Smartphone (Bottom Tab Bar) */
.phone-bottom-nav {
    height: 48px;
    background: #060e1c;
    border-top: 1px solid rgba(56, 189, 248, 0.2);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 4px;
    flex-shrink: 0;
    z-index: 90;
}

.phone-nav-item {
    flex: 1;
    background: transparent;
    border: none;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    font-size: 8.5px;
    font-weight: 700;
    padding: 4px 0;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.phone-nav-item i {
    font-size: 13px;
    transition: transform 0.2s;
}

.phone-nav-item.active {
    color: #38bdf8;
}

.phone-nav-item.active i {
    transform: scale(1.15);
}

.phone-nav-item:hover {
    color: #e2e8f0;
}

.phone-nav-badge-wrapper {
    position: relative;
    display: inline-flex;
}

.phone-nav-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: #ef4444;
    color: #ffffff;
    font-size: 7.5px;
    font-weight: 900;
    min-width: 12px;
    height: 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
}

/* Toast Flotante dentro del Celular */
.phone-toast {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(15, 29, 51, 0.95);
    border: 1px solid #38bdf8;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 250;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

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

/* Controles de Simulación Autónoma HUD */
.phone-sim-hud-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn-phone-sim-control {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #cbd5e1;
    border-radius: 20px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.22s ease;
    outline: none;
}

.btn-phone-sim-control:hover {
    color: #ffffff;
    border-color: #38bdf8;
    background: rgba(2, 132, 199, 0.25);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.btn-phone-sim-control.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 0 14px rgba(2, 132, 199, 0.65);
}

/* Efectos de Resalto Pulsante para Simulación de Biopsia */
.phone-patient-card.sim-highlight {
    border-color: #38bdf8 !important;
    background: linear-gradient(180deg, #16305a 0%, #0d1e3a 100%) !important;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.75), inset 0 0 12px rgba(56, 189, 248, 0.3) !important;
    animation: simCardPulse 1.1s infinite alternate ease-in-out;
    transform: scale(1.02);
    z-index: 10;
}

@keyframes simCardPulse {
    0% {
        box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
    }
    100% {
        box-shadow: 0 0 28px rgba(56, 189, 248, 0.95), inset 0 0 16px rgba(56, 189, 248, 0.4);
    }
}

/* Badge de Despacho Rápido en Segundos */
.p-card-status.status-instant {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35) 0%, rgba(5, 150, 105, 0.25) 100%);
    color: #34d399;
    border: 1px solid #10b981;
    font-weight: 900;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    animation: instantBadgePulse 1.3s infinite alternate;
}

@keyframes instantBadgePulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.07); box-shadow: 0 0 14px rgba(16, 185, 129, 0.8); }
}

/* Banner de Trazabilidad Móvil Quirúrgica */
.phone-trace-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(2, 132, 199, 0.2) 100%);
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-radius: 8px;
    padding: 7px 10px;
    margin-bottom: 9px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    animation: fadeInTrace 0.35s ease-out;
}

@keyframes fadeInTrace {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.phone-trace-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #10b981;
    color: #020617;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}

.phone-trace-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.phone-trace-title {
    font-size: 9px;
    font-weight: 800;
    color: #34d399;
}

.phone-trace-desc {
    font-size: 8px;
    color: #cbd5e1;
    line-height: 1.25;
}

/* Visor de Microfotografía 40x incrustada en el informe del Smartphone */
.phone-report-micro-card {
    margin-bottom: 9px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, 0.3);
    background: #020617;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.phone-report-micro-header {
    background: rgba(15, 23, 42, 0.9);
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 8px;
    font-weight: 800;
    color: #38bdf8;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}

.phone-report-micro-img-wrap {
    position: relative;
    height: 105px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.phone-report-micro-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.phone-report-micro-img-wrap:hover img {
    transform: scale(1.12);
}

.phone-micro-badge-overlay {
    position: absolute;
    bottom: 5px;
    left: 6px;
    background: rgba(2, 6, 23, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 7.5px;
    color: #f8fafc;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

.phone-micro-badge-overlay strong {
    color: #38bdf8;
}


/* Columna de Características del App */
.app-features-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.app-feature-box {
    padding: 16px 20px;
    border-left: 4px solid var(--accent-cyan);
}

.app-feature-box.featured {
    border-left-color: var(--sapphire-400);
    background: rgba(56, 189, 248, 0.08);
}

.app-feature-box h4 {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-feature-box p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* ==========================================================================
   EJE 02 • VISOR WSI GIGAPÍXEL INTERACTIVO (PÁGINA 3)
   ========================================================================== */
.wsi-viewer-wrapper {
    background: var(--sapphire-950);
    border: 1.5px solid var(--accent-cyan);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(5, 11, 20, 0.6), 0 0 25px rgba(2, 132, 199, 0.2);
}

/* Barra de Herramientas del Microscopio WSI */
.wsi-toolbar {
    background: var(--sapphire-900);
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-glass);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.wsi-controls-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wsi-btn-tool {
    background: #0f172a;
    border: 1px solid #334155;
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 5px;
}

.wsi-btn-tool:hover {
    background: #1e293b;
    color: #ffffff;
    border-color: var(--accent-sky);
}

.wsi-btn-tool.active {
    background: var(--accent-cyan);
    color: #ffffff;
    border-color: var(--accent-sky);
    box-shadow: 0 0 10px var(--glow-cyan);
}

.wsi-zoom-pill {
    background: #0f172a;
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wsi-zoom-btn {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.wsi-zoom-btn:hover { color: #ffffff; background: #334155; }
.wsi-zoom-btn.active { background: var(--accent-cyan); color: #ffffff; }

/* Lienzo / Canvas del Visor WSI */
.wsi-viewport {
    height: 480px;
    position: relative;
    overflow: hidden;
    cursor: -webkit-grab;
    cursor: grab;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

.wsi-viewport:active { cursor: -webkit-grabbing; cursor: grabbing; }

.wsi-slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    transition: transform 0.2s ease-out, filter 0.3s ease;
    user-select: none;
    -webkit-user-drag: none;
}

/* Filtros Espectrales Digitales */
.wsi-slide-image.filter-contrast { filter: contrast(145%) saturate(125%); }
.wsi-slide-image.filter-dic { filter: contrast(160%) brightness(95%) sepia(20%) drop-shadow(1px 1px 0px rgba(0,0,0,0.6)); }
.wsi-slide-image.filter-polarized { filter: contrast(180%) hue-rotate(190deg) brightness(110%); }

/* HUD de Telemetría Superpuesto en WSI */
.wsi-hud-overlay {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 16px;
    pointer-events: none;
}

.wsi-scale-bar-line {
    width: 50px;
    height: 3px;
    background: #ffffff;
    display: inline-block;
    margin-right: 5px;
    position: relative;
}

/* ==========================================================================
   ARQUITECTURA DE PANTALLA DIVIDIDA: VISOR WSI AL 80% & PANEL CLÍNICO AL 20%
   Neuroestética Quirúrgica Zafiro/Argón, Tipografía Montserrat & Inter
   Cero Scrollbars (100vh Locked) & Adaptabilidad Responsiva < 1024px
   ========================================================================== */

.wsi-split-container {
    display: flex;
    width: 100%;
    height: calc(100% - 52px);
    overflow: hidden !important;
    position: relative;
    background: var(--sapphire-950, #050b14);
}

/* Columna del Visor WSI al 68% (Reducido 10% adicional) */
.wsi-viewport-col {
    width: 68%;
    flex: 0 0 68%;
    max-width: 68%;
    height: 100%;
    position: relative;
    overflow: hidden !important;
    background: #02060d;
    display: flex;
    flex-direction: column;
    transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), 
                flex 0.32s cubic-bezier(0.16, 1, 0.3, 1), 
                max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.wsi-viewport-col .stage-viewer-container {
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #02060d;
}

/* Botón Flotante para Colapsar / Expandir Sidebar (Surgical Toggle) */
.wsi-sidebar-toggle-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(15, 29, 51, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.32);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    z-index: 35;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    outline: none;
}

.wsi-sidebar-toggle-btn:hover {
    background: rgba(2, 132, 199, 0.35);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
    transform: scale(1.05);
}

/* Estado Colapsado: Visor WSI al 100% Pantalla Completa */
.wsi-split-container.sidebar-collapsed .wsi-viewport-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.wsi-split-container.sidebar-collapsed .wsi-intro-sidebar {
    transform: translateX(100%);
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0% !important;
    padding: 0 !important;
    border-left: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Columna Derecha: Panel de Introducción al 32% */
.wsi-intro-sidebar {
    width: 32%;
    flex: 0 0 32%;
    max-width: 32%;
    height: 100%;
    background: rgba(10, 19, 34, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(56, 189, 248, 0.22);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), 
                width 0.32s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.25s ease,
                padding 0.32s ease;
    z-index: 30;
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.55);
}

.wsi-intro-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Manija Táctil Superior (Mobile Drawer Handle) */
.wsi-sidebar-mobile-handle {
    display: none;
}

/* Encabezado del Panel de Introducción */
.wsi-intro-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.16);
}

.wsi-intro-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wsi-intro-kicker {
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 800;
    color: var(--accent-sky, #38bdf8);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.wsi-status-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.wsi-intro-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.3px;
}

.wsi-intro-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--sapphire-200, #bae6fd);
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* Tarjetas Neuroestéticas del Panel */
.wsi-intro-card {
    background: rgba(15, 29, 51, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 16px rgba(5, 11, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.wsi-intro-card:hover {
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 6px 20px rgba(5, 11, 20, 0.5), 0 0 14px rgba(56, 189, 248, 0.12);
    transform: translateY(-1px);
}

.wsi-intro-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--accent-sky, #38bdf8);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wsi-intro-card-title i {
    font-size: 11px;
}

/* Grilla de Especificaciones Ópticas */
.wsi-metric-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.wsi-metric-spec-item {
    background: rgba(5, 11, 20, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.12);
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wsi-metric-spec-item .spec-label {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.wsi-metric-spec-item .spec-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    color: #f8fafc;
}

/* Badges de Resiliencia Quirúrgica */
.wsi-resilience-badges {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wsi-resilience-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    background: rgba(5, 11, 20, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-primary, #e2edfa);
    transition: all 0.18s ease;
}

.wsi-resilience-pill:hover {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(2, 132, 199, 0.15);
    color: #ffffff;
}

.wsi-resilience-pill i {
    color: var(--accent-sky, #38bdf8);
    font-size: 11px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

/* Guía Rápida de Comandos Quirúrgicos */
.wsi-controls-guide-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wsi-controls-guide-list li {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: #cbd5e1;
    line-height: 1.35;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.wsi-controls-guide-list li i {
    color: var(--accent-sky, #38bdf8);
    font-size: 10px;
    margin-top: 2px;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}

.wsi-controls-guide-list li strong {
    color: #ffffff;
    font-weight: 700;
}

/* Acciones Clínicas en el Sidebar */
.wsi-intro-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.btn-sidebar-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

.btn-sidebar-wa {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #ffffff;
}

.btn-sidebar-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.5);
    background: linear-gradient(135deg, #14b8a6, #0d9488);
}

.btn-sidebar-portal {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.75), rgba(3, 105, 161, 0.85));
    border: 1px solid #38bdf8;
    color: #ffffff;
}

.btn-sidebar-portal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.45);
    background: linear-gradient(135deg, #0284c7, #0369a1);
}

/* ==========================================================================
   ADAPTACIÓN RESPONSIVE: QUIRÚRGICA PARA RESOLUCIONES < 1024px & MÓVILES
   ========================================================================== */

@media (max-width: 1400px) {
    .wsi-viewport-col {
        width: 68%;
        flex: 0 0 68%;
        max-width: 68%;
    }
    .wsi-intro-sidebar {
        width: 32%;
        flex: 0 0 32%;
        max-width: 32%;
        padding: 14px;
        gap: 10px;
    }
    .wsi-intro-title {
        font-size: 13px;
    }
}

@media (max-width: 1024px) {
    .wsi-split-container {
        flex-direction: column;
        height: calc(100% - 52px);
    }
    .wsi-viewport-col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 68%;
        height: 68%;
    }
    .wsi-intro-sidebar {
        width: 100%;
        max-width: 100%;
        flex: 0 0 32%;
        height: 32%;
        border-left: none;
        border-top: 1px solid rgba(56, 189, 248, 0.22);
        padding: 12px 16px;
        gap: 10px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    }
    .wsi-sidebar-toggle-btn {
        display: none;
    }
    .wsi-intro-sidebar-actions {
        flex-direction: row;
    }
    .wsi-intro-sidebar-actions > * {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .wsi-split-container {
        flex-direction: column;
        height: calc(100% - 52px);
    }
    .wsi-viewport-col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        height: 100%;
    }
    .wsi-intro-sidebar {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 50vh;
        flex: none;
        border-left: none;
        border-top: 1.5px solid rgba(56, 189, 248, 0.4);
        border-radius: 16px 16px 0 0;
        padding: 10px 14px 22px 14px;
        transform: translateY(calc(100% - 38px));
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 60;
        background: rgba(10, 19, 34, 0.98);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.75);
    }
    .wsi-intro-sidebar.mobile-expanded {
        transform: translateY(0);
    }
    .wsi-sidebar-mobile-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 4px 0 6px 0;
        cursor: pointer;
    }
    .wsi-sidebar-mobile-pill {
        width: 48px;
        height: 4px;
        border-radius: 2px;
        background: rgba(56, 189, 248, 0.5);
    }
}

/* ==========================================================================
   EJE 03 • COMPARADOR SPLIT-SCREEN MORFOMETRÍA IA (PÁGINA 4)
   ========================================================================== */
.morph-split-container {
    background: var(--sapphire-950);
    border: 1.5px solid var(--accent-cyan);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    height: 460px;
    box-shadow: 0 15px 40px rgba(5,11,20,0.6);
    user-select: none;
}

.morph-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.morph-img-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.morph-layer-ai {
    z-index: 2;
    width: 50%;
    border-right: 2px solid var(--accent-sky);
    box-shadow: 2px 0 15px rgba(56, 189, 248, 0.6);
}

.morph-layer-ai .morph-img-full {
    width: 100%;
    min-width: 100%;
}

/* Manija Deslizante Central */
.morph-split-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 38px;
    margin-left: -19px;
    z-index: 10;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
}

.handle-circle {
    width: 38px;
    height: 38px;
    background: #0284c7;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    box-shadow: 0 0 18px var(--glow-cyan);
    transition: transform 0.15s;
}

.morph-split-handle:hover .handle-circle {
    transform: scale(1.15);
}

/* Etiquetas Superpuestas Before / After */
.morph-badge-corner {
    position: absolute;
    top: 14px;
    z-index: 5;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.badge-left-ai {
    left: 14px;
    background: rgba(3, 105, 161, 0.9);
    color: #ffffff;
    border: 1px solid var(--accent-sky);
}

.badge-right-raw {
    right: 14px;
    background: rgba(15, 23, 42, 0.9);
    color: #94a3b8;
    border: 1px solid #334155;
}

/* Cuadrícula de Métricas de Morfometría */
.morph-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.metric-card {
    padding: 16px;
    border-top: 3px solid var(--accent-cyan);
    text-align: center;
}

.metric-value {
    font-size: 22px;
    font-weight: 900;
    color: #38bdf8;
    line-height: 1.1;
    margin-bottom: 4px;
}

.metric-label {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.metric-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* ==========================================================================
   EJE 04 • COPILOTO GÉMINI WSI & TRIAJE DIAGNÓSTICO (PÁGINA 5)
   ========================================================================== */
.gemini-copilot-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 24px;
}

.gemini-roi-viewer {
    background: var(--sapphire-950);
    border: 1.5px solid var(--accent-purple);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    height: 420px;
    box-shadow: 0 10px 30px rgba(5, 11, 20, 0.5);
}

.gemini-roi-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Caja de Selección de Región de Interés (ROI) */
.roi-bounding-box {
    position: absolute;
    top: 25%;
    left: 20%;
    width: 180px;
    height: 140px;
    border: 2px dashed #f43f5e;
    background: rgba(244, 63, 94, 0.12);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px;
    transition: all 0.3s ease;
}

.roi-tag {
    background: #dc2626;
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
}

/* Panel de Triaje Diagnóstico Diferencial */
.differentials-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.diff-card-interactive {
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--transition);
    border-left: 4px solid #475569;
}

.diff-card-interactive:hover {
    background: rgba(15, 23, 42, 0.95);
    border-color: var(--accent-sky);
    transform: translateX(4px);
}

.diff-card-interactive.active {
    background: rgba(30, 27, 75, 0.85);
    border-left-color: #f43f5e;
    border-top: 1px solid rgba(244, 63, 94, 0.4);
    box-shadow: 0 4px 20px rgba(244, 63, 94, 0.2);
}

.diff-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.diff-title {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
}

.diff-prob-tag {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
}

.prob-high { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid #ef4444; }
.prob-mid { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid #f59e0b; }
.prob-low { background: rgba(56, 189, 248, 0.15); color: var(--sapphire-300); border: 1px solid var(--sapphire-500); }

.prob-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.prob-fill {
    height: 100%;
    background: #f43f5e;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.diff-ihq-formula {
    background: rgba(5, 11, 20, 0.75);
    border: 1px dashed rgba(56, 189, 248, 0.3);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11.5px;
    color: #cbd5e1;
    line-height: 1.4;
}

/* Consola de Consulta IA Gémini */
.gemini-chat-console {
    margin-top: 14px;
    padding: 14px;
    background: linear-gradient(135deg, var(--sapphire-900), var(--sapphire-850));
    border: 1px solid var(--accent-purple);
    border-radius: var(--radius-sm);
}

.chat-input-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.chat-input-field {
    flex: 1;
    background: var(--sapphire-950);
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12.5px;
    color: #ffffff;
    outline: none;
}

.chat-input-field:focus { border-color: var(--accent-purple); }

.btn-ask-gemini {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}

.btn-ask-gemini:hover {
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
    transform: translateY(-1px);
}

/* ==========================================================================
   EJE 05 • ASISTENTE VIRTUAL & VADEMÉCUM DE 145 ANTICUERPOS (NUEVO)
   ========================================================================== */
.ihq-assistant-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ihq-search-card {
    padding: 24px;
    background: linear-gradient(135deg, rgba(7, 21, 39, 0.95), rgba(10, 25, 47, 0.95));
    border: 1.5px solid var(--accent-cyan);
    position: relative;
    overflow: hidden;
}

.ihq-search-bar-wrapper {
    display: flex;
    gap: 12px;
    margin-top: 14px;
}

.ihq-input-group {
    flex: 1;
    position: relative;
}

.ihq-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-sky);
    font-size: 16px;
}

.ihq-search-input {
    width: 100%;
    background: var(--sapphire-950);
    border: 1.5px solid var(--sapphire-700);
    border-radius: 12px;
    padding: 12px 14px 12px 42px;
    font-size: 14px;
    color: #ffffff;
    outline: none;
    transition: var(--transition);
}

.ihq-search-input:focus {
    border-color: var(--accent-sky);
    box-shadow: 0 0 18px var(--glow-cyan);
}

.btn-ihq-search {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-ihq-search:hover {
    box-shadow: 0 0 20px var(--glow-cyan);
    transform: translateY(-2px);
}

/* Tarjeta Dinámica de Resultado de Disponibilidad */
.ihq-result-card {
    margin-top: 18px;
    padding: 18px;
    background: var(--sapphire-900);
    border: 1.5px solid var(--sapphire-500);
    border-radius: var(--radius-sm);
    display: none;
    animation: fadeIn 0.3s ease;
}

.ihq-result-card.active { display: block; }

.ihq-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ihq-result-name {
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
}

.badge-in-stock {
    background: rgba(56, 189, 248, 0.15);
    color: var(--sapphire-300);
    border: 1px solid var(--sapphire-500);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
}

.badge-not-stock {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid #ef4444;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
}

.ihq-result-body {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.5;
    margin-bottom: 14px;
}

/* Tabla Maestra de 145 Anticuerpos */
.ihq-table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.ihq-category-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pill-filter {
    background: #0f172a;
    border: 1px solid #334155;
    color: #94a3b8;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.pill-filter:hover { color: #ffffff; background: #1e293b; }
.pill-filter.active { background: var(--accent-cyan); color: #ffffff; border-color: var(--accent-sky); }

.ihq-table-box {
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
}

.ihq-master-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.ihq-master-table thead {
    position: sticky;
    top: 0;
    background: var(--sapphire-900);
    z-index: 5;
    border-bottom: 2px solid var(--accent-cyan);
}

.ihq-master-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-sky);
}

.ihq-master-table td {
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

.ihq-master-table tbody tr:hover {
    background: rgba(2, 132, 199, 0.08);
}

/* ==========================================================================
   EJE 06 • SISTEMA EXPLICATIVO INTERACTIVO CON AVATAR, FLECHAS Y CUADROS (PÁGINA APP MÓVIL)
   ========================================================================== */
.app-avatar-station {
    width: clamp(280px, 22vw, 345px);
    max-height: calc(100vh - 128px);
    background: rgba(10, 20, 38, 0.88);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 20px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.65), 0 0 24px rgba(2, 132, 199, 0.2);
    flex-shrink: 1;
    z-index: 15;
    position: relative;
}

.avatar-hud-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}

.avatar-hud-tag {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.avatar-live-beacon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: pulseBeacon 1.8s infinite;
}

@keyframes pulseBeacon {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

.btn-avatar-audio {
    background: rgba(2, 132, 199, 0.25);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-avatar-audio:hover {
    background: rgba(2, 132, 199, 0.45);
    color: #fff;
}

.btn-avatar-audio.muted {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.avatar-video-frame,
.avatar-video-box,
.avatar-video-wrapper {
    position: relative;
    width: clamp(190px, 26vh, 260px);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #000000;
    border: 1.5px solid rgba(56, 189, 248, 0.45);
    box-shadow: inset 0 0 20px rgba(2, 132, 199, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#avatarVictoriaVideo,
.avatar-station-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    background: transparent;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

.avatar-scan-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(56, 189, 248, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 3px, 6px 100%;
    opacity: 0.6;
}

.avatar-video-controls {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 5px;
    z-index: 5;
}

.btn-avatar-mini-ctrl {
    background: rgba(10, 19, 34, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-avatar-mini-ctrl:hover {
    background: #0284c7;
    transform: scale(1.1);
}

.avatar-wave-indicator {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
    padding: 3px 6px;
    background: rgba(10, 19, 34, 0.8);
    border-radius: 6px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    z-index: 5;
}

.avatar-wave-indicator span {
    width: 2px;
    background: #38bdf8;
    border-radius: 1px;
    height: 4px;
    transition: height 0.15s ease;
}

.avatar-wave-indicator.talking span:nth-child(1) { animation: waveAnim 0.6s infinite 0.1s; }
.avatar-wave-indicator.talking span:nth-child(2) { animation: waveAnim 0.6s infinite 0.25s; }
.avatar-wave-indicator.talking span:nth-child(3) { animation: waveAnim 0.6s infinite 0.05s; }
.avatar-wave-indicator.talking span:nth-child(4) { animation: waveAnim 0.6s infinite 0.35s; }
.avatar-wave-indicator.talking span:nth-child(5) { animation: waveAnim 0.6s infinite 0.2s; }

@keyframes waveAnim {
    0%, 100% { height: 3px; }
    50% { height: 14px; background: #34d399; }
}

/* Controles de Tour Compactos e Integrados Inmediatamente Debajo del Video */
.avatar-tour-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(5, 12, 24, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    margin-top: 2px;
}

.btn-tour-step {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #e2edfa;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-tour-step:hover {
    background: #0284c7;
    color: #fff;
    border-color: #38bdf8;
}

.tour-steps-dots {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tour-step-dot {
    width: 14px;
    height: 6px;
    border-radius: 3px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.25s;
    padding: 0;
}

.tour-step-dot.active {
    width: 26px;
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8;
}

.btn-tour-auto {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.4), rgba(16, 185, 129, 0.4));
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-tour-auto.active {
    background: linear-gradient(135deg, #0284c7, #10b981);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

/* --- PANEL DERECHO: ESCAPARATE DINÁMICO DE HITO ÚNICO CON FLECHA LÁSER AL CELULAR --- */
.app-callouts-matrix,
.spotlight-showcase-container {
    width: clamp(315px, 24vw, 395px);
    max-height: clamp(570px, 90vh, 830px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    flex-shrink: 1;
    z-index: 15;
    position: relative;
    box-sizing: border-box;
}

.showcase-header {
    background: rgba(10, 20, 38, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 14px;
    padding: 9px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.showcase-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.showcase-header-top h5 {
    font-size: 11px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.6px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.showcase-live-pill {
    font-size: 8px;
    font-weight: 800;
    color: #34d399;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.35);
    padding: 2px 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.showcase-live-pill i {
    font-size: 5px;
    animation: livePulseDot 1s infinite alternate;
}

@keyframes livePulseDot {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.3); }
}

.showcase-subtitle {
    font-size: 8.5px;
    color: #38bdf8;
    font-weight: 700;
    display: block;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* CUADROS EXPLICATIVOS: SOLO 1 VISIBLE A LA VEZ (LOS OTROS 4 PERMANECEN OCULTOS) */
.tech-callout-card {
    display: none !important;
    opacity: 0;
    background: linear-gradient(145deg, rgba(12, 25, 50, 0.96) 0%, rgba(5, 13, 28, 0.98) 100%);
    backdrop-filter: blur(20px);
    border: 1.5px solid rgba(56, 189, 248, 0.3);
    border-radius: 18px;
    padding: 16px 18px;
    position: relative;
    box-sizing: border-box;
    transition: opacity 0.22s ease-out, transform 0.22s ease-out, border-color 0.22s ease-out;
    cursor: pointer;
}

/* Desvanecimiento suave al salir del hito */
.tech-callout-card.card-fading-out {
    display: flex !important;
    flex-direction: column;
    opacity: 0 !important;
    transform: translateX(14px) scale(0.97) !important;
    pointer-events: none;
}

/* Tarjeta Activa Única con Resplandor Zafiro Profundo y Bordes de Luz Neón */
.tech-callout-card.active {
    display: flex !important;
    flex-direction: column;
    gap: 11px;
    opacity: 1;
    border-color: rgba(56, 189, 248, 0.75);
    background: linear-gradient(145deg, rgba(14, 30, 60, 0.97) 0%, rgba(6, 16, 36, 0.99) 100%);
    box-shadow: 0 0 35px rgba(56, 189, 248, 0.32), 0 0 55px rgba(14, 165, 233, 0.16), 0 20px 48px rgba(2, 6, 23, 0.85);
    animation: calloutShowcaseEnter 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    cursor: pointer;
}

.tech-callout-card.active:hover {
    border-color: rgba(56, 189, 248, 1);
    box-shadow: 0 0 42px rgba(56, 189, 248, 0.42), 0 22px 52px rgba(2, 6, 23, 0.9);
}

.tech-callout-card.card-reading-paused {
    border-color: rgba(245, 158, 11, 0.9) !important;
    box-shadow: 0 0 36px rgba(245, 158, 11, 0.4), 0 20px 48px rgba(0, 0, 0, 0.85) !important;
}

/* Flecha exterior indicadora apuntando físicamente al smartphone a la izquierda */
.tech-callout-card.active::after {
    content: '';
    position: absolute;
    left: -11px;
    top: 22px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 11px solid #38bdf8;
    filter: drop-shadow(-3px 0 6px rgba(56, 189, 248, 0.9));
    animation: laserArrowNudge 1.1s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes calloutShowcaseEnter {
    0% {
        opacity: 0;
        transform: translateX(-16px) scale(0.96);
        box-shadow: 0 0 0 rgba(56, 189, 248, 0);
    }
    50% {
        box-shadow: 0 0 35px rgba(52, 211, 153, 0.45);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        box-shadow: 0 0 28px rgba(56, 189, 248, 0.28), 0 0 45px rgba(16, 185, 129, 0.14), 0 18px 42px rgba(0, 0, 0, 0.65);
    }
}

/* FLECHA LÁSER / NEÓN DINÁMICA APUNTANDO DIRECTAMENTE AL CELULAR */
.callout-arrow-to-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, rgba(2, 132, 199, 0.35) 0%, rgba(16, 185, 129, 0.25) 100%);
    border: 1.5px solid rgba(56, 189, 248, 0.65);
    border-radius: 10px;
    padding: 8px 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.35), inset 0 0 14px rgba(56, 189, 248, 0.15);
}

.callout-arrow-to-phone::before {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.45), transparent);
    animation: laserSweep 1.8s infinite;
}

@keyframes laserSweep {
    0% { transform: translateX(0); }
    100% { transform: translateX(200%); }
}

.laser-beam-pulse {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.laser-dot-radar {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px #34d399, 0 0 20px #10b981;
    animation: laserDotBlink 0.9s infinite alternate;
}

@keyframes laserDotBlink {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.4); }
}

.laser-arrow-icon {
    font-size: 20px;
    color: #38bdf8;
    filter: drop-shadow(0 0 8px #38bdf8) drop-shadow(0 0 16px #34d399);
    animation: laserArrowNudge 0.9s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes laserArrowNudge {
    0%, 100% {
        transform: translateX(0);
        color: #38bdf8;
        filter: drop-shadow(0 0 8px #38bdf8);
    }
    50% {
        transform: translateX(-8px);
        color: #34d399;
        filter: drop-shadow(0 0 16px #34d399);
    }
}

.laser-guide-cluster {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.laser-guide-tag {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #34d399;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.laser-guide-target {
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.3px;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.85);
}

/* FLECHA LÁSER CONECTORA PROMINENTE DESDE EL CUADRO DERECHO AL SMARTPHONE */
.laser-exterior-pointer {
    position: absolute;
    left: -26px;
    top: var(--laser-pointer-y, 28px);
    transform: translateY(-50%);
    display: none;
    align-items: center;
    gap: 0px;
    z-index: 60;
    pointer-events: none;
    transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tech-callout-card.active .laser-exterior-pointer {
    display: flex !important;
}

.laser-arrow-head-big {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 14px solid #38bdf8;
    filter: drop-shadow(-3px 0 8px rgba(56, 189, 248, 0.95)) drop-shadow(-6px 0 14px rgba(52, 211, 153, 0.7));
    animation: laserArrowNudgeBig 0.9s infinite cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: right center;
    flex-shrink: 0;
}

@keyframes laserArrowNudgeBig {
    0%, 100% {
        transform: translateX(0) scale(1);
        border-right-color: #38bdf8;
        filter: drop-shadow(-3px 0 8px rgba(56, 189, 248, 0.95));
    }
    50% {
        transform: translateX(-6px) scale(1.18);
        border-right-color: #34d399;
        filter: drop-shadow(-6px 0 14px rgba(52, 211, 153, 1)) drop-shadow(0 0 18px #10b981);
    }
}

.laser-beam-connector-line {
    width: 14px;
    height: 4px;
    background: linear-gradient(90deg, #38bdf8 0%, #34d399 100%);
    box-shadow: 0 0 10px #38bdf8, 0 0 16px #34d399;
    border-radius: 2px;
    position: relative;
    flex-shrink: 0;
}

.laser-beam-connector-line::after {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 10px #34d399, 0 0 22px #10b981;
    animation: laserDotRadarPulse 0.9s infinite alternate;
}

@keyframes laserDotRadarPulse {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 1; }
}

/* PINES Y BALIZAS QUIRÚRGICAS FLOTANTES (DIRECCIONALES) */
.surgical-target-pin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 40%, #047857 100%);
    color: #ffffff;
    font-family: 'JetBrains Mono', 'Montserrat', monospace;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1.5px solid #38bdf8;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.9), 0 0 30px rgba(16, 185, 129, 0.5);
    text-transform: uppercase;
    animation: surgicalPinPulse 1.2s infinite alternate ease-in-out;
    z-index: 60;
    pointer-events: none;
    box-sizing: border-box;
}

.surgical-target-pin.active {
    display: inline-flex !important;
}

@keyframes surgicalPinPulse {
    0% {
        transform: scale(0.97) translateX(0);
        box-shadow: 0 0 10px rgba(56, 189, 248, 0.6), 0 0 16px rgba(52, 211, 153, 0.35);
        border-color: #38bdf8;
    }
    100% {
        transform: scale(1.05) translateX(-3px);
        box-shadow: 0 0 24px rgba(56, 189, 248, 1), 0 0 38px rgba(52, 211, 153, 0.7);
        border-color: #34d399;
    }
}

.surgical-target-pin.notch-pin {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 350;
    white-space: nowrap;
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 50%, #0284c7 100%);
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.9), 0 0 35px rgba(56, 189, 248, 0.7);
    animation: surgicalNotchPinPulse 1.1s infinite alternate ease-in-out;
}

@keyframes surgicalNotchPinPulse {
    0% {
        transform: translateX(-50%) scale(0.96);
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.7);
    }
    100% {
        transform: translateX(-50%) scale(1.06);
        box-shadow: 0 0 28px rgba(239, 68, 68, 1), 0 0 45px rgba(56, 189, 248, 0.8);
    }
}

/* MARCOS NEÓN QUIRÚRGICOS PULSANTES */
.surgical-target-highlight-emerald {
    outline: 2.5px solid #10b981 !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.9), inset 0 0 18px rgba(16, 185, 129, 0.35) !important;
    animation: emeraldSurgicalPulse 1.3s infinite alternate ease-in-out !important;
    border-radius: 10px;
    position: relative;
    z-index: 25;
}

@keyframes emeraldSurgicalPulse {
    0% {
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.5), inset 0 0 8px rgba(16, 185, 129, 0.2);
    }
    100% {
        box-shadow: 0 0 32px rgba(16, 185, 129, 1), inset 0 0 22px rgba(16, 185, 129, 0.5);
    }
}

.surgical-target-highlight-cyan {
    outline: 2.5px solid #38bdf8 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.95), inset 0 0 18px rgba(56, 189, 248, 0.35) !important;
    animation: cyanSurgicalPulse 1.3s infinite alternate ease-in-out !important;
    border-radius: 10px;
    position: relative;
    z-index: 25;
}

@keyframes cyanSurgicalPulse {
    0% {
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.5), inset 0 0 8px rgba(56, 189, 248, 0.2);
    }
    100% {
        box-shadow: 0 0 32px rgba(56, 189, 248, 1), inset 0 0 22px rgba(56, 189, 248, 0.5);
    }
}

.surgical-target-highlight-amber {
    outline: 2.5px solid #f59e0b !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.9), inset 0 0 18px rgba(245, 158, 11, 0.3) !important;
    animation: amberSurgicalPulse 1.3s infinite alternate ease-in-out !important;
    border-radius: 10px;
    position: relative;
    z-index: 25;
}

@keyframes amberSurgicalPulse {
    0% {
        box-shadow: 0 0 12px rgba(245, 158, 11, 0.5), inset 0 0 8px rgba(245, 158, 11, 0.2);
    }
    100% {
        box-shadow: 0 0 32px rgba(245, 158, 11, 1), inset 0 0 22px rgba(245, 158, 11, 0.45);
    }
}

/* Elementos Internos de la Tarjeta */
.callout-card-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.badge-index {
    font-size: 8.5px;
    font-weight: 900;
    background: #38bdf8;
    color: #020617;
    padding: 2px 7px;
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
}

.badge-title {
    font-size: 8.5px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    flex: 1;
}

.badge-status-dot {
    font-size: 8px;
    font-weight: 800;
    color: #34d399;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tech-callout-card h6 {
    font-size: 13.5px;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.2px;
}

.tech-callout-card p {
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.45;
    margin: 0;
}

.callout-punchline {
    font-size: 11.5px !important;
    color: #f1f5f9 !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    letter-spacing: 0.15px;
}

.callout-highlight-metric {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.28);
    font-size: 9.5px;
    color: #cbd5e1;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.callout-highlight-metric i {
    font-size: 12px;
    flex-shrink: 0;
}

.callout-highlight-metric strong {
    color: #ffffff;
    font-weight: 800;
}

/* Cluster de Especificaciones Técnicas (Mantenido por retrocompatibilidad) */
.callout-tech-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
}

.tech-spec-item {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tech-spec-item i {
    font-size: 13px;
    flex-shrink: 0;
}

.tech-spec-item .spec-label {
    display: block;
    font-size: 7.5px;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.tech-spec-item .spec-val {
    display: block;
    font-size: 9px;
    color: #f1f5f9;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pie de la Tarjeta */
.callout-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(56, 189, 248, 0.15);
    font-size: 8.5px;
}

.callout-verif-badge {
    color: #34d399;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.callout-focus-hint {
    color: #38bdf8;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Barra Inferior de Navegación del Escaparate */
.showcase-nav-bar {
    background: rgba(10, 20, 38, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 14px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.showcase-progress-indicator {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.showcase-step-counter {
    font-size: 9px;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.showcase-step-counter strong {
    color: #38bdf8;
    font-weight: 900;
}

.showcase-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(30, 41, 59, 0.8);
    border-radius: 999px;
    overflow: hidden;
}

.showcase-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, #34d399);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.showcase-quick-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-showcase-nav {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #e2e8f0;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-showcase-nav:hover {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    transform: scale(1.06);
}

.showcase-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.showcase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(71, 85, 105, 0.6);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 0;
}

.showcase-dot:hover {
    background: rgba(56, 189, 248, 0.6);
    transform: scale(1.2);
}

.showcase-dot.active {
    width: 18px;
    border-radius: 6px;
    background: linear-gradient(90deg, #38bdf8, #34d399);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.spotlight-active {
    position: relative;
    outline: 2px solid #38bdf8 !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.85), inset 0 0 15px rgba(56, 189, 248, 0.4) !important;
    animation: spotlightPulse 1.6s infinite ease-in-out !important;
    z-index: 25;
    transition: all 0.3s ease;
}

/* ==========================================================================
   EJE 07 • TARIFARIO CORPORATIVO PREFERENCIAL 2026 (PÁGINA 6)
   ========================================================================== */
.pricing-calculator-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    align-items: stretch;
}

.pricing-table-wrap {
    overflow-x: auto;
}

.p-table-corporate {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.p-table-corporate thead {
    background: var(--sapphire-900);
}

.p-table-corporate th {
    padding: 12px 14px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--accent-sky);
    border-bottom: 2px solid var(--accent-cyan);
}

.p-table-corporate td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.p-table-corporate tr:hover {
    background: rgba(2, 132, 199, 0.06);
}

.price-pill-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 800;
    color: #38bdf8;
    background: rgba(2, 132, 199, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
}

.time-pill-tag {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sapphire-300);
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
}

/* Calculadora Interactiva de Convenio */
.calculator-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.calc-control-group {
    margin-bottom: 18px;
}

.calc-label {
    font-size: 12.5px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}

.calc-range-slider {
    width: 100%;
    accent-color: var(--accent-cyan);
}

.calc-summary-box {
    background: var(--sapphire-900);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin: 16px 0;
}

.calc-sum-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
    color: #94a3b8;
}

.calc-sum-row strong { color: #ffffff; }

/* ==========================================================================
   FOOTER INSTITUCIONAL
   ========================================================================== */
.footer-corporate {
    background: var(--sapphire-950);
    border-top: 1px solid var(--border-light);
    padding: 40px 20px 20px 20px;
    color: #64748b;
    font-size: 12px;
}

.footer-container {
    max-width: min(1920px, 96vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.footer-col h5 {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-col a {
    color: #94a3b8;
    text-decoration: none;
    transition: var(--transition);
}

.footer-col a:hover { color: var(--accent-sky); }

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   RESPONSIVIDAD MÓVIL Y TABLET
   ========================================================================== */
@media (max-width: 1024px) {
    .command-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .manifesto-modules-grid {
        grid-template-columns: 1fr;
    }
    .hero-letter-grid, .app-showcase-layout, .gemini-copilot-grid, .pricing-calculator-grid {
        grid-template-columns: 1fr;
    }
    .morph-metrics-grid, .pins-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
    .nav-links-menu { display: none; }
}

@media (max-width: 640px) {
    .command-impact-grid {
        grid-template-columns: 1fr;
    }
    .command-telemetry-ribbon {
        flex-direction: column;
        align-items: stretch;
    }
    .manifesto-footer-block {
        flex-direction: column;
        align-items: flex-start;
    }
    .manifesto-cta-group {
        width: 100%;
        flex-direction: column;
    }
    .manifesto-cta-group .btn-cta {
        width: 100%;
        justify-content: center;
    }
    .morph-metrics-grid, .pins-cards-grid, .footer-container {
        grid-template-columns: 1fr;
    }
    .phone-mockup-container {
        width: 100%;
        max-width: 320px;
        height: 600px;
    }
    .section-title { font-size: 21px; }
}


/* ==========================================================================
   FASE 3A: MOTOR DE ANIMACIONES BIOFÍLICAS & DINÁMICA CELULAR (zeta=0.72)
   ACELERACIÓN ESTRICTA POR GPU & W3C VIEW TRANSITIONS API
   ========================================================================== */

/* Aislamiento de transición de vista para evitar parpadeos globales */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* Morphing viscoelástico continuo entre smartphone card y modal visor */
::view-transition-group(phone-modal-surface) {
    animation-duration: 440ms;
    animation-timing-function: cubic-bezier(0.24, 1.28, 0.38, 1);
    overflow: hidden;
    border-radius: 36px;
    box-shadow: 0 25px 65px -12px rgba(2, 6, 23, 0.95), 0 0 40px rgba(56, 189, 248, 0.35);
}

::view-transition-old(phone-modal-surface) {
    animation-duration: 440ms;
    animation-timing-function: cubic-bezier(0.24, 1.28, 0.38, 1);
    mix-blend-mode: normal;
    border-radius: inherit;
}

::view-transition-new(phone-modal-surface) {
    animation-duration: 440ms;
    animation-timing-function: cubic-bezier(0.24, 1.28, 0.38, 1);
    mix-blend-mode: normal;
    border-radius: inherit;
}

/* Estabilización de GPU en el Smartphone y Componentes Clave */
.phone-mockup-container {
    perspective: 1200px;
    -webkit-perspective: 1200px;
}

.phone-screen {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.phone-patient-card,
.pillar-card,
.app-feature-box,
.btn-phone-action,
.pricing-card {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: relative;
}

/* Inhibición de transiciones de transform durante simulación activa de resortes */
.bio-spring-active {
    transition: transform 0s !important;
}

/* Resplandor Especular de Membrana Lipídica (Citoplasma Reflectivo) */
.phone-patient-card::before,
.pillar-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle 150px at var(--cell-sheen-x, 50%) var(--cell-sheen-y, 50%),
        rgba(56, 189, 248, calc(var(--cell-sheen-opacity, 0) * 0.18)),
        transparent 72%
    );
    pointer-events: none;
    z-index: 2;
    opacity: var(--cell-sheen-opacity, 0);
    transition: opacity 0.28s ease-out;
}

/* Desactivación de salto de opacidad mientras corre View Transitions */
.phone-report-preview-modal.biophilic-view-transitioning {
    transition: none !important;
    display: flex !important;
}



/* ==========================================================================
   HERO CINEMATOGRÁFICO WSI & ESCÁNER GIGAPÍXEL INTERACTIVO (DISEÑO 2026)
   ========================================================================== */
.hero-wsi-fullscreen-section {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wsi-cinematic-stage {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #030712;
    border: 1px solid rgba(56, 189, 248, 0.22);
    box-shadow: 0 20px 50px rgba(5, 11, 20, 0.85);
}

.scanner-viewport-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.scanner-interactive-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(110%) brightness(95%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: grab;
}

.scanner-interactive-slide:active {
    cursor: grabbing;
}

/* Barrido Láser Bioluminiscente en Vivo */
.scanner-laser-sweep {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.95) 50%, transparent);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.85), 0 0 32px rgba(2, 132, 199, 0.5);
    z-index: 10;
    pointer-events: none;
    animation: laserScanCycle 4.5s ease-in-out infinite;
}

@keyframes laserScanCycle {
    0% { top: 0%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* HUD Superior del Escáner */
.scanner-hud-top {
    position: absolute;
    top: 18px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 15;
    pointer-events: none;
}

.scanner-brand-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(5, 11, 20, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 8px 16px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.live-recording-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
    animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.5; }
}

.scanner-metrics-pills {
    display: flex;
    gap: 10px;
}

.hud-pill {
    background: rgba(15, 29, 51, 0.85);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(56, 189, 248, 0.18);
    padding: 6px 14px;
    border-radius: 999px;
    color: #bae6fd;
    font-size: 11.5px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hud-pill.highlight {
    border-color: rgba(16, 185, 129, 0.45);
    color: #34d399;
}

/* Divisor Split-Screen */
.split-screen-controller {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 12;
    pointer-events: none;
}

.split-badge {
    background: rgba(5, 11, 20, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #e2edfa;
}

.split-drag-line {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(2, 132, 199, 0.9);
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
}

/* HUD Inferior de Alta Conversión */
.scanner-hud-bottom {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(7, 14, 26, 0.88);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1.5px solid rgba(56, 189, 248, 0.28);
    border-radius: 14px;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 25;
    box-shadow: 0 14px 40px 0 rgba(5, 11, 20, 0.85), inset 0 1px 0 0 rgba(240, 247, 255, 0.16);
    transition: var(--transition);
}

.scanner-hud-bottom:hover {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 18px 48px 0 rgba(5, 11, 20, 0.95), 0 0 24px rgba(56, 189, 248, 0.2);
}

.scanner-quick-caption h4 {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff; /* Ratio 17.5:1 WCAG AAA */
    margin-bottom: 4px;
    letter-spacing: -0.2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.scanner-quick-caption p {
    font-size: 12.5px;
    font-weight: 600;
    color: #e2edfa; /* Ratio 14.2:1 WCAG AAA */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.scanner-cta-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-scanner-action-wa {
    background: linear-gradient(135deg, #047857, #065f46);
    color: #ffffff;
    font-weight: 800;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #34d399;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    box-shadow: 0 4px 18px rgba(5, 150, 105, 0.45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.btn-scanner-action-wa:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(52, 211, 153, 0.55);
}

.btn-scanner-action-portal {
    background: rgba(15, 29, 51, 0.95);
    color: #ffffff; /* Ratio > 15:1 WCAG AAA */
    border: 1.5px solid rgba(56, 189, 248, 0.45);
    font-weight: 800;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    box-shadow: 0 4px 16px rgba(5, 11, 20, 0.5);
}

.btn-scanner-action-portal:hover {
    background: #0284c7;
    color: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.35);
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .wsi-cinematic-stage { height: 420px; }
    .scanner-hud-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .scanner-metrics-pills { display: none; }
    .scanner-cta-group { width: 100%; flex-direction: column; }
    .btn-scanner-action-wa, .btn-scanner-action-portal { justify-content: center; width: 100%; }
}

/* ==========================================================================
   CLON EXACTO IMMUNOQUERY (FIGURA 2 - app.immunoquery.com/main)
   Estética Médica Limpia, Minimalista (#ffffff), Acentos Naranja Coral & Azul
   ========================================================================== */

#pantalla-ihq {
    width: 100%;
    height: calc(100vh - 67px);
    padding: 0;
    margin: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    color: #1e293b !important;
    contain: normal !important;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Contenedor Raíz de ImmunoQuery */
.iq-root-layout {
    width: 100%;
    min-height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    color: #1e293b;
}

/* 1. CABECERA INSTITUCIONAL IMMUNOQUERY (FIGURA 2) */
.iq-top-header {
    width: 100%;
    height: 60px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(16px, 3.5vw, 48px);
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 40;
}

.iq-brand-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

.iq-brand-logo {
    font-size: 23px;
    font-weight: 800;
    color: #ea580c; /* Naranja coral característico de ImmunoQuery */
    letter-spacing: -0.02em;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1;
}

.iq-nav-links-wrap {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.2vw, 30px);
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

.iq-nav-link-item {
    height: 100%;
    display: flex;
    align-items: center;
}

.iq-nav-action-link {
    background: transparent;
    border: none;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    padding: 0 4px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.iq-nav-action-link:hover {
    color: #0f172a;
}

/* Enlace activo 'Build Panel' con subrayado naranja grueso */
.iq-nav-action-link.active {
    color: #0f172a;
    font-weight: 700;
    position: relative;
}

.iq-nav-action-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: #ea580c;
    border-radius: 2px 2px 0 0;
}

/* Icono ? de Help / Support */
.iq-help-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Botón Hamburguesa ☰ */
.iq-menu-hamburger-btn {
    background: transparent;
    border: none;
    color: #334155;
    font-size: 20px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.iq-menu-hamburger-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* 2. SUBCABECERA: TÍTULO 'Build Panel' + BOTÓN 'Saved Cases >' */
.iq-subbar {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: clamp(20px, 3vh, 30px) clamp(16px, 3.5vw, 48px) 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.iq-subbar-title {
    font-size: clamp(22px, 2vw, 24px);
    font-weight: 700;
    color: #334155;
    letter-spacing: -0.02em;
    margin: 0;
    font-family: inherit;
}

.iq-btn-saved-cases {
    background: #0284c7;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25);
    transition: background 0.15s ease, transform 0.1s ease;
    text-decoration: none;
    font-family: inherit;
}

.iq-btn-saved-cases:hover {
    background: #0369a1;
    transform: translateY(-1px);
}

.iq-btn-saved-cases:active {
    transform: translateY(0);
}

/* 3. PESTAÑAS DE BÚSQUEDA (DIAGNOSES | ANTIBODIES) */
.iq-search-tabs-bar {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3.5vw, 48px);
    box-sizing: border-box;
    border-bottom: 2px solid #e2e8f0;
}

.iq-tabs-flex {
    display: flex;
    align-items: center;
    gap: 36px;
}

.iq-tab-btn {
    background: transparent;
    border: none;
    padding: 10px 2px 14px 2px;
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
    outline: none;
    font-family: inherit;
}

.iq-tab-btn:hover {
    color: #0f172a;
}

.iq-tab-btn.active {
    color: #0f172a;
    font-weight: 700;
}

.iq-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: #ea580c; /* Subrayado naranja #ea580c */
    border-radius: 2px 2px 0 0;
}

/* 4. GRID PRINCIPAL (COLUMNA IZQUIERDA Y DERECHA) */
.iq-workspace-grid {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: clamp(22px, 3vh, 34px) clamp(16px, 3.5vw, 48px) 48px;
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: clamp(24px, 3.2vw, 48px);
    box-sizing: border-box;
    flex: 1;
}

@media (max-width: 960px) {
    .iq-workspace-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 18px;
    }
}

/* 5. COLUMNA IZQUIERDA: BUSCADOR CON LUPA AZUL Y LISTA RECIENTES */
.iq-left-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Barra de Búsqueda redondeada */
.iq-search-container {
    width: 100%;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 9999px; /* Bordes completamente redondeados */
    padding: 3px 5px 3px 22px;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.iq-search-container:focus-within {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.16);
}

.iq-search-input-field {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15.5px;
    color: #1e293b;
    padding: 11px 8px;
    font-family: inherit;
}

.iq-search-input-field::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* Icono de Lupa azul de gran tamaño */
.iq-search-lens-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0284c7; /* Azul cian vibrante #0284c7 */
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}

.iq-search-lens-btn:hover {
    background: #0369a1;
}

.iq-search-lens-btn:active {
    transform: scale(0.96);
}

/* Subtítulo 'Recent' */
.iq-recent-title-wrap {
    margin-top: 24px;
    margin-bottom: 12px;
    padding-left: 4px;
}

.iq-recent-label {
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8; /* Gris claro */
    letter-spacing: 0.01em;
    margin: 0;
    font-family: inherit;
}

/* Tarjetas de elementos bajo 'Recent' */
.iq-items-scroll-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.iq-items-scroll-list::-webkit-scrollbar {
    width: 6px;
}

.iq-items-scroll-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.iq-entity-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.16s ease;
    user-select: none;
}

.iq-entity-card:hover {
    border-color: #0284c7;
    background: #f8fafc;
    transform: translateX(3px);
}

.iq-entity-card.selected {
    border-color: #0284c7;
    background: #f0f9ff;
}

.iq-entity-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.iq-entity-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.iq-entity-meta {
    font-size: 12px;
    color: #64748b;
}

.iq-entity-action-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #0284c7;
    border: 1px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.iq-entity-card:hover .iq-entity-action-icon {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

.iq-entity-card.selected .iq-entity-action-icon {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

/* 6. COLUMNA DERECHA: CAJA CON BORDES REDONDEADOS SUAVES 'Selected (0/5)' */
.iq-right-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.iq-selected-box {
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    padding: 22px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.iq-selected-header-row {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.iq-selected-title-text {
    font-size: 16px;
    font-weight: 700;
    color: #475569; /* Gris #475569 */
    margin: 0;
    font-family: inherit;
}

.iq-btn-clear-selection {
    background: transparent;
    border: none;
    font-size: 12.5px;
    color: #94a3b8;
    cursor: pointer;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    display: none;
    font-family: inherit;
    transition: color 0.15s ease;
}

.iq-btn-clear-selection:hover {
    color: #ef4444;
}

/* Texto Explicativo Fiel a la Figura 2 */
.iq-selected-explanation-text {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
    padding: 8px 0;
    font-family: inherit;
}

/* Contenedor de Chips Seleccionados */
.iq-selected-chips-container {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 18px;
}

.iq-selected-chip-item {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #0284c7;
    border-radius: 6px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: iqChipIn 0.2s ease-out;
}

@keyframes iqChipIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.iq-chip-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.iq-chip-badge {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    background: #e2e8f0;
    padding: 2px 7px;
    border-radius: 10px;
}

.iq-chip-remove-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.15s ease;
}

.iq-chip-remove-btn:hover {
    color: #ef4444;
    background: #fee2e2;
}

/* Botón de Generar Panel (Azul Clínico Quirúrgico) */
.iq-build-panel-action-btn {
    margin-top: auto;
    background: #0284c7;
    color: #ffffff;
    border: 1px solid #0369a1;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
    transition: all 0.18s ease;
    font-family: inherit;
}

.iq-build-panel-action-btn:hover {
    background: #0369a1;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45);
}

/* Modal de Matriz IHC ImmunoQuery */
.iq-matrix-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: iqFadeInModal 0.22s ease-out;
}

@keyframes iqFadeInModal {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.iq-matrix-modal-content {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 16px;
    width: 100%;
    max-width: 1020px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    color: #1e293b;
}

.iq-matrix-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1.5px solid #e2e8f0;
    background: #f8fafc;
}

.iq-matrix-modal-title {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
}

.iq-matrix-modal-close {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.iq-matrix-modal-close:hover {
    color: #ef4444;
    background: #fee2e2;
}

.iq-matrix-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.iq-matrix-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.iq-matrix-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.iq-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #1e293b;
    background: #ffffff;
}

.iq-matrix-table th, .iq-matrix-table td {
    padding: 11px 14px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #f1f5f9;
}

.iq-matrix-table th {
    background: #f1f5f9;
    font-weight: 700;
    color: #0f172a;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    position: sticky;
    top: 0;
    z-index: 2;
}

.iq-matrix-table th:first-child, .iq-matrix-table td:first-child {
    text-align: left;
    font-weight: 700;
    color: #0f172a;
    background: #f8fafc;
    border-right: 2px solid #e2e8f0;
    position: sticky;
    left: 0;
    z-index: 1;
}

.iq-matrix-table th:first-child {
    z-index: 3;
}

.iq-pill-pos {
    background: #dcfce7;
    color: #15803d;
    font-weight: 800;
    border-radius: 6px;
    padding: 3px 8px;
    display: inline-block;
    border: 1px solid #bbf7d0;
}

.iq-pill-neg {
    background: #fee2e2;
    color: #b91c1c;
    font-weight: 800;
    border-radius: 6px;
    padding: 3px 8px;
    display: inline-block;
    border: 1px solid #fecaca;
}

.iq-pill-var {
    background: #fef3c7;
    color: #b45309;
    font-weight: 800;
    border-radius: 6px;
    padding: 3px 8px;
    display: inline-block;
    border: 1px solid #fde68a;
}

.iq-btn-modal-action {
    padding: 9px 18px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
    font-family: inherit;
}

.iq-btn-modal-close {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.iq-btn-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.iq-btn-modal-wa {
    background: #047857;
    color: #ffffff;
    border: 1px solid #059669;
}

.iq-btn-modal-wa:hover {
    background: #065f46;
}

/* ==========================================================================
   CONMUTADOR BILINGÜE DISCRETO Y ELEGANTE [ES | EN] (IMMUNOQUERY)
   ========================================================================== */
.iq-lang-toggle {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 9999px;
    padding: 2px 5px;
    gap: 2px;
    margin-left: 4px;
    user-select: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.iq-lang-btn {
    background: transparent;
    border: none;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    padding: 3px 8px;
    border-radius: 9999px;
    cursor: pointer;
    line-height: 1.1;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    outline: none;
}

.iq-lang-btn:hover {
    color: #0f172a;
}

.iq-lang-btn.active {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(2, 132, 199, 0.35);
}

.iq-lang-separator {
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 600;
    user-select: none;
    padding: 0 1px;
}

/* ==========================================================================
   ARQUITECTURA ZERO-SCROLL (100VH) PARA #PANTALLA-IHQ
   ========================================================================== */
@media (min-width: 961px) and (min-height: 601px) {
    #pantalla-ihq {
        height: calc(100vh - 67px) !important;
        max-height: calc(100vh - 67px) !important;
        overflow: hidden !important;
    }

    .iq-root-layout {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .iq-top-header {
        height: 54px !important;
        flex-shrink: 0 !important;
    }

    .iq-subbar {
        padding: 12px clamp(16px, 3.5vw, 48px) 8px !important;
        flex-shrink: 0 !important;
    }

    .iq-search-tabs-bar {
        flex-shrink: 0 !important;
    }

    .iq-tab-btn {
        padding: 8px 2px 10px 2px !important;
    }

    .iq-workspace-grid {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 14px clamp(16px, 3.5vw, 48px) 18px !important;
        overflow: hidden !important;
        display: grid !important;
        grid-template-columns: 1.18fr 0.82fr !important;
        gap: clamp(20px, 2.5vw, 36px) !important;
    }

    .iq-left-column {
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .iq-search-container {
        flex-shrink: 0 !important;
    }

    .iq-recent-title-wrap {
        margin-top: 14px !important;
        margin-bottom: 8px !important;
        flex-shrink: 0 !important;
    }

    .iq-items-scroll-list {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 6px !important;
    }

    .iq-right-column {
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .iq-selected-box {
        height: 100% !important;
        min-height: 0 !important;
        padding: 18px 20px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .iq-selected-chips-container {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 4px !important;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }

    .iq-actions-container {
        flex-shrink: 0 !important;
    }
}