/* ==========================================================================
   Proyecto Clave Ransaca - Global CSS & Design System
   ========================================================================== */

   :root {
    /* Color Palette - Curated Slate and Electric Accents */
    --bg-dark: #090d16;
    --bg-main: #0f172a;
    --bg-sidebar: #0b0f19;
    --card-bg: rgba(30, 41, 59, 0.45);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-hover-border: rgba(0, 242, 254, 0.3);
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --primary: #00f2fe;
    --primary-end: #4facfe;
    --secondary: #8b5cf6;
    --secondary-end: #ec4899;
    
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.15);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.15);
    --info: #0ea5e9;
    --info-bg: rgba(14, 165, 233, 0.15);

    /* --- 🌐 Design Tokens: Plataformas Corporativas Externas --- */
    --brand-google-red: #ea4335;
    --brand-google-bg: rgba(234, 67, 53, 0.12);
    --brand-google-border: rgba(234, 67, 53, 0.5);
    --brand-google-text: #fca5a5;

    --brand-outlook-blue: #0078d4;
    --brand-outlook-bg: rgba(0, 120, 212, 0.12);
    --brand-outlook-border: rgba(0, 120, 212, 0.5);
    --brand-outlook-text: #60a5fa;

    --brand-apple-white: #ffffff;
    --brand-apple-bg: rgba(248, 250, 252, 0.08);
    --brand-apple-border: rgba(255, 255, 255, 0.25);

    --brand-webcal-violet: #c084fc;
    --brand-webcal-border: rgba(139, 92, 246, 0.5);
    
    /* Neon Glow Shadows */
    --glow-cyan: 0 0 15px rgba(0, 242, 254, 0.4);
    --glow-violet: 0 0 15px rgba(139, 92, 246, 0.4);
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    /* Layout Configurations */
    --sidebar-width: 280px;
    --header-height: 60px;
    --border-radius-lg: 16px;
    --border-radius-md: 10px;
    --border-radius-sm: 6px;
    
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   🎨 UI Skins & Theme Switcher (data-skin)
   ========================================================================== */

/* Skin: Dark Cyber Cyan (Default) */
body[data-skin="dark-cyan"], body:not([data-skin]) {
    --primary: #00f2fe;
    --secondary: #8b5cf6;
}

/* Skin: Neon Violet Night */
body[data-skin="neon-violet"] {
    --primary: #a855f7;
    --primary-end: #ec4899;
    --secondary: #3b82f6;
    --bg-dark: #11071f;
    --bg-main: #1e1035;
    --glow-cyan: 0 0 18px rgba(168, 85, 247, 0.5);
}

/* Skin: Midnight OLED Pure */
body[data-skin="midnight"] {
    --primary: #38bdf8;
    --bg-dark: #030712;
    --bg-main: #0b0f19;
    --card-bg: rgba(17, 24, 39, 0.8);
    --border-glass-card: rgba(255, 255, 255, 0.05);
}

/* Skin: Light Clinical Fresh */
body[data-skin="light-clinical"] {
    --primary: #0284c7;
    --bg-dark: #f8fafc;
    --bg-main: #f1f5f9;
    --bg-sidebar: #ffffff;
    --card-bg: #ffffff;
    --card-border: rgba(226, 232, 240, 0.8);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --card-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Utilitarios de Plataformas Externas */
.btn-platform-google {
    background: var(--brand-google-bg) !important;
    border-color: var(--brand-google-border) !important;
    color: var(--brand-google-text) !important;
}
.btn-platform-apple {
    background: var(--brand-apple-bg) !important;
    border-color: var(--brand-apple-border) !important;
    color: var(--brand-apple-white) !important;
}
.btn-platform-outlook {
    background: var(--brand-outlook-bg) !important;
    border-color: var(--brand-outlook-border) !important;
    color: var(--brand-outlook-text) !important;
}
.btn-platform-webcal {
    border-color: var(--brand-webcal-border) !important;
    color: var(--brand-webcal-violet) !important;
}

/* Utilitarios de Canales Sociales */
.btn-channel-whatsapp {
    background: rgba(37, 211, 102, 0.12) !important;
    border-color: rgba(37, 211, 102, 0.5) !important;
    color: #4ade80 !important;
}
.btn-channel-instagram {
    background: rgba(225, 48, 108, 0.12) !important;
    border-color: rgba(225, 48, 108, 0.5) !important;
    color: #f472b6 !important;
}
.btn-channel-facebook {
    background: rgba(0, 132, 255, 0.12) !important;
    border-color: rgba(0, 132, 255, 0.5) !important;
    color: #60a5fa !important;
}
.btn-channel-tiktok {
    background: rgba(255, 0, 80, 0.12) !important;
    border-color: rgba(255, 0, 80, 0.5) !important;
    color: #fb7185 !important;
}
.btn-channel-twitter {
    background: rgba(29, 161, 242, 0.12) !important;
    border-color: rgba(29, 161, 242, 0.5) !important;
    color: #38bdf8 !important;
}

/* Theme: Enclave Design (Fondos Verde Salvia del Logo ENCLAVE #5B8C7A + Títulos Ébano Oscuro + Cobre Cupra) */
body[data-theme="enclave"] {
    --bg-dark: #F2ECE4;
    --bg-main: #F5F0E8;
    --bg-sidebar: #EFE8DF;
    --bg-gradient: linear-gradient(135deg, #F5F0E8 0%, #EAE2D8 100%);
    --card-bg: #5B8C7A;
    --card-border: rgba(53, 83, 72, 0.4);
    
    --primary: #C77B58; /* Cobre Cupra */
    --primary-end: #A85D3B;
    --secondary: #0D1916; /* Ébano Oscuro */
    --secondary-end: #09100e;
    
    --accent-color: #C77B58;
    --text-primary: #0D1916;
    --text-secondary: #1a2e28;
    --text-muted: #2d4d43;
    --glow-cyan: 0 4px 20px rgba(199, 123, 88, 0.35);
}

body[data-theme="enclave"],
body[data-theme="enclave"] .app-container {
    background: linear-gradient(135deg, #F5F0E8 0%, #EAE2D8 100%) !important;
    color: #0D1916;
}

body[data-theme="enclave"] .main-content {
    background-color: #F5F0E8 !important;
    background: linear-gradient(135deg, #F5F0E8 0%, #EAE2D8 100%) !important;
}

body[data-theme="enclave"] .glass-card {
    background: #5B8C7A !important;
    border: 1px solid rgba(53, 83, 72, 0.4) !important;
    backdrop-filter: none !important;
    box-shadow: 0 8px 24px rgba(53, 83, 72, 0.2) !important;
    color: #0D1916 !important;
}

body[data-theme="enclave"] .sidebar {
    background: #EFE8DF !important;
    border-right: 1px solid rgba(91, 140, 122, 0.3) !important;
}

body[data-theme="enclave"] .sidebar .brand-title {
    color: #3F6456 !important;
}

body[data-theme="enclave"] .sidebar .menu-item {
    color: #1e293b !important;
}

body[data-theme="enclave"] .sidebar .menu-item:hover {
    background: rgba(91, 140, 122, 0.2) !important;
    color: #0D1916 !important;
}

body[data-theme="enclave"] .sidebar .menu-item.active {
    background: linear-gradient(90deg, rgba(199, 123, 88, 0.25) 0%, rgba(199, 123, 88, 0.03) 100%) !important;
    border-left-color: #C77B58 !important;
    color: #C77B58 !important;
    font-weight: 700 !important;
}

body[data-theme="enclave"] .sidebar .menu-item.active svg {
    color: #C77B58 !important;
}

body[data-theme="enclave"] .main-header {
    background: #EFE8DF !important;
    border-bottom: 1px solid rgba(91, 140, 122, 0.3) !important;
    color: #0D1916 !important;
}

/* --- 🔘 Toggle Switch Components --- */
.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transition: .3s;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #10b981;
    border-color: #10b981;
}
input:checked + .slider:before {
    transform: translateX(20px);
}


body[data-theme="enclave"] .main-header h1,
body[data-theme="enclave"] .main-header #page-title {
    color: #0D1916 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    font-weight: 800 !important;
}

body[data-theme="enclave"] .glass-card h1, 
body[data-theme="enclave"] .glass-card h2, 
body[data-theme="enclave"] .glass-card h3, 
body[data-theme="enclave"] .glass-card h4 {
    color: #0B1714 !important;
    font-weight: 800 !important;
}

body[data-theme="enclave"] .glass-card p, 
body[data-theme="enclave"] .glass-card span, 
body[data-theme="enclave"] .glass-card label,
body[data-theme="enclave"] .glass-card td,
body[data-theme="enclave"] .glass-card th {
    color: #0F201B;
}

body[data-theme="enclave"] .btn-primary {
    background: linear-gradient(135deg, #C77B58, #A85D3B) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(199, 123, 88, 0.4) !important;
}

body[data-theme="enclave"] .btn-primary:hover {
    background: linear-gradient(135deg, #D48563, #B86B43) !important;
    box-shadow: 0 6px 20px rgba(199, 123, 88, 0.5) !important;
}

body[data-theme="enclave"] .btn-secondary,
body[data-theme="enclave"] .btn-outline {
    background: rgba(250, 247, 242, 0.85) !important;
    border: 1px solid rgba(13, 25, 22, 0.3) !important;
    color: #0D1916 !important;
    font-weight: 600 !important;
}

body[data-theme="enclave"] .btn-secondary:hover,
body[data-theme="enclave"] .btn-outline:hover {
    background: #ffffff !important;
    color: #000000 !important;
}

body[data-theme="enclave"] input.form-control,
body[data-theme="enclave"] select.form-control,
body[data-theme="enclave"] select.select-dark {
    background: #FAF7F2 !important;
    color: #0D1916 !important;
    border: 1px solid rgba(13, 25, 22, 0.3) !important;
    font-weight: 500 !important;
}

body[data-theme="enclave"] .badge-primary,
body[data-theme="enclave"] .badge-info,
body[data-theme="enclave"] .badge-blue {
    background: rgba(199, 123, 88, 0.25) !important;
    border: 1px solid rgba(199, 123, 88, 0.5) !important;
    color: #8C4122 !important;
    font-weight: 700 !important;
}

body[data-theme="enclave"] .badge-success,
body[data-theme="enclave"] .doc-badge.badge-confirmed {
    background: rgba(13, 25, 22, 0.15) !important;
    border: 1px solid rgba(13, 25, 22, 0.4) !important;
    color: #0D1916 !important;
    font-weight: 700 !important;
}

body[data-theme="enclave"] .log-console {
    background-color: #08120f !important;
    color: #a7f3d0 !important;
}

body[data-theme="enclave"] [style*="color: #38bdf8"],
body[data-theme="enclave"] [style*="color: rgb(56, 189, 248)"] {
    color: #0D1916 !important;
}

body[data-theme="enclave"] .sidebar-user {
    background: rgba(91, 140, 122, 0.2) !important;
    border: 1px solid rgba(91, 140, 122, 0.35) !important;
}

body[data-theme="enclave"] .sidebar-user .user-name {
    color: #0D1916 !important;
}

body[data-theme="enclave"] .sidebar-user .user-role {
    color: #3F6456 !important;
}

/* ==========================================================================
   Base resets & typography
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    height: 100vh;
    overflow: hidden;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
}
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 242, 254, 0.5);
}

.scroll-y {
    overflow-y: auto;
}

/* ==========================================================================
   Layout Structure
   ========================================================================== */

.app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar Styling - Fixed Viewport Panel */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    padding: 20px;
    z-index: 100;
    flex-shrink: 0;
    position: relative;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
}

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-name h2 {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--primary), var(--primary-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-name h2 span {
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}

.brand-name .badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-end));
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-top: 2px;
}

.sidebar-menu {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

.menu-item {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition-fast);
    text-align: left;
    position: relative;
    width: 100%;
}

.menu-item span:not(.menu-badge) {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item svg {
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.menu-item:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

.menu-item.active {
    color: var(--primary);
    background: linear-gradient(90deg, rgba(0, 242, 254, 0.1), transparent);
    border-left: 3px solid var(--primary);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-weight: 600;
}

.menu-item.active svg {
    filter: drop-shadow(var(--glow-cyan));
    color: var(--primary);
}

.menu-badge {
    position: relative;
    right: auto;
    margin-left: auto;
    flex-shrink: 0;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    animation: badge-pulse-glow 2s infinite;
}

@keyframes badge-pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.sidebar-user {
    padding: 12px 14px;
    margin-top: auto;
    border-top: 1px solid var(--card-border);
    background-color: rgba(255, 255, 255, 0.025);
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.sidebar-user:hover {
    background-color: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.12);
}

.sidebar-user-content {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    width: 100%;
}

.user-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    bottom: -1px;
    right: -1px;
    border: 2px solid var(--bg-sidebar);
}

.status-indicator.online {
    background-color: var(--success);
    box-shadow: 0 0 6px var(--success);
}

.user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.user-role {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Main Content Area */
.main-content {
    flex: 1;
    background-color: var(--bg-main);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow-y: auto;
}

/* Main Header */
.main-header {
    height: var(--header-height);
    min-height: var(--header-height);
    max-height: var(--header-height);
    flex-shrink: 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background-color: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
}

#page-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.header-time {
    font-size: 0.9rem;
    color: var(--text-secondary);
    background-color: rgba(255, 255, 255, 0.03);
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--card-border);
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.green {
    background-color: var(--success);
    box-shadow: 0 0 8px var(--success);
}

/* Tabs & General Views */
.tab-view {
    display: none;
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    min-height: min-content;
    animation: fadeIn var(--transition-normal);
}

.tab-view.active {
    display: flex;
    flex-direction: column;
}

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

/* Common Card Styles */
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    backdrop-filter: blur(12px);
    box-shadow: var(--card-shadow);
    transition: var(--transition-normal);
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.card-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header.border-bottom {
    border-bottom: 1px solid var(--card-border);
}

.card-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
}

.card-header .subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.card-body {
    padding: 0 20px 20px 20px;
}

/* Buttons & Form controls */
.btn {
    padding: 10px 20px;
    border-radius: var(--border-radius-md);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-fast);
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-end));
    color: #04080f;
    box-shadow: var(--glow-cyan);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.6);
}

