/* ==========================================================================
   REPORTES / DASHBOARD LAYOUT STYLES
   ========================================================================== */

:root {
    color-scheme: dark;
    --text-secondary: #94a3b8;
    --bg-general: #1e293b;         /* Slate-gray for general background */
    --bg-card: #0f172a;            /* Tarjetas/sidebar/tablas/modal */
    --bg-modal: #0f172a;           /* Fondo de modal */
    --text-primary: #f1f5f9;       /* Blanco suave */
    --border-color: #334155;       /* Bordes */
    --border-focus: #3b82f6;       /* Focus/Active */
    --text-muted: #cbd5e1;         
    --text-placeholder: #64748b;
    
    --secondary-blue: #0284c7;
    --secondary-hover: #0369a1;
    --success-color: #22c55e;
    --danger-color: #ef4444;
    --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.4);

    /* Identidad Institucional y Neuro-Diseño: Clínica San Clemente */
    --sc-blue: #2563eb;            /* Azul San Clemente (Confianza, Rigor) */
    --sc-blue-hover: #1d4ed8;
    --sc-emerald: #059669;         /* Verde Esmeralda (Salud, Resultados) */
    --sc-emerald-hover: #047857;
    --sc-emerald-light: rgba(5, 150, 105, 0.15);
    --sc-blue-light: rgba(37, 99, 235, 0.15);
    --sc-border-focus: #2563eb;
    --sc-row-even: #111a2e;        /* Zebra Striping sutil para tabla */
    --sc-row-hover: rgba(37, 99, 235, 0.08); /* Hover ergonómico neumórfico */

    /* Escalado Matemático Responsivo para Cualquier Monitor / Zoom */
    --screen-scale-factor: 1;
    --font-table-size: clamp(0.72rem, calc(0.68rem + 0.22vw * var(--screen-scale-factor, 1)), 0.98rem);
    --font-filter-label: clamp(0.75rem, calc(0.7rem + 0.2vw * var(--screen-scale-factor, 1)), 1rem);
    --font-filter-input: clamp(0.75rem, calc(0.7rem + 0.2vw * var(--screen-scale-factor, 1)), 0.98rem);
    --dashboard-max-width: clamp(1200px, 96vw, 2400px);

    /* -----------------------------------------------------------------------
       PROPORCIÓN ÁUREA φ=1.618 — Neuro-diseño & Fibonacci
       Sincronizado con style.css para coherencia de sistema de diseño
       ----------------------------------------------------------------------- */
    --phi: 1.618;

    /* Serie tipográfica áurea (base 16px) */
    --text-xs:   0.618rem;   /* = 1/φ²  ≈  9.9px  */
    --text-sm:   0.764rem;   /* = 1/φ   ≈ 12.2px  */
    --text-base: 1rem;       /* = 16px             */
    --text-md:   1.272rem;   /* = φ^0.5 ≈ 20.4px  */
    --text-lg:   1.618rem;   /* = φ     ≈ 25.9px  */
    --text-xl:   2.618rem;   /* = φ²    ≈ 41.9px  */

    /* Serie espacial Fibonacci (px): 3 · 5 · 8 · 13 · 21 · 34 · 55 */
    --space-xs:  3px;
    --space-sm:  5px;
    --space-md:  8px;
    --space-lg:  13px;
    --space-xl:  21px;
    --space-2xl: 34px;
    --space-3xl: 55px;

    /* Ratio áureo de layout */
    --col-minor: 38.2%;
    --col-major: 61.8%;
}

body.light-theme {
    color-scheme: light;
    --text-secondary: #475569;
    --bg-general: #f1f5f9;         /* Gris claro clínico */
    --bg-card: #ffffff;            /* Blanco puro para tarjetas y tablas */
    --bg-modal: #ffffff;           /* Fondo de modal claro */
    --text-primary: #0f172a;       /* Gris oscuro pizarra para máxima nitidez */
    --border-color: #cbd5e1;       /* Bordes muy suaves y limpios */
    --border-focus: #3b82f6;
    --text-muted: #475569;         /* Texto secundario de alta legibilidad */
    --text-placeholder: #94a3b8;
    --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.08);
}

html,
body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    background: #080e1e !important;
    background-image: 
        radial-gradient(at 15% 15%, rgba(14, 165, 233, 0.15) 0px, transparent 50%), 
        radial-gradient(at 85% 20%, rgba(99, 102, 241, 0.15) 0px, transparent 50%), 
        radial-gradient(at 50% 80%, rgba(6, 182, 212, 0.12) 0px, transparent 55%) !important;
    background-attachment: fixed !important;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.light-theme,
html:has(body.light-theme) {
    background: #f1f5f9 !important;
    background-image: 
        radial-gradient(at 15% 15%, rgba(14, 165, 233, 0.08) 0px, transparent 50%), 
        radial-gradient(at 85% 20%, rgba(99, 102, 241, 0.08) 0px, transparent 50%), 
        radial-gradient(at 50% 80%, rgba(6, 182, 212, 0.06) 0px, transparent 55%) !important;
}

/* Neutralizar parpadeo táctil en móviles */
.mobile-patient-card,
.btn-mobile-action,
.mobile-filter-pill,
.mobile-bottom-nav-item,
.mobile-search-box,
.action-btn {
    -webkit-tap-highlight-color: transparent !important;
}

/* Contraste clínico para tarjetas móviles en modo claro */
body.light-theme .mobile-card-specimen-title {
    color: #0284c7 !important;
}
body.light-theme .mobile-card-code-pill {
    background: rgba(2, 132, 199, 0.1) !important;
    color: #0369a1 !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
}
body.light-theme .mobile-card-specimen-row {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Main App Container */
.app-container {
    display: flex;
    height: 100vh;
    background: transparent !important;
    position: relative;
    overflow: hidden;
}

/* Sidebar Menu */
.sidebar {
    width: 260px;
    height: 100vh;
    background: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(20px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45) !important;
    z-index: 2500;
    overflow-y: auto;
}

body.light-theme .sidebar {
    background: rgba(255, 255, 255, 0.82) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.08) !important;
}

.sidebar-header {
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    min-height: 68px;
    height: auto;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.light-theme .sidebar-header {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-weight: 500;
    white-space: normal;
}

.logo-circle {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #38bdf8;
    border: 2px solid #38bdf8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.logo-circle:hover {
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6), 0 6px 12px rgba(0, 0, 0, 0.4);
}

.logo-text {
    font-size: 0.85rem;
    line-height: 1.25;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: #f1f5f9;
}

.logo-text-wrapper {
    display: flex;
    flex-direction: column;
}

.logo-subtitle {
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: 0.8px;
    font-weight: 800;
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.sidebar-nav {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-group {
    display: flex;
    flex-direction: column;
}

.nav-group-header {
    background-color: var(--bg-card);
    border: none;
    padding: 12px 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s, color 0.2s;
}

.nav-group-header:hover {
    background-color: var(--bg-general);
    color: var(--text-primary);
}

.nav-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.arrow-icon {
    transition: transform 0.3s ease;
    font-size: 0.75rem;
}

.nav-group.active .arrow-icon {
    transform: rotate(180deg);
}

.nav-group-items {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 1400px;
}

.nav-group:not(.active) .nav-group-items {
    max-height: 0;
}

/* Botones Laterales Animados con Sombra Posterior 3D y Relieve */
.nav-item-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 15px;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.4);
    border-bottom: 2.5px solid rgba(0, 0, 0, 0.7); /* Relieve inferior oscuro */
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    border-radius: 8px;
    margin: 8px 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-item-btn:hover {
    background: linear-gradient(180deg, #27374d 0%, #152238 100%);
    color: #ffffff;
    border-top-color: rgba(255, 255, 255, 0.25);
    border-bottom-color: rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6), 0 0 8px rgba(56, 189, 248, 0.25);
}

.nav-item-btn:active {
    transform: translateY(1px); /* Se hunde al presionar */
    border-bottom-width: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.nav-item-btn.active {
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border-top-color: rgba(255, 255, 255, 0.35);
    border-left-color: rgba(255, 255, 255, 0.2);
    border-right-color: rgba(0, 0, 0, 0.4);
    border-bottom: 3.5px solid #014367; /* Relieve azul oscuro */
    font-weight: 600;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(2, 132, 199, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-item-btn i {
    font-size: 0.95rem;
    width: 18px;
    text-align: center;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}

.nav-item-btn:hover i {
    transform: scale(1.22) rotate(-4deg);
    color: #38bdf8;
}

.nav-item-btn.active i {
    color: #ffffff;
}

/* Sidebar Collapsed State (Desktop & Mobile) - Retráctil de 70px */
.app-container.collapsed .sidebar {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    overflow-x: hidden !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.app-container.collapsed .main-layout {
    width: calc(100% - 70px) !important;
    flex: 1 1 calc(100% - 70px) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Transición suave para los textos del menú al colapsar */
.logo-text-wrapper,
.logo-text,
.logo-subtitle {
    opacity: 1;
    max-width: 180px;
    white-space: normal; /* Permitir envoltura del texto del logo en varias líneas */
    overflow: hidden;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav-group-title,
.nav-group-header span,
.nav-item-text,
.arrow-icon {
    opacity: 1;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.app-container.collapsed .logo-text-wrapper,
.app-container.collapsed .logo-text,
.app-container.collapsed .logo-subtitle,
.app-container.collapsed .nav-group-title,
.app-container.collapsed .nav-group-header span,
.app-container.collapsed .nav-item-text,
.app-container.collapsed .arrow-icon {
    opacity: 0 !important;
    max-width: 0 !important;
    pointer-events: none;
}

/* Despliegue flotante suave por CSS al pasar el cursor sobre el sidebar colapsado (Desktop) */
@media (min-width: 769px) {
    .app-container.collapsed .sidebar:hover {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        z-index: 1000 !important;
        box-shadow: 6px 0 20px rgba(0, 0, 0, 0.4) !important;
    }

    .app-container.collapsed .sidebar:hover .logo-text-wrapper,
    .app-container.collapsed .sidebar:hover .logo-text,
    .app-container.collapsed .sidebar:hover .logo-subtitle,
    .app-container.collapsed .sidebar:hover .nav-group-title,
    .app-container.collapsed .sidebar:hover .nav-group-header span,
    .app-container.collapsed .sidebar:hover .nav-item-text,
    .app-container.collapsed .sidebar:hover .arrow-icon {
        opacity: 1 !important;
        max-width: 220px !important;
        pointer-events: auto !important;
    }
}

/* Centrado de iconos y elementos en estado colapsado */
.app-container.collapsed .sidebar-header {
    justify-content: center !important;
    padding: 14px 0 !important;
}

.app-container.collapsed .logo-container {
    justify-content: center !important;
}

.app-container.collapsed .nav-group-header {
    justify-content: center !important;
    padding: 12px 0 !important;
}

.app-container.collapsed .nav-group-header > div {
    gap: 0 !important;
}

.app-container.collapsed .nav-item-btn {
    justify-content: center !important;
    padding: 11px 0 !important;
    margin: 8px 10px !important;
}

/* Backdrop for Mobile */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 99990 !important;
}

/* Right Main Layout container */
.main-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    background: transparent !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Cabecera Superior */
.dashboard-header {
    background: rgba(15, 23, 42, 0.70) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    color: var(--text-primary);
    height: 50px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
    z-index: 10;
}

body.light-theme .dashboard-header {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sidebar-toggle-btn,
.header-utility-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.sidebar-toggle-btn:hover,
.header-utility-btn:hover {
    opacity: 0.8;
}

.welcome-text {
    font-size: 0.85rem;
    letter-spacing: 0.3px;
}

.welcome-text strong {
    font-weight: 600;
}

/* Lado Derecho de la Cabecera Superior */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

/* Botón Acceso Rápido Boletas */
#btnHeaderReporteBoletas {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(2, 132, 199, 0.35));
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 8px;
    color: #38bdf8;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

#btnHeaderReporteBoletas:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(2, 132, 199, 0.5));
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

#btnHeaderReporteBoletas i {
    color: #38bdf8;
    font-size: 1rem;
}

/* Badge de Identidad Institucional Co-Branding: Clínica San Clemente */
.clinic-identity-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 15px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.25) 0%, rgba(5, 150, 105, 0.22) 100%) !important;
    border: 1.5px solid #2563eb !important;
    border-radius: 20px;
    margin-left: 14px;
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.25s ease;
}

.clinic-identity-badge:hover {
    border-color: #10b981 !important;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.45);
    transform: translateY(-1px);
}

.clinic-badge-icon {
    font-size: 0.95rem;
    color: #10b981 !important;
    display: flex;
    align-items: center;
}

.clinic-badge-title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.6px;
}

.clinic-badge-title .brand-clinica {
    color: #10b981 !important; /* Verde Esmeralda San Clemente */
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.clinic-badge-title .brand-sanclemente {
    color: #60a5fa !important; /* Azul Real San Clemente */
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}

/* Contenido Principal */
.dashboard-content {
    padding: clamp(8px, 1.6vh, 18px) clamp(12px, 1.8vw, 24px);
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.3vh, 14px);
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow-y: auto !important;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    height: calc(100vh - 50px);
    background: transparent !important;
    scroll-behavior: smooth;
}

/* Tarjeta de Filtros */
.filters-card {
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--space-md);                            /* 8px — Fibonacci */
    /* Padding Fibonacci: 8px vertical (--space-md) · 21px horizontal (--space-xl) */
    padding: var(--space-md) var(--space-xl);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0;
}

body.light-theme .filters-card {
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(4px, 0.8vh, 10px) clamp(8px, 1.2vw, 16px);
    align-items: flex-end;
}

.filter-item {
    display: flex;
    flex-direction: column;
}

.filter-label {
    font-size: clamp(0.68rem, calc(0.66rem + 0.15vw * var(--screen-scale-factor, 1)), 0.85rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: clamp(2px, 0.4vh, 5px);
    letter-spacing: 0.3px;
}

.filter-input {
    width: 100%;
    height: clamp(25px, calc(23px + 1.2vh * var(--screen-scale-v-factor, 1)), 32px);
    padding: 3px 8px;
    font-size: clamp(0.70rem, calc(0.66rem + 0.15vw * var(--screen-scale-factor, 1)), 0.82rem);
    color: #f1f5f9 !important;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    outline: none;
    background-color: #253044 !important;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
}

.filter-input::placeholder {
    color: #94a3b8 !important;
}

.filter-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    background-color: #2d3b54 !important;
}

.filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.services-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-left: 5px;
}

.services-search-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: clamp(3px, 0.6vh, 8px) 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0;
    flex-shrink: 0;
}

.services-search-wrapper .services-tabs {
    margin: 0;
    border-bottom: none;
    padding-left: 0;
}

.tab-btn {
    background: rgba(15, 23, 42, 0.45) !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    padding: clamp(5px, 0.9vh, 9px) clamp(10px, 1.2vw, 18px);
    font-size: clamp(0.75rem, 1vh, 0.88rem);
    font-weight: 700;
    color: var(--text-muted) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0.55;
}

.tab-btn:hover {
    color: var(--text-primary) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    opacity: 0.85;
}

body.light-theme .tab-btn {
    background: rgba(226, 232, 240, 0.5) !important;
    color: #475569 !important;
}

body.light-theme .tab-btn:hover {
    background-color: rgba(226, 232, 240, 0.8) !important;
}

/* Estado activo para Casos Quirúrgicos (Q) - Realce Azul San Clemente */
.tab-btn[data-service="Q"].active {
    opacity: 1 !important;
    color: #ffffff !important;
    border-top: 4px solid #2563eb !important;
    border-left: 1px solid rgba(37, 99, 235, 0.4) !important;
    border-right: 1px solid rgba(37, 99, 235, 0.4) !important;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.28) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    box-shadow: inset 0 2px 8px rgba(37, 99, 235, 0.35), 0 -2px 10px rgba(37, 99, 235, 0.2) !important;
}