.btn-primary:disabled {
    background: var(--text-muted);
    color: var(--text-secondary);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.btn-danger:hover {
    background-color: var(--danger);
    color: white;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.82rem;
    border-radius: var(--border-radius-sm);
}

.btn-xs {
    padding: 4px 8px;
    font-size: 0.72rem;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
}

.btn-outline:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.btn-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning);
}

.btn-warning:hover:not(:disabled) {
    background-color: var(--warning);
    color: #04080f;
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: 1px solid rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.45);
    transition: all 0.2s ease;
}

.btn-success:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(16, 185, 129, 0.75);
    color: #ffffff;
}

.btn-budget {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #ffffff;
    border: 1px solid rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.45);
    transition: all 0.2s ease;
}

.btn-budget:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(168, 85, 247, 0.75);
    color: #ffffff;
}

/* Channel Tabs Styling */
.channel-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--card-border);
    padding: 8px 10px;
    overflow: hidden;
}

.channel-tabs .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}


.btn-icon {
    padding: 10px;
    border-radius: 50%;
}

.btn-icon-label svg {
    margin-right: 4px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: var(--border-radius-sm);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-control {
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 10px 14px;
    border-radius: var(--border-radius-md);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition-fast);
}

/* Transición suave para todos los controles de formulario */
input.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Resplandor por defecto (Azul Celeste) */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
}

/* 1. Kiosco / Recepción (Verde Esmeralda #10b981) */
#view-reception .form-control:focus,
#view-reception select:focus,
#view-reception input:focus,
.kiosk-card .form-control:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

/* 2. HUB de Comunicaciones (Cian #06b6d4) */
#view-whatsapp .form-control:focus,
#view-whatsapp select:focus,
#view-whatsapp input:focus,
.chat-input-box input:focus {
    border-color: #22d3ee !important;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.4) !important;
}

/* 3. Consulta Odontológica / Dictado IA (Morado / Violeta #a855f7) */
#view-clinical-history .form-control:focus,
#view-clinical-history textarea:focus,
#view-clinical-history select:focus,
#voice-app-input:focus,
#ai-followup-voice-edit:focus {
    border-color: #c084fc !important;
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.45) !important;
}

/* 4. Servicio Fuera de Catálogo (Violeta #a855f7) */
#custom-service-form-panel .form-control:focus,
#custom-service-form-panel select:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.45) !important;
}

/* 5. Recetas Digitales (Rosa / Magenta #ec4899) */
#tab-prescriptions .form-control:focus,
#tab-prescriptions select:focus,
#tab-prescriptions input:focus {
    border-color: #ec4899 !important;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.4) !important;
}

/* 6. Órdenes de Laboratorio (Púrpura #8b5cf6) */
#tab-lab-orders .form-control:focus,
#tab-lab-orders select:focus,
#tab-lab-orders input:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.4) !important;
}

/* 7. Radiografías & Imagenología (Azul Celeste #38bdf8) */
#tab-xrays .form-control:focus,
#tab-xrays select:focus,
#tab-xrays input:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
}

/* 8. Operaciones de Recepción & Insumos (Verde Menta #34d399) */
#view-reception-ops .form-control:focus,
#view-reception-ops input:focus,
#input-new-reception-task:focus {
    border-color: #34d399 !important;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.4) !important;
}

/* 9. Modal de Nueva Cita en Calendario (Cian #38bdf8) */
#modal-new-appointment .form-control:focus,
#modal-new-appointment select:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
}

.select-dark {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.stepper-btn:hover {
    color: var(--primary) !important;
}

.form-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.col-span-2 {
    grid-column: span 2;
}

.w-100 {
    width: 100%;
}

.flex-align-end {
    display: flex;
    align-items: flex-end;
}

/* ==========================================================================
   1. Dashboard View Styles
   ========================================================================== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.kpi-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--card-shadow);
    transition: var(--transition-normal);
}

.kpi-card:hover {
    transform: translateY(-4px);
    border-color: var(--card-hover-border);
}

.kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-cyan {
    background-color: rgba(0, 242, 254, 0.15);
    color: var(--primary);
}

.color-violet {
    background-color: rgba(139, 92, 246, 0.15);
    color: var(--secondary);
}

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

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

.kpi-data {
    display: flex;
    flex-direction: column;
}

.kpi-title {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.kpi-value {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 2px 0;
}

.kpi-trend {
    font-size: 0.75rem;
    font-weight: 600;
}

.trend-up { color: var(--success); }
.trend-down { color: var(--danger); }
.trend-stable { color: var(--text-secondary); }

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 25px;
    flex: 1;
    min-height: 380px;
}

.chart-card {
    display: flex;
    flex-direction: column;
}

.chart-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dynamic-svg-chart {
    width: 100%;
    height: 100%;
    max-height: 250px;
}

.pulse-dot {
    animation: radialPulse 2s infinite;
}

@keyframes radialPulse {
    0% { r: 5; opacity: 1; }
    50% { r: 9; opacity: 0.4; }
    100% { r: 5; opacity: 1; }
}

.chart-legend {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

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

.legend-dot.color-cyan { background-color: var(--primary); }
.legend-dot.color-violet { background-color: var(--secondary); }

.activity-card {
    display: flex;
    flex-direction: column;
    max-height: 400px;
}

.activity-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--card-border);
}

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

.activity-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.activity-details {
    flex: 1;
    font-size: 0.85rem;
}

.activity-details p {
    color: var(--text-primary);
    line-height: 1.4;
}

.activity-details p strong {
    font-weight: 600;
}

.activity-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-top: 4px;
}

/* ==========================================================================
   2. HUB de Comunicaciones View Styles
   ========================================================================== */

.whatsapp-card, .whatsapp-layout {
    display: grid;
    grid-template-columns: 320px 1fr 340px;
    min-height: 550px;
    height: calc(100vh - var(--header-height) - 70px);
    overflow: hidden;
}

.whatsapp-inbox {
    border-right: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    background-color: rgba(11, 15, 25, 0.4);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.inbox-search {
    padding: 15px;
    border-bottom: 1px solid var(--card-border);
}

.inbox-search input {
    width: 100%;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    border-radius: var(--border-radius-md);
    padding: 8px 12px;
    outline: none;
    font-family: inherit;
    font-size: 0.85rem;
}

.inbox-list {
    flex: 1;
    overflow-y: auto;
}

.wa-chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: var(--transition-fast);
}

.wa-chat-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.wa-chat-item.active {
    background-color: rgba(0, 242, 254, 0.08);
    border-left: 3px solid var(--primary);
}

.wa-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bg-main), var(--card-border));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}

.channel-badge-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}

.channel-badge-icon svg {
    width: 10px;
    height: 10px;
}

.wa-info {
    flex: 1;
    min-width: 0;
}

.wa-info-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.wa-info-header h4 {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.wa-info-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wa-last-msg {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 85%;
}

.wa-unread-badge {
    background-color: var(--primary);
    color: #04080f;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: var(--glow-cyan);
}

.whatsapp-chat-panel {
    display: flex;
    flex-direction: column;
    background-color: rgba(9, 13, 22, 0.6);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.chat-header {
    height: 60px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: rgba(15, 23, 42, 0.4);
}

.chat-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--secondary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.chat-user-details h4 {
    font-size: 0.9rem;
    font-weight: 600;
}

.chat-user-details span {
    font-size: 0.75rem;
    color: var(--success);
}

.chat-history {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
}

.chat-welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    max-width: 380px;
}

.welcome-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.welcome-screen h3 {
    margin-bottom: 8px;
}

.welcome-screen p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.msg-bubble {
    max-width: 70%;
    padding: 11px 16px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.45;
    word-wrap: break-word;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: commsMsgFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

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

.msg-bubble.received {
    align-self: flex-start;
    background-color: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: 3px;
    color: #f1f5f9;
}

.msg-bubble.sent {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.28), rgba(5, 150, 105, 0.38));
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-bottom-right-radius: 3px;
    color: #f8fafc;
}

.msg-meta {
    font-size: 0.72rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 5px;
}

/* ==========================================================================
   Voice Note Player (WhatsApp Audio & Gemini TTS Leda)
   ========================================================================== */
.msg-bubble.voice-note {
    min-width: 280px;
    max-width: 390px;
    padding: 10px 14px 8px 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 95, 70, 0.28));
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.voice-note-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.72rem;
    color: #34d399;
}

.voice-note-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(16, 185, 129, 0.2);
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.68rem;
    color: #a7f3d0;
}

.voice-note-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.voice-play-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    flex-shrink: 0;
}

.voice-play-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.6);
}

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

.voice-wave-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.voice-wave-bars {
    display: flex;
    align-items: center;
    gap: 2.5px;
    height: 22px;
    cursor: pointer;
}

.voice-bar {
    flex: 1;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    height: 20%;
    transition: background-color 0.15s ease, height 0.2s ease;
}

.voice-bar.played {
    background: #10b981;
}

.msg-bubble.voice-note.playing .voice-bar {
    animation: wavePulse 1.2s infinite ease-in-out;
}

@keyframes wavePulse {
    0%, 100% { transform: scaleY(0.7); }
    50% { transform: scaleY(1.3); }
}

.voice-progress-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
}

.audio-control-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.audio-trust-badge {
    font-size: 0.76rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #94a3b8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    text-align: center;
}

.audio-trust-badge.status-ready {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.35);
    color: #38bdf8;
}

.audio-trust-badge.status-recording {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.45);
    color: #34d399;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.audio-trust-badge.status-low {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fbbf24;
}