.tab-btn[data-service="Q"].active i {
    color: #60a5fa !important;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}

/* Estado activo para Citología (C) - Realce Verde Esmeralda San Clemente */
.tab-btn[data-service="C"].active {
    opacity: 1 !important;
    color: #ffffff !important;
    border-top: 4px solid #059669 !important;
    border-left: 1px solid rgba(5, 150, 105, 0.4) !important;
    border-right: 1px solid rgba(5, 150, 105, 0.4) !important;
    background: linear-gradient(180deg, rgba(5, 150, 105, 0.28) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    box-shadow: inset 0 2px 8px rgba(5, 150, 105, 0.35), 0 -2px 10px rgba(5, 150, 105, 0.2) !important;
}

.tab-btn[data-service="C"].active i {
    color: #34d399 !important;
    text-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}

body.light-theme .tab-btn[data-service="C"].active {
    color: #b45309 !important;
    border-left: 1px solid #cbd5e1 !important;
    border-right: 1px solid #cbd5e1 !important;
    background: linear-gradient(to bottom, rgba(217, 119, 6, 0.06), #ffffff) !important;
}

/* Contenedor de la Tabla */
.table-container {
    background: rgba(15, 23, 42, 0.82) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.light-theme .table-container {
    background: rgba(255, 255, 255, 0.90) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08) !important;
}

.table-responsive-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.report-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: var(--font-table-size, 0.775rem);
    text-align: left;
}

.report-table th {
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: 10px 8px;
    font-weight: 600;
    border: none;
    border-bottom: 3px solid #3b4d6b;
    white-space: normal;
    vertical-align: middle;
    text-align: center;
}

.report-table td {
    padding: 8px 6px;
    border: none;
    border-bottom: 2px solid #3b4d6b;
    color: var(--text-primary);
    vertical-align: middle;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.618;   /* φ — interlineado áureo: legibilidad clínica óptima */
}

.report-table td:nth-child(1),
.report-table td:nth-child(2),
.report-table td:nth-child(3) {
    text-align: center;
}

/* Ergonomía Visual Opción B (Alto Contraste y Tracking de Filas: Clínica San Clemente) */
.report-table tbody tr {
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease, box-shadow 0.2s ease;
    border-left: 4px solid transparent;
}

.report-table tbody tr:nth-child(even) {
    background-color: #16233d !important; /* Azul marino San Clemente alternado claro */
}

.report-table tbody tr:nth-child(odd) {
    background-color: #0b1324 !important; /* Fondo noche profundo */
}

.report-table tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.28) !important; /* Resaltado azul real vibrante al pasar mouse */
    border-left: 4px solid #2563eb !important; /* Barra guía izquierda brillante */
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

/* Columna CÓD. ATENCIÓN (Columna 2) - Azul San Clemente Resaltado */
.report-table td:nth-child(2) {
    background-color: rgba(37, 99, 235, 0.22) !important;
    color: #60a5fa !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    font-size: 0.82rem;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}

/* Columna PACIENTE (Columna 5) - Blanco Nitidez sobre Matiz Esmeralda */
.report-table td:nth-child(5) {
    background-color: rgba(16, 185, 129, 0.14) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
}

.report-table tbody tr:hover td:nth-child(2) {
    background-color: rgba(37, 99, 235, 0.4) !important;
    color: #ffffff !important;
}

.report-table tbody tr:hover td:nth-child(5) {
    background-color: rgba(16, 185, 129, 0.28) !important;
    color: #ffffff !important;
}

/* Modo Claro - Ergonomía Visual San Clemente */
body.light-theme .report-table tbody tr:nth-child(even) {
    background-color: #f1f5f9 !important;
}

body.light-theme .report-table tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
}

body.light-theme .report-table tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.14) !important;
    border-left: 4px solid #2563eb !important;
}

/* Estados Financieros y Fechas */
.payment-pending {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    font-weight: 600;
    text-align: center;
}

.payment-completed {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    font-weight: 600;
    text-align: center;
}

/* Indicadores Luminosos de Estado ergonómicos */
.sla-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
    transition: all 0.25s ease;
}

.sla-dot.dot-green {
    background-color: var(--sc-emerald) !important;
    box-shadow: 0 0 10px rgba(5, 150, 105, 0.75) !important;
}

.sla-dot.dot-yellow {
    background-color: #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.75) !important;
}

.sla-dot.dot-red {
    background-color: #e11d48 !important;
    box-shadow: 0 0 10px rgba(225, 29, 72, 0.75) !important;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.status-completed,
.status-badge-ready {
    background-color: rgba(5, 150, 105, 0.16) !important;
    color: #34d399 !important;
    border: 1px solid rgba(5, 150, 105, 0.3);
}

.status-process,
.status-badge-pending {
    background-color: rgba(217, 119, 6, 0.16) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(217, 119, 6, 0.3);
}

/* Celdas y Botones de Acciones (Ergonomía Motora - Ley de Fitts) */
.action-header {
    text-align: center !important;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
}

.action-cell {
    text-align: center;
    padding: 6px 8px !important;
}

.action-btns-wrapper {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}

.action-btn {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateY(0);
    /* Relieve 3D Mecánico: Luz superior + Borde basal de 2.5px + Sombra */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2.5px 0 #1545aa,
        0 4px 8px rgba(21, 69, 170, 0.35) !important;
    transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.1s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.15s ease !important;
}

/* Botón Notificación WhatsApp 1-Clic */
.action-btn.whatsapp-btn {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2.5px 0 #0f622c,
        0 4px 8px rgba(22, 163, 74, 0.35) !important;
    text-decoration: none !important;
}

.action-btn.whatsapp-btn:hover {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 3.5px 0 #0f622c,
        0 6px 14px rgba(22, 163, 74, 0.45) !important;
    transform: translateY(-1px) !important;
}

.action-btn:focus-visible {
    outline: 2px solid var(--sc-blue);
    outline-offset: 2px;
}

.action-btn i {
    color: #ffffff !important;
    font-size: 0.85rem;
}

/* Hover State - Sobreelevación elástica */
.action-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 3.5px 0 #1545aa,
        0 6px 12px rgba(21, 69, 170, 0.45) !important;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
    border-color: #bfdbfe !important;
}

/* Active State - EL BOTÓN SE HUNDE FÍSICAMENTE */
.action-btn:active {
    transform: translateY(2.5px) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 0 transparent,
        0 1px 2px rgba(0, 0, 0, 0.2) !important;
    background: #1e40af !important;
    transition: transform 0.03s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.03s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Botón Editar / Llenar Informe */
.action-btn.edit-btn {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2.5px 0 #1545aa,
        0 4px 8px rgba(37, 99, 235, 0.35) !important;
}

.action-btn.edit-btn:hover {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 3.5px 0 #1545aa,
        0 6px 14px rgba(37, 99, 235, 0.45) !important;
}

/* Botón Imprimir / Previsualizar PDF */
.action-btn.pdf-btn,
.action-btn.preview-pdf-btn {
    background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2.5px 0 #065f46,
        0 4px 8px rgba(5, 150, 105, 0.35) !important;
}

.action-btn.pdf-btn:hover,
.action-btn.preview-pdf-btn:hover {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 3.5px 0 #065f46,
        0 6px 14px rgba(5, 150, 105, 0.45) !important;
}

/* Botón Descargar PDF */
.action-btn.download-pdf-btn {
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2.5px 0 #075985,
        0 4px 8px rgba(2, 132, 199, 0.35) !important;
}

.action-btn.download-pdf-btn:hover {
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 3.5px 0 #075985,
        0 6px 14px rgba(2, 132, 199, 0.45) !important;
}

/* Botón Eliminar Registro */
.action-btn.delete-btn {
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2.5px 0 #991b1b,
        0 4px 8px rgba(220, 38, 38, 0.35) !important;
}

.action-btn.delete-btn:hover {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 3.5px 0 #991b1b,
        0 6px 14px rgba(239, 68, 68, 0.45) !important;
}
.action-btn.delete-btn:active {
    transform: translateY(2.5px) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 0 transparent,
        0 1px 2px rgba(0, 0, 0, 0.2) !important;
    background: #991b1b !important;
}

/* ==========================================================================
   RESPONSIVIDAD
   ========================================================================== */
@media (max-width: 1024px) {
    .filters-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        left: -280px !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 85vw !important;
        background-color: #0f172a !important;
        z-index: 99999 !important;
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.75) !important;
        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        isolation: isolate !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        filter: none !important;
        -webkit-filter: none !important;
        opacity: 1 !important;
    }

    .app-container.sidebar-active .sidebar,
    .app-container.mobile-sidebar-open .sidebar,
    .app-container.sidebar-active.collapsed .sidebar,
    .app-container.mobile-sidebar-open.collapsed .sidebar {
        left: 0 !important;
        visibility: visible !important;
    }

    .app-container.sidebar-active .sidebar-backdrop,
    .app-container.mobile-sidebar-open .sidebar-backdrop {
        display: block !important;
    }

    /* En móvil se anulan todas las restricciones de opacidad de colapso de escritorio */
    .app-container.collapsed .logo-text-wrapper,
    .app-container.collapsed .logo-text,
    .app-container.collapsed .logo-subtitle,
    .app-container.collapsed .nav-group-title,
    .app-container.collapsed .nav-group-header span,
    .app-container.collapsed .nav-item-text,
    .app-container.collapsed .arrow-icon {
        opacity: 1 !important;
        max-width: none !important;
        pointer-events: auto !important;
        display: inline-block !important;
        visibility: visible !important;
    }

    .app-container.collapsed .sidebar {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 85vw !important;
        left: -280px !important;
    }

    .sidebar-backdrop {
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 99990 !important;
    }

    .dashboard-header {
        padding: 0 15px;
    }
    
    .welcome-text {
        font-size: 0.75rem;
    }

    .filters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 14px;
    }
    
    .dashboard-content {
        padding: 15px;
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .filters-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-actions {
        margin-top: 5px;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    .btn-primary-dark {
        width: 100%;
    }
    
    .services-tabs {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 4px;
    }
}

/* ==========================================================================
   VENTANA MODAL FLOTANTE (POPUP REGISTRO DE PACIENTE)
   ========================================================================== */
.floating-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.45); /* Capa oscura protectora */
    backdrop-filter: blur(3px);
    display: none; /* Oculto por defecto */
    z-index: 2000;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: calc(15px * var(--zoom-compensation, 1));
}

.floating-modal-overlay.active {
    display: flex !important;
}

/* Centrado Flexbox resiliente contra cualquier nivel de zoom (50% a 200%) */
.floating-modal-overlay .modal-container {
    position: relative;
    top: auto;
    left: auto;
    margin: auto;
    max-height: calc(92vh * var(--zoom-compensation, 1));
    overflow-y: auto;
    width: 95%;
    max-width: clamp(840px, 90vw, 1250px);
    box-shadow: var(--shadow-premium);
    background-color: var(--bg-modal);
    border: 3px solid var(--border-color);
    border-radius: 8px;
    pointer-events: auto; /* Enable clicks inside the modal */
    animation: modalScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@media (max-width: 1120px) {
    .floating-modal-overlay .modal-container {
        width: 100%;
        max-height: 94vh;
    }
}

@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   DOCTORS VIEW SPECIFIC STYLES
   ========================================================================== */
.dashboard-view {
    display: none;
    flex-direction: column;
    gap: 20px;
}

.dashboard-view.active {
    display: flex;
}

.doctors-actions-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.section-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 5px 0 0 0;
    letter-spacing: -0.01em;
}

.doctors-controls-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
}

.users-actions-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.users-controls-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
}

.control-length, .control-search {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.select-length {
    width: auto !important;
    min-width: 70px;
    height: 32px;
    padding: 4px 8px !important;
    background-color: var(--bg-general) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    text-transform: none !important;
}

.input-search-custom {
    width: 240px !important;
    height: 32px;
    background-color: var(--bg-general) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    text-transform: none !important;
}

.pagination-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    margin-top: 15px;
    padding-bottom: 20px;
}

.pagination-btn {
    padding: 6px 12px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--bg-general);
    color: var(--text-primary);
    border-color: var(--border-focus);
}

.pagination-btn.active {
    background-color: var(--border-focus);
    color: #ffffff;
    border-color: var(--border-focus);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   ESTILOS PARA EL MODAL DEL EDITOR DE REPORTES PATOLÓGICOS (PANTALLA COMPLETA)
   ========================================================================== */
.report-editor-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    z-index: 999999 !important;
    align-items: center;
    justify-content: center;
}

.report-editor-overlay.active {
    display: flex !important;
}

.report-editor-container {
    width: 98vw;
    height: 96vh;
    max-height: 96vh;
    max-width: 1600px;
    background-color: var(--bg-general);
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    animation: editorModalAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.report-editor-body {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 8px;
    padding: clamp(4px, 0.8vh, 8px);
}

.report-editor-left-col {
    width: 32%;
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.4vh, 6px);
    overflow-y: auto;
    padding-right: 4px;
    padding-bottom: 30px !important;
    height: 100%;
    min-height: 0;
    flex-shrink: 0;
}

.report-editor-right-col {
    width: 67%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    height: 100%;
    min-height: 0;
}

.editor-panel {
    background-color: var(--bg-card);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.panel-header {
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: clamp(4px, 0.7vh, 7px) clamp(8px, 1vw, 12px);
    font-weight: 600;
    font-size: clamp(0.72rem, 1vh, 0.82rem);
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.panel-content {
    padding: clamp(3px, 0.5vh, 6px);
    display: flex;
    flex-direction: column;
    gap: clamp(1px, 0.3vh, 3px);
}

.panel-content.padding-zero {
    padding: 0;
}

.editor-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: clamp(0.68rem, 0.95vh, 0.75rem);
    margin-bottom: 1px;
}

.editor-form-row.align-start {
    align-items: flex-start;
}

.editor-form-row label {
    width: 120px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left !important;
    flex-shrink: 0;
    font-size: clamp(0.66rem, 0.92vh, 0.73rem);
}

.editor-input, 
.editor-select {
    flex: 1;
    padding: 1px 5px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: clamp(0.68rem, 0.95vh, 0.76rem);
    background-color: var(--bg-general);
    color: var(--text-primary);
    box-sizing: border-box;
    width: 100%;
    height: clamp(22px, 2.6vh, 25px);
}

.editor-textarea {
    flex: 1;
    padding: 2px 5px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: clamp(0.68rem, 0.95vh, 0.76rem);
    background-color: var(--bg-general);
    color: var(--text-primary);
    box-sizing: border-box;
    width: 100%;
    min-height: clamp(32px, 4vh, 44px);
    height: clamp(32px, 4vh, 44px);
    resize: vertical;
}

.editor-input:focus, 
.editor-select:focus, 
.editor-textarea:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.readonly-field {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
}

.inline-control-group {
    display: flex;
    flex: 1;
    gap: 6px;
    width: 100%;
}

.inline-control-group select {
    flex: 1;
}

.editor-btn-action {
    padding: 6px 12px;
    background-color: #1e3a8a;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.editor-btn-action:hover {
    background-color: #1b3e85;
}

.upload-control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.editor-btn-secondary {
    padding: 6px 12px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.editor-btn-secondary:hover {
    background-color: var(--border-color);
}

.editor-btn-primary {
    padding: 6px 12px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.editor-btn-primary:hover {
    background-color: #1d4ed8;
}

.editor-btn-danger {
    padding: 6px 12px;
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.editor-btn-danger:hover {
    background-color: #dc2626;
}

.file-status-text {
    font-size: 0.725rem;
    color: #64748b;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-files-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    border: 1.5px solid var(--border-color);
    margin-top: 8px;
}

.editor-files-table th {
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    padding: 6px 10px;
    text-align: left;
    border: 1.5px solid var(--border-color);
}

.editor-files-table td {
    border: 1.5px solid var(--border-color);
    padding: 6px 10px;
    background-color: var(--bg-general);
    color: var(--text-primary);
}

.empty-table-cell {
    text-align: center;
    color: var(--text-muted);
    padding: 12px;
    background-color: var(--bg-general);
}

/* Barra de Herramientas Editor */
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    min-height: 26px;
}

.tb-btn {
    background: none;
    border: 1px solid transparent;
    padding: 2px 4px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    min-width: 24px;
    color: var(--text-primary);
}

.tb-btn:hover {
    background-color: var(--bg-general);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.tb-select {
    padding: 1px 3px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 0.7rem;
    background-color: var(--bg-general);
    height: 24px;
    color: var(--text-primary);
}

.tb-separator {
    width: 1px;
    height: 16px;
    background-color: var(--border-color);
    margin: 0 4px;
}

.editor-rich-textarea {
    border: none;
    outline: none;
    resize: vertical;
    width: 100%;
    min-height: 150px;
    padding: 12px;
    font-size: 1.05rem;
    font-family: inherit;
    line-height: 1.6;
    box-sizing: border-box;
    background-color: var(--bg-general);
    color: var(--text-primary);
}

.height-medium {
    min-height: 220px;
}

/* Tabs en la Columna Derecha */
.tabs-header-bar {
    display: flex;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.tab-header-btn {
    border: none;
    background: none;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.tab-header-btn:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

.tab-header-btn.active {
    color: var(--text-primary);
    border-bottom-color: var(--border-focus);
    background-color: var(--bg-general);
}

.tab-content-area {
    flex: 1;
    padding: 4px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-general);
}

.tab-pane {
    display: none;
    flex-direction: column;
    height: 100%;
}

.tab-pane.active {
    display: flex;
}

/* Distribución ergonómica y espaciosa para los editores de descripción */
#tab_descrip.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto !important;
    gap: 14px;
    padding: 10px 14px;
    box-sizing: border-box;
}

/* Evitar que cabeceras y selectores se encojan */
#tab_descrip .panel-header,
#tab_descrip .selectors-row {
    flex-shrink: 0;
    margin-bottom: 4px !important;
}

#tab_descrip .panel-header {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    padding: 4px 0 !important;
    color: var(--text-primary) !important;
}

#tab_descrip .margin-top-large {
    margin-top: 10px !important;
}

/* Definición de dimensiones amplias para los tres editores en la vista conjunta */
#tab_descrip .macro-editor-wrapper,
#tab_descrip .micro-editor-wrapper,
#tab_descrip .diag-editor-panel {
    flex: none;
    min-height: 220px;
}

#tab_descrip .diag-editor-panel .panel-content {
    display: flex;
    flex-direction: column;
}

/* Cajas de texto amplias, con scroll independiente y fuente cómoda */
#tab_descrip .rich-editor-wrapper .editor-rich-textarea,
#tab_descrip .editor-panel .editor-rich-textarea {
    min-height: 220px !important;
    height: auto !important;
    max-height: 600px;
    resize: vertical !important;
    overflow-y: auto !important;
    padding: 14px 16px !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    border-radius: 4px;
}

/* Pestañas individuales ampliadas al 100% de la pantalla */
.tab-pane.full-section-pane.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 8px;
    padding: 10px 14px;
    box-sizing: border-box;
}

.tab-pane.full-section-pane .rich-editor-wrapper,
.tab-pane.full-section-pane .diag-editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.tab-pane.full-section-pane .editor-rich-textarea {
    flex: 1;
    height: 100% !important;
    min-height: 380px !important;
    resize: none !important;
    overflow-y: auto !important;
    padding: 18px 22px !important;
    font-size: 1.15rem !important;
    line-height: 1.75 !important;
}

/* Modo Pantalla Completa para el Editor (Oculta columna izquierda de filiación) */
.report-editor-container.full-width-mode .report-editor-left-col {
    display: none !important;
}

.report-editor-container.full-width-mode .report-editor-right-col {
    width: 100% !important;
    flex: 1 !important;
}

.panel-section-title {
    font-size: var(--font-size-sm, 0.8rem);
    font-weight: 600;
    color: #1e3a8a;
    margin-bottom: 3px;
}

.selectors-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 3px;
}

.half-width {
    width: 49.5%;
}

.margin-top-large {
    margin-top: 4px;
}

.rich-editor-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--bg-general);
    display: flex;
    flex-direction: column;
}

/* Adjuntos de Imagen */
.image-attachment-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 350px;
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-card);
    padding: 20px;
    box-sizing: border-box;
}

.image-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-align: center;
    color: var(--text-muted);
    width: 100%;
    height: 100%;
    justify-content: center;
}

.image-upload-zone:hover {
    color: var(--border-focus);
}

.upload-zone-icon {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.image-preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.attachment-preview-img {
    max-width: 100%;
    max-height: 280px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    object-fit: contain;
}

/* Footer del Editor */
.report-editor-footer {
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}

.editor-btn-footer {
    padding: 8px 18px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.editor-btn-footer.btn-muted {
    background-color: var(--border-color);
    color: var(--text-primary);
}

.editor-btn-footer.btn-muted:hover {
    background-color: var(--bg-general);
}

.editor-btn-footer.btn-primary {
    background-color: #1b3e85;
    color: #ffffff;
}

.editor-btn-footer.btn-primary:hover {
    background-color: #153066;
}

.editor-btn-footer.btn-success {
    background-color: #1e3a8a;
    color: #ffffff;
}

.editor-btn-footer.btn-success:hover {
    background-color: #172d6b;
}
.table-responsive-wrapper { width: 100%; overflow-x: hidden !important; box-sizing: border-box; } 
/* SCROLL RESTORED */ .dashboard-content { overflow-y: visible !important; overflow-x: hidden !important; height: auto !important; max-height: none !important; min-height: 100% !important; }

.dashboard-content, .dashboard-view, .table-container { min-width: 0; max-width: 100%; box-sizing: border-box; } 
.report-table { width: 100% !important; min-width: 0 !important; table-layout: fixed !important; border-collapse: collapse; }

.report-table th {
    padding: calc(6px * var(--zoom-compensation, 1)) calc(4px * var(--zoom-compensation, 1)) !important;
    font-size: clamp(0.68rem, calc(0.62rem + 0.15vw * var(--screen-scale-factor, 1)), 0.82rem) !important;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-table td {
    padding: calc(5px * var(--zoom-compensation, 1)) calc(3px * var(--zoom-compensation, 1)) !important;
    font-size: clamp(0.65rem, calc(0.6rem + 0.14vw * var(--screen-scale-factor, 1)), 0.8rem) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
}

/* ==========================================================================
   MATRIZ TRI-ADAPTATIVA DE DENSIDAD ÚTIL (MODOS 1, 2 Y 3)
   ========================================================================== */

/* Modo 1: Vista Ejecutiva Amplia (Monitores Grandes 21" - 25" / 27" / 4K / 2K) */
body.density-mode-1 .app-container:not(.collapsed) .sidebar {
    width: 260px !important;
}
body.density-mode-1 .report-table th {
    font-size: 0.96rem !important;
    padding: 12px 10px !important;
    letter-spacing: 0.2px;
}
body.density-mode-1 .report-table td {
    font-size: 0.92rem !important;
    padding: 12px 10px !important;
}
body.density-mode-1 .action-btns-wrapper .action-btn {
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
}

/* Modo 2: Vista Balanceada Fluid-Wrap (Laptops 15" / Zoom 125%) */
body.density-mode-2 .app-container:not(.collapsed) .sidebar {
    width: 190px !important;
}
body.density-mode-2 .sidebar .logo-subtitle {
    font-size: 0.85rem !important;
}
body.density-mode-2 .report-table th {
    font-size: 0.86rem !important;
    padding: 9px 7px !important;
}
body.density-mode-2 .report-table td {
    font-size: 0.84rem !important;
    padding: 9px 7px !important;
}
body.density-mode-2 .action-btns-wrapper .action-btn {
    padding: 4px 8px !important;
    font-size: 0.80rem !important;
}

/* Modo 3: Vista Ultrafina de Alta Densidad (Laptops 13" / Zoom 150%+) - 0% RECORTE */
body.density-mode-3 .report-table th {
    font-size: 0.78rem !important;
    padding: 7px 4px !important;
    letter-spacing: -0.1px;
}
body.density-mode-3 .report-table td {
    font-size: 0.76rem !important;
    padding: 6px 4px !important;
    line-height: 1.25;
}
body.density-mode-3 .action-btns-wrapper .action-btn {
    padding: 2px 4px !important;
    font-size: 0.72rem !important;
}

#re_macroDesc, #re_microDesc {
    font-family: Arial, sans-serif;
    font-size: 17px !important; /* Visualmente grande y cómodo en pantalla */
    line-height: 1.65 !important;
    text-align: justify;
    text-transform: lowercase;
    padding: 10px !important;
    min-height: 60px;
}

#re_diagnostico {
    font-family: Arial, sans-serif;
    font-size: 18px !important; /* Diagnóstico destacado y fácil de leer */
    line-height: 1.65 !important;
    text-align: justify;
    font-weight: bold;
    padding: 10px !important;
    min-height: 60px;
}

.editor-rich-textarea[contenteditable="true"] {
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    resize: vertical;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.editor-rich-textarea p,
.editor-rich-textarea div,
.editor-rich-textarea span {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.editor-rich-textarea[contenteditable="true"]:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
    cursor: text;
}
/* Estilos para Cropper.js */
.cropper-ui-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}
.cropper-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.step-title {
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 14px;
}

/* ==========================================================================
   RESPONSIVIDAD EDITOR CLINICO (Móviles y Tablets)
   ========================================================================== */
@media (max-width: 1024px) {
    .report-editor-overlay {
        height: 100dvh !important;
        padding: 4px !important;
        align-items: flex-start !important;
    }
    .report-editor-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 98dvh !important;
        max-height: 98dvh !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 12px !important;
        margin: 0 auto !important;
    }
    .report-editor-header {
        padding: 10px 14px !important;
        flex-shrink: 0 !important;
    }
    .report-editor-body {
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        gap: 14px !important;
        padding: 10px !important;
    }
    .report-editor-left-col {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }
    .report-editor-right-col {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        min-height: auto !important;
        padding-bottom: 20px !important;
    }
    .re-text-editor {
        min-height: 160px !important;
        font-size: 16px !important; /* 16px evita auto-zoom molesto en Android/iOS */
        padding: 12px !important;
        border-radius: 8px !important;
        scroll-margin-top: 80px !important;
        line-height: 1.6 !important;
    }
    .tab-header-btn {
        min-height: 38px !important;
        font-size: 0.85rem !important;
        padding: 6px 12px !important;
    }
    .report-editor-footer {
        position: sticky !important;
        bottom: 0 !important;
        background: #0f172a !important;
        padding: 10px !important;
        border-top: 1px solid #1e293b !important;
        z-index: 100 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .report-editor-footer button,
    .editor-btn-primary,
    .editor-btn-secondary,
    .editor-btn-danger,
    .editor-btn-success {
        min-height: 44px !important;
        font-size: 0.88rem !important;
        flex: 1 1 45% !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
        touch-action: manipulation !important;
    }
}

/* Forzar mayúsculas visuales en todo el formulario y editor */
input[type="text"], input:not([type]), textarea, .editor-input, .editor-textarea {
    text-transform: uppercase !important;
}

/* ==========================================================================
   ESTADO DEL PACIENTE Y NUEVAS CELDAS DE ACCIONES
   ========================================================================== */
.status-badge {
    display: inline-block;
    width: auto !important;
    min-width: 62px;
    max-width: 90px;
    padding: 3px 6px !important;
    text-align: center;
    border-radius: 20px;
    font-size: clamp(0.64rem, 0.70rem, 0.76rem) !important;
    font-weight: 600;
    white-space: nowrap;
}
.status-completed {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}
.status-process {
    background-color: rgba(234, 179, 8, 0.2) !important;
    color: #facc15 !important;
}
.status-pending {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

.action-btns-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 2px 4px !important;
    width: 100%;
    white-space: nowrap !important;
}
.action-btns-wrapper .action-btn {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
    min-width: auto;
    height: 32px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap !important;
}
.action-btns-wrapper .action-btn:hover {
    background-color: var(--border-color);
    color: var(--text-primary);
    border-color: var(--border-focus);
}

/* ==========================================================================
   ADAPTABILIDAD DE EDITOR Y PANTALLAS PARA MONITORES GRANDES (21 A 30 PULGADAS)
   ========================================================================== */
/* ==========================================================================
   ADAPTABILIDAD UNIVERSAL POR ALTURA DE MONITOR (13" A 30"+ MONITORES)
   ========================================================================== */

/* NIVEL 1: PANTALLAS PEQUEÑAS Y LAPTOPS CON ZOOM (Altura <= 750px) - SOLO ESCRITORIO */
@media (max-height: 750px) and (min-width: 1025px) {
    .filters-card {
        padding: 10px 14px !important;
        margin-bottom: 10px !important;
    }
    .filters-header-row {
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
    }
    .filter-label {
        font-size: 0.75rem !important;
        margin-bottom: 2px !important;
    }
    .filter-input {
        height: 28px !important;
        padding: 2px 8px !important;
        font-size: 0.80rem !important;
    }
    .tab-btn {
        padding: 6px 14px !important;
        font-size: 0.82rem !important;
        height: 32px !important;
    }
    .report-editor-container {
        height: 99vh !important;
        border-radius: 4px !important;
    }
    .report-editor-body {
        padding: 4px 6px !important;
        gap: 6px !important;
        overflow: hidden !important;
    }
    .report-editor-left-col {
        gap: 2px !important;
        padding-bottom: 35px !important;
        overflow-y: auto !important;
    }
    .panel-content {
        padding: 3px !important;
        gap: 2px !important;
    }
    .editor-form-row {
        margin-bottom: 1px !important;
        font-size: 0.72rem !important;
    }
    .editor-form-row label {
        width: 115px !important;
        font-size: 0.70rem !important;
    }
    .editor-input, .editor-select, .editor-textarea {
        height: 22px !important;
        padding: 1px 4px !important;
        font-size: 0.73rem !important;
    }
    .tab-header-btn {
        padding: 4px 10px !important;
        font-size: 0.75rem !important;
    }
    .tab-content-area {
        padding: 2px !important;
        overflow: hidden !important;
    }
    #tab_descrip.active {
        gap: 2px !important;
        overflow: hidden !important;
    }
    #tab_descrip .panel-header {
        font-size: 0.74rem !important;
        padding: 1px 0 !important;
        margin-bottom: 1px !important;
    }
    .selectors-row {
        margin-bottom: 2px !important;
        gap: 4px !important;
    }
    .editor-select {
        height: 22px !important;
        font-size: 0.73rem !important;
        padding: 1px 4px !important;
    }
    .editor-toolbar {
        padding: 1px 3px !important;
        min-height: 23px !important;
        gap: 1px !important;
        margin-bottom: 1px !important;
    }
    .tb-btn {
        height: 22px !important;
        min-width: 22px !important;
        padding: 1px 3px !important;
        font-size: 0.68rem !important;
    }
    .tb-select {
        height: 22px !important;
        font-size: 0.68rem !important;
        padding: 1px 2px !important;
    }
    #re_macroDesc, #re_microDesc {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
        padding: 4px 8px !important;
    }
    #re_diagnostico {
        font-size: 15px !important;
        line-height: 1.5 !important;
        padding: 4px 8px !important;
    }
}

/* NIVEL 2: MONITORES MEDIANOS Y LAPTOPS GRANDES (Altura 751px - 950px) */
@media (min-height: 751px) and (max-height: 950px) {
    .report-editor-body {
        padding: 6px 10px !important;
        gap: 8px !important;
    }
    .report-editor-left-col {
        padding-bottom: 35px !important;
        overflow-y: auto !important;
    }
    .report-editor-left-col .editor-input, 
    .report-editor-left-col .editor-select {
        height: 23px !important;
        font-size: 0.75rem !important;
        padding: 1px 5px !important;
    }
    .report-editor-left-col .editor-form-row label {
        width: 120px !important;
        font-size: 0.73rem !important;
    }
    .report-editor-left-col .editor-form-row {
        margin-bottom: 1px !important;
    }
    #re_macroDesc, #re_microDesc {
        font-size: 15.5px !important;
        line-height: 1.5 !important;
    }
    #re_diagnostico {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
}