.audio-trust-badge.status-verified {
    background: rgba(168, 85, 247, 0.14);
    border-color: rgba(168, 85, 247, 0.45);
    color: #d8b4fe;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

.audio-visualizer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.85) 0%, rgba(3, 7, 18, 0.98) 100%);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 12px;
    padding: 8px 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(56, 189, 248, 0.06);
    transition: border-color 0.3s ease;
}

.recording .audio-visualizer-box {
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5), inset 0 0 25px rgba(56, 189, 248, 0.12);
}

#audio-wave-canvas {
    background-color: transparent;
    border-radius: 8px;
    width: 260px;
    height: 48px;
    display: block;
}

.audio-timer {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: #38bdf8;
    letter-spacing: 1px;
    font-weight: 600;
}

.voice-transcript-toggle {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    font-size: 0.72rem;
    color: #93c5fd;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.voice-transcript-toggle:hover {
    text-decoration: underline;
    color: #bfdbfe;
}

.voice-transcript-box {
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #e2e8f0;
}


.chat-control-area {
    padding: 15px 20px;
    background-color: rgba(11, 15, 25, 0.8);
    border-top: 1px solid var(--card-border);
    flex-shrink: 0;
}

.agenda-audit-panel {
    display: flex;
    flex-direction: column;
    background-color: rgba(15, 23, 42, 0.5);
    border-left: 1px solid var(--card-border);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.ai-draft-panel {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.1);
    border-radius: var(--border-radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    animation: slideUp var(--transition-normal);
}

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

.ai-draft-header {
    background-color: rgba(139, 92, 246, 0.15);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.ai-title-group {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.ai-draft-badge {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-end));
    color: white;
    font-weight: 700;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.ai-draft-content {
    padding: 12px;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    outline: none;
}

.ai-draft-content:focus {
    background-color: rgba(0, 0, 0, 0.3);
}

.ai-draft-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid rgba(139, 92, 246, 0.15);
}

.chat-input-bar {
    display: flex;
    gap: 12px;
}

.chat-input-bar input {
    flex: 1;
    background-color: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    border-radius: var(--border-radius-md);
    padding: 12px 16px;
    outline: none;
    font-family: inherit;
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

.chat-input-bar input:focus {
    border-color: var(--primary);
}

.hidden {
    display: none !important;
}

.badge-success {
    background-color: var(--success-bg);
    color: var(--success);
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--success);
    font-weight: 600;
}

/* ==========================================================================
   3. Kiosk / Receptionist View Styles
   ========================================================================== */

.kiosk-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100%;
    padding: 20px 0;
    overflow-y: auto;
}

.kiosk-card {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    width: 100%;
    max-width: 900px;
    min-height: 520px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.kiosk-visual {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
    border-right: 1px solid var(--card-border);
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.kiosk-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 25px;
}

.avatar-ring {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px dashed var(--primary);
    animation: rotateRing 15s linear infinite;
}

@keyframes rotateRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.kiosk-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: var(--glow-cyan);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.avatar-eyes {
    display: flex;
    gap: 15px;
    margin-bottom: 12px;
}

.eye {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: white;
    position: relative;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    animation: irisEyeGlanceAndBlink 5.5s infinite ease-in-out;
}

@keyframes irisEyeGlanceAndBlink {
    0%, 20% { transform: translate(0, 0) scaleY(1); }
    22% { transform: translate(0, 0) scaleY(0.1); }
    24% { transform: translate(0, 0) scaleY(1); }
    35% { transform: translate(3px, -1px) scaleY(1); }
    52% { transform: translate(3px, -1px) scaleY(1); }
    54% { transform: translate(3px, -1px) scaleY(0.1); }
    56% { transform: translate(-3px, 0.5px) scaleY(1); }
    74% { transform: translate(-3px, 0.5px) scaleY(1); }
    82% { transform: translate(0, 0) scaleY(1); }
    92% { transform: translate(0, 0) scaleY(1); }
    94% { transform: translate(0, 0) scaleY(0.1); }
    96%, 100% { transform: translate(0, 0) scaleY(1); }
}

.avatar-mouth {
    width: 25px;
    height: 8px;
    border-bottom: 2.5px solid #ffffff;
    border-radius: 0 0 12px 12px;
    transition: var(--transition-fast);
    transform-origin: top center;
    box-sizing: border-box;
}

.talking .avatar-mouth,
.iris-talking .avatar-mouth {
    animation: talkMouth 0.4s infinite alternate ease-in-out;
}

@keyframes talkMouth {
    0% {
        height: 5px;
        width: 22px;
        border-radius: 0 0 12px 12px;
        background-color: transparent;
        border-bottom: 2.5px solid #ffffff;
    }
    100% {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background-color: #ffffff;
        border: none;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
    }
}

/* Modifiers for FAB, Modals and Badges */
.avatar-eyes.size-fab {
    gap: 8px;
    margin-bottom: 6px;
}
.eye.size-fab {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}
.avatar-mouth.size-fab {
    width: 16px;
    height: 5px;
    border-bottom: 2px solid #ffffff;
    border-radius: 0 0 8px 8px;
}

.talking .avatar-mouth.size-fab,
.iris-talking .avatar-mouth.size-fab {
    animation: talkMouthFab 0.4s infinite alternate ease-in-out;
}

@keyframes talkMouthFab {
    0% {
        height: 3px;
        width: 14px;
        border-radius: 0 0 8px 8px;
        background-color: transparent;
        border-bottom: 2px solid #ffffff;
    }
    100% {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background-color: #ffffff;
        border: none;
        box-shadow: 0 0 7px rgba(255, 255, 255, 0.85);
    }
}

.avatar-eyes.size-sm {
    gap: 6px;
    margin-bottom: 4px;
}
.eye.size-sm {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}
.avatar-mouth.size-sm {
    width: 12px;
    height: 4px;
    border-bottom: 1.5px solid #ffffff;
    border-radius: 0 0 6px 6px;
}

.kiosk-voice-wave {
    display: flex;
    gap: 4px;
    height: 20px;
    align-items: center;
    margin-bottom: 15px;
}

.kiosk-voice-wave span {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--primary);
    transition: var(--transition-fast);
}

.talking .kiosk-voice-wave span {
    animation: bounceBar 0.5s infinite alternate;
}

.talking .kiosk-voice-wave span:nth-child(2) { animation-delay: 0.1s; }
.talking .kiosk-voice-wave span:nth-child(3) { animation-delay: 0.2s; }
.talking .kiosk-voice-wave span:nth-child(4) { animation-delay: 0.3s; }
.talking .kiosk-voice-wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes bounceBar {
    0% { height: 4px; }
    100% { height: 20px; }
}

#kiosk-speech-bubble {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin-bottom: 25px;
    min-height: 60px;
    max-width: 260px;
}

.kiosk-form-panel {
    padding: 30px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.kiosk-progress {
    margin-bottom: 25px;
}

.progress-bar-fill {
    height: 6px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
    transition: width var(--transition-normal);
}

.progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 6px;
    text-align: right;
    font-weight: 600;
}

.kiosk-steps-wrapper {
    flex: 1;
    position: relative;
    overflow-y: auto;
}

.kiosk-step {
    display: none;
    flex-direction: column;
    overflow-y: auto;
}

.kiosk-step.active {
    display: flex;
    animation: stepFade 0.4s ease-out;
}

@keyframes stepFade {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
}

.kiosk-step h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.kiosk-step p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.kiosk-options-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.kiosk-option-btn {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    padding: 16px 20px;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: var(--transition-normal);
    text-align: left;
    outline: none;
}

.kiosk-option-btn:hover {
    background-color: rgba(0, 242, 254, 0.05);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.option-title {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.option-desc {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.kiosk-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.kiosk-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--card-border);
    padding: 12px 14px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.kiosk-checkbox:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.kiosk-checkbox input[type="checkbox"] {
    display: none;
}

.checkbox-box {
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-muted);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.kiosk-checkbox input[type="checkbox"]:checked + .checkbox-box {
    border-color: var(--primary);
    background-color: var(--primary);
}

.kiosk-checkbox input[type="checkbox"]:checked + .checkbox-box::after {
    content: "✓";
    font-size: 0.65rem;
    color: #04080f;
    font-weight: 900;
}

.checkbox-label {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.kiosk-step-actions {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 15px;
}

.success-icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.registered-summary-card {
    background-color: var(--success-bg);
    border: 1px solid var(--success);
    border-radius: var(--border-radius-md);
    padding: 15px;
    text-align: center;
    margin-top: 10px;
}

.registered-summary-card h4 {
    color: var(--success);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.registered-summary-card p {
    color: var(--text-primary);
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.registered-summary-card .badge {
    background-color: var(--success);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 20px;
}

/* ==========================================================================
   4. Audio Clinical History / Consult View Styles
   ========================================================================== */

.clinical-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 25px;
    min-height: calc(100vh - var(--header-height) - 70px);
    overflow: visible;
}

.clinical-file-card {
    display: flex;
    flex-direction: column;
}

.patient-selector-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.patient-selector-group label {
    font-weight: 600;
    color: var(--text-primary);
}

.odontogram-section {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.odontogram-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.badge-blue {
    background-color: var(--info-bg);
    color: var(--info);
    border: 1px solid var(--info);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
}

.odontogram-visualization {
    background-color: rgba(9, 13, 22, 0.4);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.teeth-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.row-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.teeth-group {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Official FDI / OMS Dental Symbology (Golden Rule: Blue = Existing/Good | Red = Pathology/Required) */
.tooth-box {
    position: relative;
    width: 42px;
    height: 56px;
    background-color: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px;
    cursor: pointer;
    transition: var(--transition-fast);
    user-select: none;
}

.tooth-box:hover {
    transform: translateY(-2px);
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.tooth-box.active-selected {
    border-color: #a855f7 !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.6) !important;
}

.tooth-num {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    line-height: 1;
}

.tooth-shape-wrapper {
    position: relative;
    width: 26px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooth-shape {
    width: 22px;
    height: 24px;
    border-radius: 6px 6px 10px 10px;
    background-color: #f8fafc;
    transition: var(--transition-normal);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
    position: relative;
}

/* 1. Sano (White) */
.tooth-box.healthy .tooth-shape {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
}

/* 2. Caries Activa (Red Fill) */
.tooth-box.caries .tooth-shape {
    background-color: #dc2626;
    border: 1px solid #ef4444;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3), 0 0 12px rgba(220, 38, 38, 0.65);
}

/* 3. Caries Recurrente / Secundaria (Blue Outline + Red Core) */
.tooth-box.caries_recurrent .tooth-shape {
    background-color: #dc2626;
    border: 3px solid #2563eb;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
}

/* 4. Resina / Obturación Buen Estado (Blue Fill) */
.tooth-box.treated .tooth-shape,
.tooth-box.resina .tooth-shape {
    background-color: #2563eb;
    border: 1px solid #3b82f6;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3), 0 0 10px rgba(37, 99, 235, 0.6);
}

/* 5. Resina Defectuosa (Red Hatched Fill) */
.tooth-box.resina_defective .tooth-shape {
    background: repeating-linear-gradient(45deg, #dc2626, #dc2626 4px, #7f1d1d 4px, #7f1d1d 8px);
    border: 1px solid #ef4444;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
}

/* 6. Fractura (Red Diagonal Lines //) */
.tooth-box.fracture .tooth-shape::after {
    content: '//';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ef4444;
    font-weight: 900;
    font-size: 1.1rem;
    text-shadow: 0 0 4px #000;
}

/* 7. Endodoncia Realizada (Blue Vertical Line) */
.tooth-box.endo .tooth-shape::before {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background-color: #2563eb;
    border-radius: 2px;
    box-shadow: 0 0 8px #2563eb;
}

/* 8. Endodoncia Indicada / Re-tratamiento (Red Vertical Line) */
.tooth-box.endo_needed .tooth-shape::before {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background-color: #dc2626;
    border-radius: 2px;
    box-shadow: 0 0 8px #dc2626;
}

/* 9. Corona / Carilla Existente (Blue Perimeter Ring) */
.tooth-box.corona .tooth-shape {
    background-color: transparent;
    border: 3px solid #2563eb;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
}

/* 10. Corona Defectuosa (Red Perimeter Ring) */
.tooth-box.corona_defective .tooth-shape {
    background-color: transparent;
    border: 3px solid #dc2626;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
}

/* 11. Implante Integrado (Blue Screw Icon) */
.tooth-box.implante .tooth-shape {
    background-color: rgba(37, 99, 235, 0.2);
    border: 2px dashed #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tooth-box.implante .tooth-shape::after {
    content: '⚙️';
    font-size: 0.82rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* 12. Implante Planificado (Red Screw Icon) */
.tooth-box.implante_planned .tooth-shape {
    background-color: rgba(220, 38, 38, 0.2);
    border: 2px dashed #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tooth-box.implante_planned .tooth-shape::after {
    content: '⚙️';
    font-size: 0.82rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* 13. Diente Ausente (Blue X Centered inside Tooth Shape) */
.tooth-box.missing .tooth-shape {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid #475569;
    position: relative;
}
.tooth-box.missing .tooth-shape::after {
    content: '✕';
    position: absolute;
    color: #2563eb;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* 14. Extracción Indicada (Red X Centered inside Tooth Shape) */
.tooth-box.extraction_needed .tooth-shape {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid #475569;
    position: relative;
}
.tooth-box.extraction_needed .tooth-shape::after {
    content: '✕';
    position: absolute;
    color: #dc2626;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* 15. Sellador (Blue Badge S) */
.tooth-box.sealant .tooth-shape::after {
    content: 'S';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2563eb;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 16. Resto Radicular (Red Badge RR con contorno) */
.tooth-box.root_rest .tooth-shape {
    background-color: rgba(220, 38, 38, 0.18) !important;
    border: 1px solid #ef4444 !important;
}
.tooth-box.root_rest .tooth-shape::after {
    content: 'RR';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 4px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
    pointer-events: none;
    z-index: 2;
}

/* 17. Desgaste / Atrición (Red Incisal Top Bar) */
.tooth-box.wear .tooth-shape {
    background-color: #f8fafc;
    border: 1px solid #ef4444;
}
.tooth-box.wear .tooth-shape::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 4px;
    background-color: #dc2626;
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 6px #ef4444;
}

/* 4-Row Invisible Grid for Odontogram Tool Buttons */
#odontogram-tool-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-items: stretch;
    margin-top: 8px;
}

@media (max-width: 1200px) {
    #odontogram-tool-buttons {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    #odontogram-tool-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}

.btn-tool-diag {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 3px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    height: 30px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    box-sizing: border-box;
}

.btn-tool-diag:hover {
    transform: translateY(-1px);
    border-color: #38bdf8;
    background: rgba(30, 41, 59, 0.9);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(56, 189, 248, 0.25);
}

.btn-tool-diag.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(56, 189, 248, 0.35)) !important;
    border-color: #a855f7 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5) !important;
    font-weight: 700;
}

/* Micro Preview Icons inside buttons matching TOOTH SHAPE exactly */
.btn-diag-preview {
    width: 14px;
    height: 17px;
    border-radius: 4px 4px 6px 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.btn-diag-preview.preview-healthy {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
}

.btn-diag-preview.preview-caries {
    background-color: #dc2626;
    border: 1px solid #ef4444;
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.6);
}

.btn-diag-preview.preview-caries_recurrent {
    background-color: #dc2626;
    border: 2px solid #2563eb;
}

.btn-diag-preview.preview-resina {
    background-color: #2563eb;
    border: 1px solid #3b82f6;
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
}

.btn-diag-preview.preview-resina_defective {
    background: repeating-linear-gradient(45deg, #dc2626, #dc2626 3px, #7f1d1d 3px, #7f1d1d 6px);
    border: 1px solid #ef4444;
}

.btn-diag-preview.preview-fracture {
    background-color: #f8fafc;
    border: 1px solid #ef4444;
    color: #dc2626;
    font-weight: 900;
    font-size: 0.65rem;
}

.btn-diag-preview.preview-endo {
    background-color: #f8fafc;
    border: 1px solid #3b82f6;
}
.btn-diag-preview.preview-endo::before {
    content: '';
    width: 3px;
    height: 11px;
    background-color: #2563eb;
    border-radius: 1px;
}

.btn-diag-preview.preview-endo_needed {
    background-color: #f8fafc;
    border: 1px solid #ef4444;
}
.btn-diag-preview.preview-endo_needed::before {
    content: '';
    width: 3px;
    height: 11px;
    background-color: #dc2626;
    border-radius: 1px;
}

.btn-diag-preview.preview-corona {
    background-color: transparent;
    border: 2px solid #2563eb;
}

.btn-diag-preview.preview-corona_defective {
    background-color: transparent;
    border: 2px solid #dc2626;
}

.btn-diag-preview.preview-implante {
    background-color: rgba(37, 99, 235, 0.2);
    border: 1px dashed #2563eb;
    font-size: 0.65rem;
}

.btn-diag-preview.preview-implante_planned {
    background-color: rgba(220, 38, 38, 0.2);
    border: 1px dashed #dc2626;
    font-size: 0.65rem;
}

.btn-diag-preview.preview-missing {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid #475569;
    color: #2563eb;
    font-weight: 900;
    font-size: 0.8rem;
}

.btn-diag-preview.preview-extraction_needed {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid #475569;
    color: #dc2626;
    font-weight: 900;
    font-size: 0.8rem;
}

.btn-diag-preview.preview-wear {
    background-color: #f8fafc;
    border: 1px solid #ef4444;
    position: relative;
}
.btn-diag-preview.preview-wear::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 3px;
    background-color: #dc2626;
    border-radius: 1px 1px 0 0;
}

.btn-diag-preview.preview-root_rest {
    background-color: #f8fafc;
    border: 1px solid #ef4444;
    color: #dc2626;
    font-weight: 900;
    font-size: 0.5rem;
}

.btn-diag-preview.preview-sealant {
    background-color: #2563eb;
    color: #fff;
    font-weight: 800;
    font-size: 0.55rem;
}

.odontogram-legend {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 20px;
}

.tooth-marker {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
}

.marker-healthy { background-color: #f8fafc; border: 1px solid var(--text-muted); }
.marker-caries { background-color: var(--danger); }
.marker-treated { background-color: var(--success); }

.recorder-card {
    display: flex;
    flex-direction: column;
}

.audio-console {
    background-color: rgba(9, 13, 22, 0.4);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    padding: 15px 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-audio {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-end));
    color: white;
    box-shadow: var(--glow-violet);
    padding: 12px 20px;
}

.btn-audio:hover {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
}

.pulse-mic-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recording .pulse-mic-icon {
    animation: micPulse 1.2s infinite;
}

@keyframes micPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.5; color: var(--danger); }
    100% { transform: scale(1); opacity: 1; }
}

#btn-audio-record.processing,
.btn-audio.processing {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid #38bdf8 !important;
    color: #38bdf8 !important;
    cursor: wait !important;
    opacity: 0.95 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important;
    animation: btnProcessingPulse 1.5s infinite ease-in-out !important;
}

@keyframes btnProcessingPulse {
    0% { box-shadow: 0 0 8px rgba(56, 189, 248, 0.3); border-color: rgba(56, 189, 248, 0.6); }
    50% { box-shadow: 0 0 22px rgba(56, 189, 248, 0.7); border-color: #38bdf8; }
    100% { box-shadow: 0 0 8px rgba(56, 189, 248, 0.3); border-color: rgba(56, 189, 248, 0.6); }
}

.audio-visualizer-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

#audio-wave-canvas {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-sm);
    width: 200px;
    height: 40px;
}

.audio-timer {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.transcript-box {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-md);
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 120px;
    margin-bottom: 15px;
}

.transcript-box h4 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.transcript-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.5;
    flex: 1;
    overflow-y: auto;
    font-style: italic;
    white-space: pre-line;
    text-align: left !important;
    text-indent: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Campos de la Ficha Diagnóstica Iris (Fondo oscuro pulcro en lugar de blanco) */
#clinical-extracted-diagnosis,
#clinical-extracted-treatment,
#clinical-extracted-notes {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    border-radius: var(--border-radius-md);
    padding: 10px 14px;
    font-size: 0.9rem;
}

#clinical-extracted-diagnosis:focus,
#clinical-extracted-treatment:focus,
#clinical-extracted-notes:focus {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: #c084fc !important;
    box-shadow: 0 0 14px rgba(192, 132, 252, 0.35) !important;
}

/* Iris Integrated Action Options Panel (Botonera directa limpia) */
.iris-actions-container {
    margin-top: 15px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(56, 189, 248, 0.08));
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

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

.iris-actions-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f3e8ff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.iris-actions-direct-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.iris-actions-direct-bar .btn {
    flex: 1 1 auto;
    min-width: 140px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
}

.iris-actions-direct-bar .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.ai-extracted-results {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.05), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(0, 242, 254, 0.2);
    border-radius: var(--border-radius-lg);
}

.extracted-header {
    background-color: rgba(0, 242, 254, 0.08);
    padding: 10px 15px;
    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
    display: flex;
    align-items: center;
    gap: 8px;
}

.extracted-header h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
}

/* ==========================================================================
   5. Budgets and Invoices View Styles
   ========================================================================== */

.billing-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 25px;
    min-height: calc(100vh - var(--header-height) - 70px);
    overflow: visible;
}

.budget-editor-card {
    display: flex;
    flex-direction: column;
}

.table-container {
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-md);
    overflow: visible;
    background-color: rgba(9, 13, 22, 0.4);
    max-height: none;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.table th, .table td {
    padding: 10px 12px;
}

.table th {
    background-color: rgba(15, 23, 42, 0.8);
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--card-border);
}

.table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.billing-summary-block {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 20px;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    padding: 15px;
    border-radius: var(--border-radius-md);
}

.summary-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-inputs input {
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
}

.summary-totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.summary-row.highlight {
    border-top: 1px solid var(--card-border);
    padding-top: 8px;
    margin-top: 4px;
    color: var(--primary);
    font-size: 1rem;
}

.invoice-preview-card {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    position: sticky;
    top: 20px;
}

.invoice-container {
    flex: 1;
    background-color: #1e293b;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.invoice-paper {
    background-color: white;
    color: #1e293b;
    width: 100%;
    max-width: 500px;
    min-height: 640px;
    aspect-ratio: 8.5 / 11;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    padding: 30px;
    border-radius: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.invoice-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 3rem;
    font-weight: 800;
    color: rgba(30, 41, 59, 0.06);
    pointer-events: none;
    letter-spacing: 5px;
}

.invoice-paper-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.company-details h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
}

.company-details p {
    color: #64748b;
    font-size: 0.75rem;
    margin-top: 2px;
}

.doc-meta {
    text-align: right;
}

.doc-meta h1 {
    font-size: 0.95rem;
    font-weight: 800;
    white-space: nowrap;
    color: #0284c7;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.doc-meta p {
    font-size: 0.75rem;
    margin-top: 3px;
    color: #475569;
}

.doc-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.65rem;
}

.doc-badge.badge-pending {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid #f59e0b;
    color: #fbbf24;
}

.doc-badge.badge-paid {
    background-color: #d1fae5;
    color: #059669;
}

.divider {
    border: none;
    border-top: 1.5px solid #e2e8f0;
    margin: 15px 0;
}

.invoice-paper-billing h4 {
    color: #64748b;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.invoice-paper-billing h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.invoice-paper-billing p {
    color: #64748b;
    font-size: 0.75rem;
    margin-top: 2px;
}

.invoice-paper-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.8rem;
}

.invoice-paper-table th {
    border-bottom: 2px solid #e2e8f0;
    color: #475569;
    font-weight: 700;
    padding: 8px 4px;
    text-align: left;
}

.invoice-paper-table td {
    padding: 8px 4px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

.invoice-paper-totals {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.totals-block {
    width: 180px;
}

.paper-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    color: #475569;
}

.paper-row.grand-total {
    border-top: 2px solid #e2e8f0;
    padding-top: 6px;
    margin-top: 4px;
    color: #0f172a;
    font-size: 0.95rem;
}

.invoice-paper-footer {
    text-align: center;
    margin-top: 25px;
    color: #94a3b8;
    font-size: 0.7rem;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

.invoice-paper-footer p.small {
    margin-top: 2px;
    color: #cbd5e1;
}

/* ==========================================================================
   6. Accounting View Styles
   ========================================================================== */

#view-accounting {
    max-height: calc(100vh - var(--header-height) - 40px);
    overflow-y: auto;
    padding-right: 6px;
}

.accounting-grid {
    display: grid;
    grid-template-columns: minmax(640px, 880px) 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    align-items: start;
    padding-bottom: 40px;
}

.catalog-management-card {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 880px;
}

.integrations-card {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 880px;
    display: flex;
    flex-direction: column;
}

.integration-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--card-border);
    padding: 16px;
    border-radius: var(--border-radius-lg);
    transition: var(--transition-normal);
}