/* NIVEL 3: MONITORES GRANDES, 4K Y ULTRA-WIDE (24" A 30"+ / Altura >= 951px) */
@media (min-height: 951px) {
    .report-editor-body {
        padding: 14px 18px !important;
        gap: 14px !important;
    }
    .report-editor-left-col {
        padding-bottom: 35px !important;
        overflow-y: auto !important;
    }
    .editor-form-row {
        margin-bottom: 6px !important;
        font-size: 0.90rem !important;
    }
    .editor-form-row label {
        width: 160px !important;
        font-size: 0.90rem !important;
    }
    .editor-input, .editor-select, .editor-textarea {
        height: 32px !important;
        padding: 4px 10px !important;
        font-size: 0.90rem !important;
    }
    .editor-toolbar {
        padding: 4px 8px !important;
        min-height: 30px !important;
        gap: 3px !important;
    }
    .tb-btn {
        height: 28px !important;
        min-width: 28px !important;
        font-size: 0.80rem !important;
    }
    .tb-select {
        height: 28px !important;
        font-size: 0.80rem !important;
    }
    #re_macroDesc, #re_microDesc {
        font-size: 17.5px !important;
        line-height: 1.65 !important;
        padding: 10px 14px !important;
    }
    #re_diagnostico {
        font-size: 18.5px !important;
        line-height: 1.65 !important;
        padding: 10px 14px !important;
    }

    /* Escalamiento de la tabla y buscador principal */
    .report-table {
        width: 100% !important;
        font-size: 1.1rem !important;
    }
    .report-table th {
        padding: 18px 16px !important;
        font-size: 1.1rem !important;
    }
    .report-table td {
        padding: 18px 16px !important;
        font-size: 1.05rem !important;
    }
    .filter-label {
        font-size: 1.05rem !important;
    }
    .filter-input {
        font-size: 1.1rem !important;
        height: 46px !important;
    }
    .tab-btn {
        font-size: 1.1rem !important;
        padding: 16px 32px !important;
    }
    .filters-card {
        padding: 30px 40px !important;
    }
    .action-btns-wrapper .action-btn {
        font-size: 1rem !important;
        padding: 8px 16px !important;
    }
}

/* Armonía y legibilidad tipográfica en el listado de pacientes */
.filter-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

body.light-theme .filter-label {
    color: var(--text-secondary) !important;
}

.report-table th {
    color: var(--text-primary);
    font-weight: 600;
}

.filter-input {
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

.tab-btn {
    border: 1px solid var(--border-color);
}

#btnBuscarReportes {
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
    font-size: 1.05rem !important;
    padding: 10px 22px !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(56, 189, 248, 0.25) !important;
    transform: translateY(0);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

#btnBuscarReportes:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.4) !important;
}

#btnBuscarReportes:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   ESTILOS DE CABECERA Y LOGOTIPO CENTRAL EN MÓVIL
   ========================================================================== */
.header-mobile-brand {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
}
.mobile-logo-img {
    height: 32px;
    width: auto;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.4));
}
.mobile-logo-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #f1f5f9;
    letter-spacing: 0.5px;
    background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mobile-status-dot {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: statusPulse 1.8s infinite ease-in-out;
}
@keyframes statusPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Botón Clínico PWA Instalar App en Cabecera */
.pwa-install-header-btn {
    display: none;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(2, 132, 199, 0.28) 100%);
    border: 1px solid #38bdf8;
    color: #e0f2fe;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
    white-space: nowrap;
    user-select: none;
}
.pwa-install-header-btn:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35) 0%, rgba(2, 132, 199, 0.45) 100%);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.45);
    transform: translateY(-1px);
}
.pwa-install-header-btn:active {
    transform: translateY(0);
}
.pwa-install-header-btn .pwa-install-icon {
    font-size: 0.95rem;
}
.pwa-install-header-btn.pwa-visible {
    display: inline-flex !important;
}

/* Filtros Colapsables en Móvil */
.filters-toggle-row {
    display: none;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    /* ==========================================================================
       CABECERA SUPERIOR EN MÓVIL: CERO OVERFLOW LATERAL NI SCROLL HORIZONTAL
       ========================================================================== */
    .dashboard-header {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-width: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }

    .welcome-text {
        display: none !important;
    }

    /* Contenedor izquierdo: compacto y sin empujar */
    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .header-left .sidebar-toggle-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.15rem !important;
        border-radius: 8px !important;
        border: none !important;
        background: transparent !important;
        flex-shrink: 0 !important;
    }

    /* Mini-Logo central/móvil: compacto y elástico sin empujar */
    .header-mobile-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        margin: 0 4px !important;
    }

    .header-mobile-brand .mobile-logo-img {
        height: 26px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    .header-mobile-brand .mobile-logo-text {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex-shrink: 1 !important;
        letter-spacing: 0.3px !important;
    }

    .header-mobile-brand .mobile-status-dot {
        width: 7px !important;
        height: 7px !important;
        flex-shrink: 0 !important;
    }

    /* Contenedor derecho: compacto, contenido y acotado al ancho de pantalla */
    .header-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        gap: 6px !important;
        max-width: calc(100% - 130px) !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ocultar en móvil botones secundarios que ya están en el menú lateral o saturan el carril */
    .header-right #btnHeaderReporteBoletas,
    .header-right #btnHeaderGroqAI,
    .header-right #btnInstallApp,
    .header-right .header-utility-btn[title*="Copias de Seguridad"],
    .header-right .header-utility-btn[aria-label="Base de datos"] {
        display: none !important;
    }

    #syncStatusIndicator span {
        display: none !important;
    }

    /* Indicador y utilitarios que permanezcan en móvil: compactos 34x34px */
    .header-right #syncStatusIndicator,
    .header-right #btnThemeToggle,
    .header-right #btnLogout {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        padding: 5px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        font-size: 0.95rem !important;
    }

    .header-right #syncStatusIndicator i {
        font-size: 0.95rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #syncStatusIndicator {
        border-radius: 8px !important;
    }
    
    .filters-toggle-row {
        display: block !important;
    }
    .filters-grid {
        transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out, padding 0.3s ease;
        max-height: 1000px;
        opacity: 1;
        overflow: hidden;
    }
    .filters-grid.collapsed {
        max-height: 0 !important;
        opacity: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        pointer-events: none;
    }
}

@media (max-width: 1024px) {
    .report-editor-right-col {
        min-height: 450px !important; /* Altura más cómoda para celulares */
    }
}