.integration-row:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background-color: rgba(15, 23, 42, 0.6);
}

.integration-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.integration-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #04080f;
    flex-shrink: 0;
}

.integration-text h4 {
    font-size: 0.95rem;
    font-weight: 700;
}

.integration-text p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

.integration-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-left: 15px;
}

.switch-status {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

.switch-status.connected {
    color: var(--success);
    text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
}

/* Switch UI Control */
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #334155;
    transition: .3s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
}

input:checked + .slider {
    background: linear-gradient(135deg, var(--primary), var(--primary-end));
}

input:checked + .slider:before {
    transform: translateX(22px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

.logs-card {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 600px;
}

.log-console-wrapper {
    flex: 1;
    padding: 0 20px 20px 20px;
    display: flex;
}

.log-console {
    flex: 1;
    background-color: #020617;
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-md);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    padding: 15px;
    overflow-y: auto;
    color: #a7f3d0; /* Soft neon green terminal text */
    line-height: 1.6;
}

.log-entry {
    margin-bottom: 6px;
    word-break: break-all;
}

.log-entry.error {
    color: #fca5a5;
}

.log-entry.info {
    color: #38bdf8;
}

.log-entry.success {
    color: #34d399;
}

/* ==========================================================================
.header-time {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 0;
    transition: all 0.3s ease;
    user-select: none;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.status-dot.green {
    background-color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}

.status-dot.amber {
    background-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
    animation: statusPulseAnim 1s infinite alternate;
}

.status-dot.red {
    background-color: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}

@keyframes statusPulseAnim {
    from { opacity: 0.5; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.15); }
}



/* ==========================================================================
   Módulo de Agenda y Calendario Clínico (Estilos Premium)
   ========================================================================== */
.calendar-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    height: calc(100vh - 150px);
    min-height: 620px;
    overflow: hidden;
}

@media (max-width: 1100px) {
    .calendar-layout-grid {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }
}

.user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.user-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.user-role {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-top: 2px;
}

.btn-sidebar-logout, #btn-logout-session {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    margin-left: auto;
}

.btn-sidebar-logout:hover, #btn-logout-session:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: rgba(239, 68, 68, 0.7) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

.calendar-main-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 600px;
    overflow: hidden;
}

.calendar-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px 15px 75px 15px;
    overflow-y: auto;
}

.cal-weekdays-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    text-align: center;
    font-weight: 700;
    color: #38bdf8;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
}

.cal-days-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(110px, 1fr);
    gap: 8px;
    flex: 1;
    padding-bottom: 40px;
}

.cal-day {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 6px 7px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    min-height: 110px;
    min-width: 0;
    overflow: hidden;
}

/* Pill de conteo excedente (+N más) */
.cal-more-pill {
    font-size: 0.72rem;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px dashed rgba(56, 189, 248, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 2px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-more-pill:hover {
    background: rgba(56, 189, 248, 0.25);
    border-color: #38bdf8;
    transform: scale(1.02);
}

/* Popover Flotante de Vista Previa al Pasar el Cursor */
.cal-hover-popover {
    position: fixed;
    z-index: 100050;
    background: rgba(15, 23, 42, 0.97);
    border: 1px solid rgba(56, 189, 248, 0.45);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.2);
    backdrop-filter: blur(16px);
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 250px;
    max-width: 320px;
    pointer-events: none;
    transition: opacity 0.15s ease;
    animation: fadeIn 0.15s ease-out;
}
.cal-hover-popover .popover-header {
    font-size: 0.82rem;
    font-weight: 700;
    color: #38bdf8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 6px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cal-hover-popover .popover-item {
    font-size: 0.76rem;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f8fafc;
}
.cal-hover-popover .popover-item:last-child {
    border-bottom: none;
}

/* Modal Drawer de Agenda Diaria */
.cal-daily-drawer-card {
    width: 94%;
    max-width: 600px;
    max-height: 85vh;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUpFade 0.25s ease-out;
}
.cal-daily-drawer-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(30, 41, 59, 0.5);
}
.cal-daily-drawer-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cal-daily-drawer-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.8);
}

.cal-day:hover {
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(15, 23, 42, 0.85);
    transform: translateY(-2px);
}

.cal-day.empty-day {
    opacity: 0.3;
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.cal-day.today {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.15);
}

.cal-day.today .day-number {
    background: #0284c7;
    color: #ffffff;
    font-weight: bold;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.day-number {
    font-size: 0.82rem;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.day-events-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
}

/* Calendar Toolbar Filter Badges */
.cal-filter-btn {
    font-size: 0.76rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    outline: none;
}

.cal-filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cal-filter-btn.active {
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
    border-color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.2) !important;
    color: #ffffff !important;
}

.cal-filter-btn.status-confirmed {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #34d399 !important;
}
.cal-filter-btn.status-confirmed.active {
    background: rgba(16, 185, 129, 0.35) !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5) !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
}

.cal-filter-btn.status-pending {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    color: #fbbf24 !important;
}
.cal-filter-btn.status-pending.active {
    background: rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5) !important;
    color: #ffffff !important;
    border-color: #f59e0b !important;
}

.cal-filter-btn.status-urgent {
    background: rgba(234, 88, 12, 0.18) !important;
    border: 1px solid rgba(234, 88, 12, 0.5) !important;
    color: #fb923c !important;
}
.cal-filter-btn.status-urgent.active {
    background: rgba(234, 88, 12, 0.35) !important;
    box-shadow: 0 0 12px rgba(234, 88, 12, 0.5) !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
}

.cal-filter-btn.status-waiting {
    background: rgba(168, 85, 247, 0.15) !important;
    border: 1px solid rgba(168, 85, 247, 0.5) !important;
    color: #c084fc !important;
}
.cal-filter-btn.status-waiting.active {
    background: rgba(168, 85, 247, 0.35) !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.5) !important;
    color: #ffffff !important;
    border-color: #a855f7 !important;
}

#btn-manage-visiting-doctors:hover {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: #fbbf24 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
}

#btn-open-new-appointment:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3) !important;
}

#btn-open-voice-appointment:hover {
    background: rgba(168, 85, 247, 0.15) !important;
    border-color: #c084fc !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.3) !important;
}

.cal-filter-btn.status-completed {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #e2e8f0 !important;
}
.cal-filter-btn.status-completed.active {
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    border-color: #f8fafc !important;
}

.cal-filter-btn.status-cancelled {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    color: #f87171 !important;
}
.cal-filter-btn.status-cancelled.active {
    background: rgba(239, 68, 68, 0.35) !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5) !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

/* Event Pill Cards in Calendar Grid (Homologadas con Semáforo Clínico ERP) */
.cal-event-pill {
    font-size: 0.71rem;
    font-weight: 600;
    padding: 2.5px 6px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.15s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f8fafc;
    line-height: 1.25;
}

.cal-event-pill:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Cyan / Blue - Agendadas / Confirmadas por Llegar */
.cal-event-pill.status-confirmed,
.cal-event-pill.status-confirmada,
.cal-event-pill.status-scheduled,
.cal-event-pill.status-agendado {
    background: rgba(56, 189, 248, 0.20) !important;
    border: 1px solid rgba(56, 189, 248, 0.7) !important;
    border-left: 4px solid #38bdf8 !important;
    color: #bae6fd !important;
}

/* Green - En Consulta / En Gabinete Activo con el Doctor */
.cal-event-pill.status-in_consultation,
.cal-event-pill.status-in_consult,
.cal-event-pill.status-consulta {
    background: rgba(16, 185, 129, 0.22) !important;
    border: 1px solid rgba(16, 185, 129, 0.7) !important;
    border-left: 4px solid #10b981 !important;
    color: #a7f3d0 !important;
}

/* Amber/Yellow - Pendientes */
.cal-event-pill.status-pending,
.cal-event-pill.status-pendiente {
    background: rgba(245, 158, 11, 0.22) !important;
    border: 1px solid rgba(245, 158, 11, 0.7) !important;
    border-left: 4px solid #f59e0b !important;
    color: #fde68a !important;
}

/* Purple/Violet - En Sala de Espera */
.cal-event-pill.status-waiting,
.cal-event-pill.status-esperando {
    background: rgba(168, 85, 247, 0.22) !important;
    border: 1px solid rgba(168, 85, 247, 0.7) !important;
    border-left: 4px solid #a855f7 !important;
    color: #e9d5ff !important;
}

/* Dark Orange - Urgencias */
.cal-event-pill.status-urgent,
.cal-event-pill.status-urgente,
.cal-event-pill.status-urgencia {
    background: rgba(234, 88, 12, 0.22) !important;
    border: 1px solid rgba(234, 88, 12, 0.7) !important;
    border-left: 4px solid #ea580c !important;
    color: #fed7aa !important;
}

/* White / Slate - Completadas / Atendidas / Concluidas */
.cal-event-pill.status-completed,
.cal-event-pill.status-attended,
.cal-event-pill.status-atendido {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-left: 4px solid #f8fafc !important;
    color: #f1f5f9 !important;
}

/* Red - Canceladas */
.cal-event-pill.status-cancelled,
.cal-event-pill.status-cancelado {
    background: rgba(239, 68, 68, 0.22) !important;
    border: 1px solid rgba(239, 68, 68, 0.7) !important;
    border-left: 4px solid #ef4444 !important;
    color: #fecaca !important;
}

/* Especialista Visitante - Borde Ámbar Prioritario (Opción 1: sin iconos) */
.cal-event-pill.event-visiting {
    border-left: 5px solid #f59e0b !important;
    box-shadow: -2px 0 8px rgba(245, 158, 11, 0.45) !important;
}

/* ==========================================================================
   🏥 Medical Alert Strip & Clinical Risk Badges (Homologado Universal)
   ========================================================================== */
.medical-alert-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 12px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    margin-top: 6px;
    margin-bottom: 6px;
}
.medical-alert-strip .alert-title {
    font-size: 0.74rem;
    font-weight: 800;
    color: #f87171;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.medical-alert-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.medical-alert-badge.danger {
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.45);
}
.medical-alert-badge.warning {
    background: rgba(245, 158, 11, 0.25);
    color: #fde047;
    border: 1px solid rgba(245, 158, 11, 0.45);
}
.medical-alert-strip.safe {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #94a3b8;
    font-size: 0.76rem;
}

/* ==========================================================================
   📋 Canonical Clinical Pass Button (.btn-clinical-pass)
   ========================================================================== */
.btn-clinical-pass {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 6px;
    color: #38bdf8;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}
.btn-clinical-pass:hover {
    background: rgba(56, 189, 248, 0.3);
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
    transform: translateY(-1px);
    color: #ffffff;
}

/* ==========================================================================
   📊 Canonical ERP Table (.cadmus-table) & Empty State
   ========================================================================== */
.cadmus-table-wrapper {
    background: var(--bg-glass-card);
    border: 1px solid var(--border-glass-card);
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: var(--card-shadow);
}
.cadmus-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}
.cadmus-table th {
    background: rgba(15, 23, 42, 0.8);
    padding: 12px 16px;
    color: #94a3b8;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}
.cadmus-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    transition: background 0.15s ease;
}
.cadmus-table tr:hover td {
    background: rgba(56, 189, 248, 0.05);
}
.table-empty-state {
    padding: 36px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.table-empty-state .empty-icon {
    font-size: 2rem;
    opacity: 0.7;
}

.cal-event-pill .event-time {
    font-weight: 700;
    font-size: 0.72rem;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    line-height: 1;
    flex-shrink: 0;
}

.cal-event-pill .event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}


/* @media print para Hoja Oficial de Receta Médica */
@media print {
    body * {
        visibility: hidden !important;
    }
    
    #modal-print-prescription,
    #modal-print-prescription * {
        visibility: visible !important;
    }

    #modal-print-prescription {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .no-print {
        display: none !important;
    }

    #print-prescription-paper {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* Helper rules for RBAC and Sensitive Data Masking */
body.kiosk-mode .sidebar {
    display: none !important;
}

body.kiosk-mode .main-content {
    margin-left: 0 !important;
    width: 100% !important;
}

.sensitive-masked {
    filter: blur(6px) !important;
    user-select: none !important;
    pointer-events: none !important;
    opacity: 0.5 !important;
}

.btn-demo-profile {
    transition: all 0.2s ease-in-out;
}

.btn-demo-profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    filter: brightness(1.2);
}


/* Dev Mode / Simulator Tools Toggle */
body:not(.dev-mode-active) .sim-tool {
    display: none !important;
}

/* SaaS Authentication & Active Session Visibility Rules */
body:not(.session-active) .app-container {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body:not(.session-active) #auth-login-container {
    display: flex !important;
}

body.session-active .app-container {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease;
}

body.session-active #auth-login-container,
body.session-active #auth-splash-overlay {
    display: none !important;
    pointer-events: none !important;
}

/* ==========================================================================
   SaaS Authentication & Splash Screen Styling (Cadmus Core)
   ========================================================================== */

#auth-splash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background: radial-gradient(circle at center, #1e1b4b 0%, #0b0f19 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#auth-splash-overlay.fade-out {
    opacity: 0;
    transform: scale(1.05);
    pointer-events: none;
}

.splash-brand-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: splashPulse 2s infinite ease-in-out;
}

.iris-glowing-orb {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #c084fc, #38bdf8 60%, #4f46e5);
    box-shadow: 0 0 40px rgba(192, 132, 252, 0.6), 0 0 80px rgba(56, 189, 248, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    animation: orbFloat 3s infinite ease-in-out;
}

@keyframes orbFloat {
    0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 40px rgba(192, 132, 252, 0.6); }
    50% { transform: translateY(-8px) scale(1.04); box-shadow: 0 0 60px rgba(56, 189, 248, 0.8); }
}

@keyframes splashPulse {
    0%, 100% { opacity: 0.95; }
    50% { opacity: 1; }
}

#auth-login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999990;
    background: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.12), transparent 40%),
                radial-gradient(circle at 20% 80%, rgba(192, 132, 252, 0.12), transparent 40%),
                #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.glass-login-card {
    max-width: 440px;
    width: 100%;
    background: rgba(30, 41, 59, 0.78);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 32px 28px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7),
                0 0 30px rgba(56, 189, 248, 0.1);
    color: #f8fafc;
}

.login-header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.login-header-logo img {
    height: 38px;
}

.role-pill-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.role-pill-btn:hover {
    background: rgba(56, 189, 248, 0.18);
    border-color: #38bdf8;
    color: #ffffff;
    transform: translateY(-1px);
}

.pulse-glow {
    animation: buttonPulseGlow 1.2s ease-in-out;
}

@keyframes buttonPulseGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(56, 189, 248, 0); }
    50% { box-shadow: 0 0 20px rgba(56, 189, 248, 0.8); }
}

/* ==========================================================================
   Cadmus Core - Homologated Skins System ([data-skin])
   ========================================================================== */

/* 1. Dark Executive (Medianoche - Default) */
body[data-skin="dark_executive"] {
    --primary-color: #38bdf8;
    --primary-gradient: linear-gradient(135deg, #0284c7, #4f46e5);
    --accent-color: #818cf8;
}

/* 2. Enclave Terracota (Bronce Corporativo #C77B58) */
body[data-skin="enclave_terracotta"], body[data-theme="enclave"] {
    --primary-color: #C77B58;
    --primary-gradient: linear-gradient(135deg, #C77B58, #9a5332);
    --accent-color: #e09f7d;
}

/* 3. Light Clinical (Blanco Clínico / Modo Día) */
body[data-skin="light_clinical"] {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    --primary-color: #0284c7;
    --primary-gradient: linear-gradient(135deg, #0284c7, #2563eb);
    --accent-color: #3b82f6;
}
body[data-skin="light_clinical"] .sidebar {
    background: #ffffff !important;
    border-right: 1px solid #cbd5e1 !important;
}
body[data-skin="light_clinical"] .main-content {
    background: #f8fafc !important;
}
body[data-skin="light_clinical"] .glass-card,
body[data-skin="light_clinical"] .kpi-card,
body[data-skin="light_clinical"] .tab-view {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* 4. Blue Ocean (Azul Marino Profesional) */
body[data-skin="blue_ocean"] {
    background-color: #061124 !important;
    --primary-color: #00d2ff;
    --primary-gradient: linear-gradient(135deg, #005bea, #00c6fb);
    --accent-color: #38bdf8;
}
body[data-skin="blue_ocean"] .sidebar {
    background: #091936 !important;
    border-right: 1px solid rgba(0, 210, 255, 0.2) !important;
}
body[data-skin="blue_ocean"] .main-content {
    background: #061124 !important;
}
body[data-skin="blue_ocean"] .menu-item.active {
    background: linear-gradient(135deg, rgba(0, 91, 234, 0.4), rgba(0, 210, 255, 0.2)) !important;
    border-left: 4px solid #00d2ff !important;
    color: #00d2ff !important;
}
body[data-skin="blue_ocean"] .btn-primary {
    background: linear-gradient(135deg, #005bea, #00c6fb) !important;
    box-shadow: 0 4px 15px rgba(0, 91, 234, 0.4) !important;
}
body[data-skin="blue_ocean"] .glass-card,
body[data-skin="blue_ocean"] .kpi-card {
    background: rgba(9, 25, 54, 0.85) !important;
    border-color: rgba(0, 210, 255, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 91, 234, 0.15) !important;
}

/* 5. Emerald Health (Verde Esmeralda Salud) */
body[data-skin="emerald_health"] {
    background-color: #032018 !important;
    --primary-color: #10b981;
    --primary-gradient: linear-gradient(135deg, #059669, #10b981);
    --accent-color: #34d399;
}
body[data-skin="emerald_health"] .sidebar {
    background: #04382a !important;
    border-right: 1px solid rgba(16, 185, 129, 0.25) !important;
}
body[data-skin="emerald_health"] .main-content {
    background: #032018 !important;
}
body[data-skin="emerald_health"] .menu-item.active {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.4), rgba(52, 211, 153, 0.2)) !important;
    border-left: 4px solid #34d399 !important;
    color: #34d399 !important;
}
body[data-skin="emerald_health"] .btn-primary {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}
body[data-skin="emerald_health"] .glass-card,
body[data-skin="emerald_health"] .kpi-card {
    background: rgba(4, 56, 42, 0.85) !important;
    border-color: rgba(52, 211, 153, 0.25) !important;
    box-shadow: 0 10px 30px rgba(5, 150, 105, 0.15) !important;
}

/* 6. Swiss Editorial (Atelier Obsidian & Plus Jakarta Sans) */
body[data-skin="swiss_editorial"] {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-color: #08090a !important;
    color: #f3f4f6 !important;
    --primary-color: #f59e0b;
    --primary: #f59e0b;
    --primary-end: #d97706;
    --primary-gradient: linear-gradient(135deg, #f59e0b, #b45309);
    --accent-color: #fbbf24;
    --secondary: #14b8a6;
    --secondary-end: #0d9488;
    --bg-dark: #08090a;
    --bg-main: #0a0b0d;
    --bg-sidebar: #090a0c;
    --card-bg: #111215;
    --card-border: #1f2026;
    --card-hover-border: rgba(245, 158, 11, 0.4);
    --text-primary: #f8fafc;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --glow-cyan: 0 0 14px rgba(245, 158, 11, 0.3);
    --card-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.65);
}

body[data-skin="swiss_editorial"] * {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body[data-skin="swiss_editorial"],
body[data-skin="swiss_editorial"] .app-container {
    background-color: #08090a !important;
}

body[data-skin="swiss_editorial"] .sidebar {
    background: #090a0c !important;
    border-right: 1px solid #1a1b20 !important;
}

body[data-skin="swiss_editorial"] .sidebar-brand {
    border-bottom: 1px solid #1a1b20 !important;
}

body[data-skin="swiss_editorial"] .sidebar-user {
    background: #111215 !important;
    border: 1px solid #1c1d24 !important;
}

body[data-skin="swiss_editorial"] .main-content {
    background: #0a0b0d !important;
}

body[data-skin="swiss_editorial"] .main-header {
    background: #090a0c !important;
    border-bottom: 1px solid #1a1b20 !important;
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    max-height: var(--header-height) !important;
    flex-shrink: 0 !important;
}

body[data-skin="swiss_editorial"] .glass-card,
body[data-skin="swiss_editorial"] .kpi-card,
body[data-skin="swiss_editorial"] .tab-view {
    background: #111215 !important;
    border: 1px solid #1f2026 !important;
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: none !important;
}

body[data-skin="swiss_editorial"] .card-header {
    border-bottom-color: #1a1b20 !important;
}

body[data-skin="swiss_editorial"] .odontogram-visualization {
    background-color: #0e0f12 !important;
    border: 1px solid #1f2026 !important;
}

body[data-skin="swiss_editorial"] .tooth-box {
    background-color: #15161a !important;
    border: 1px solid #282a33 !important;
}

body[data-skin="swiss_editorial"] .tooth-box:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35) !important;
}

body[data-skin="swiss_editorial"] .whatsapp-chat-panel,
body[data-skin="swiss_editorial"] .chat-header {
    background-color: #0c0d10 !important;
    border-color: #1a1b20 !important;
}

body[data-skin="swiss_editorial"] .audio-visualizer-box {
    background: #0e0f12 !important;
    border-color: #24252e !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

body[data-skin="swiss_editorial"] .menu-item.active {
    background: rgba(245, 158, 11, 0.08) !important;
    border-left: 3px solid #f59e0b !important;
    color: #fbbf24 !important;
}

body[data-skin="swiss_editorial"] .menu-item.active svg {
    stroke: #fbbf24 !important;
}

body[data-skin="swiss_editorial"] .btn-primary {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    border: 1px solid rgba(251, 191, 36, 0.25) !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

body[data-skin="swiss_editorial"] .btn-primary:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.35) !important;
}

body[data-skin="swiss_editorial"] h1,
body[data-skin="swiss_editorial"] h2,
body[data-skin="swiss_editorial"] h3,
body[data-skin="swiss_editorial"] h4,
body[data-skin="swiss_editorial"] .brand-text,
body[data-skin="swiss_editorial"] .card-title,
body[data-skin="swiss_editorial"] #page-title {
    letter-spacing: -0.02em;
    font-weight: 700;
}

body[data-skin="swiss_editorial"] input:not([type="checkbox"]):not([type="radio"]),
body[data-skin="swiss_editorial"] select,
body[data-skin="swiss_editorial"] textarea {
    background: #0e0f12 !important;
    border: 1px solid #20222a !important;
    color: #f3f4f6 !important;
}

body[data-skin="swiss_editorial"] input:focus,
body[data-skin="swiss_editorial"] select:focus,
body[data-skin="swiss_editorial"] textarea:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}

body[data-skin="swiss_editorial"] .btn-secondary,
body[data-skin="swiss_editorial"] .btn-outline {
    background: #15161a !important;
    border: 1px solid #282a33 !important;
    color: #e5e7eb !important;
}

body[data-skin="swiss_editorial"] .btn-secondary:hover,
body[data-skin="swiss_editorial"] .btn-outline:hover {
    background: #1c1e24 !important;
    border-color: #3b3e4a !important;
    color: #ffffff !important;
}



/* --- Toast Global Notifications --- */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast-message {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
    font-size: 0.85rem;
    font-weight: 500;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toastSlideIn 0.4s ease forwards, toastFadeOut 0.4s ease forwards 4.6s;
    opacity: 0;
    transform: translateX(100%);
    max-width: 420px;
}
.toast-message.toast-success {
    background: rgba(6, 78, 59, 0.95) !important;
    border: 1px solid #10b981 !important;
    border-left: 5px solid #10b981 !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35) !important;
    color: #ecfdf5 !important;
}
.toast-message.toast-error {
    background: rgba(127, 29, 29, 0.95) !important;
    border: 1px solid #ef4444 !important;
    border-left: 5px solid #ef4444 !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.35) !important;
    color: #fef2f2 !important;
}
.toast-message.toast-info {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid #38bdf8 !important;
    border-left: 5px solid #38bdf8 !important;
    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.3) !important;
    color: #f0f9ff !important;
}
.toast-message.toast-warning {
    background: rgba(120, 53, 15, 0.95) !important;
    border: 1px solid #f59e0b !important;
    border-left: 5px solid #f59e0b !important;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3) !important;
    color: #fffbeb !important;
}
.toast-message svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}
@keyframes toastSlideIn {
    to { opacity: 1; transform: translateX(0); }
}
@keyframes toastFadeOut {
    to { opacity: 0; transform: translateY(-10px); }
}