/* Elementos del Dashboard Móvil ocultos en Escritorio (Desktop > 768px) */
@media (min-width: 769px) {
    .mobile-dashboard-header,
    .mobile-cards-container,
    .mobile-bottom-nav,
    .mobile-360-modal-overlay {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* 1. MATEMÁTICAS DEL CARRIL CENTRAL Y CONTENCIÓN ESTRICTA */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: relative !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    .app-container,
    .main-layout {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    .dashboard-content,
    .dashboard-view {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        margin: 0 auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        height: auto !important;
        min-height: calc(100vh - 60px) !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 16px)) !important;
    }

    .table-container {
        overflow: hidden !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Ocultar la tarjeta pesada/redundante de búsqueda de escritorio en móvil */
    .filters-card {
        display: none !important;
    }

    /* Modal / Bottom-Sheet de Filtros Avanzados (Solo activo bajo demanda explícita) */
    .filters-card.mobile-modal-open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        z-index: 99995 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #0f172a !important;
        border: 1px solid rgba(56, 189, 248, 0.4) !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85) !important;
        padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 12px)) 14px !important;
        margin: 0 !important;
        animation: slideUpModal 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .filters-card.mobile-modal-open .filters-header-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .filters-card.mobile-modal-open .filters-toggle-row {
        display: none !important;
    }

    .filters-card.mobile-modal-open .filters-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 10px !important;
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    .filters-card.mobile-modal-open .filter-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .filters-card.mobile-modal-open .filter-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        height: 36px !important;
    }

    .btn-mobile-close-filters {
        display: none;
    }

    .filters-card.mobile-modal-open .btn-mobile-close-filters {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #f1f5f9 !important;
        font-size: 0.95rem !important;
        cursor: pointer !important;
    }

    .filters-modal-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 99994;
    }

    /* Ocultar la tabla tradicional pesada en dispositivos móviles */
    .table-responsive-wrapper {
        display: none !important;
    }

    /* ==========================================================================
       DASHBOARD MÓVIL DE PACIENTES - BOCETO 1 (MODERN HEALTHCARE UX)
       ========================================================================== */

    /* 1. Header Móvil: Buscador Superior Amigable */
    .mobile-dashboard-header {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 10px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .mobile-search-box {
        display: flex;
        align-items: center;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 0 12px;
        height: 46px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        gap: 8px;
        transition: border-color 0.2s, box-shadow 0.2s;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-search-box:focus-within {
        border-color: #38bdf8;
        box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
    }

    .mobile-search-icon {
        color: #38bdf8;
        font-size: 1.05rem;
    }

    .mobile-search-input {
        flex: 1;
        border: none;
        background: transparent;
        color: var(--text-primary);
        font-size: 0.92rem;
        outline: none;
        width: 100%;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .mobile-search-input::placeholder {
        color: var(--text-secondary);
        opacity: 0.75;
    }

    .mobile-search-clear-btn {
        background: none;
        border: none;
        color: #94a3b8;
        font-size: 1rem;
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-search-filter-btn {
        background: rgba(56, 189, 248, 0.1);
        border: 1px solid rgba(56, 189, 248, 0.3);
        color: #38bdf8;
        border-radius: 8px;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    /* 2. Píldoras de Filtrado Superior Horizontal con Scroll */
    .mobile-filter-pills-scroll {
        display: flex !important;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 2px 6px 2px;
        /* scroll-snap-type: x mandatory; */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-filter-pills-scroll::-webkit-scrollbar {
        display: none;
    }

    .mobile-filter-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        min-height: 34px;
        border-radius: 20px;
        font-size: 0.80rem;
        font-weight: 600;
        border: 1px solid var(--border-color);
        background: var(--bg-card);
        color: var(--text-secondary);
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        user-select: none;
        scroll-snap-align: start;
        flex-shrink: 0;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .mobile-filter-pill:active {
        transform: scale(0.96);
    }

    .mobile-filter-pill .pill-badge {
        background: rgba(255, 255, 255, 0.1);
        color: inherit;
        border-radius: 12px;
        padding: 1px 7px;
        font-size: 0.72rem;
        font-weight: 700;
    }

    /* Estados activos de las píldoras con colores clínicos */
    .mobile-filter-pill.active {
        background: #0284c7;
        color: #ffffff;
        border-color: #38bdf8;
        box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35);
    }

    .mobile-filter-pill.pill-proceso.active {
        background: #d97706;
        color: #ffffff;
        border-color: #f59e0b;
        box-shadow: 0 2px 10px rgba(217, 119, 6, 0.35);
    }

    .mobile-filter-pill.pill-listos.active {
        background: #059669;
        color: #ffffff;
        border-color: #10b981;
        box-shadow: 0 2px 10px rgba(5, 150, 105, 0.35);
    }

    .mobile-filter-pill.pill-urgentes.active {
        background: #dc2626;
        color: #ffffff;
        border-color: #ef4444;
        box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35);
    }

    /* 3. Contenedor de Tarjetas Clínicas Móviles */
    .mobile-cards-container {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* Tarjeta de Paciente Ergonómica (Boceto 1) con Glassmorphism Clínico Satinado */
    .mobile-patient-card {
        background: linear-gradient(180deg, #16233d 0%, #0b1324 100%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
        backdrop-filter: blur(14px) saturate(160%) !important;
        border: 1px solid #3b4d6b !important;
        border-left: 4px solid #2563eb !important;
        border-radius: 14px;
        padding: 14px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important; /* Previene recorte de sombras 3D de botones */
    }

    .mobile-patient-card:active {
        transform: scale(0.99);
    }

    /* Cabecera de la Tarjeta */
    .mobile-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .mobile-card-patient-info {
        flex: 1;
        min-width: 0;
    }

    .mobile-card-patient-name {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 700;
        color: #ffffff !important;
        line-height: 1.35;
        word-break: break-word;
    }

    .mobile-card-patient-age {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-left: 4px;
    }

    /* Badges de Estado con Colores Clínicos */
    .mobile-card-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.76rem;
        font-weight: 700;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .mobile-card-status-badge.listo {
        background: rgba(5, 150, 105, 0.18) !important;
        color: #34d399 !important;
        border: 1px solid rgba(5, 150, 105, 0.45) !important;
        box-shadow: 0 0 10px rgba(5, 150, 105, 0.25) !important;
    }

    .mobile-card-status-badge.proceso {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
        border: 1px solid rgba(245, 158, 11, 0.35);
    }

    .mobile-card-status-badge.urgente {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.35);
    }

    /* Cuerpo de la Tarjeta */
    .mobile-card-body {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    /* Fila de Muestra / Espécimen y Código */
    .mobile-card-specimen-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        background: #0f172a !important;
        border: 1px solid #3b4d6b !important;
        border-radius: 8px;
        padding: 8px 10px;
    }

    .mobile-card-specimen-title {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #38bdf8;
        font-weight: 600;
        font-size: 0.88rem;
        flex: 1;
        min-width: 0;
    }

    .specimen-highlight {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-card-code-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: rgba(37, 99, 235, 0.22) !important;
        color: #60a5fa !important;
        border: 1px solid rgba(37, 99, 235, 0.5) !important;
        border-radius: 6px;
        padding: 3px 8px;
        font-family: monospace;
        font-size: 0.82rem;
        font-weight: 700;
        text-shadow: 0 0 8px rgba(96, 165, 250, 0.4) !important;
        flex-shrink: 0;
    }

    .mobile-card-code-pill .code-prefix-label {
        font-size: 0.72rem;
        color: #93c5fd !important;
    }

    /* Metadatos (Fechas de Ingreso / Entrega y Médico) */
    .mobile-card-meta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
        font-size: 0.82rem;
    }

    .mobile-meta-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-meta-item.full-width {
        grid-column: 1 / -1;
        margin-top: 2px;
        padding-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .mobile-meta-item .meta-label {
        color: var(--text-muted);
        font-size: 0.72rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mobile-meta-item .meta-value {
        color: var(--text-primary);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .sla-dot-micro {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
    }

    .meta-value-doctor {
        color: var(--text-secondary);
        font-size: 0.78rem;
        font-weight: 500;
    }

    .meta-value-doctor small {
        color: var(--text-muted);
    }

    /* 4. Botones de Acción Ergonómicos Contenidos en Carril Central */
    .mobile-card-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
        padding-top: 8px;
        padding-bottom: 4px; /* Evita que la sombra 3D inferior sea recortada */
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .btn-mobile-action {
        min-height: 42px;
        padding: 0 8px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.80rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
        border: none;
        user-select: none;
        min-width: 0 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    .btn-mobile-action span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .btn-mobile-action:active {
        transform: scale(0.96);
    }

    .btn-mobile-pdf {
        flex: 1.25 1 0% !important;
        min-width: 0 !important;
        background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        transform: translateY(0);
        box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            0 3px 0 #065f46,
            0 6px 14px rgba(5, 150, 105, 0.4) !important;
        transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    .btn-mobile-pdf:active {
        transform: translateY(3px) !important;
        box-shadow: 
            inset 0 2px 4px rgba(0, 0, 0, 0.5),
            0 0 0 transparent,
            0 1px 2px rgba(0, 0, 0, 0.2) !important;
        background: #047857 !important;
    }

    .btn-mobile-360 {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
        color: #38bdf8 !important;
        border: 1px solid rgba(56, 189, 248, 0.4) !important;
        transform: translateY(0);
        box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            0 3px 0 #020617,
            0 6px 12px rgba(0, 0, 0, 0.4) !important;
        transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    .btn-mobile-360:active {
        transform: translateY(3px) !important;
        box-shadow: 
            inset 0 2px 4px rgba(0, 0, 0, 0.6),
            0 0 0 transparent,
            0 1px 2px rgba(0, 0, 0, 0.2) !important;
        background: #0b1120 !important;
    }

    .btn-mobile-action-kebab {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        min-height: 42px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 10px;
        color: var(--text-secondary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        cursor: pointer;
        flex-shrink: 0;
        box-sizing: border-box !important;
        transform: translateY(0);
        box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            0 3px 0 #020617,
            0 4px 8px rgba(0, 0, 0, 0.35) !important;
        transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    .btn-mobile-action-kebab:active {
        transform: translateY(3px) !important;
        box-shadow: 
            inset 0 2px 4px rgba(0, 0, 0, 0.6),
            0 0 0 transparent !important;
        background: #020617 !important;
    }

    /* Estado vacío móvil */
    .mobile-empty-state {
        padding: 40px 20px;
        text-align: center;
        color: var(--text-secondary);
        background: var(--bg-card);
        border: 1px dashed var(--border-color);
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .mobile-empty-state i {
        font-size: 2.2rem;
        color: #64748b;
    }

    /* ==========================================================================
       BARRA DE NAVEGACIÓN INFERIOR FIJA - 'THUMB ZONE'
       ========================================================================== */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 62px !important;
        background: rgba(15, 23, 42, 0.92) !important;
        -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
        backdrop-filter: blur(12px) saturate(180%) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45) !important;
        z-index: 99990 !important;
        padding-bottom: env(safe-area-inset-bottom, 8px) !important;
        align-items: center !important;
        justify-content: space-around !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .mobile-bottom-nav-item {
        flex: 1;
        height: 100%;
        background: none;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #94a3b8;
        font-size: 0.72rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 0;
        user-select: none;
    }

    .mobile-bottom-nav-item i {
        font-size: 1.18rem;
        transition: transform 0.2s;
    }

    .mobile-bottom-nav-item.active {
        color: #38bdf8 !important;
        font-weight: 700;
    }

    .mobile-bottom-nav-item.active i {
        transform: translateY(-2px);
    }

    .nav-360-icon-bubble {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        margin-top: -10px;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.55);
        border: 2px solid #0f172a;
    }

    .nav-360-icon-bubble i {
        font-size: 1.1rem;
        color: #ffffff !important;
    }

    /* ==========================================================================
       MODAL MÓVIL DEL VISOR MACRO 360° (BOCETO 1)
       ========================================================================== */
    .mobile-360-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 2000100;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .mobile-360-modal-sheet {
        background: #0f172a;
        border: 1px solid rgba(56, 189, 248, 0.3);
        border-radius: 20px 20px 0 0;
        width: 100%;
        max-width: 540px;
        max-height: 92vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.7);
        animation: slideUpModal 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes slideUpModal {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .mobile-360-modal-header {
        padding: 14px 16px;
        background: rgba(15, 23, 42, 0.95);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .mobile-360-header-info {
        flex: 1;
        min-width: 0;
    }

    .mobile-360-header-badge {
        font-size: 0.7rem;
        font-weight: 800;
        color: #38bdf8;
        letter-spacing: 0.5px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .mobile-360-header-title {
        margin: 2px 0 0 0;
        font-size: 1.05rem;
        font-weight: 700;
        color: #f8fafc;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-360-header-subtitle {
        font-size: 0.78rem;
        color: #94a3b8;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-360-close-btn {
        background: rgba(255, 255, 255, 0.08);
        border: none;
        color: #cbd5e1;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        line-height: 1;
        flex-shrink: 0;
    }

    .mobile-360-viewport-wrapper {
        position: relative;
        width: 100%;
        height: 340px;
        background: #020617;
        overflow: hidden;
    }

    .mobile-360-canvas-container {
        width: 100%;
        height: 100%;
        touch-action: none;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-360-canvas-container canvas {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }

    .mobile-360-hud-overlay {
        position: absolute;
        bottom: 12px;
        left: 12px;
        right: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        pointer-events: none;
    }

    .mobile-360-angle-chip {
        background: rgba(15, 23, 42, 0.85);
        border: 1px solid rgba(56, 189, 248, 0.4);
        backdrop-filter: blur(6px);
        color: #38bdf8;
        padding: 4px 10px;
        border-radius: 14px;
        font-family: monospace;
        font-size: 0.8rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-360-angle-chip small {
        color: #94a3b8;
        font-family: var(--font-main, sans-serif);
        font-size: 0.72rem;
    }

    .mobile-360-gesture-hint {
        background: rgba(15, 23, 42, 0.75);
        color: #94a3b8;
        padding: 4px 10px;
        border-radius: 14px;
        font-size: 0.72rem;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .mobile-360-modal-footer {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 8px));
        background: #0f172a;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        gap: 10px;
    }

    .btn-mobile-360-action {
        min-height: 44px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.88rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        border: none;
    }

    .btn-mobile-360-action.secondary {
        flex: 1;
        background: rgba(255, 255, 255, 0.08);
        color: #f1f5f9;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .btn-mobile-360-action.primary {
        flex: 1.4;
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
        color: #ffffff;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
    }

    /* Contención estricta del carril central para servicios y pestañas en móvil */
    .services-search-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 6px 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
        gap: 0 !important;
    }

    .services-search-wrapper::-webkit-scrollbar {
        display: none !important;
    }

    .services-tabs,
    .services-search-wrapper .services-tabs {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 !important;
        padding: 0 0 2px 0 !important;
        border-bottom: 1px solid var(--border-color) !important;
        gap: 6px !important;
    }

    .services-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .tab-btn,
    .services-tabs .tab-btn,
    .services-search-wrapper .services-tabs .tab-btn {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        font-size: 0.8rem !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 8px 8px 0 0 !important;
        margin: 0 !important;
    }

    .tab-btn i,
    .services-tabs .tab-btn i {
        font-size: 0.82rem !important;
        margin-right: 5px !important;
        flex-shrink: 0 !important;
    }

    .tab-btn .tab-btn-text {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    /* ==========================================================================
       GLASSMORPHISM CLÍNICO MÓVIL (Android & iOS Safari <= 768px)
       ========================================================================== */
    .dashboard-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        min-height: 50px;
        height: auto !important;
        padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 8px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        background: rgba(15, 23, 42, 0.90) !important;
        -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
        backdrop-filter: blur(10px) saturate(160%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .mobile-bottom-nav {
        background: rgba(15, 23, 42, 0.92) !important;
        -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
        backdrop-filter: blur(12px) saturate(180%) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45) !important;
        padding-bottom: env(safe-area-inset-bottom, 8px) !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .table-action-menu-portal {
        background: rgba(15, 23, 42, 0.88) !important;
        -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
        backdrop-filter: blur(14px) saturate(170%) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .mobile-360-modal-sheet {
        background: #0f172a !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 1px solid rgba(56, 189, 248, 0.35) !important;
        border-bottom: none !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .mobile-search-box {
        background: rgba(15, 23, 42, 0.78) !important;
        -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
        backdrop-filter: blur(10px) saturate(160%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    /* Soporte de Modo Claro para Glassmorphism Móvil */
    body.light-theme .dashboard-header {
        background: rgba(255, 255, 255, 0.88) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    }

    body.light-theme .mobile-bottom-nav {
        background: rgba(255, 255, 255, 0.90) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    }

    body.light-theme .table-action-menu-portal {
        background: rgba(255, 255, 255, 0.88) !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    }

    body.light-theme .mobile-search-box {
        background: rgba(255, 255, 255, 0.82) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    }

    /* Fallback sólido opaco para navegadores sin soporte de backdrop-filter */
    @supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
        .dashboard-header,
        .mobile-bottom-nav,
        .table-action-menu-portal,
        .mobile-360-modal-sheet,
        .mobile-360-modal-header,
        .mobile-360-modal-footer,
        .mobile-search-box {
            background: #0f172a !important;
        }

        body.light-theme .dashboard-header,
        body.light-theme .mobile-bottom-nav,
        body.light-theme .table-action-menu-portal,
        body.light-theme .mobile-360-modal-sheet,
        body.light-theme .mobile-360-modal-header,
        body.light-theme .mobile-360-modal-footer,
        body.light-theme .mobile-search-box {
            background: #ffffff !important;
        }
    }
}

/* Burbujas de Ayuda Premium */
.help-guide-bubble {
    position: absolute;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(8px);
    border: 1.5px solid #38bdf8;
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.4);
    z-index: 10000;
    max-width: 250px;
    animation: bubbleBounce 2.5s infinite ease-in-out;
    pointer-events: auto;
}

@keyframes bubbleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.help-guide-bubble::after {
    content: '';
    position: absolute;
    border-width: 6px;
    border-style: solid;
}

/* Flechas según orientación */
.help-guide-bubble.arrow-top::after {
    border-color: transparent transparent #38bdf8 transparent;
    top: -13px;
    left: 20px;
}
.help-guide-bubble.arrow-bottom::after {
    border-color: #38bdf8 transparent transparent transparent;
    bottom: -13px;
    left: 20px;
}
.help-guide-bubble.arrow-left::after {
    border-color: transparent transparent transparent #38bdf8;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
}
.help-guide-bubble.arrow-right::after {
    border-color: transparent #38bdf8 transparent transparent;
    left: -13px;
    top: 50%;
    transform: translateY(-50%);
}

.help-guide-bubble .bubble-content {
    margin-bottom: 8px;
}

.help-guide-bubble .bubble-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.help-guide-bubble .btn-bubble-close {
    background: #38bdf8;
    color: #0f172a;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.help-guide-bubble .btn-bubble-close:hover {
    background: #0ea5e9;
}

/* Pulsación animada de iconos de ayuda individuales */
.help-trigger-badge {
    display: inline-block;
    cursor: pointer;
    color: #38bdf8;
    margin-left: 6px;
    font-size: 0.85rem;
    vertical-align: middle;
    transition: color 0.2s, transform 0.2s;
    animation: triggerPulse 2s infinite ease-in-out;
}

.help-trigger-badge:hover {
    color: #0ea5e9;
    transform: scale(1.2);
}

@keyframes triggerPulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

/* Cabecera de búsqueda en la tarjeta de filtros */
.filters-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

/* Evitar deformación del botón en móviles */
.filters-header-row #btnBuscarReportes {
    width: auto !important;
    margin: 0 !important;
    font-size: 0.85rem !important;
    padding: 8px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 10px rgba(56, 189, 248, 0.2) !important;
}

@media (max-width: 768px) {
    .filters-header-row {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    .filters-header-row h3 {
        font-size: 0.9rem !important;
    }
    .filters-header-row #btnBuscarReportes {
        padding: 6px 12px !important;
    }
}

/* Indicadores SLA circulares */
.sla-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.sla-dot.dot-green, .sla-dot.date-completed {
    background-color: #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.85) !important;
}
.sla-dot.dot-yellow, .sla-dot.date-urgent {
    background-color: #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.85) !important;
}
.sla-dot.dot-red, .sla-dot.date-delay {
    background-color: #e11d48 !important;
    box-shadow: 0 0 10px rgba(225, 29, 72, 0.85) !important;
}

/* Ajustes adicionales para Modo Claro */
body.light-theme .report-table tbody tr:hover td {
    background-color: #f8fafc !important;
}
body.light-theme .report-table tbody tr:nth-child(even) td {
    background-color: #f8fafc;
}
body.light-theme .tb-btn:hover {
    background-color: #cbd5e1;
}
body.light-theme select,
body.light-theme input,
body.light-theme textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
body.light-theme .editor-rich-textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
body.light-theme .tab-header-btn.active {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}
body.light-theme .nav-item-btn.active {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   MATRIZ DE DENSIDAD VERTICAL (PRESUPUESTO 100VH - CERO SCROLL / CERO RECORTE)
   ========================================================================== */
body.v-density-tight .dashboard-content {
    padding: 6px 12px !important;
    gap: 6px !important;
}

body.v-density-tight .filters-card {
    padding: 5px 10px !important;
}

body.v-density-tight .filters-grid {
    gap: 3px 8px !important;
}

body.v-density-tight .filter-label {
    font-size: 0.68rem !important;
    margin-bottom: 2px !important;
}

body.v-density-tight .filter-input {
    height: 24px !important;
    font-size: 0.70rem !important;
    padding: 2px 6px !important;
}

body.v-density-tight .services-search-wrapper {
    margin: 2px 0 4px 0 !important;
}

body.v-density-tight .tab-btn {
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
}

body.v-density-tight .report-editor-container {
    height: 98vh !important;
    max-height: 98vh !important;
}

body.v-density-tight .report-editor-body {
    padding: 3px 5px !important;
    gap: 4px !important;
}

body.v-density-tight .report-editor-left-col {
    gap: 3px !important;
}

body.v-density-tight .panel-header {
    padding: 3px 6px !important;
    font-size: 0.72rem !important;
}

body.v-density-tight .panel-content {
    padding: 3px !important;
    gap: 2px !important;
}

body.v-density-tight .editor-form-row {
    margin-bottom: 1px !important;
}

body.v-density-tight .editor-form-row label {
    font-size: 0.65rem !important;
    width: 110px !important;
}

body.v-density-tight .editor-input,
body.v-density-tight .editor-select {
    height: 21px !important;
    font-size: 0.68rem !important;
    padding: 1px 4px !important;
}

body.v-density-tight .editor-textarea {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 0.68rem !important;
    padding: 1px 4px !important;
}

body.v-density-tight .ai-helper-panel .panel-content {
    padding: 4px !important;
    gap: 4px !important;
}

/* --- ESTILOS DE MINI-EDITOR AL 150% Y CONTROLES DE PROPORCIÓN/ROTACIÓN --- */
.large-workspace-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.mini-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(15, 23, 42, 0.85);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mini-editor-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-group-segmented {
    display: inline-flex;
    border-radius: 6px;
    overflow: hidden;
    border: 1.5px solid #334155;
}

.mini-tool-btn {
    background: #1e293b;
    color: #f8fafc;
    border: none;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mini-tool-btn:hover {
    background: #334155;
    color: #ffffff;
}

.mini-tool-btn.active {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
}

.slider-group {
    flex: 1;
    min-width: 180px;
    justify-content: flex-end;
}

.mini-angle-slider {
    width: 120px;
    accent-color: #38bdf8;
    cursor: pointer;
}

.cropper-workspace-large {
    width: 100%;
    height: 480px;
    min-height: 440px;
    max-height: 60vh;
    background: #0f172a;
    border-radius: 10px;
    position: relative;
    overflow: visible !important;
    padding: 12px;
    border: 2px dashed #3b82f6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cropper-workspace-large .cropper-container {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
}

.cropper-workspace-large > img {
    display: none !important;
}

.cropper-workspace-large .cropper-container img {
    max-width: none !important;
    max-height: none !important;
}

.cropper-modal {
    display: none !important;
    opacity: 0 !important;
}

.cropper-crop-box,
.cropper-crop-box.cropper-hidden {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 3px dashed #38bdf8 !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.9) !important;
    z-index: 1000 !important;
}

.cropper-view-box {
    display: block !important;
    outline: 3px solid #38bdf8 !important;
    outline-offset: -3px !important;
}

.cropper-line {
    background-color: #38bdf8 !important;
}

.cropper-point {
    display: block !important;
    visibility: visible !important;
    background-color: #38bdf8 !important;
    width: 14px !important;
    height: 14px !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) !important;
    z-index: 1001 !important;
}

.crop-actions-bar {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
}

.btn-lg-crop {
    flex: 1;
    max-width: 280px;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.image-preview-container-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: rgba(15, 23, 42, 0.5);
    padding: 16px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
}

.attachment-preview-img-large {
    max-width: 100%;
    width: auto;
    max-height: 52vh;
    object-fit: contain;
    border-radius: 8px;
    border: 2.5px solid #10b981;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
}

.preview-actions-bar {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    width: 100%;
    max-width: 650px;
}



/* ==========================================================================
   BADGE DE CÓDIGO DE ATENCIÓN EN 2 NIVELES (OPTIMIZACIÓN MATEMÁTICA)
   ========================================================================== */
.code-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.18);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 5px;
    padding: 2px 6px;
    line-height: 1.1;
    min-width: 48px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.code-prefix {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #93c5fd;
    text-transform: uppercase;
    line-height: 1;
}

.code-num {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.4px;
    line-height: 1.15;
}

.code-badge-empty {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.report-table tbody tr:hover .code-badge {
    background: rgba(37, 99, 235, 0.38);
    border-color: #60a5fa;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.45);
    transform: scale(1.02);
}

.report-table tbody tr:hover .code-prefix {
    color: #bfdbfe;
}

.report-table tbody tr:hover .code-num {
    color: #ffffff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   SIDEBAR LATERAL ULTRA-DELGADO, RETRÁCTIL Y RESPONSIVE
   ========================================================================== */
:root {
    --sidebar-width-expanded: 250px;
    --sidebar-width-mini: 52px;
    --sidebar-transition: cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar {
    width: var(--sidebar-width-expanded);
    min-width: var(--sidebar-width-expanded);
    height: 100vh;
    background-color: var(--bg-card);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: width 0.25s var(--sidebar-transition), min-width 0.25s var(--sidebar-transition), transform 0.25s var(--sidebar-transition);
    border-right: 1px solid var(--border-color);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.35);
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
}

.main-layout {
    flex: 1;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    transition: width 0.25s var(--sidebar-transition);
}

/* Estado Mini-Sidebar Colapsado (Ultra-Delgado 52px) */
.app-container.collapsed .sidebar {
    width: var(--sidebar-width-mini) !important;
    min-width: var(--sidebar-width-mini) !important;
    max-width: var(--sidebar-width-mini) !important;
}

.app-container.collapsed .main-layout {
    width: calc(100% - var(--sidebar-width-mini)) !important;
}

.app-container.collapsed .logo-text-wrapper,
.app-container.collapsed .nav-group-title,
.app-container.collapsed .nav-group-header span,
.app-container.collapsed .nav-item-text,
.app-container.collapsed .arrow-icon {
    opacity: 0 !important;
    max-width: 0 !important;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
}

.app-container.collapsed .sidebar-header {
    padding: 12px 0 !important;
    justify-content: center !important;
}

.app-container.collapsed .logo-circle {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
}

.app-container.collapsed .nav-group-header {
    justify-content: center !important;
    padding: 10px 0 !important;
}

.app-container.collapsed .nav-item-btn {
    width: 38px !important;
    height: 38px !important;
    margin: 6px auto !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 8px !important;
}

.app-container.collapsed .nav-item-btn i {
    font-size: 1.1rem !important;
    margin: 0 !important;
}

/* Despliegue Flotante al Pasar el Cursor (Hover-Expand) */
@media (min-width: 769px) {
    .app-container.collapsed.hover-expand .sidebar:hover {
        width: var(--sidebar-width-expanded) !important;
        min-width: var(--sidebar-width-expanded) !important;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1200;
        box-shadow: 12px 0 35px rgba(0, 0, 0, 0.6) !important;
    }

    .app-container.collapsed.hover-expand .sidebar:hover .logo-text-wrapper,
    .app-container.collapsed.hover-expand .sidebar:hover .nav-group-title,
    .app-container.collapsed.hover-expand .sidebar:hover .nav-item-text,
    .app-container.collapsed.hover-expand .sidebar:hover .arrow-icon {
        opacity: 1 !important;
        max-width: 220px !important;
        pointer-events: auto !important;
    }

    .app-container.collapsed.hover-expand .sidebar:hover .nav-item-btn {
        width: auto !important;
        height: auto !important;
        margin: 8px 12px !important;
        padding: 11px 15px !important;
        justify-content: flex-start !important;
    }
}

/* ==========================================================================
   REDISEÑO ERGONÓMICO MODAL REGISTRO DE PACIENTE (FULL-WIDTH 3 COLUMNAS DINÁMICO)
   Adaptable a cualquier monitor, resolución y escala de zoom (50% - 150%)
   ========================================================================== */
.patient-modal-container-wide {
    width: 96vw !important;
    max-width: min(96vw, 1850px) !important;
    min-width: min(96vw, 980px) !important;
    max-height: 94vh !important;
    background-color: var(--bg-modal) !important;
    border: 2px solid #334155 !important;
    border-radius: 8px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.patient-modal-body-compact {
    padding: clamp(10px, 1.5vh, 20px) clamp(12px, 1.8vw, 28px) !important;
    overflow-y: visible !important;
    box-sizing: border-box;
    flex: 1;
}

.form-grid-3col {
    display: grid !important;
    grid-template-columns: minmax(280px, 1.05fr) minmax(320px, 1.35fr) minmax(260px, 1fr) !important;
    gap: clamp(10px, 1.4vw, 24px) clamp(14px, 1.8vw, 32px) !important;
    align-items: start !important;
}

.modal-col-header {
    font-size: clamp(0.78rem, 0.85vw, 0.95rem) !important;
    font-weight: 800;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.25);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-row-compact {
    display: grid !important;
    grid-template-columns: clamp(90px, 7.5vw, 120px) 1fr !important;
    gap: clamp(6px, 0.8vw, 12px) !important;
    align-items: center !important;
    margin-bottom: clamp(5px, 0.8vh, 10px) !important;
}

.form-row-compact.align-start {
    align-items: flex-start !important;
}

.form-row-compact .form-label {
    font-size: clamp(0.76rem, 0.78vw, 0.88rem) !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-align: right !important;
    white-space: nowrap !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.form-row-compact .form-input,
.form-row-compact .form-select {
    height: clamp(30px, 3.6vh, 38px) !important;
    padding: 3px clamp(8px, 0.8vw, 12px) !important;
    font-size: clamp(0.8rem, 0.82vw, 0.92rem) !important;
    background-color: #0b1324 !important;
    border: 1px solid #334155 !important;
    border-radius: 5px !important;
    color: #f1f5f9 !important;
    box-sizing: border-box !important;
}

.form-row-compact .form-input:focus,
.form-row-compact .form-select:focus,
.form-textarea-compact:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}

.form-row-dual {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(6px, 0.8vw, 12px) !important;
    margin-bottom: clamp(5px, 0.8vh, 10px) !important;
}

.form-sub-row {
    display: grid !important;
    grid-template-columns: clamp(40px, 3.5vw, 55px) 1fr !important;
    gap: clamp(4px, 0.5vw, 8px) !important;
    align-items: center !important;
}

.form-sub-row .sub-label {
    font-size: clamp(0.76rem, 0.78vw, 0.88rem) !important;
    font-weight: 700 !important;
    text-align: right !important;
    color: var(--text-muted) !important;
}

.form-sub-row .form-input,
.form-sub-row .form-select {
    height: clamp(30px, 3.6vh, 38px) !important;
    padding: 3px clamp(6px, 0.6vw, 10px) !important;
    font-size: clamp(0.8rem, 0.82vw, 0.92rem) !important;
    background-color: #0b1324 !important;
    border: 1px solid #334155 !important;
    border-radius: 5px !important;
    color: #f1f5f9 !important;
    box-sizing: border-box !important;
}

.form-textarea-compact {
    width: 100% !important;
    height: clamp(72px, 9vh, 110px) !important;
    min-height: 55px !important;
    max-height: 180px !important;
    padding: 6px clamp(8px, 0.8vw, 12px) !important;
    font-size: clamp(0.78rem, 0.8vw, 0.9rem) !important;
    background-color: #0b1324 !important;
    border: 1px solid #334155 !important;
    border-radius: 5px !important;
    color: #f1f5f9 !important;
    font-family: inherit !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}

.btn-inline-compact {
    height: clamp(30px, 3.6vh, 38px) !important;
    padding: 0 clamp(10px, 1vw, 16px) !important;
    font-size: clamp(0.78rem, 0.8vw, 0.9rem) !important;
    font-weight: 600 !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.btn-dictate-compact {
    width: 100% !important;
    height: clamp(32px, 3.8vh, 40px) !important;
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: clamp(0.78rem, 0.82vw, 0.92rem) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-dictate-compact:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.4) !important;
}

.file-upload-wrapper-compact {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.file-upload-wrapper-compact .file-upload-label-btn {
    padding: 5px clamp(10px, 0.9vw, 14px) !important;
    font-size: clamp(0.75rem, 0.78vw, 0.86rem) !important;
    background-color: #1e293b !important;
    border: 1px solid #475569 !important;
    border-radius: 5px !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.file-upload-wrapper-compact .file-upload-status-text {
    font-size: clamp(0.74rem, 0.76vw, 0.85rem) !important;
    color: #64748b !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.saldo-debe-badge {
    font-weight: 800 !important;
    color: #ef4444 !important;
    font-size: clamp(0.78rem, 0.82vw, 0.92rem) !important;
    white-space: nowrap !important;
    background: rgba(239, 68, 68, 0.12) !important;
    padding: 4px clamp(8px, 0.8vw, 12px) !important;
    border-radius: 5px !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.checkbox-label-compact {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    font-size: clamp(0.76rem, 0.78vw, 0.88rem) !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    white-space: nowrap !important;
}

.form-actions-compact {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: clamp(8px, 1.2vh, 16px) !important;
    padding-top: clamp(8px, 1.2vh, 14px) !important;
    border-top: 1px solid #334155 !important;
}

.btn-success-primary {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: clamp(0.82rem, 0.86vw, 0.96rem) !important;
    padding: clamp(7px, 1vh, 10px) clamp(16px, 1.5vw, 26px) !important;
    border: 1px solid #38bdf8 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

.btn-success-primary:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.5) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 1024px) {
    .form-grid-3col {
        grid-template-columns: 1fr 1fr !important;
    }
    .patient-modal-container-wide {
        max-height: 92vh !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 768px) {
    .patient-modal-container-wide {
        width: 98vw !important;
        max-width: 98vw !important;
        padding: 0 !important;
    }
    .form-grid-3col {
        grid-template-columns: 1fr !important;
    }
    .form-row-compact {
        grid-template-columns: 85px 1fr !important;
    }
}


/* ==========================================================================
   COLUMNA DE ACCIONES HÍBRIDA TÁCTICA (BOTÓN 1-CLIC + KEBAB DROPDOWN)
   ========================================================================== */
.action-hybrid-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

.action-btn.kebab-btn {
    background: #1e293b !important;
    border: 1px solid #475569 !important;
    color: #94a3b8 !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.action-btn.kebab-btn:hover,
.action-btn.kebab-btn:focus-visible {
    background: #334155 !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Singleton Action Menu Portal (Montado en document.body para CERO clipping) */
.table-action-menu-portal {
    position: fixed !important;
    z-index: 99999 !important;
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    padding: 6px !important;
    min-width: 205px !important;
    display: none;
    flex-direction: column !important;
    gap: 2px !important;
    transform-origin: top right;
    user-select: none !important;
}

/* Estado Abierto: Animación Fluida de Entrada */
.table-action-menu-portal.open {
    display: flex !important;
    animation: portalFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Estado Cerrando: Animación Fluida de Salida */
.table-action-menu-portal.closing {
    animation: portalFadeOut 0.15s cubic-bezier(0.4, 0, 1, 1) forwards !important;
    pointer-events: none !important;
}

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

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

.action-portal-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important;
    text-decoration: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease !important;
    white-space: nowrap !important;
}

.action-portal-item i {
    width: 16px !important;
    font-size: 0.85rem !important;
    text-align: center !important;
}

.action-portal-item:hover {
    background: #1e293b !important;
    color: #38bdf8 !important;
    transform: translateX(2px) !important;
}

.action-portal-item:active {
    transform: translateX(1px) scale(0.98) !important;
}

.action-portal-item.wa-item {
    color: #22c55e !important;
}

.action-portal-item.wa-item:hover {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}

.action-portal-item.danger-item {
    color: #f87171 !important;
}

.action-portal-item.danger-item:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

.action-portal-item.warning-item {
    color: #fbbf24 !important;
}

.action-portal-item.warning-item:hover {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

.action-portal-divider {
    height: 1px !important;
    background: #1e293b !important;
    margin: 4px 0 !important;
}

/* Tema Claro */
body.light-theme .table-action-menu-portal {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .action-portal-item {
    color: #334155 !important;
}

body.light-theme .action-portal-item:hover {
    background: #f1f5f9 !important;
    color: #0284c7 !important;
}

body.light-theme .action-portal-divider {
    background: #e2e8f0 !important;
}

body.light-theme .action-btn.kebab-btn {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

body.light-theme .action-btn.kebab-btn:hover {
    background: #e2e8f0 !important;
    border-color: #0284c7 !important;
    color: #0f172a !important;
}


/* ==========================================================================
   MODAL WIZARD INTERACTIVO: MORCELADOS / PLANTILLAS CLÍNICAS (P1 A P5)
   ========================================================================== */

#wizardModalOverlay {
    z-index: 2000100 !important;
}

.wizard-modal-container {
    width: 95vw !important;
    max-width: 860px !important;
    max-height: 94vh !important;
    background-color: var(--bg-modal, #0f172a) !important;
    border: 2px solid #334155 !important;
    border-radius: 10px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: modalScaleIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.wizard-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 20px !important;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border-bottom: 1px solid #334155 !important;
}

.wizard-header-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wizard-header-icon-badge {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.wizard-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--text-primary, #f1f5f9) !important;
    margin: 0 !important;
    letter-spacing: 0.3px;
}

.wizard-subtitle {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
}

.wizard-stepper-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #0b1324;
    border-bottom: 1px solid #1e293b;
    user-select: none;
    overflow-x: auto;
}

.wizard-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    opacity: 0.55;
    transition: all 0.2s ease;
    padding: 4px 8px;
    border-radius: 6px;
}

.wizard-step-item:hover {
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.03);
}

.wizard-step-item.active {
    opacity: 1;
    background: rgba(56, 189, 248, 0.08);
}

.wizard-step-item.completed .step-badge {
    background-color: #059669;
    border-color: #10b981;
    color: #ffffff;
}

.step-badge {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background-color: #1e293b;
    border: 1.5px solid #475569;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    transition: all 0.2s ease;
}

.wizard-step-item.active .step-badge {
    background-color: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.step-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    white-space: nowrap;
}

.wizard-step-divider {
    flex: 1;
    height: 1px;
    background: #334155;
    margin: 0 8px;
    min-width: 12px;
}

.wizard-body {
    padding: 16px 22px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.wizard-step-pane {
    display: none;
    flex-direction: column;
    gap: 14px;
    animation: fadeInStep 0.2s ease-in-out forwards;
}

.wizard-step-pane.active {
    display: flex !important;
}

.step-pane-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.step-number-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.4);
    flex-shrink: 0;
}

.step-heading {
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--text-primary, #f1f5f9);
    margin: 0 0 2px 0;
}

.step-description {
    font-size: 0.76rem;
    color: var(--text-muted, #94a3b8);
    margin: 0;
    line-height: 1.35;
}

.wizard-mode-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111a2e;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #1e293b;
    flex-wrap: wrap;
    gap: 8px;
}

.toggle-mode-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: #38bdf8;
}

.wizard-segmented-control {
    display: flex;
    background: #0b1324;
    padding: 3px;
    border-radius: 6px;
    border: 1px solid #334155;
    gap: 3px;
}

.segmented-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.segmented-btn:hover {
    color: #f1f5f9;
}

.segmented-btn.active {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4);
}

.wizard-input-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wizard-card-group {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wizard-input-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
}

.wizard-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix-icon {
    position: absolute;
    left: 10px;
    color: #64748b;
    font-size: 0.85rem;
}

.wizard-input {
    width: 100%;
    height: 34px;
    background-color: #0b1324;
    border: 1px solid #334155;
    border-radius: 5px;
    padding: 4px 10px 4px 34px;
    color: #f1f5f9;
    font-size: 0.85rem;
    font-weight: 600;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wizard-input-wrapper.with-unit .wizard-input {
    padding-right: 65px;
}

.input-suffix-unit {
    position: absolute;
    right: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    pointer-events: none;
}

.wizard-input:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.dimensions-3col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.dimension-sub-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dimension-sub-field label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
}

.dimension-sub-field .wizard-input {
    padding-left: 10px;
    padding-right: 32px;
}

.wizard-dynamic-calculation-card {
    background: linear-gradient(135deg, #111e38 0%, #0d172c 100%);
    border: 1.5px solid #2563eb;
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
}

.calc-card-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.calc-metric {
    display: flex;
    flex-direction: column;
}

.metric-title {
    font-size: 0.65rem;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.5px;
}

.metric-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
}

.metric-value small {
    font-size: 0.75rem;
    color: #94a3b8;
}

.calc-divider-vertical {
    width: 1px;
    height: 28px;
    background-color: #334155;
}

.calc-card-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #34d399;
    background: rgba(5, 150, 105, 0.15);
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(5, 150, 105, 0.35);
}

.wizard-apa-citation-box {
    background-color: #0b1324;
    border-left: 4px solid #38bdf8;
    border-radius: 0 6px 6px 0;
    padding: 8px 12px;
    border-top: 1px solid #1e293b;
    border-right: 1px solid #1e293b;
    border-bottom: 1px solid #1e293b;
}

.citation-header {
    font-size: 0.74rem;
    color: #38bdf8;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.citation-body {
    font-size: 0.73rem;
    color: var(--text-muted, #cbd5e1);
    line-height: 1.35;
    margin: 0 0 4px 0;
    font-style: italic;
}

.citation-reference {
    font-size: 0.68rem;
    color: #64748b;
}

.wizard-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wizard-choice-card {
    background: #0f172a;
    border: 1.5px solid #334155;
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    user-select: none;
}

.wizard-choice-card:hover {
    background-color: #162238;
    border-color: #38bdf8;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(56, 189, 248, 0.18);
}

.wizard-choice-card:focus-visible {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35);
}

.wizard-choice-card.selected {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.18) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px #38bdf8, 0 8px 20px rgba(56, 189, 248, 0.25);
}

.choice-key-badge {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-color: #1e293b;
    border: 1px solid #475569;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.wizard-choice-card:hover .choice-key-badge,
.wizard-choice-card.selected .choice-key-badge {
    background-color: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
}

.choice-content {
    flex: 1;
}

.choice-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary, #f1f5f9);
    margin: 0 0 3px 0;
    line-height: 1.25;
}

.choice-desc {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    margin: 0;
    line-height: 1.3;
}

.choice-check-icon {
    font-size: 1.1rem;
    color: #38bdf8;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wizard-choice-card.selected .choice-check-icon {
    opacity: 1;
    transform: scale(1);
}

.wizard-modal-footer {
    padding: 12px 20px;
    background-color: #0b1324;
    border-top: 1px solid #334155;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wizard-footer-left,
.wizard-footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wizard-btn-generate {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border: 1px solid #34d399 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

.wizard-btn-generate:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   EXPERIENCIA MÓVIL PREMIUM - TARJETAS CLÍNICAS Y ERGONOMÍA TÁCTIL (< 640px)
   ========================================================================== */
@media (max-width: 640px) {
    /* Contenedor y Espaciados */
    .dashboard-content {
        padding: 10px 8px 80px 8px !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .stat-card {
        padding: 10px !important;
    }
    
    .stat-number {
        font-size: 1.3rem !important;
    }

    /* Tabla de Pacientes Convertida en Tarjetas Modernas */
    .table-responsive-wrapper {
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .report-table thead {
        display: none !important;
    }

    .report-table,
    .report-table tbody,
    .report-table tr,
    .report-table td {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }

    .report-table tr {
        margin-bottom: 14px !important;
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        border: 1px solid #334155 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    .report-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
        border-bottom: 1px dashed rgba(51, 65, 85, 0.6) !important;
        text-align: right !important;
        font-size: 0.88rem !important;
        color: var(--text-primary, #f1f5f9) !important;
    }

    .report-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #94a3b8;
        font-size: 0.76rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: left;
        flex-shrink: 0;
        margin-right: 10px;
    }

    .report-table td:last-child {
        border-bottom: none !important;
        padding-top: 10px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: stretch !important;
        gap: 8px !important;
    }

    .report-table td:last-child::before {
        display: none !important;
    }

    /* Botones de Acción Táctiles Grandes */
    .action-hybrid-wrapper {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .action-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 8px 14px !important;
        font-size: 0.95rem !important;
        border-radius: 8px !important;
        flex: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
    }

    .whatsapp-btn {
        min-height: 44px !important;
        padding: 8px 12px !important;
        font-size: 0.88rem !important;
        border-radius: 8px !important;
        flex: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Paginación Móvil */
    .pagination-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 8px !important;
    }

    .pagination-btn {
        min-height: 36px !important;
        min-width: 36px !important;
        font-size: 0.82rem !important;
        padding: 4px 8px !important;
    }
}

/* ==========================================================================
   MODAL DE CAPTURA EN VIVO DE MICROSCOPIO / CÁMARA USB
   ========================================================================== */
#microscopeCameraModalOverlay {
    background-color: rgba(2, 6, 23, 0.96) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.microscope-modal-container {
    width: 96vw;
    max-width: 1600px;
    height: 94vh;
    max-height: 96vh;
    background: #020617 !important;
    border: 1.5px solid #1e293b !important;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.2);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.microscope-modal-header {
    background: #0f172a !important;
    border-bottom: 1px solid #1e293b !important;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.microscope-modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.microscope-badge-res {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 6px;
}

.device-selector-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #1e293b;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #334155;
}

.microscope-device-select {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 600;
    outline: none;
    max-width: 250px;
    cursor: pointer;
}

.microscope-device-select option {
    background: #0f172a;
    color: #f8fafc;
}

.microscope-viewfinder-body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    background: #000000 !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.microscope-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: crosshair;
    background: #000000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#microscopeWsCanvas,
#microscopeVideoFeed,
#microscopeMjpegFeed {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block;
    image-rendering: auto !important;
    transition: transform 0.2s ease;
    background: #000000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#microscopeVideoFeed.flipped-h,
#microscopeWsCanvas.flipped-h,
#microscopeMjpegFeed.flipped-h {
    transform: scaleX(-1);
}

.microscope-reticle-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(70vw, 70vh);
    height: min(70vw, 70vh);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.reticle-crosshair-h {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(56, 189, 248, 0.35);
}

.reticle-crosshair-v {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: rgba(56, 189, 248, 0.35);
}

.reticle-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 1px dashed rgba(56, 189, 248, 0.5);
    border-radius: 50%;
}

.reticle-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: #38bdf8;
    border-style: solid;
}
.corner-tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.corner-tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.corner-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.corner-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.viewfinder-status-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.status-pill {
    background: #0f172a !important;
    border: 1px solid rgba(239, 68, 68, 0.6) !important;
    color: #f8fafc;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hotkey-hint {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.microscope-modal-footer {
    background: #0f172a !important;
    border-top: 1px solid #1e293b !important;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.microscope-shutter-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: 2px solid #34d399;
    border-radius: 30px;
    padding: 10px 28px;
    font-size: 0.95rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.45);
    transition: all 0.2s ease;
}

.microscope-shutter-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

.microscope-shutter-btn:active {
    transform: translateY(1px) scale(0.98);
}

/* Selector Clínico de Ranuras (Slot 1 / Slot 2) para Captura Consecutiva */
.microscope-slot-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #0b1329 !important;
    padding: 9px 18px;
    border-bottom: 1px solid #1e293b !important;
    flex-wrap: wrap;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.microscope-slot-preview {
    background: #000000 !important;
    border: 1.5px solid #1e293b !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.microscope-slot-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #1e293b;
    color: #94a3b8;
    border: 1.5px solid #334155;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.microscope-slot-btn:hover {
    background: #334155;
    color: #f8fafc;
    border-color: #64748b;
}

.microscope-slot-btn.active {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.3), rgba(14, 165, 233, 0.15));
    border: 1.5px solid #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.microscope-slot-btn .slot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0f172a;
    font-size: 0.75rem;
    font-weight: 800;
    border: 1px solid #475569;
}

.microscope-slot-btn.active .slot-badge {
    background: #0284c7;
    color: white;
    border-color: #38bdf8;
}

.microscope-slot-btn .slot-status {
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

.microscope-slot-btn.has-photo .slot-status {
    background: rgba(16, 185, 129, 0.22);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.microscope-finish-btn {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: white;
    border: 1px solid #38bdf8;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
    transition: all 0.2s ease;
}

.microscope-finish-btn:hover {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
    transform: translateY(-1px);
}

/* ==========================================================================
   RESPONSIVIDAD AVANZADA: ADAPTACIÓN TOTAL A MONITORES, TABLETS Y MÓVILES
   ========================================================================== */
@media (max-width: 1024px) {
    .microscope-modal-container {
        width: 98vw;
        height: 96vh;
        max-width: 98vw;
    }
}

@media (max-width: 768px) {
    .microscope-modal-container {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .microscope-modal-header {
        padding: 8px 10px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .microscope-modal-title {
        font-size: 0.88rem !important;
    }

    .microscope-device-select {
        max-width: 130px !important;
        font-size: 0.72rem !important;
    }

    .device-selector-wrap {
        padding: 3px 6px !important;
    }

    .microscope-slot-bar {
        padding: 6px 10px !important;
        gap: 6px !important;
    }

    .microscope-slot-btn {
        padding: 5px 10px !important;
        font-size: 0.75rem !important;
        flex: 1 !important;
        justify-content: center !important;
    }

    .microscope-modal-footer {
        padding: 8px 12px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .microscope-shutter-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        font-size: 0.92rem !important;
        order: -1 !important;
    }

    .microscope-modal-footer > div {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
    }
}

@media (max-width: 480px) {
    .microscope-modal-header {
        padding: 5px 8px !important;
    }

    .microscope-device-select {
        max-width: 100px !important;
    }

    .viewfinder-status-overlay {
        top: 8px !important;
        left: 8px !important;
    }

    .hotkey-hint {
        display: none !important;
    }

    .microscope-slot-bar span:first-child {
        display: none !important;
    }
}

/* ==========================================================================
   MÓDULO DE BOLETAS Y CONSTANCIAS DE PAGO A EMPRESAS (LOCAL-FIRST)
   ========================================================================== */

.boletas-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.boleta-grid-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    align-items: start;
}

.boleta-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 22px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.boleta-card-title {
    margin: 0 0 16px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 10px;
}

.boleta-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.boleta-input-large {
    width: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    background-color: var(--bg-general);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 14px;
}

.boleta-empresa-preview {
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.preview-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.preview-label {
    font-size: 0.72rem;
    color: var(--text-placeholder);
    text-transform: uppercase;
    font-weight: 600;
}

.preview-val {
    font-size: 0.85rem;
    color: var(--text-primary);
    word-break: break-word;
}

.boleta-form-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.boleta-total-box {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.05);
}

.total-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 1px;
}

.total-amount {
    font-size: 2.3rem;
    font-weight: 900;
    color: #10b981;
    margin: 8px 0;
    letter-spacing: -0.5px;
}

.total-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 4px 10px;
    border-radius: 20px;
}

.boleta-summary-details {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.85rem;
}

.summary-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
}

.summary-detail-row strong {
    color: var(--text-primary);
}

.boleta-btn-emitir {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 800;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.boleta-btn-emitir:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.btn-tab {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.btn-tab.active {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
    font-weight: 700;
}

@media (max-width: 992px) {
    .boleta-grid-layout {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   GLASSMORPHISM CLÍNICO PARA PC (DESKTOP >= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
    /* 1. Fondo ambiental clínico con gradientes radiales dinámicos de alto contraste */
    html,
    body {
        background: #080e1e !important;
        background-image: 
            radial-gradient(at 15% 15%, rgba(14, 165, 233, 0.15) 0px, transparent 50%), 
            radial-gradient(at 85% 20%, rgba(99, 102, 241, 0.15) 0px, transparent 50%), 
            radial-gradient(at 50% 80%, rgba(6, 182, 212, 0.12) 0px, transparent 55%) !important;
        background-attachment: fixed !important;
    }

    .app-container,
    .main-layout,
    .dashboard-content {
        background: transparent !important;
    }

    /* 2. Cabecera con background 70%, blur 16px saturate 180% y borde blanco sutil */
    .dashboard-header {
        background: rgba(15, 23, 42, 0.70) !important;
        backdrop-filter: blur(16px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
    }

    /* 3. Sidebar y Sidebar-Header satinado con blur 20px, borde derecho de luz y nav-item-btn con micro-reflejos */
    .sidebar {
        background: rgba(15, 23, 42, 0.72) !important;
        backdrop-filter: blur(20px) saturate(170%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45) !important;
    }

    .sidebar-header {
        background: rgba(15, 23, 42, 0.72) !important;
        backdrop-filter: blur(20px) saturate(170%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    }

    .sidebar .nav-item-btn {
        background: rgba(30, 41, 59, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .sidebar .nav-item-btn:hover {
        background: linear-gradient(135deg, rgba(56, 189, 248, 0.14) 0%, rgba(30, 41, 59, 0.75) 100%) !important;
        border-color: rgba(56, 189, 248, 0.35) !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 0 10px rgba(56, 189, 248, 0.2) !important;
        transform: translateY(-1px) !important;
    }

    .sidebar .nav-item-btn:active {
        transform: translateY(1px) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    }

    .sidebar .nav-item-btn.active {
        background: linear-gradient(135deg, rgba(2, 132, 199, 0.85) 0%, rgba(3, 105, 161, 0.8) 100%) !important;
        border: 1px solid rgba(56, 189, 248, 0.45) !important;
        box-shadow: 0 4px 16px rgba(2, 132, 199, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.28) !important;
    }

    .sidebar .nav-item-btn.active:hover {
        box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 0 12px rgba(56, 189, 248, 0.3) !important;
    }

    /* 4. Filters-card con rgba 65%, blur 16px saturate 160%, borde blanco 12% e inputs con enfoque cyan */
    .filters-card {
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(16px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }

    .filters-card .filter-input,
    .filters-card select,
    .filters-card input {
        background-color: rgba(15, 23, 42, 0.65) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        transition: all 0.2s ease !important;
    }

    .filters-card .filter-input:focus,
    .filters-card select:focus,
    .filters-card input:focus {
        border-color: #38bdf8 !important;
        box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25), 0 0 12px rgba(56, 189, 248, 0.25) !important;
        outline: none !important;
    }

    /* 5. Table-container blindado con alto contraste (rgba 82%), blur 20px saturate 160% y thead al 96% (WCAG AAA) */
    .table-container {
        background: rgba(15, 23, 42, 0.82) !important;
        backdrop-filter: blur(20px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
    }

    .table-container thead,
    .table-container .report-table thead,
    .table-container .report-table th {
        background-color: rgba(15, 23, 42, 0.96) !important;
        color: #ffffff !important;
        border-bottom: 2px solid rgba(56, 189, 248, 0.35) !important;
    }

    /* 6. Overlays de modales ligeros del sistema (sin tocar áreas clínicas de reporte ni fotografía) */
    .floating-modal-overlay,
    .wpe-modal-overlay {
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        background-color: rgba(11, 19, 41, 0.75) !important;
    }

    .floating-modal-overlay .modal-container {
        background: rgba(15, 23, 42, 0.92) !important;
        backdrop-filter: blur(14px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    }

    .floating-modal-overlay .modal-header {
        background: rgba(15, 23, 42, 0.90) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /* 7. BLINDAJE CLÍNICO TOTAL: El Glassmorphism NUNCA toca áreas de reporte médico, visor de microscopio ni fotos */
    .report-editor-container,
    .report-editor-header,
    .report-editor-footer,
    .microscope-modal-container,
    .microscope-modal-header,
    .microscope-modal-footer,
    .microscope-viewfinder-body,
    .microscope-video-wrapper,
    .microscope-slot-bar,
    .microscope-slot-preview,
    #microscopeWsCanvas,
    #microscopeVideoFeed,
    #microscopeMjpegFeed,
    #microscopeCameraModalOverlay,
    .macro360-standalone-modal,
    .mobile-360-modal-sheet,
    .mobile-360-modal-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .report-editor-container {
        background: #0f172a !important;
        border: 1.5px solid #1e293b !important;
    }

    .report-editor-header,
    .report-editor-footer {
        background: #0f172a !important;
        border-color: #1e293b !important;
    }

    .microscope-modal-container {
        background: #020617 !important;
        border: 1.5px solid #1e293b !important;
    }

    .microscope-modal-header,
    .microscope-modal-footer {
        background: #0f172a !important;
        border-color: #1e293b !important;
    }

    .microscope-viewfinder-body,
    .microscope-video-wrapper,
    #microscopeWsCanvas,
    #microscopeVideoFeed,
    #microscopeMjpegFeed,
    .microscope-slot-preview {
        background: #000000 !important;
    }

    #microscopeCameraModalOverlay {
        background: rgba(0, 0, 0, 0.95) !important;
    }
}

/* ==========================================================================
   NEUROCIENCIA VISUAL & PROPORCIÓN ÁUREA (φ = 1.618) — VISTA DR. VÍCTOR CASTAÑEDA
   ========================================================================== */

/* ── 1. Badge de Especialidad UROLOGÍA (Neuro-Saliencia en Cabecera) ─────── */
.specialty-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 4px);
    margin-left: var(--space-md, 8px);
    padding: var(--space-xs, 3px) var(--space-md, 8px);
    font-size: var(--text-xs, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #38bdf8;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(2, 132, 199, 0.28));
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: var(--space-md, 8px);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.2);
    vertical-align: middle;
    text-transform: uppercase;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.specialty-badge:hover {
    transform: translateY(-1px);
    border-color: rgba(56, 189, 248, 0.8);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}

/* ── 2. Tema Especializado Urología: Dr. Víctor Castañeda Robles ─────────── */
body.role-urology {
    --primary-urology: #0284c7;
    --primary-urology-glow: rgba(2, 132, 199, 0.25);
    --border-focus: #0284c7;
    --sc-blue: #0284c7;
}

/* Cabecera con sutil atmósfera áurea zafiro */
body.role-urology .dashboard-header {
    border-bottom: 2px solid rgba(2, 132, 199, 0.35);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(8, 14, 30, 0.98) 100%);
    box-shadow: 0 4px 20px rgba(2, 132, 199, 0.12);
}

/* Acento en el selector de filtros de servicio (Q, I, C, P) */
body.role-urology .service-btn.active,
body.role-urology .filter-pill.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
}

/* Tarjetas móviles con proporción áurea en padding y border-radius */
body.role-urology .mobile-patient-card {
    border-left: 3.5px solid #0284c7;
    border-radius: var(--space-md, 8px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

body.role-urology .mobile-patient-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.18);
}

/* Tabla Desktop: Ritmo de lectura áureo */
.report-table tbody tr td {
    line-height: var(--phi, 1.618);
    padding: var(--space-md, 8px) var(--space-lg, 13px);
}

/* Botones de acción ergonómicos según Ley de Fitts */
.action-hybrid-wrapper .action-btn {
    min-height: var(--space-2xl, 34px);
    border-radius: var(--space-sm, 5px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-hybrid-wrapper .action-btn:hover {
    transform: scale(1.05);
}

/* Subtexto de Clínica en tabla con saliencia equilibrada */
.table-clinica-subtext {
    font-size: var(--text-xs, 0.72rem);
    letter-spacing: 0.02em;
    color: #38bdf8 !important;
    opacity: 0.9;
}

/* ==========================================================================
   OPTIMIZACIÓN DE CABECERA SUPERIOR MÓVIL (.dashboard-header)
   Prevención de desbordamiento horizontal y botones compactos
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Cabecera superior confinada estrictamente a la pantalla */
    .dashboard-header {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-width: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }

    /* 2. Lado izquierdo y marca móvil compactos, sin empujar */
    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .header-left .welcome-text {
        display: none !important;
    }

    .header-left .sidebar-toggle-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.15rem !important;
        border-radius: 8px !important;
        background: transparent !important;
        border: none !important;
        flex-shrink: 0 !important;
    }

    .header-mobile-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        margin: 0 4px !important;
    }

    .header-mobile-brand .mobile-logo-img {
        height: 26px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    .header-mobile-brand .mobile-logo-text {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex-shrink: 1 !important;
        letter-spacing: 0.3px !important;
    }

    .header-mobile-brand .mobile-status-dot {
        width: 7px !important;
        height: 7px !important;
        flex-shrink: 0 !important;
    }

    /* 3. Lado derecho acotado, sin desbordamiento */
    .header-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        gap: 6px !important;
        max-width: calc(100% - 130px) !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ocultar en móvil botones secundarios que ya están en el menú lateral o saturan el carril */
    .header-right #btnHeaderReporteBoletas,
    .header-right #btnHeaderGroqAI,
    .header-right #btnInstallApp,
    .header-right .header-utility-btn[title*="Copias de Seguridad"],
    .header-right .header-utility-btn[aria-label="Base de datos"] {
        display: none !important;
    }

    #syncStatusIndicator span {
        display: none !important;
    }

    /* Utilitarios e indicadores que se mantienen en la cabecera móvil (34x34px) */
    .header-right #syncStatusIndicator,
    .header-right #btnThemeToggle,
    .header-right #btnLogout {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        padding: 5px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        font-size: 0.95rem !important;
    }

    .header-right #syncStatusIndicator i {
        font-size: 0.95rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #syncStatusIndicator {
        border-radius: 8px !important;
    }
}

@media (max-width: 480px) {
    /* Refinamiento ergonómico para pantallas estrechas (<= 480px y 360-400px) */
    .dashboard-header {
        padding: 0 8px !important;
        gap: 4px !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    .header-left {
        gap: 4px !important;
    }

    .header-left .sidebar-toggle-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        font-size: 1.05rem !important;
        border-radius: 8px !important;
    }

    .header-mobile-brand {
        gap: 4px !important;
        margin: 0 2px !important;
    }

    .header-mobile-brand .mobile-logo-img {
        height: 22px !important;
    }

    .header-mobile-brand .mobile-logo-text {
        font-size: 0.84rem !important;
        letter-spacing: 0px !important;
    }

    .header-mobile-brand .mobile-status-dot {
        width: 6px !important;
        height: 6px !important;
    }

    .header-right {
        gap: 4px !important;
        max-width: calc(100% - 100px) !important;
    }

    .header-right #btnHeaderReporteBoletas,
    .header-right #btnHeaderGroqAI,
    .header-right #btnInstallApp,
    .header-right .header-utility-btn[title*="Copias de Seguridad"],
    .header-right .header-utility-btn[aria-label="Base de datos"] {
        display: none !important;
    }

    .header-right #syncStatusIndicator,
    .header-right #btnThemeToggle,
    .header-right #btnLogout {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        padding: 4px !important;
        border-radius: 7px !important;
        font-size: 0.85rem !important;
    }

    .header-right #syncStatusIndicator i {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 360px) {
    /* Seguridad extra para pantallas ultra-compactas (360px o inferiores) */
    .dashboard-header {
        padding: 0 6px !important;
    }

    .header-right {
        gap: 3px !important;
        max-width: calc(100% - 85px) !important;
    }

    .header-mobile-brand .mobile-logo-text {
        font-size: 0.78rem !important;
    }
}

/* ==========================================================================
   ARQUITECTURA MÓVIL: DOCTORES, USUARIOS Y PAGINACIÓN HORIZONTAL MATEMÁTICA
   Previene tablas desaparecidas y paginación vertical de botones apilados
   ========================================================================== */

/* 1. Visibilidad garantizada para la tabla de Doctores y Usuarios en móviles */
@media (max-width: 768px) {
    #view-doctors .table-responsive-wrapper,
    #view-users .table-responsive-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: #0f172a !important;
        border: 1px solid #1e293b !important;
        border-radius: 12px !important;
        padding: 4px !important;
        margin-bottom: 15px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    }

    #view-doctors .report-table,
    #view-users .report-table {
        display: table !important;
        width: 100% !important;
        min-width: 640px !important;
        border-collapse: collapse !important;
    }

    #view-doctors .report-table thead,
    #view-users .report-table thead {
        display: table-header-group !important;
    }

    #view-doctors .report-table tbody,
    #view-users .report-table tbody {
        display: table-row-group !important;
    }

    #view-doctors .report-table tr,
    #view-users .report-table tr {
        display: table-row !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    #view-doctors .report-table td,
    #view-doctors .report-table th,
    #view-users .report-table td,
    #view-users .report-table th {
        display: table-cell !important;
        padding: 10px 8px !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
        border-bottom: 1px solid #1e293b !important;
        text-align: left !important;
    }

    #view-doctors .report-table td::before,
    #view-users .report-table td::before {
        display: none !important;
        content: none !important;
    }

    #view-doctors .action-cell,
    #view-users .action-cell {
        white-space: nowrap !important;
    }

    /* Acciones superiores de doctores en carril móvil único */
    .doctors-actions-bar,
    .users-actions-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    .doctors-actions-bar .btn,
    .users-actions-bar .btn {
        flex: 1 1 auto !important;
        min-height: 38px !important;
        font-size: 0.82rem !important;
        padding: 8px 12px !important;
        justify-content: center !important;
    }

    .doctors-controls-grid,
    .users-controls-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }
}

/* 2. Paginación Matemática Estrictamente Horizontal para Móviles */
.pagination-container,
#patientsPagination,
#doctorsPagination,
#usersPagination {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 16px auto !important;
    padding: 8px 4px !important;
    box-sizing: border-box !important;
}

.pagination-container .pagination-btn,
#patientsPagination .pagination-btn,
#doctorsPagination .pagination-btn,
#usersPagination .pagination-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: #1e293b !important;
    color: #f1f5f9 !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
}

.pagination-container .pagination-btn:hover,
#patientsPagination .pagination-btn:hover,
#doctorsPagination .pagination-btn:hover,
#usersPagination .pagination-btn:hover {
    background: #334155 !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
}

.pagination-container .pagination-btn.active,
#patientsPagination .pagination-btn.active,
#doctorsPagination .pagination-btn.active,
#usersPagination .pagination-btn.active {
    background: #0284c7 !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.5) !important;
}

.pagination-container .pagination-btn:disabled,
#patientsPagination .pagination-btn:disabled,
#doctorsPagination .pagination-btn:disabled,
#usersPagination .pagination-btn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ============================================================================== */
/* ESTILOS DE RESPONSIVIDAD Y GLASSMORPHISM PARA EL MÓDULO DE BOLETAS             */
/* ============================================================================== */
.boletas-tabs-nav {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.boletas-tabs-nav::-webkit-scrollbar {
    display: none !important;
}

.boletas-tabs-nav .btn-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.boleta-card {
    background: rgba(15, 23, 42, 0.74) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.light-theme .boleta-card {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

@media (max-width: 768px) {
    .boletas-grid-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .boleta-form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #boletaMuestrasContainer > div {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #boletaMuestrasContainer .input-muestra-desc {
        min-width: 100% !important;
        order: 2;
    }

    #boletaMuestrasContainer > div > span:first-child {
        order: 1;
    }

    #boletaMuestrasContainer > div > div:nth-child(3) {
        order: 3;
        flex: 1;
    }

    #boletaMuestrasContainer .btn-remove-muestra {
        order: 4;
    }

    .boletas-dashboard-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .boletas-header-actions {
        width: 100% !important;
    }

    .boletas-header-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}






/* ==========================================================================
   JC PATH LAB - CANONICAL BRAND PALETTE & GLASSMORPHISM DEFINITIONS (v592)
   Fondo: slate-950 (#030712) | Acentos: Cyan (#22d3ee), Sky (#38bdf8), Emerald (#10b981)
   Tipografia: Outfit (titulos) + Inter (datos/UI)
   ========================================================================== */

:root {
    --jc-bg-main: #030712;
    --jc-bg-card: rgba(15, 23, 42, 0.72);
    --jc-bg-card-hover: rgba(30, 41, 59, 0.78);
    --jc-border-glass: rgba(56, 189, 248, 0.18);
    --jc-border-glass-glow: rgba(34, 211, 238, 0.38);
    --jc-cyan: #22d3ee;
    --jc-sky: #38bdf8;
    --jc-emerald: #10b981;
    --jc-font-brand: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --jc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    font-family: var(--jc-font-body) !important;
    background-color: var(--jc-bg-main) !important;
    color: #f1f5f9 !important;
}

h1, h2, h3, .brand-title, .brand-logo-text {
    font-family: var(--jc-font-brand) !important;
    letter-spacing: -0.02em;
}

/* Glassmorphism Master Classes */
.glass-panel, 
.filters-card, 
.mobile-card,
.stat-card,
.modal-content,
.patient-card {
    background: var(--jc-bg-card) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid var(--jc-border-glass) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.12) !important;
}

/* Header Glassmorphism con Safe Area para Notch */
.dashboard-header, header {
    background: rgba(3, 7, 18, 0.82) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--jc-border-glass) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6) !important;
}

/* Barra inferior movil ergonomica Glassmorphism */
.mobile-bottom-nav, .thumb-nav {
    background: rgba(3, 7, 18, 0.88) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    border-top: 1px solid var(--jc-border-glass) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.7) !important;
    min-height: 62px !important;
    height: auto !important;
    padding-bottom: max(env(safe-area-inset-bottom, 10px), 10px) !important;
}

/* Pildoras de filtro movil con efecto glass y glow */
.mobile-filter-pill, .pill-btn {
    background: rgba(15, 23, 42, 0.65) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mobile-filter-pill.active, .pill-btn.active {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.25) 0%, rgba(14, 165, 233, 0.35) 100%) !important;
    border-color: var(--jc-cyan) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* Botones 3D Tactiles */
.btn-3d-cyan {
    background: linear-gradient(180deg, #22d3ee 0%, #0891b2 100%) !important;
    border: none !important;
    box-shadow: 0 4px 0 #0e7490, 0 8px 16px rgba(6, 182, 212, 0.35) !important;
    color: #030712 !important;
    font-weight: 700 !important;
    font-family: var(--jc-font-brand) !important;
}

.btn-3d-cyan:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 #0e7490, 0 4px 8px rgba(6, 182, 212, 0.3) !important;
}

.btn-3d-emerald {
    background: linear-gradient(180deg, #34d399 0%, #059669 100%) !important;
    border: none !important;
    box-shadow: 0 4px 0 #047857, 0 8px 16px rgba(16, 185, 129, 0.35) !important;
    color: #030712 !important;
    font-weight: 700 !important;
    font-family: var(--jc-font-brand) !important;
}

.btn-3d-emerald:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 #047857, 0 4px 8px rgba(16, 185, 129, 0.3) !important;
}


/* ==========================================================================
   UNIVERSAL SCROLL FIX (DESKTOP & MOBILE) - ZERO TRABAS
   Asegura desplazamiento vertical 100% fluido en cualquier pantalla
   ========================================================================== */

/* 1. Desktop: .dashboard-content scroll nativo ultra-suave */
.dashboard-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100vh - 65px) !important;
    max-height: calc(100vh - 65px) !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    scroll-behavior: smooth !important;
}

/* Permitir que la tabla y vistas crezcan sin ser recortadas */
.dashboard-view, 
.dashboard-view.active, 
.table-container {
    height: auto !important;
    min-height: min-content !important;
    overflow: visible !important;
}

/* 2. Mobile: scroll natural de ventana completa */
@media (max-width: 768px) {
    html, body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: auto !important;
        height: auto !important;
        min-height: 100vh !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .app-container,
    .main-layout {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }

    .dashboard-content {
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 20px)) !important;
    }

    .mobile-cards-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        height: auto !important;
        min-height: min-content !important;
        overflow: visible !important;
    }
}