/* --- Iris Status Dot --- */
.iris-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
    transition: all 0.3s ease;
}
.iris-status-dot.degraded {
    background-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

/* --- Iris Copilot Unified Widget (Carita Flotante & Expansión Orgánica) --- */
.iris-copilot-widget {
    position: fixed;
    z-index: 100020;
    user-select: none;
    touch-action: none;
    box-sizing: border-box;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.iris-copilot-widget.collapsed {
    width: 60px;
    height: 60px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iris-copilot-widget.collapsed:active {
    cursor: grabbing;
}

.iris-copilot-widget.expanded {
    width: 440px;
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 40px);
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(168, 85, 247, 0.45);
    border-radius: 24px;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.8), 0 0 30px rgba(139, 92, 246, 0.35);
    padding: 16px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    cursor: default;
    animation: irisUnfold 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes irisUnfold {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.iris-fab-view {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iris-fab-pulse {
    position: absolute;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, rgba(168, 85, 247, 0) 70%);
    pointer-events: none;
}

.btn-iris-fab-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0284c7, #8b5cf6);
    border: 2px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.55), 0 0 15px rgba(56, 189, 248, 0.4);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.btn-iris-fab-circle:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.7), 0 0 20px rgba(56, 189, 248, 0.6);
}

.iris-fab-label {
    position: absolute;
    right: 72px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(168, 85, 247, 0.45);
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.iris-expanded-view {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.iris-window-drag-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.iris-window-drag-header:active {
    cursor: grabbing;
}

.iris-drag-handle-hint {
    display: inline-flex;
    align-items: center;
    color: #64748b;
    font-size: 1.1rem;
    margin-right: 4px;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
}

.iris-window-drag-header:hover .iris-drag-handle-hint {
    opacity: 1;
    color: #c084fc;
}

/* ==========================================================================
   WhatsApp Voice Notes & Gemini Neural Voice Badges (Phase 3 Hub)
   ========================================================================== */

.ai-voice-engine-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #38bdf8;
    user-select: none;
    letter-spacing: 0.2px;
}

.engine-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    box-shadow: 0 0 6px #10b981;
}

.engine-dot.pulse {
    animation: enginePulse 2s infinite ease-in-out;
}

@keyframes enginePulse {
    0%, 100% { transform: scale(1); opacity: 0.9; box-shadow: 0 0 4px #10b981; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px #34d399; }
}

/* Voice Note Bubble in Chat */
.msg-bubble.voice-note {
    min-width: 260px;
    max-width: 380px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    padding: 12px 14px;
    border-radius: 16px;
}

.msg-bubble.voice-note.sent {
    border-left: 3px solid #10b981 !important;
}

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

.voice-note-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #34d399;
}

.voice-engine-tag {
    font-size: 0.68rem;
    color: #38bdf8;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.voice-note-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    margin-bottom: 6px;
}

.voice-play-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.voice-play-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.6);
}

.voice-wave-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.voice-wave-bars {
    display: flex;
    align-items: center;
    gap: 2.5px;
    height: 24px;
    cursor: pointer;
}

.voice-bar {
    flex: 1;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    transition: height 0.15s ease, background-color 0.15s ease;
}

.msg-bubble.voice-note.playing .voice-bar {
    background: #10b981;
    animation: wavePulse 1.2s infinite ease-in-out;
}

@keyframes wavePulse {
    0%, 100% { transform: scaleY(0.6); }
    50% { transform: scaleY(1.1); }
}

.voice-progress-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.voice-transcript-toggle {
    margin-top: 6px;
    font-size: 0.72rem;
    color: #38bdf8;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}

.voice-transcript-toggle:hover {
    color: #7dd3fc;
    text-decoration: underline;
}

.voice-transcript-box {
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border-left: 2px solid #38bdf8;
    border-radius: 4px;
    font-size: 0.78rem;
    color: #e2e8f0;
    line-height: 1.4;
    white-space: pre-wrap;
}

/* ==========================================================================
   Aislamiento Estricto de Herramientas de Simulación en Producción
   ========================================================================== */
body:not(.dev-mode-active) .rules-demo-bar.sim-tool,
body:not(.dev-mode-active) .sim-tool {
    display: none !important;
}

/* ==========================================================================
   Estilos Módulo de Seguimiento Clínico y CRM (Follow-Up)
   ========================================================================== */
.followup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 16px;
    margin-top: 15px;
}

.followup-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 4px solid #38bdf8;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.followup-card:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.followup-card.urgent { border-left-color: #ef4444; }
.followup-card.pending { border-left-color: #f59e0b; }
.followup-card.scheduled { border-left-color: #38bdf8; }
.followup-card.sent { border-left-color: #10b981; opacity: 0.8; }

.followup-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.followup-patient-name {
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
}

.followup-treatment-tag {
    font-size: 0.78rem;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
}

.followup-msg-box {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.45;
    border-left: 3px solid rgba(56, 189, 248, 0.4);
}

.followup-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* ==========================================================================
   Bandeja Rápida de WhatsApp y Canales en Recepción (Juana)
   ========================================================================== */

.ops-wa-inbox-card {
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.ops-wa-inbox-card:hover {
    border-color: rgba(37, 211, 102, 0.5) !important;
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.12);
}

.badge-unread-pulse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #052e16;
    background: #4ade80;
    padding: 3px 10px;
    border-radius: 9999px;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.6);
    animation: pulseBadgeWa 2s infinite ease-in-out;
}

@keyframes pulseBadgeWa {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 16px rgba(74, 222, 128, 0.9);
    }
}

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

@media (max-width: 1024px) {
    .reception-ops-layout {
        grid-template-columns: 1fr !important;
    }
}

.ops-wa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.ops-wa-item-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(37, 211, 102, 0.3);
    border-left: 3px solid #25d366;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}

.ops-wa-item-card:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 211, 102, 0.6);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    background: rgba(15, 23, 42, 0.9);
}

.ops-wa-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.ops-wa-patient-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ops-wa-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #047857);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.ops-channel-tag {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ops-channel-whatsapp {
    background: rgba(37, 211, 102, 0.18);
    color: #4ade80;
    border: 1px solid rgba(37, 211, 102, 0.4);
}

.ops-channel-instagram {
    background: rgba(236, 72, 153, 0.18);
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.4);
}

.ops-channel-facebook {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.ops-channel-tiktok {
    background: rgba(168, 85, 247, 0.18);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.4);
}

.ops-channel-x {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.ops-wa-msg-bubble {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.76rem;
    color: #e2e8f0;
    line-height: 1.35;
    border-left: 2px solid #25d366;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-wa-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.badge-unread-chat-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #4ade80;
    background: rgba(37, 211, 102, 0.15);
    border: 1px solid rgba(37, 211, 102, 0.45);
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: pulseBadgeWa 2.5s infinite ease-in-out;
}

.badge-unread-chat-pill:hover {
    background: rgba(37, 211, 102, 0.3);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.pulse-wa-btn {
    animation: pulseWaBtnGlow 2.5s infinite ease-in-out;
}

@keyframes pulseWaBtnGlow {
    0%, 100% {
        box-shadow: 0 0 0 rgba(37, 211, 102, 0);
    }
    50% {
        box-shadow: 0 0 12px rgba(37, 211, 102, 0.6);
    }
}

/* ==========================================================================
   📱 Multi-Dispositivo & PWA Responsive Architecture (Fase 5)
   Soporte iPad / Tablet (Sillón y Kiosco) y Smartphones (iOS / Android)
   ========================================================================== */

/* Botón Hamburguesa Móvil (oculto en desktop) */
.btn-mobile-menu {
    display: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    padding: 7px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    touch-action: manipulation;
    flex-shrink: 0;
}
.btn-mobile-menu:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Backdrop para Sidebar Drawer Móvil */
.sidebar-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: 100045;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-backdrop.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* Barra de Navegación Inferior Táctil (Bottom Navigation Bar) */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #090a0d;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 100040;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 4px;
    min-height: 48px;
    touch-action: manipulation;
    transition: all 0.2s ease;
}

.mobile-nav-item svg {
    stroke: #94a3b8;
    transition: transform 0.2s ease, stroke 0.2s ease;
}

.mobile-nav-item.active {
    color: var(--primary);
    font-weight: 700;
}

.mobile-nav-item.active svg {
    stroke: var(--primary);
    transform: scale(1.1);
}

/* Adaptación de la Barra Inferior según la Skin Activa */
body[data-skin="swiss_editorial"] .mobile-bottom-nav {
    background: #08090a !important;
    border-top: 1px solid #1a1b20 !important;
}
body[data-skin="swiss_editorial"] .mobile-nav-item.active {
    color: #f59e0b !important;
}
body[data-skin="swiss_editorial"] .mobile-nav-item.active svg {
    stroke: #f59e0b !important;
}
body[data-skin="enclave_terracotta"] .mobile-bottom-nav,
body[data-theme="enclave"] .mobile-bottom-nav {
    background: #EFE8DF !important;
    border-top: 1px solid rgba(91, 140, 122, 0.3) !important;
}
body[data-skin="enclave_terracotta"] .mobile-nav-item.active,
body[data-theme="enclave"] .mobile-nav-item.active {
    color: #C77B58 !important;
}
body[data-skin="light_clinical"] .mobile-bottom-nav {
    background: #ffffff !important;
    border-top: 1px solid #cbd5e1 !important;
}
body[data-skin="light_clinical"] .mobile-nav-item.active {
    color: #0284c7 !important;
}

/* ==========================================================================
   📱 ADAPTACIÓN RESPONSIVA Y MULTI-DISPOSITIVO (Cadmus Core)
   Garantía: La vista de escritorio (>= 1025px) permanece 100% inalterada.
   ========================================================================== */

/* 📱 Breakpoint 1: Tablets, iPads (10.9", Pro, Mini) y Modo Sillón Dental */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 220px;
    }
    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 12px !important;
    }
    .tab-view {
        padding: 18px !important;
    }
    /* Consulta Clínica en Tablets */
    .clinical-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .odontogram-visualization {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 10px !important;
        justify-content: flex-start !important;
    }
    .teeth-group {
        flex-wrap: nowrap !important;
        min-width: max-content;
    }
    .tooth-box {
        min-width: 38px !important;
        touch-action: manipulation;
    }
    /* HUB WhatsApp en iPad: ocultar 3er panel de auditoría para dar espacio al chat */
    .whatsapp-layout {
        grid-template-columns: 300px 1fr !important;
    }
    .whatsapp-layout .audit-section {
        display: none !important;
    }
    /* Presupuestos y Operaciones */
    .billing-grid {
        grid-template-columns: 1fr !important;
    }
    .reception-ops-layout {
        grid-template-columns: 1fr !important;
    }
}

/* 📱 Breakpoint 1.5: Tablets Portrait & Pantallas Medianas (<= 900px) */
@media (max-width: 900px) {
    /* 1. Kiosco y Recepción Inteligente (Solución Captura 1) */
    .kiosk-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        max-height: none !important;
        border-radius: var(--border-radius-md) !important;
    }
    .kiosk-visual {
        border-right: none !important;
        border-bottom: 1px solid var(--card-border) !important;
        padding: 20px 16px !important;
    }
    .kiosk-avatar-container {
        width: 90px !important;
        height: 90px !important;
        margin-bottom: 14px !important;
    }
    .avatar-ring {
        width: 100px !important;
        height: 100px !important;
    }
    .kiosk-visual h3 {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }
    .kiosk-form-panel {
        padding: 20px 16px !important;
    }
    .kiosk-form-panel h2 {
        font-size: 1.25rem !important;
    }

    /* 2. Agenda y Calendario Clínico (Solución Captura 3) */
    .calendar-layout-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }
    .calendar-main-card .card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 14px 16px !important;
    }
    .cal-title-wrapper {
        justify-content: space-between !important;
        width: 100% !important;
    }
    .cal-actions-right {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .cal-filter-badges {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        padding-bottom: 6px !important;
        gap: 6px !important;
    }
    .cal-filter-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 0.74rem !important;
        padding: 5px 10px !important;
    }
    #btn-open-new-appointment,
    #btn-open-voice-appointment {
        width: 100% !important;
        justify-content: center !important;
    }

    /* 3. Dashboard Multi-Row Grids */
    .dash-row-grid,
    .dash-row-1,
    .dash-row-2,
    .dash-row-3 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* 4. HUB de Comunicaciones en Tablet/Móvil */
    .whatsapp-layout {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
    }
    .whatsapp-inbox {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        max-height: 240px !important;
    }
    .chat-view {
        min-height: 480px !important;
    }
    .whatsapp-layout .audit-section {
        display: none !important;
    }

    /* 5. Expedientes, Lab y Contabilidad */
    .archive-main-grid {
        grid-template-columns: 1fr !important;
    }
    .lab-presc-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 📱 Breakpoint 2: Smartphones & Dispositivos Móviles (< 768px) */
@media (max-width: 768px) {
    /* Activar controles móviles */
    .btn-mobile-menu {
        display: inline-flex !important;
    }

    .mobile-bottom-nav {
        display: flex !important;
    }

    /* Sidebar Off-Canvas (Drawer Deslizante) */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 280px !important;
        z-index: 100050 !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: 10px 0 35px rgba(0, 0, 0, 0.85) !important;
    }
    .sidebar.open {
        transform: translateX(0) !important;
    }

    /* Contenido principal al 100% de pantalla con safe area padding */
    .main-content {
        width: 100vw !important;
        min-width: 100vw !important;
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 12px)) !important;
    }

    .main-header {
        padding: 0 14px !important;
    }
    #page-title {
        font-size: 1.02rem !important;
        max-width: 54vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .header-time {
        display: none !important;
    }

    /* Vistas y tarjetas adaptativas */
    .tab-view {
        padding: 12px 10px !important;
    }
    .kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Modales a pantalla completa táctil */
    .modal-container {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        padding: 16px !important;
        margin: auto !important;
    }

    /* Consulta y Odontograma en Móvil (Solución Captura 2) */
    .patient-selector-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .patient-selector-group > div {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    #clinical-patient-select {
        max-width: 100% !important;
        width: 100% !important;
    }
    .odontogram-section {
        padding: 14px 10px !important;
    }
    .odontogram-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .odontogram-visualization {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 14px 8px !important;
    }
    .teeth-row {
        align-items: flex-start !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        padding-bottom: 6px !important;
    }
    .teeth-group {
        flex-wrap: nowrap !important;
        min-width: max-content !important;
        gap: 6px !important;
    }
    .tooth-box {
        width: 38px !important;
        min-width: 38px !important;
        height: 52px !important;
    }

    /* Calendario: Días y Celdas */
    .calendar-body {
        padding: 8px !important;
    }
    .cal-weekdays-header {
        font-size: 0.75rem !important;
        padding-bottom: 6px !important;
    }
    .cal-days-grid {
        gap: 4px !important;
        grid-auto-rows: minmax(70px, 1fr) !important;
    }
    .cal-day {
        min-height: 70px !important;
        padding: 4px !important;
        border-radius: 6px !important;
    }
    .day-number {
        font-size: 0.74rem !important;
    }
    .cal-event-pill {
        font-size: 0.65rem !important;
        padding: 1px 3px !important;
    }

    /* Formularios que tenían múltiples columnas en fila */
    .lab-subtab-panel div[style*="grid-template-columns: 1.5fr 1fr 1fr 1fr 120px"],
    div[style*="grid-template-columns: 1.5fr 1fr 1fr 1fr 120px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Tablas con scroll horizontal suave garantizado */
    .table-responsive,
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }
    .data-table,
    .table {
        min-width: 580px;
    }

    /* Modales de Perfil y Configuración */
    #user-profile-skin-modal .modal-container {
        max-height: 92vh !important;
        width: 96vw !important;
    }
    #user-profile-skin-modal div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* 📱 Breakpoint 3: Smartphones Pequeños / Pantallas Angostas (< 480px) */
@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }
    #page-title {
        font-size: 0.94rem !important;
        max-width: 46vw;
    }
    .cal-weekdays-header div {
        font-size: 0.68rem !important;
    }
    .cal-day {
        min-height: 60px !important;
    }
    .calendar-subtabs {
        flex-direction: column !important;
    }
    .calendar-subtabs button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   🔔 Popover / Globo de Validación Homologado (Cadmus Core Form Validation)
   ========================================================================== */
.cadmus-validation-popover {
    position: absolute;
    z-index: 100060;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid #f59e0b;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 7px 12px;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7), 0 0 14px rgba(245, 158, 11, 0.35);
    color: #f8fafc;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    animation: cadmusValidationPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.cadmus-validation-popover .popover-caret {
    position: absolute;
    top: -6px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #f59e0b;
}

.cadmus-validation-popover .popover-caret-inner {
    position: absolute;
    top: -4.5px;
    left: 21px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #0f172a;
}

.cadmus-validation-popover .popover-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #f59e0b;
    color: #0f172a;
    border-radius: 4px;
    font-weight: 900;
    font-size: 0.82rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}

.cadmus-validation-popover .popover-text {
    color: #f8fafc;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

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

/* ==========================================================================
   📸 Módulo de Fotografías Clínicas Multimodales (Gemini 3.6 Flash Vision)
   ========================================================================== */
.clinical-photo-card {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.clinical-photo-card:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 20px rgba(56, 189, 248, 0.35);
}

.slide-tab-btn {
    transition: all 0.2s ease;
}

.slide-tab-btn:hover {
    filter: brightness(1.15);
}

#clinical-photos-gallery-strip::-webkit-scrollbar {
    height: 6px;
}

#clinical-photos-gallery-strip::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.3);
    border-radius: 4px;
}

/* ==========================================================================
   💬 Soporte de Plantillas Oficiales de WhatsApp (Meta Cloud API type: template)
   ========================================================================== */
.msg-bubble.template-bubble {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(6, 78, 59, 0.35)) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 12px rgba(16, 185, 129, 0.12) !important;
    max-width: 82% !important;
    border-radius: 12px 12px 2px 12px !important;
}

.msg-bubble.template-bubble.received {
    border-radius: 12px 12px 12px 2px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.6)) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.template-badge-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #34d399;
    font-weight: 600;
}

.template-bubble-body {
    color: #f1f5f9;
    font-size: 0.86rem;
    line-height: 1.5;
    margin-top: 6px;
    word-break: break-word;
}

.btn-open-wa-template {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-open-wa-template:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   👨‍⚕️ Homologación Visual de Especialistas Visitantes (Ámbar #f59e0b)
   ========================================================================== */
.badge-visiting {
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.12) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}

.notice-visiting-card {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid #f59e0b;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #fbbf24;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   📅 Refinamiento Estético del Panel Lateral de Calendario (Detalle Cita)
   ========================================================================== */
.cal-sidebar-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

.cal-sidebar-card .card-header {
    flex-shrink: 0 !important;
}

.cal-sidebar-card .card-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 16px 16px 40px 16px !important;
    display: flex !important;
    flex-direction: column !important;
}

.btn-platform-sync {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
}

.btn-platform-sync:hover {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(56, 189, 248, 0.15);
    color: #ffffff;
}

.btn-platform-google:hover {
    border-color: rgba(234, 67, 53, 0.5) !important;
    box-shadow: 0 4px 15px rgba(234, 67, 53, 0.15) !important;
}

.btn-platform-apple:hover {
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15) !important;
}

.btn-platform-outlook:hover {
    border-color: rgba(0, 120, 212, 0.5) !important;
    box-shadow: 0 4px 15px rgba(0, 120, 212, 0.2) !important;
}

.btn-platform-webcal:hover {
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2) !important;
}

/* ==========================================================================
   ✍️ Consentimiento Informado Digital & Lienzo Táctil (Tablet / iPad)
   ========================================================================== */
.consent-touch-canvas {
    background: #090d16;
    border: 2px dashed rgba(56, 189, 248, 0.4);
    border-radius: 12px;
    touch-action: none;
    cursor: crosshair;
    display: block;
    width: 100%;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: border-color 0.2s ease;
}

.consent-touch-canvas:active, .consent-touch-canvas.drawing {
    border-color: #38bdf8;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.35), inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.consent-clause-box {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.84rem;
    line-height: 1.6;
    color: #cbd5e1;
    max-height: 180px;
    overflow-y: auto;
}

.consent-clause-box strong {
    color: #38bdf8;
}

.consent-badge-ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(56, 189, 248, 0.4);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.76rem;
    color: #38bdf8;
    font-weight: 600;
}

/* ==========================================================================
   🔐 Biometría Nativa WebAuthn (TouchID / FaceID)
   ========================================================================== */
.btn-webauthn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-webauthn-login:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25);
}

.btn-webauthn-login:active {
    transform: translateY(0);
}

/* ==========================================================================
   📱 Pulido Multi-Dispositivo (Ronda 2: Touch & Drawer en Pantallas < 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .cal-sidebar-card {
        margin-top: 16px;
        width: 100% !important;
    }
    
    .btn-platform-sync {
        padding: 12px 14px;
        font-size: 0.88rem;
    }

    .consent-touch-canvas {
        height: 180px;
    }
}

/* ==========================================================================
   🦷 Orto-Chart v2.0: Split Slider & Story Card (9:16)
   ========================================================================== */
.ortho-slider-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    user-select: none;
    background: #090d16;
}
.ortho-slider-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.ortho-slider-before {
    clip-path: polygon(0 0, var(--slider-pos, 50%) 0, var(--slider-pos, 50%) 100%, 0 100%);
}
.ortho-slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--slider-pos, 50%);
    width: 3px;
    background: #ffffff;
    cursor: ew-resize;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
    transform: translateX(-50%);
    z-index: 10;
}
.ortho-slider-handle::after {
    content: "◀ ▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #0ea5e9;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 12px;
    border: 2px solid #ffffff;
    white-space: nowrap;
}
.story-card-canvas-box {
    width: 300px;
    height: 533px; /* 9:16 aspect ratio */
    margin: 0 auto;
    background: linear-gradient(145deg, #090d16, #1e1b4b);
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 20px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 25px rgba(168, 85, 247, 0.3);
    position: relative;
    overflow: hidden;
}