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

:root {
    /* Colores Principales - Paleta Corporativa MEDITEL */
    --primary-blue: #1F6BA7;
    --primary-blue-bright: #2482B8;
    --primary-blue-dark: #082A5D;
    --text-blue: #1C304E;
    --turquoise-light: #84CCD5;
    --cyan-light: #D7EBEA;
    --white: #FFFFFF;
    --gray-dark: #1C304E;
    --gray-medium: #B9BFC8;
    --gray-light: #F3F4F6;
    
    /* Colores Sem�nticos */
    --primary: #1F6BA7;
    --secondary: #2482B8;
    --success: #64B2BA;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #84CCD5;
    --light: #F3F4F6;
    --dark: #1C304E;
    --gray: #C7CCD3;
    
    /* Escala de Azules MEDITEL */
    --blue-100: #D7EBEA;
    --blue-200: #A9C5D0;
    --blue-300: #7EC9D0;
    --blue-400: #4E9AAC;
    --blue-500: #2E99C5;
    --blue-600: #2587BC;
    --blue-700: #1F6BA7;
    --blue-800: #1C507B;
    --blue-900: #082A5D;
    
    /* Colores por �reas (actualizados) */
    --medical: #1F6BA7;
    --quality: #2482B8;
    --performance: #64B2BA;
    --budget: #f59e0b;
    --orthopedics: #4E9AAC;
    --neurology: #1C507B;
    --cardiology: #ef4444;
    --surgery: #f97316;
    --urology: #2173AD;
    --emergency: #dc2626;
    --or: #64B2BA;
    --hospitalization: #2587BC;
    --outpatient: #3387A1;
    --oncology: #2482B8;
    --pediatrics: #7EC9D0;
    --icu: #ef4444;
    --radiology: #326E8F;
    --laboratory: #4E9AAC;
    --pharmacy: #64B2BA;
    
    /* Sombras Modernas con Profundidad */
    --shadow-xs: 0 1px 2px rgba(28, 48, 78, 0.05);
    --shadow: 0 4px 6px -1px rgba(28, 48, 78, 0.1), 0 2px 4px -2px rgba(28, 48, 78, 0.1);
    --shadow-md: 0 10px 15px -3px rgba(28, 48, 78, 0.1), 0 4px 6px -4px rgba(28, 48, 78, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(28, 48, 78, 0.1), 0 8px 10px -6px rgba(28, 48, 78, 0.1);
    --shadow-xl: 0 25px 50px -12px rgba(8, 42, 93, 0.25);
    --shadow-glow: 0 0 40px rgba(31, 107, 167, 0.15);
    --shadow-colored: 0 10px 40px -10px;
    
    /* Transiciones Suaves */
    --transition: transform 0.2s ease, background 0.2s ease;
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Bordes Redondeados */
    --border-radius-sm: 8px;
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 9999px;
    
    /* Tipograf�a */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ============================================
   OPTIMIZACIONES DE RENDIMIENTO
   ============================================ */

/* Reducir animaciones para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Optimizaci�n de renderizado */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Mejora rendimiento de scroll */
    -webkit-overflow-scrolling: touch;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    color: var(--dark);
    line-height: 1.6;
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #1F6BA7;
    border-radius: 4px;
    border: 2px solid #f1f5f9;
}

::-webkit-scrollbar-thumb:hover {
    background: #082A5D;
}

.container {
    display: flex;
    height: 100vh;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden; /* Prevent horizontal scroll from overflowing content */
}

/* ============================================================
   SIDEBAR - Dise�o Premium Enterprise 2026
   ============================================================ */
.sidebar {
    width: 285px;
    background: linear-gradient(180deg, #0a1628 0%, #0f2240 30%, #132d52 60%, #0f2240 100%);
    color: var(--white);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.35), 1px 0 0 rgba(100, 180, 255, 0.08);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 180, 255, 0.15) transparent;
    display: flex;
    flex-direction: column;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(100, 180, 255, 0.2); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(100, 180, 255, 0.35); }

.sidebar::before {
    display: none;
}

/* ---------- HEADER / LOGO ---------- */
.sidebar-header {
    padding: 32px 18px 26px;
    background: linear-gradient(175deg, 
        #060d1f 0%,
        #0a1a3a 35%,
        #0d2045 65%,
        #0a1630 100%);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1001;
    border-bottom: none;
    overflow: hidden;
    position: relative;
    min-height: 260px;
}

/* Aurora background */
.hdr-aurora {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59,130,246,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 30% 100%, rgba(31,107,167,0.06) 0%, transparent 50%),
        radial-gradient(ellipse 50% 50% at 80% 80%, rgba(6,182,212,0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Subtle grid pattern */
.hdr-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(96,165,250,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96,165,250,0.03) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Glowing orbs */
.hdr-glow-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(1px);
}

.hdr-glow-1 {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 100px;
    background: radial-gradient(circle, rgba(59,130,246,0.18) 0%, rgba(59,130,246,0.04) 50%, transparent 70%);
    animation: orbFloat1 7s ease-in-out infinite;
}

.hdr-glow-2 {
    top: 55%;
    left: 10%;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(31,107,167,0.10) 0%, transparent 70%);
    animation: orbFloat2 9s ease-in-out infinite;
}

.hdr-glow-3 {
    top: 40%;
    right: 5%;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(6,182,212,0.1) 0%, transparent 70%);
    animation: orbFloat3 11s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%,100% { transform: translateX(-50%) translateY(0); opacity: 1; }
    50% { transform: translateX(-50%) translateY(8px); opacity: 0.7; }
}
@keyframes orbFloat2 {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.1); }
}
@keyframes orbFloat3 {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(5px) scale(0.9); }
}

/* ---- Logo Stage ---- */
.logo-stage {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
    z-index: 1;
}

/* SVG orbit ring */
.logo-hex-ring {
    position: absolute;
    inset: -4px;
    z-index: 1;
    animation: logoOrbitSpin 20s linear infinite;
}

.hex-svg {
    width: 100%;
    height: 100%;
}

.hex-dash {
    animation: hexDashMove 8s linear infinite;
}

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

@keyframes hexDashMove {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 60; }
}

/* Logo avatar */
.logo-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 16px;
    z-index: 3;
    background: linear-gradient(145deg, 
        rgba(15,30,60,0.9) 0%,
        rgba(20,40,80,0.95) 100%);
    border: 1.5px solid rgba(96,165,250,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 1px rgba(96,165,250,0.08),
        0 4px 24px rgba(59,130,246,0.25),
        0 8px 48px rgba(59,130,246,0.12),
        0 0 80px rgba(59,130,246,0.08),
        inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
}

.logo-avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(96,165,250,0.1) 0%, transparent 50%, rgba(31,107,167,0.08) 100%);
    z-index: 0;
}

.logo-avatar::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.04) 8%, transparent 16%);
    animation: avatarShine 5s linear infinite;
    z-index: 1;
}

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

.logo-avatar-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.2) 0%, transparent 65%);
    z-index: -1;
    animation: avatarGlowPulse 4s ease-in-out infinite;
}

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

.sidebar-header .sidebar-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: brightness(1.2) contrast(1.05) drop-shadow(0 2px 12px rgba(59,130,246,0.35));
    position: relative;
    z-index: 2;
    border-radius: 6px;
}

/* Floating particles */
.logo-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.lp {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(96,165,250,0.5);
    box-shadow: 0 0 6px rgba(96,165,250,0.3);
}

.lp1 { top: 8%; left: 20%; animation: lpFloat 4s ease-in-out infinite; }
.lp2 { top: 15%; right: 15%; animation: lpFloat 5s ease-in-out 1s infinite; background: rgba(31,107,167,0.30); }
.lp3 { bottom: 12%; left: 12%; animation: lpFloat 6s ease-in-out 0.5s infinite; background: rgba(6,182,212,0.5); }
.lp4 { bottom: 18%; right: 20%; animation: lpFloat 4.5s ease-in-out 1.5s infinite; }

@keyframes lpFloat {
    0%,100% { transform: translateY(0) scale(1); opacity: 0.4; }
    50% { transform: translateY(-8px) scale(1.5); opacity: 1; }
}

/* ---- Brand Name ---- */
.logo-brand {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
}

.brand-pre-label {
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(96,165,250,0.5);
    font-weight: 600;
    margin-bottom: 4px;
}

.sidebar-header h2 {
    font-size: 1.85rem;
    margin: 0 0 8px 0;
    font-weight: 900;
    letter-spacing: 8px;
    color: #ffffff;
    line-height: 1;
    background: linear-gradient(135deg, #e0eaff 0%, #60a5fa 35%, #5bbad5 65%, #67e8f9 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: brandGradientShift 6s ease-in-out infinite;
}

.brand-m {
    font-size: 2.1rem;
}

@keyframes brandGradientShift {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Accent divider with diamond */
.brand-accent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.brand-line-l, .brand-line-r {
    flex: 0 0 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(96,165,250,0.4));
}

.brand-line-r {
    background: linear-gradient(90deg, rgba(96,165,250,0.4), transparent);
}

.brand-diamond {
    width: 5px;
    height: 5px;
    background: linear-gradient(135deg, #60a5fa, #5bbad5);
    transform: rotate(45deg);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(96,165,250,0.4);
}

/* Subtitle */
.sidebar-subtitle {
    font-size: 0.65rem;
    margin: 0 0 14px 0;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: rgba(148,163,184,0.65);
    position: relative;
    z-index: 1;
}

/* Header Badges */
.header-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    z-index: 1;
    margin-bottom: 4px;
}

.header-badge {
    font-size: 0.55rem;
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.hb-enterprise {
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.15);
    color: rgba(96,165,250,0.85);
}

.hb-enterprise i {
    font-size: 0.48rem;
}

.hb-status {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.15);
    color: rgba(74,222,128,0.85);
}

.hb-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
    animation: dotBlink 2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(74,222,128,0.4);
}

@keyframes dotBlink {
    0%,100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.hb-version {
    background: linear-gradient(135deg, rgba(31,107,167,0.1), rgba(59,130,246,0.08));
    border: 1px solid rgba(31,107,167,0.12);
    color: rgba(147,197,253,0.85);
}

/* Bottom line gradient */
.hdr-bottom-line {
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(96,165,250,0.3) 30%, rgba(31,107,167,0.18) 70%, transparent);
    z-index: 2;
}

.hdr-bottom-line::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(180deg, rgba(59,130,246,0.06), transparent);
}

/* ---------- MEN� NAVEGACI�N ---------- */
.sidebar-menu {
    padding: 12px 0 16px;
    flex: 1;
}

.sidebar-menu ul {
    list-style: none;
    margin: 0;
    padding: 0 10px;
}

/* Etiquetas de categor�a */
.menu-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    padding: 18px 18px 8px 18px;
    margin: 0;
    color: rgba(148, 163, 184, 0.55);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.menu-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(100, 180, 255, 0.1) 0%, transparent 100%);
    margin-left: 8px;
}

.menu-label-icon {
    font-size: 0.75rem;
    line-height: 1;
}

.menu-label-sistema {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(100, 180, 255, 0.06);
}

/* Items de navegaci�n */
.sidebar-menu li {
    margin: 2px 0;
    position: relative;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    color: rgba(203, 213, 225, 0.85);
    text-decoration: none;
    font-weight: 450;
    font-size: 0.84rem;
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 11px;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

/* Icon wrapper */
.nav-icon-wrap {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(100, 180, 255, 0.06);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.nav-icon-wrap i {
    font-size: 0.88rem;
    color: rgba(148, 163, 184, 0.75);
    transition: all 0.2s ease;
}

.sidebar-menu li a .menu-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    letter-spacing: 0.1px;
}

.sidebar-menu li a .status-badge,
.sidebar-menu li a .notification-badge {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------- HOVER EFFECT ---------- */
.sidebar-menu li a:hover {
    background: rgba(59, 130, 246, 0.08);
    color: #e2e8f0;
    border-color: rgba(59, 130, 246, 0.12);
    transform: translateX(2px);
}

.sidebar-menu li a:hover .nav-icon-wrap {
    background: rgba(59, 130, 246, 0.15);
}

.sidebar-menu li a:hover .nav-icon-wrap i {
    color: #60a5fa;
}

/* ---------- ACTIVE ITEM ---------- */
.sidebar-menu li.active a {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(37, 99, 235, 0.1) 100%);
    color: #ffffff;
    font-weight: 550;
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.12), inset 0 0 0 1px rgba(59, 130, 246, 0.1);
}

.sidebar-menu li.active a .nav-icon-wrap {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
}

.sidebar-menu li.active a .nav-icon-wrap i {
    color: #ffffff;
}

.sidebar-menu li.active a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, #3b82f6, #60a5fa);
    border-radius: 0 3px 3px 0;
}

/* ---------- BADGES ---------- */
.status-badge {
    font-size: 0.58rem;
    padding: 2px 7px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 650;
    letter-spacing: 0.6px;
    line-height: 1.5;
}

.status-badge.active-badge {
    background: rgba(34, 197, 94, 0.12);
    color: rgba(134, 239, 172, 0.8);
    border: 1px solid rgba(34, 197, 94, 0.15);
}

.status-badge.nuevo-badge {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(31, 107, 167, 0.2));
    color: #93c5fd;
    border: 1px solid rgba(31, 107, 167, 0.25);
    animation: newBadgeShimmer 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.status-badge.nuevo-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: badgeShine 3s ease-in-out infinite;
}

@keyframes badgeShine {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

@keyframes newBadgeShimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Badge de notificaciones en sidebar */
.sidebar-menu .notification-badge {
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    min-width: 20px;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    transition: all 0.3s ease;
    position: relative;
}

.sidebar-menu .notification-badge:not(:empty):not([data-count="0"]) {
    animation: sidebarBadgePulse 2s infinite;
}

@keyframes sidebarBadgePulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    }
    50% { 
        transform: scale(1.08); 
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.6);
    }
}

/* Estilo del item de notificaciones en sidebar */
#notifications-menu {
    position: relative;
}

#notifications-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#notifications-menu:hover .notification-badge {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.6);
}

#notifications-menu .fa-bell {
    transition: transform 0.3s ease;
}

#notifications-menu:hover .fa-bell {
    animation: bellRingSidebar 0.5s ease;
}

@keyframes bellRingSidebar {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-15deg); }
    60% { transform: rotate(10deg); }
    80% { transform: rotate(-5deg); }
}

/* ---------- LOGOUT ITEM ---------- */
.sidebar-menu li.logout-item a {
    color: rgba(248, 113, 113, 0.7);
}

.sidebar-menu li.logout-item a:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.15);
}

.sidebar-menu li.logout-item a .nav-icon-wrap {
    background: rgba(239, 68, 68, 0.08);
}

.sidebar-menu li.logout-item a .nav-icon-wrap i {
    color: rgba(248, 113, 113, 0.6);
}

.sidebar-menu li.logout-item a:hover .nav-icon-wrap {
    background: rgba(239, 68, 68, 0.15);
}

.sidebar-menu li.logout-item a:hover .nav-icon-wrap i {
    color: #fca5a5;
}

/* ---------- FOOTER SIDEBAR ---------- */
.sidebar-footer {
    padding: 12px 18px;
    border-top: 1px solid rgba(100, 180, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.sidebar-footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.sidebar-footer-text {
    font-size: 0.6rem;
    color: var(--text-secondary, #64748b);
    letter-spacing: 0.3px;
}

.sidebar-footer-dot {
    font-size: 0.5rem;
    color: rgba(148, 163, 184, 0.2);
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    min-width: 320px;
    max-width: 450px;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 14px;
    animation: slideInRight 0.4s ease-out, fadeOut 0.4s ease-in 4.6s;
    border-left: 4px solid #22c55e;
}

.toast.success {
    border-left-color: #22c55e;
}

.toast.error {
    border-left-color: #ef4444;
}

.toast.warning {
    border-left-color: #f59e0b;
}

.toast.info {
    border-left-color: #3b82f6;
}

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

.toast.success .toast-icon {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.toast.error .toast-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.toast.warning .toast-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.toast.info .toast-icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: #1e293b;
}

.toast-message {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
}

.toast-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.toast-close:hover {
    background: #f1f5f9;
    color: #475569;
}

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

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(400px);
    }
}

/* Modal de Confirmaci�n */
.modal-confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    z-index: 9999;
    animation: fadeInModal 0.3s ease;
}

.modal-confirm-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-confirm-content {
    background: white;
    border-radius: 24px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.15);
    max-width: 480px;
    width: 100%;
    overflow: hidden;
    animation: slideInModal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.modal-confirm-icon {
    padding: 40px 40px 0;
    display: flex;
    justify-content: center;
}

.icon-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
    /* animation: pulseIcon 2s ease-in-out infinite; - Deshabilitado para rendimiento */
}

.icon-circle i {
    font-size: 42px;
    color: #f59e0b;
    /* animation: wiggle 1s ease-in-out infinite; - Deshabilitado para rendimiento */
}

.modal-confirm-body {
    padding: 30px 40px 20px;
    text-align: center;
}

.modal-confirm-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.modal-confirm-message {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.modal-confirm-actions {
    padding: 20px 40px 40px;
    display: flex;
    gap: 16px;
    justify-content: center;
}

.btn-confirm-cancel,
.btn-confirm-accept {
    flex: 1;
    max-width: 180px;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-confirm-cancel {
    background: #f1f5f9;
    color: #64748b;
}

.btn-confirm-cancel:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    color: #475569;
}

.btn-confirm-cancel:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-confirm-accept {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    position: relative;
    overflow: hidden;
}

.btn-confirm-accept::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-confirm-accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
}

.btn-confirm-accept:hover::before {
    left: 100%;
}

.btn-confirm-accept:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

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

@keyframes wiggle {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

@keyframes fadeInModal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInModal {
    from {
        transform: scale(0.85) translateY(-40px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Main Content Styles */
.main-content {
    flex: 1;
    width: calc(100% - 285px);
    max-width: calc(100% - 285px);
    padding: 0 28px 20px 28px !important;
    margin-top: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: 285px;
    background: #f8fafc;
    height: 100vh;
    min-height: 0;
    position: relative;
    box-sizing: border-box;
}

.main-content::before {
    display: none;
}

.main-content::after {
    display: none;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    margin-top: 0 !important;
    padding: 24px 28px;
    background: #FFFFFF;
    border-radius: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
}

.header h1 {
    color: #1F6BA7;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: -0.5px;
}

.user-info {
    display: flex;
    align-items: center;
    position: relative;
}

.user-info img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-right: 14px;
    border: 3px solid #1F6BA7;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.2);
    transition: transform 0.2s ease, background 0.2s ease;
    cursor: pointer;
    object-fit: cover;
}

.user-info img:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.35);
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-details .name {
    font-weight: 500;
}

.user-details .role {
    font-size: 0.8rem;
    color: var(--gray-medium);
}

.notifications {
    position: relative;
    margin-right: 20px;
    cursor: pointer;
}

.notifications .bell-icon {
    font-size: 1.4rem;
    color: #64748b;
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 50%;
    background: transparent;
}

.notifications:hover .bell-icon {
    color: #1F6BA7;
    background: rgba(31, 107, 167, 0.1);
    transform: rotate(15deg);
}

.notifications .bell-icon.has-notifications {
    animation: bellRing 0.5s ease-in-out;
}

@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    20%, 60% { transform: rotate(15deg); }
    40%, 80% { transform: rotate(-15deg); }
}

.notifications .badge {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
    font-size: 0.65rem;
    padding: 3px 7px;
    border-radius: 12px;
    min-width: 18px;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.4);
    border: 2px solid white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.notifications .badge.pulse-animation {
    animation: badgePulse 1s ease;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1.1); }
    75% { transform: scale(1.25); }
}

/* Badge del sidebar */
.notification-badge {
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
    font-weight: 700;
    margin-left: auto;
}

.notification-badge.pulse-animation {
    animation: badgePulse 1s ease;
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: -10px;
    width: 400px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    padding: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    pointer-events: none;
}

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

.notification-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-header h4 i {
    font-size: 1.1rem;
}

.notification-header .mark-all {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    transition: all 0.2s;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.15);
}

.notification-header .mark-all:hover {
    color: white;
    background: rgba(255,255,255,0.25);
}

.notification-list {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Scrollbar personalizado para lista de notificaciones */
.notification-list::-webkit-scrollbar {
    width: 6px;
}

.notification-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.notification-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2482B8, #1F6BA7);
    border-radius: 3px;
}

.notification-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1F6BA7, #1A4A76);
}

.notification-item {
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.notification-item:hover {
    background: #eff6ff;
    padding-left: 24px;
}

.notification-item:active {
    background: #e6f4fb;
    transform: scale(0.99);
}

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

.notification-item.unread {
    background: linear-gradient(90deg, #f8f4ff 0%, #fff 100%);
    border-left: 4px solid #1F6BA7;
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    background: #1F6BA7;
    border-radius: 50%;
    transform: translateY(-50%);
    animation: notifPulse 2s infinite;
}

@keyframes notifPulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50% { opacity: 0.5; transform: translateY(-50%) scale(1.2); }
}

.notification-item .notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-item .notif-icon.info {
    background: rgba(31, 107, 167, 0.1);
    color: #1F6BA7;
}

.notification-item .notif-icon.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.notification-item .notif-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.notification-item .notif-icon.danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.notification-item .notif-content {
    flex: 1;
    min-width: 0;
}

.notification-item .notif-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
    margin-bottom: 4px;
    line-height: 1.3;
}

.notification-item .notif-text {
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notification-time i {
    font-size: 0.7rem;
}

.notification-time .priority-badge {
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    margin-left: 8px;
}

.notification-footer {
    padding: 14px 20px;
    text-align: center;
    border-top: 1px solid #f1f5f9;
    background: linear-gradient(to top, #f8f9ff, #ffffff);
}

.notification-footer a {
    color: #1F6BA7;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: rgba(31, 107, 167, 0.05);
}

.notification-footer a:hover {
    background: rgba(31, 107, 167, 0.15);
    transform: translateY(-1px);
    text-decoration: none;
}

.notification-footer a i {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.notification-footer a:hover i {
    transform: translateX(3px);
}

.notification-empty {
    padding: 50px 20px;
    text-align: center;
    color: #94a3b8;
}

.notification-empty i {
    font-size: 3.5rem;
    margin-bottom: 16px;
    color: #e2e8f0;
    animation: bellSwing 3s ease-in-out infinite;
}

@keyframes bellSwing {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(0deg); }
}

.notification-empty p {
    font-size: 0.9rem;
    color: #64748b;
}

/* Alert Banner - Dise�o Moderno */
.alert-banner {
    background: #FFFFFF;
    border-left: 5px solid #f59e0b;
    padding: 18px 24px;
    margin-top: 24px;
    margin-bottom: 32px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, background 0.2s ease;
}

.alert-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.alert-banner.info {
    background: #FFFFFF;
    border-left-color: #3b82f6;
}

.alert-banner.success {
    background: #FFFFFF;
    border-left-color: #10b981;
}

.alert-banner.warning {
    background: #FFFFFF;
    border-left-color: #f59e0b;
}

.alert-banner.danger {
    background: #FFFFFF;
    border-left-color: #ef4444;
}

.alert-banner.primary {
    background: #FFFFFF;
    border-left-color: #1F6BA7;
}

/* Dashboard Cards - Dise�o Limpio */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.02);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.8);
    /* Subtle highlight on top for depth */
    border-top: 1px solid #ffffff;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.04);
    border-color: rgba(31, 107, 167, 0.1);
}

/* Decoraciones deshabilitadas para rendimiento */
.card::before {
    display: none;
}

.card::after {
    display: none;
}

/* Cards clickeables */
.card-clickable {
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 20px rgba(31, 107, 167, 0.15);
}

.card-clickable:active {
    transform: translateY(-4px);
}

.card.primary { border-top-color: var(--primary); }
.card.secondary { border-top-color: var(--secondary); }
.card.success { border-top-color: var(--success); }
.card.warning { border-top-color: var(--warning); }
.card.danger { border-top-color: var(--danger); }
.card.info { border-top-color: var(--info); }

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

.card-title {
    font-size: 1rem;
    color: var(--gray);
    font-weight: 500;
}

.card-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.1;
    letter-spacing: -1px;
}

.card-trend {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    width: fit-content;
    font-weight: 600;
}

.trend-up {
    color: #059669;
    background: #ecfdf5;
}

.trend-down {
    color: #dc2626;
    background: #fef2f2;
}

.card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.4rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, background 0.2s ease;
}

.card:hover .card-icon {
    transform: scale(1.08);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.card-tooltip {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--gray);
    cursor: help;
}

.tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: var(--dark);
    color: var(--white);
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
    font-weight: normal;
}

.card-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Botones de Cl�nicas en Card - Ultra Premium */
.clinica-buttons {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.clinica-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: white;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    min-width: 0;
    white-space: nowrap;
}

.clinica-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}

.clinica-btn:hover::before {
    left: 100%;
}

.clinica-btn i {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Sede Norte */
.clinica-btn.sede-norte {
    background: linear-gradient(135deg, #1F6BA7 0%, #134B7A 100%);
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.25);
}

.clinica-btn.sede-norte:hover {
    background: linear-gradient(135deg, #2980C4 0%, #1F6BA7 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(31, 107, 167, 0.4);
}

/* Sede Sur */
.clinica-btn.sede-sur {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25);
}

.clinica-btn.sede-sur:hover {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.4);
}

.clinica-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.clinica-btn span {
    white-space: nowrap;
}

/* Botón Ver Detalle / Ver Listado en KPIs */
.ver-detalle-btn {
    background: linear-gradient(135deg, #1F6BA7 0%, #134B7A 100%);
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.25);
    width: 100%;
}

.ver-detalle-btn:hover {
    background: linear-gradient(135deg, #2980C4 0%, #1F6BA7 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(31, 107, 167, 0.4);
}

.card.warning .ver-detalle-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.card.warning .ver-detalle-btn:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.card.danger .ver-detalle-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.card.danger .ver-detalle-btn:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

.card.success .ver-detalle-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.card.success .ver-detalle-btn:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.bg-primary { background: linear-gradient(135deg, #0D3B5E, #1F6BA7); }
.bg-secondary { background: linear-gradient(135deg, #1F6BA7, #2482B8); }
.bg-success { background: linear-gradient(135deg, #10b981, #34d399); }
.bg-warning { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.bg-medical { background: linear-gradient(135deg, #1F6BA7, #2482B8); }
.bg-danger { background: linear-gradient(135deg, #ef4444, #f87171); }
.bg-info { background: linear-gradient(135deg, #64B2BA, #84CCD5); }
.bg-egreso { background: linear-gradient(135deg, #1F6BA7, #3498DB); }

/* Card Estancia Media (LOS) */
.card.medical {
    border-left: 4px solid #1F6BA7;
}

/* Card Tiempo Egreso */
.card.egreso {
    border-left: 4px solid #1F6BA7;
}

/* Sem�foro de egreso */
.egreso-semaforo {
    display: inline-block;
    font-size: 1.4rem;
    margin-left: 10px;
    vertical-align: middle;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.egreso-semaforo.verde {
    color: #22c55e;
}

.egreso-semaforo.amarillo {
    color: #f59e0b;
}

.egreso-semaforo.rojo {
    color: #ef4444;
}

/* Detalle modal LOS */
.los-desglose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.los-desglose-item {
    background: #f8fafc;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.los-desglose-item .desglose-label {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 6px;
    display: block;
}

.los-desglose-item .desglose-valor {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
}

/* Detalle modal Egreso */
.egreso-barreras {
    margin-top: 16px;
}

.egreso-barrera-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: #f8fafc;
    border-left: 3px solid #e2e8f0;
    transition: background 0.2s;
}

.egreso-barrera-row:hover {
    background: #f1f5f9;
}

.egreso-barrera-row .barrera-nombre {
    font-weight: 500;
    color: #334155;
    font-size: 0.85rem;
}

.egreso-barrera-row .barrera-tiempo {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e293b;
}

.egreso-barrera-row.critico {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.egreso-barrera-row.alerta {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.egreso-semaforo-leyenda {
    display: flex;
    gap: 16px;
    margin-top: 14px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    flex-wrap: wrap;
}

.egreso-semaforo-leyenda span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #475569;
}

/* Charts Section */
.charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 24px;
    margin-bottom: 36px;
}

.chart-container {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 380px;
    max-height: 380px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    /* Soft top highlight for depth */
    border-top: 1px solid #ffffff;
}

.chart-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1e3a8a 0%, #1F6BA7 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chart-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.04);
    border-color: rgba(31, 107, 167, 0.15);
}

.chart-container:hover::before {
    opacity: 1;
}

.chart-container canvas {
    flex: 1;
    min-height: 0;
    max-height: 100%;
}

.chart-title {
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 1.15rem;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    letter-spacing: -0.01em;
}

/* .chart-container ya definido arriba — sección consolidada */

.chart-title {
    margin-bottom: 18px;
    color: #1F6BA7;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Evolucion de calidad - Direccion medica */
.quality-evolution-card {
    gap: 16px;
    height: auto;
    min-height: 360px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.quality-evolution-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}

.quality-evolution-subtitle {
    margin: 6px 0 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.quality-evolution-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.quality-period {
    font-size: 0.8rem;
    color: #334155;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(31, 107, 167, 0.1);
}

.quality-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.quality-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1e293b;
    background: #e2e8f0;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quality-evolution-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.quality-kpi {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.quality-kpi-label {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 6px;
}

.quality-kpi-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.quality-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 600;
}

.quality-kpi-trend.up {
    color: #16a34a;
}

.quality-kpi-note {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: #64748b;
}

.quality-evolution-body {
    position: relative;
    min-height: 240px;
    display: flex;
}

.quality-evolution-body canvas {
    flex: 1;
    max-height: 240px;
}

.quality-evolution-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px dashed rgba(148, 163, 184, 0.5);
}

.quality-evolution-card:not(.is-empty) .quality-evolution-empty {
    display: none;
}

.quality-empty-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.15), rgba(56, 189, 248, 0.1));
    color: #0ea5e9;
    font-size: 24px;
}

.quality-empty-text h4 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    color: #0f172a;
}

.quality-empty-text p {
    margin: 0 0 10px 0;
    color: #64748b;
    font-size: 0.85rem;
}

.quality-empty-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: #475569;
}

.quality-empty-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

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

.legend-dot.good { background: #22c55e; }
.legend-dot.mid { background: #f59e0b; }
.legend-dot.low { background: #ef4444; }

.quality-evolution-footer {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.82rem;
}

.quality-footer-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.quality-footer-item i {
    color: #1F6BA7;
}

@media (max-width: 900px) {
    .quality-evolution-actions {
        align-items: flex-start;
    }

    .quality-evolution-body {
        min-height: 260px;
    }

    .quality-evolution-empty {
        flex-direction: column;
        text-align: center;
    }
}

/* Projects Table */
.projects-table {
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    margin-top: 32px;
    margin-bottom: 36px;
    border: 1px solid #f1f5f9;
}

.projects-table:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.table-header {
    padding: 24px 28px;
    background: linear-gradient(135deg, #1e3a8a 0%, #1F6BA7 100%);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.3px;
}

.table-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

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

.indicator-action-btn {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: #ffffff;
    cursor: pointer;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
}

.indicator-action-btn.view {
    color: #1F6BA7;
    border-color: #1F6BA7;
}

.indicator-action-btn.view:hover {
    background: #e0f2fe;
    box-shadow: 0 6px 14px rgba(14, 116, 144, 0.18);
}

.indicator-action-btn.edit {
    color: #b45309;
    border-color: #f59e0b;
}

.indicator-action-btn.edit:hover {
    background: #fff7ed;
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.2);
}

.search-box {
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: white;
    width: 250px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
}

.search-box::placeholder {
    color: rgba(255,255,255,0.85);
}

.search-box:focus {
    outline: none;
    background: rgba(255,255,255,0.2);
    border-color: rgba(64, 158, 255, 0.8);
    width: 300px;
}

.medical-indicator-form {
    display: grid;
    gap: 16px;
}

.medical-indicator-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.indicator-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.indicator-detail-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.indicator-detail-card.highlight {
    background: #fefce8;
    border-color: #fde68a;
}

.indicator-detail-card h4 {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: #1e293b;
}

.indicator-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.85rem;
    color: #475569;
    border-bottom: 1px dashed #e2e8f0;
}

.indicator-detail-row:last-child {
    border-bottom: none;
}

.indicator-edit-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #475569;
}

.meta-history-table {
    max-height: 380px;
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.meta-history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.meta-history-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

.meta-history-field label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

.meta-history-field select,
.meta-history-field input {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #cbd5f5;
    font-size: 0.85rem;
}

.meta-history-field.meta-history-search {
    min-width: 220px;
    flex: 1 1 240px;
}

.meta-history-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.85rem;
    color: #475569;
}

.meta-history-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.procedures-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px 6px;
    background: #f8fafc;
    border-left: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9;
}

.summary-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    min-width: 160px;
}

.summary-chip span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    font-weight: 700;
}

.summary-chip strong {
    font-size: 1.05rem;
    color: #0f172a;
    font-weight: 800;
}

.summary-chip.accent {
    background: linear-gradient(135deg, #e0f2fe 0%, #eff6ff 100%);
    border-color: #bae6fd;
}

.summary-chip.summary-wide {
    flex: 1 1 280px;
}

.meta-history-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.meta-history-table th {
    background: #1f6ba7;
    color: #ffffff;
    text-align: left;
    padding: 10px 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.meta-history-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    vertical-align: top;
}

.meta-history-table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.search-box::placeholder {
    color: rgba(255,255,255,0.85);
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}

/* Efecto hover deshabilitado para rendimiento */
.btn::before {
    display: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background: #1F6BA7;
    color: var(--white);
}

.btn-primary:hover {
    background: #082A5D;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.3);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: 8px;
}

.btn-outline {
    background: transparent;
    border: 2px solid #1F6BA7;
    color: #1F6BA7;
    box-shadow: none;
}

.btn-outline:hover {
    background: #1F6BA7;
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.2);
}

.btn-secondary {
    background: #64748b;
    color: var(--white);
    border: none;
}

.btn-secondary:hover {
    background: #475569;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.2);
}

.btn-white {
    background: #FFFFFF;
    color: #1F6BA7;
    border: 2px solid #1F6BA7;
}

.btn-white:hover {
    background: #1F6BA7;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.3);
}

.btn-success {
    background: #10b981;
    color: var(--white);
}

.btn-success:hover {
    background: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-medical {
    background: #ffffff;
    color: #1e3a8a;
    font-weight: 700;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-medical:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.btn-quality {
    background: #1F6BA7;
    color: var(--white);
}

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

.btn-warning {
    background: #f59e0b;
    color: var(--white);
}

.btn-info {
    background: #1F6BA7;
    color: var(--white);
}
    
.table-container {
    max-height: 480px;
    overflow-y: auto !important;
    overflow-x: auto !important;
    border-radius: var(--border-radius);
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}

.procedures-table-container {
    max-height: 480px;
    overflow-y: auto !important;
    overflow-x: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.procedures-table-container::-webkit-scrollbar,
.table-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.procedures-table-container::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
    border: 2px solid #f1f5f9;
}

.procedures-table-container::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.procedures-table-container::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 999px;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

th, td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid #f0f2f8;
}

th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 600;
    color: #475569;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 2px solid #e2e8f0;
}

tr {
    transition: background 0.1s ease;
}

tr:hover {
    background: rgba(31, 107, 167, 0.03);
}

td {
    color: #475569;
    font-size: 0.95rem;
}

.status {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    transition: var(--transition-fast);
}

.status:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.status-completed {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-in-progress {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    border: 1px solid #ffeaa7;
}

.status-planning {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.status-urgent {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Section Styles - Animaciones Modernas */
.section {
    display: none;
    padding: 20px;
    background: transparent;
    position: relative;
    z-index: 1;
    animation: fadeInSection 0.5s ease-out;
    isolation: isolate;
}

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

.section.active {
    display: block !important;
    animation: fadeInUp 0.5s ease-out;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Module Header - Diseño Consistente para cada Módulo */
.module-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    margin-bottom: 20px;
    padding: 14px 16px 14px 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(31, 107, 167, 0.07), 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(31, 107, 167, 0.06);
    position: relative;
    overflow: visible;
}

.module-page-header::before {
    content: '';
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-blue-bright) 50%, #0ea5e9 100%);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.2);
}

.module-page-header .module-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-bright) 100%);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 4px 14px rgba(31, 107, 167, 0.22);
    flex-shrink: 0;
}

.module-page-header .module-info h2 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-blue-dark);
    letter-spacing: -0.4px;
    line-height: 1.2;
}

.module-page-header .module-info p {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.3;
}

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

/* Estilos para Gestión Documental — header CSS limpio (usa .module-page-header) */

#Gestion-documental .mgdi-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: none;
    padding: 14px;
    border-radius: 16px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
}

#Gestion-documental .mgdi-modulo#mgdi-biblioteca {
    display: block;
}

#Gestion-documental .mgdi-modulo {
    display: none;
}

/* ========== SECTION TITLE - ULTRA PREMIUM ========== */
.section-title-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 40px 0 28px 0;
    padding: 24px 28px;
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 20px;
    box-shadow: 
        0 10px 40px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.05);
    position: relative;
    overflow: hidden;
}

.section-title-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    border-radius: 0 4px 4px 0;
}

.section-title-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(14, 165, 233, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

.section-title-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 10px 30px rgba(31, 107, 167, 0.35);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.section-title-content {
    position: relative;
    z-index: 1;
}

.section-title-content h2 {
    margin: 0 0 6px 0;
    font-size: 1.5rem;
    font-weight: 900;
    color: #1e293b;
    letter-spacing: -0.5px;
}

.section-title-content p {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
    font-weight: 500;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: scale(0.98);
    }
    to { 
        opacity: 1; 
        transform: scale(1);
    }
}

/* Service Indicators - Dise�o Ultra Premium */
.service-indicators {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 28px;
    margin-bottom: 40px;
}

.service-card {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    backdrop-filter: none;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 
        0 10px 40px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border-left: 6px solid;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-right: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: currentColor;
    opacity: 0.05;
    border-radius: 50%;
    transform: translate(30%, -30%);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 25px 60px rgba(31, 107, 167, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.service-card:hover::before {
    transform: translate(15%, -15%) scale(1.4);
    opacity: 0.08;
}

.service-card.emergency {
    border-left-color: var(--emergency);
}

.service-card.or {
    border-left-color: var(--or);
}

.service-card.hospitalization {
    border-left-color: var(--hospitalization);
}

.service-card.outpatient {
    border-left-color: var(--outpatient);
}

.service-card.icu {
    border-left-color: var(--icu);
}

.service-card.oncology {
    border-left-color: var(--oncology);
}

.service-card.pediatrics {
    border-left-color: var(--pediatrics);
}

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

.service-title {
    font-size: 1rem;
    color: #1e293b;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.service-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
    transform: rotate(10deg) scale(1.1);
}

.service-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    flex: 1;
}

.metric {
    text-align: center;
    padding: 12px 8px;
    border-radius: 12px;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    transition: all 0.3s ease;
    min-height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.metric:hover {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.08);
}

.metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1e293b;
    line-height: 1.2;
    white-space: nowrap;
}

.metric-label {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.bg-emergency { background: var(--emergency); }
.bg-or { background: var(--or); }
.bg-hospitalization { background: var(--hospitalization); }
.bg-outpatient { background: var(--outpatient); }
.bg-icu { background: var(--icu); }
.bg-oncology { background: var(--oncology); }
.bg-pediatrics { background: var(--pediatrics); }

/* ========== KPI Section Header ========== */
.kpi-section {
    margin-bottom: 28px;
}

.kpi-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #082A5D 0%, #1F6BA7 100%);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 15px rgba(8, 42, 93, 0.2);
}

.kpi-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.kpi-section-title i {
    font-size: 1.4rem;
    background: rgba(255,255,255,0.15);
    padding: 10px;
    border-radius: 10px;
}

.kpi-section-title h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #fff;
}

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

.kpi-periodo-selector {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.kpi-periodo-selector:hover,
.kpi-periodo-selector:focus {
    background: rgba(255,255,255,0.25);
    outline: none;
}
.kpi-periodo-selector option {
    background: #082A5D;
    color: #fff;
}

.kpi-refresh-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.kpi-refresh-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: rotate(180deg);
}

/* ========== KPI Icon Badges ========== */
.kpi-icon-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.kpi-icon-protocolos { background: linear-gradient(135deg, #10b981, #059669); }
.kpi-icon-estancia   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.kpi-icon-infeccion  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.kpi-icon-historia   { background: linear-gradient(135deg, #1F6BA7, #1F6BA7); }
.kpi-icon-prescripcion { background: linear-gradient(135deg, #f59e0b, #d97706); }
.kpi-icon-turnos     { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.kpi-icon-tele-respuesta { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.kpi-icon-tele-resolucion { background: linear-gradient(135deg, #0ea5e9, #0284c7); }

/* ========== KPI Trend Indicator ========== */
.kpi-trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 6px 0 10px;
    min-height: 20px;
}

.kpi-trend .trend-up { color: #10b981; }
.kpi-trend .trend-down { color: #ef4444; }
.kpi-trend .trend-stable { color: #6b7280; }

/* ========== KPI Detail Button ========== */
.kpi-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #1F6BA7, #082A5D);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    margin-top: 4px;
    letter-spacing: 0.2px;
}

.kpi-detail-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.35);
    background: linear-gradient(135deg, #2577b5, #0a3470);
}

.kpi-detail-btn i {
    font-size: 0.75rem;
}

/* ========== KPI Detail Modal ========== */
.kpi-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(8, 42, 93, 0.55);
    backdrop-filter: blur(4px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: kpiModalFadeIn 0.25s ease;
}

@keyframes kpiModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.kpi-modal {
    background: #fff;
    border-radius: 16px;
    width: 92%;
    max-width: 900px;
    max-height: 88vh;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    animation: kpiModalSlideIn 0.3s ease;
    display: flex;
    flex-direction: column;
}

@keyframes kpiModalSlideIn {
    from { transform: translateY(30px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.kpi-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #082A5D 0%, #1F6BA7 100%);
    color: #fff;
}

.kpi-modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kpi-modal-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.kpi-modal-close:hover {
    background: rgba(255,255,255,0.3);
}

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

.kpi-modal-body .kpi-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-summary-card {
    background: linear-gradient(135deg, #f0f7ff, #e8f4fd);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(31,107,167,0.1);
}

.kpi-summary-card .kpi-s-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #082A5D;
}

.kpi-summary-card .kpi-s-label {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
    font-weight: 500;
}

.kpi-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.kpi-detail-table thead th {
    background: #f1f5f9;
    padding: 12px 16px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
    border-bottom: 2px solid #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-detail-table tbody td {
    padding: 11px 16px;
    font-size: 0.88rem;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
}

.kpi-detail-table tbody tr:hover {
    background: #f8fafc;
}

.kpi-detail-table .kpi-val-good { color: #10b981; font-weight: 700; }
.kpi-detail-table .kpi-val-warn { color: #f59e0b; font-weight: 700; }
.kpi-detail-table .kpi-val-bad  { color: #ef4444; font-weight: 700; }

.kpi-chart-container {
    margin-top: 20px;
    padding: 16px;
    background: #fafbfc;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.kpi-chart-container h4 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: #374151;
    font-weight: 700;
}

.kpi-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kpi-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kpi-bar-label {
    width: 140px;
    font-size: 0.82rem;
    color: #475569;
    font-weight: 500;
    text-align: right;
    flex-shrink: 0;
}

.kpi-bar-track {
    flex: 1;
    height: 26px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.kpi-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.8s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    min-width: 40px;
}

.kpi-bar-fill span {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.kpi-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #64748b;
    gap: 10px;
}

.kpi-loading i {
    animation: spin 1s linear infinite;
}

@media (max-width: 768px) {
    .kpi-section-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .kpi-section-title h3 {
        font-size: 1rem;
    }
    .kpi-modal {
        width: 96%;
        max-height: 92vh;
    }
    .kpi-modal-body .kpi-summary-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .kpi-bar-label {
        width: 100px;
        font-size: 0.75rem;
    }
}

/* ========== DASHBOARD ANALYTICS CHARTS - PREMIUM ========== */
.dash-analytics-section {
    margin-bottom: 40px;
}

.dash-analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 20px 28px;
    background: linear-gradient(135deg, #0a1628 0%, #1a365d 50%, #2b4c7e 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(10, 22, 40, 0.25);
    flex-wrap: wrap;
    gap: 16px;
}

.dash-analytics-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dash-analytics-title i {
    font-size: 1.5rem;
    color: #4facfe;
    filter: drop-shadow(0 0 8px rgba(79, 172, 254, 0.4));
}

.dash-analytics-title h2 {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.5px;
}

.dash-analytics-badge {
    background: linear-gradient(135deg, #00f2fe, #4facfe);
    color: #0a1628;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: dashPulse 2s ease-in-out infinite;
}

@keyframes dashPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(79, 172, 254, 0.4); }
    50% { opacity: 0.85; box-shadow: 0 0 0 8px rgba(79, 172, 254, 0); }
}

.dash-analytics-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.dash-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dash-filter-group label {
    color: rgba(255,255,255,0.92);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.dash-filter-group label i {
    margin-right: 4px;
    font-size: 0.65rem;
}

.dash-filter-group select {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    min-width: 170px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    appearance: auto;
}

.dash-filter-group select:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(79, 172, 254, 0.5);
}

.dash-filter-group select:focus {
    outline: none;
    border-color: #4facfe;
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.2);
}

.dash-filter-group select option {
    background: #1a365d;
    color: #fff;
}

.dash-btn-refresh {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    border: none;
    color: #0a1628;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
    align-self: flex-end;
}

.dash-btn-refresh:hover {
    transform: rotate(180deg) scale(1.05);
    box-shadow: 0 6px 20px rgba(79, 172, 254, 0.5);
}

.dash-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.dash-chart-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
    border: 1px solid #e8ecf4;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
}

.dash-chart-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(31, 107, 167, 0.12);
    border-color: rgba(79, 172, 254, 0.3);
}

.dash-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 12px;
    border-bottom: 1px solid #f0f4f8;
}

.dash-chart-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dash-chart-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.dash-chart-title-group h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2332;
    margin: 0;
    line-height: 1.3;
}

.dash-chart-subtitle {
    font-size: 0.75rem;
    color: #8094ae;
    font-weight: 400;
}

.dash-chart-actions {
    display: flex;
    gap: 6px;
}

.dash-chart-btn {
    background: #f0f4f8;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7c93;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.dash-chart-btn:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.dash-chart-body {
    padding: 16px 24px;
    flex: 1;
    min-height: 280px;
    position: relative;
}

.dash-chart-body canvas {
    width: 100% !important;
    max-height: 260px;
}

.dash-chart-footer {
    display: flex;
    justify-content: space-around;
    padding: 14px 24px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-top: 1px solid #e8ecf4;
}

.dash-chart-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #64748b;
}

.dash-chart-stat i {
    font-size: 0.7rem;
}

.dash-chart-stat i.fa-arrow-up { color: #10b981; }
.dash-chart-stat i.fa-arrow-down { color: #ef4444; }
.dash-chart-stat i.fa-star { color: #f59e0b; }

.dash-chart-stat strong {
    color: #1a2332;
    font-weight: 700;
}

/* Modal Detalle Gr�fico */
.dash-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 22, 40, 0.7);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dashFadeIn 0.3s ease;
}

@keyframes dashFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dash-modal-content {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
    animation: dashSlideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.dash-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid #e8ecf4;
    background: linear-gradient(135deg, #0a1628, #1a365d);
    border-radius: 20px 20px 0 0;
}

.dash-modal-header h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.dash-modal-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.dash-modal-close:hover {
    background: rgba(239, 68, 68, 0.8);
    transform: rotate(90deg);
}

.dash-modal-body {
    padding: 28px;
}

.dash-modal-body canvas {
    width: 100% !important;
    max-height: 400px;
}

.dash-modal-table {
    padding: 0 28px 28px;
}

.dash-modal-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.dash-modal-table th {
    background: linear-gradient(135deg, #1a365d, #2b4c7e);
    color: #fff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dash-modal-table th:first-child { border-radius: 10px 0 0 0; }
.dash-modal-table th:last-child { border-radius: 0 10px 0 0; }

.dash-modal-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f4f8;
    color: #334155;
}

.dash-modal-table tr:hover td {
    background: #f8fafc;
}

.dash-modal-table tr:last-child td:first-child { border-radius: 0 0 0 10px; }
.dash-modal-table tr:last-child td:last-child { border-radius: 0 0 10px 0; }

/* Loading overlay para charts */
.dash-chart-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border-radius: 20px;
}

.dash-chart-loading .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e8ecf4;
    border-top: 3px solid #4facfe;
    border-radius: 50%;
    animation: dashSpin 0.8s linear infinite;
}

@keyframes dashSpin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1024px) {
    .dash-charts-grid {
        grid-template-columns: 1fr;
    }
    .dash-analytics-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .dash-analytics-filters {
        flex-direction: column;
        width: 100%;
    }
    .dash-filter-group select {
        width: 100%;
    }
    .dash-chart-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .dash-chart-actions {
        align-self: flex-end;
    }
}

/* Performance Indicators - Premium */
.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.performance-card {
    background: #ffffff;
    border-radius: var(--border-radius-lg, 12px);
    padding: 24px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.02);
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(226, 232, 240, 0.8);
    position: relative;
    overflow: hidden;
}

.performance-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1F6BA7 0%, #3498DB 100%);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.performance-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.04);
    border-color: rgba(31, 107, 167, 0.15);
}

.performance-card:hover::before {
    opacity: 1;
}

.performance-value {
    font-size: 2.25rem;
    font-weight: 800;
    background: #1F6BA7;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.performance-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.high-impact-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.high-impact-kpi {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.high-impact-kpi .kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    font-weight: 700;
}

.high-impact-kpi .kpi-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1F6BA7;
}

.high-impact-kpi .kpi-trend,
.high-impact-kpi .kpi-note {
    font-size: 0.78rem;
    color: #475569;
}

.high-impact-detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
}

.high-impact-detail .detail-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 6px;
}

.high-impact-detail p {
    margin: 0;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.5;
}

.high-impact-detail .detail-formula {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #1e293b;
}

.performance-detail-btn {
    margin-top: 16px;
    border: 1px solid rgba(31, 107, 167, 0.2);
    background: #f8fafc;
    color: #1F6BA7;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.performance-detail-btn:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.efficiency-modal-header {
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
}

.efficiency-modal-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.efficiency-modal-value {
    font-size: 2.1rem;
    font-weight: 800;
    color: #1F6BA7;
}

.efficiency-modal-label {
    font-size: 0.95rem;
    color: #64748b;
}

.efficiency-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.efficiency-modal-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.5;
}

.efficiency-modal-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
}

.efficiency-modal-section ul {
    margin: 0;
    padding-left: 18px;
}

.efficiency-modal-formula {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #1e293b;
}

.performance-detail {
    margin-top: 14px;
    text-align: left;
    display: grid;
    gap: 10px;
    color: #475569;
    font-size: 0.78rem;
    line-height: 1.5;
}

.performance-detail-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 4px;
}

.performance-flow {
    margin: 0;
    padding-left: 16px;
}

.performance-formula {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #1e293b;
}

/* Accreditation Cards */
.accreditation-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.accreditation-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

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

.accreditation-title {
    font-size: 1.1rem;
    font-weight: 500;
}

.accreditation-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-certified {
    background: #e6f7ee;
    color: var(--success);
}

.badge-in-progress {
    background: #fef5e6;
    color: var(--warning);
}

.badge-pending {
    background: #e6f0ff;
    color: var(--info);
}

.accreditation-details {
    margin-bottom: 15px;
    color: var(--gray-medium);
    font-size: 0.9rem;
}

.progress-bar {
    height: 8px;
    background: var(--gray-light);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress {
    height: 100%;
    background: var(--success);
    transition: width 0.5s ease;
}

.accreditation-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--gray);
}

/* Improvement Cards */
.improvement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 36px;
}

.improvement-card {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, background 0.2s ease;
    border-left: 4px solid var(--primary);
    position: relative;
    overflow: hidden;
}

.improvement-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(98, 47, 122, 0.05) 0%, transparent 70%);
}

.improvement-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-left-width: 6px;
}

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

.improvement-title {
    font-size: 1.1rem;
    font-weight: 500;
}

.improvement-category {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    background: #e6f0ff;
    color: var(--info);
}

.improvement-description {
    margin-bottom: 15px;
    color: var(--gray-medium);
    font-size: 0.9rem;
}

.improvement-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--gray);
}

/* Modal Styles - Premium Glassmorphism */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: none;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: #FFFFFF;
    border-radius: 20px;
    width: 540px;
    max-width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 36px;
    box-shadow: 0 25px 20px rgba(0, 0, 0, 0.2);
    animation: modalSlideUp 0.35s ease-out;
    border: 1px solid #f1f5f9;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f1f5f9;
}

.modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1F6BA7;
    letter-spacing: -0.3px;
}

.close-modal {
    background: #f8fafc;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: #64748b;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}

.close-modal:hover {
    background: #1F6BA7;
    color: white;
    transform: rotate(90deg);
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: transform 0.2s ease, background 0.2s ease;
    background: #f8fafc;
    color: #1e293b;
}

.form-control:focus {
    outline: none;
    border-color: #1F6BA7;
    background: white;
    box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.1), 0 4px 12px rgba(31, 107, 167, 0.1);
}

.form-control.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}

.form-control.is-invalid:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.form-control::placeholder {
    color: #94a3b8;
}

/* Tabs - Dise�o Limpio */
.tabs {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 24px;
    gap: 0;
}

.tab {
    padding: 14px 24px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: transform 0.2s ease, background 0.2s ease;
    color: #64748b;
    font-weight: 500;
    margin-bottom: -2px;
}

.tab:hover {
    color: #1F6BA7;
    background: #f8fafc;
}

.tab.active {
    border-bottom-color: #1F6BA7;
    color: #1F6BA7;
    font-weight: 600;
    background: transparent;
}

.tab-content {
    display: none;
    animation: tabFadeIn 0.3s ease;
}

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

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

/* Risk Matrix */
.risk-matrix-container {
    background: linear-gradient(180deg, var(--white) 0%, var(--gray-light) 100%);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: 22px;
    margin-bottom: 32px;
    border: 1px solid var(--gray);
}

.risk-context-panel {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--gray);
    padding: 18px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
}

.risk-context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.risk-context-header h3 {
    margin: 0 0 6px 0;
    color: var(--text-blue);
    font-size: 1.05rem;
}

.risk-context-header p {
    margin: 0;
    color: var(--gray-dark);
    font-size: 0.9rem;
}

.risk-context-controls {
    display: flex;
    gap: 10px;
}

.risk-context-select {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--gray);
    background: var(--white);
    color: var(--text-blue);
    font-weight: 600;
    font-size: 0.85rem;
}

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

.risk-indicator-card {
    background: var(--gray-light);
    border-radius: 14px;
    padding: 14px;
    border: 1px solid var(--gray);
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.risk-indicator-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.risk-indicator-card.low {
    border-color: var(--success);
}

.risk-indicator-card.medium {
    border-color: var(--warning);
}

.risk-indicator-card.high {
    border-color: var(--danger);
}

.risk-indicator-card.critical {
    border-color: var(--primary-blue-dark);
}

.risk-indicator-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.risk-indicator-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    box-shadow: var(--shadow-xs);
}

.risk-indicator-header h4 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-blue);
}

.risk-indicator-sub {
    font-size: 0.75rem;
    color: var(--gray-dark);
}

.risk-indicator-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-blue);
    margin-bottom: 6px;
}

.risk-indicator-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--gray-dark);
}

.risk-matrix-header {
    display: grid;
    grid-template-columns: 190px repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.risk-axis-label {
    font-weight: 700;
    color: var(--text-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-light);
    border-radius: 8px;
    font-size: 0.8rem;
    text-align: center;
    padding: 8px;
    min-height: 50px;
}

.risk-header-cell {
    font-weight: 700;
    color: var(--text-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-light);
    border-radius: 8px;
    font-size: 0.8rem;
    text-align: center;
    padding: 8px;
    min-height: 50px;
}

.risk-matrix-row {
    display: grid;
    grid-template-columns: 190px repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.risk-cell {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 700;
    color: var(--white);
    text-align: center;
    font-size: 0.88rem;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    box-shadow: var(--shadow);
    position: relative;
}

.risk-cell:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.risk-low {
    background: linear-gradient(135deg, var(--success) 0%, var(--blue-400) 100%);
}

.risk-medium {
    background: linear-gradient(135deg, var(--warning) 0%, var(--budget) 100%);
}

.risk-high {
    background: linear-gradient(135deg, var(--danger) 0%, var(--emergency) 100%);
}

.risk-critical {
    background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 100%);
}

/* Risk Tooltip */
.risk-tooltip {
    position: fixed;
    background: var(--primary-blue-dark);
    color: var(--white);
    padding: 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    z-index: 1000;
    pointer-events: none;
    max-width: 300px;
    box-shadow: var(--shadow-lg);
}

.risk-tooltip-content h4 {
    margin: 0 0 8px 0;
    color: var(--turquoise-light);
    font-size: 1rem;
}

.risk-tooltip-content p {
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.risk-tooltip-details {
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
}

.risk-tooltip-details span {
    display: flex;
    flex-direction: column;
}

.risk-tooltip-actions {
    margin-top: 8px;
    display: grid;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--cyan-light);
}

/* Risk Summary */
.risk-matrix-summary {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.risk-summary-card {
    background: var(--white);
    border: 1px solid var(--gray);
    border-radius: var(--border-radius-lg);
    padding: 18px;
    box-shadow: var(--shadow);
}

.risk-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.risk-summary-header h4 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    color: var(--text-blue);
}

.risk-summary-header p {
    margin: 0;
    color: var(--gray-dark);
    font-size: 0.9rem;
}

.risk-summary-pill {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--gray-light);
    color: var(--text-blue);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.risk-summary-pill.low { background: var(--success); color: var(--white); }
.risk-summary-pill.medium { background: var(--warning); color: var(--white); }
.risk-summary-pill.high { background: var(--danger); color: var(--white); }
.risk-summary-pill.critical { background: var(--primary-blue-dark); color: var(--white); }

.risk-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.risk-summary-item {
    background: var(--gray-light);
    border-radius: 12px;
    padding: 10px 12px;
}

.risk-summary-label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-dark);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.risk-summary-value {
    display: block;
    font-weight: 700;
    color: var(--text-blue);
}

.risk-summary-description {
    color: var(--text-blue);
    background: var(--cyan-light);
    border-radius: 12px;
    padding: 12px;
    line-height: 1.5;
    font-size: 0.9rem;
}

.risk-summary-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.risk-summary-guide {
    background: var(--white);
    border: 1px solid var(--gray);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    box-shadow: var(--shadow);
}

.risk-summary-guide h5 {
    margin: 0 0 10px 0;
    color: var(--text-blue);
    font-size: 0.95rem;
}

.risk-summary-guide ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
    color: var(--gray-dark);
    font-size: 0.85rem;
}

.risk-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.risk-dot.low { background: var(--success); }
.risk-dot.medium { background: var(--warning); }
.risk-dot.high { background: var(--danger); }
.risk-dot.critical { background: var(--primary-blue-dark); }

@media (max-width: 1100px) {
    .risk-matrix-header,
    .risk-matrix-row {
        grid-template-columns: 150px repeat(5, 1fr);
    }

    .risk-matrix-summary {
        grid-template-columns: 1fr;
    }
}

/* Risk Modal */
.risk-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.risk-modal {
    background: white;
    border-radius: var(--border-radius-lg);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.risk-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border);
}

.risk-modal-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.risk-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 5px;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.risk-modal-close:hover {
    background: var(--gray-light);
}

.risk-modal-body {
    padding: 20px;
}

.risk-info-section {
    margin-bottom: 30px;
}

.risk-info-section h4 {
    margin: 0 0 10px 0;
    color: var(--primary);
    font-size: 1.2rem;
}

.risk-info-section p {
    margin: 0 0 15px 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.risk-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.stat-item {
    background: var(--gray-light);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.stat-value {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.risk-actions-section h4 {
    margin: 0 0 15px 0;
    color: var(--primary);
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* Enhanced Procedures Table */
.procedures-enhanced-table {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray);
    width: 100%;
    min-width: 1120px;
}

.procedures-enhanced-table thead {
    background: #f8fafc;
}

.procedures-enhanced-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 18px 15px;
    color: #334155; /* Slate 700 para mejor contraste */
    font-weight: 700;
    text-align: left;
    font-size: 0.8rem;
    background: #f1f5f9;
    border-bottom: 2px solid #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.procedures-enhanced-table thead th i {
    margin-right: 8px;
    color: #64748b; /* Slate 500 */
    opacity: 0.8;
}

.procedures-enhanced-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border);
}

.procedures-enhanced-table tbody tr:hover {
    background: linear-gradient(90deg, var(--gray-light) 0%, var(--blue-100) 100%);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.procedures-enhanced-table tbody td {
    padding: 15px 12px;
    vertical-align: middle;
    border: none;
}

.procedures-empty-cell {
    padding: 0;
    border: none;
}

.procedures-empty-state {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 18px;
    align-items: center;
    padding: 24px 28px;
    margin: 6px 8px 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    border: 1px solid rgba(30, 99, 164, 0.12);
    border-radius: 16px;
    text-align: left;
}

.procedures-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.18), rgba(31, 107, 167, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--primary-blue);
}

.procedures-empty-content h4 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.procedures-empty-content p {
    margin: 0 0 14px 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.procedures-empty-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.procedures-empty-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

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

.chart-header .chart-title {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1F6BA7;
}
.chart-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 4px;
}
.btn-chart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.02em;
}
.btn-chart i {
    font-size: 0.85rem;
}
.btn-chart.outline {
    background: #ffffff;
    border-color: rgba(203, 213, 225, 0.8);
    color: #475569;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.btn-chart.primary {
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 100%);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(31, 107, 167, 0.2);
}
.btn-chart.outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(15, 23, 42, 0.05);
}
.btn-chart.primary:hover {
    background: linear-gradient(135deg, #1C507B 0%, #1F6BA7 100%);
    box-shadow: 0 6px 15px rgba(31, 107, 167, 0.3);
    transform: translateY(-1px);
}
.btn-chart:active {
    transform: translateY(0);
}
.medical-chart-subtitle {
    font-size: 0.9rem;
    color: #475569;
    margin-bottom: 10px;
}
.medical-chart-mode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e0f2fe;
    color: #0369a1;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
}
.medical-chart-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.medical-chart-kpi {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.medical-chart-kpi .label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
}
.medical-chart-kpi .value {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e293b;
    margin-top: 6px;
}
.medical-chart-detail,
.medical-chart-deepdive {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
}
.medical-chart-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.medical-chart-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.medical-chart-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
}
.medical-chart-section--detail .medical-chart-section-icon {
    background: rgba(31, 107, 167, 0.12);
    color: #1F6BA7;
}
.medical-chart-section--deep .medical-chart-section-icon {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
}
.medical-chart-section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}
.medical-chart-section-subtitle {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: #64748b;
}
.medical-chart-list {
    margin: 0;
    padding-left: 18px;
    color: #475569;
    line-height: 1.6;
}
.medical-chart-detail ul,
.medical-chart-deepdive ul {
    margin: 0;
    padding-left: 18px;
    color: #475569;
    line-height: 1.6;
}
.medical-chart-footer-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


.procedures-kpi {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(30, 99, 164, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.procedures-kpi-label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.procedures-kpi-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.procedures-kpi-value.up {
    color: #16a34a;
}

.procedures-kpi-value.down {
    color: #dc2626;
}

.procedures-kpi-note {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.procedures-empty-hint {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.procedures-empty-hint i {
    color: var(--primary-blue);
    margin-right: 6px;
}

@media (max-width: 768px) {
    .procedures-empty-state {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .procedures-empty-actions {
        justify-content: center;
    }

    .procedures-empty-hint {
        justify-content: center;
    }
}

/* Procedure Name Styling */
.procedure-name {
    font-weight: 700;
    color: var(--text-blue);
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.procedure-code {
    font-size: 0.75rem;
    color: var(--gray-medium);
    font-family: 'Courier New', monospace;
    opacity: 0.95;
}

/* Specialty Badges */
.specialty-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 8px; /* M�s moderno que circular completo */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.specialty-badge.cardio {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.specialty-badge.neuro {
    background: #e6f4fb;
    color: #082A5D;
    border: 1px solid #bfdbfe;
}

.specialty-badge.ortho {
    background: #ffedd5;
    color: #9a3412;
    border: 1px solid #fed7aa;
}

.specialty-badge.surgery {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.specialty-badge.uro {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #bae6fd;
}

.specialty-badge.gyneco {
    background: #e0f2fe;
    color: #0c4a6e;
    border: 1px solid #bae6fd;
}

.specialty-badge.ophthalmo {
    background: #e0f7fa;
    color: #00838f;
    border: 1px solid #b2ebf2;
}

.specialty-badge.gastro {
    background: #fff8e1;
    color: #ff8f00;
    border: 1px solid #ffecb3;
}

/* Quantity Badge */
.quantity-badge {
    display: inline-block;
    background: #f1f5f9;
    color: #0f172a;
    padding: 6px 4px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.9rem;
    min-width: 38px;
    text-align: center;
    border: 1px solid #cbd5e1;
}

/* Complication Rate Badges */
.complication-rate {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    min-width: 60px;
}

.complication-rate.low {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.complication-rate.medium {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.complication-rate.high {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.complication-rate.critical {
    background: linear-gradient(135deg, #8e44ad 0%, #6c3483 100%);
    color: white;
    animation: pulse 2s infinite;
}

/* Time Badge */
.time-badge {
    display: inline-block;
    background: #1e293b;
    color: #f8fafc;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Enhanced Action Buttons */
.action-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.action-buttons .btn {
    padding: 8px 10px;
    min-width: auto;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.action-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-buttons .btn i {
    margin: 0;
}

.action-buttons .btn-info {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border: none;
    color: white;
}

.action-buttons .btn-info:hover {
    background: linear-gradient(135deg, #2980b9 0%, #1f4e79 100%);
}

/* Status Enhancements */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.status i {
    font-size: 0.85rem;
}

.status.status-completed {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.status.status-in-progress {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.status.status-urgent {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    animation: pulse 2s infinite;
}

/* Pulse Animation for Critical Items */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

/* Table Search Enhancement */
#search-procedures {
    background: white;
    border: 2px solid var(--border);
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.3s ease;
    width: 300px;
    max-width: 100%;
}

#search-procedures:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.02) 0%, rgba(155, 89, 182, 0.02) 100%);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .procedures-enhanced-table {
        font-size: 0.85rem;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 768px) {
    .table-header {
        padding: 18px;
    }

    .table-controls {
        width: 100%;
        justify-content: flex-start;
    }

    #search-procedures {
        width: 100%;
    }

    .table-controls .btn {
        width: auto;
    }

    .procedures-enhanced-table thead th,
    .procedures-enhanced-table tbody td {
        padding: 10px 8px;
    }
    
    .specialty-badge,
    .quantity-badge,
    .time-badge {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
}

body:not(.user-ready) .user-avatar-container,
body:not(.user-ready) .user-details,
body:not(.user-ready) #sidebar-user-mini {
    display: none;
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: 40px;
    margin-bottom: 36px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #1F6BA7 0%, #082A5D 100%);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    margin-bottom: 32px;
    animation: slideInLeft 0.5s ease;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--primary);
    box-shadow: 0 0 0 4px rgba(98, 47, 122, 0.1);
    transition: transform 0.2s ease, background 0.2s ease;
}

.timeline-item:hover::before {
    transform: scale(1.4);
    box-shadow: 0 0 0 8px rgba(31, 107, 167, 0.15);
}

.timeline-date {
    font-size: 0.85rem;
    color: #1F6BA7;
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.timeline-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none;
    padding: 22px;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, background 0.2s ease;
    border-left: 4px solid;
    border-image: linear-gradient(135deg, #1F6BA7, #082A5D) 1;
}

.timeline-content:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 30px rgba(31, 107, 167, 0.12);
}

.timeline-content h4 {
    color: #1e293b;
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 600;
}

.timeline-content p {
    color: #64748b;
    line-height: 1.7;
}

/* Kanban Board */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.kanban-column {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 15px;
    box-shadow: var(--shadow);
}

.kanban-title {
    font-weight: 500;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.kanban-item {
    background: var(--light);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: move;
    border-left: 4px solid var(--primary);
}

.kanban-item.high {
    border-left-color: var(--danger);
}

.kanban-item.medium {
    border-left-color: var(--warning);
}

.kanban-item.low {
    border-left-color: var(--success);
}

/* Calendar - Diseno Premium Dinamico */
.calendar {
    background: linear-gradient(180deg, var(--white) 0%, var(--gray-light) 100%);
    border-radius: var(--border-radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-lg);
    margin-bottom: 40px;
    border: 1px solid var(--gray);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f1f5f9;
    gap: 20px;
}

.calendar-title h3 {
    margin: 0;
    color: var(--text-blue);
    font-weight: 700;
    font-size: 1.35rem;
}

.calendar-title p {
    margin: 6px 0 0 0;
    color: var(--gray-dark);
    font-size: 0.9rem;
}

.calendar-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendar-current {
    padding: 8px 16px;
    background: var(--primary-blue);
    border-radius: 10px;
    font-weight: 600;
    color: var(--white);
    min-width: 160px;
    text-align: center;
    letter-spacing: 0.3px;
}

.calendar-body {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
}

.calendar-panel {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid var(--gray);
    box-shadow: var(--shadow);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.calendar-day {
    min-height: 70px;
    border-radius: 14px;
    padding: 8px;
    font-weight: 600;
    color: var(--text-blue);
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--gray);
}

.calendar-day span {
    font-size: 0.85rem;
}

.calendar-day:hover {
    background: linear-gradient(135deg, var(--blue-100), var(--cyan-light));
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.calendar-day.header {
    min-height: 40px;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.6px;
    color: var(--gray-dark);
    background: var(--gray-light);
    cursor: default;
    border: none;
}

.calendar-day.empty {
    background: transparent;
    cursor: default;
    box-shadow: none;
}

.calendar-day.today {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
    color: var(--white);
    border: none;
}

.calendar-day.selected {
    outline: 2px solid var(--primary-blue);
    background: var(--gray-light);
}

.calendar-day.has-events {
    background: var(--gray-light);
    border: 1px solid var(--gray);
}

.calendar-event-dots {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

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

.calendar-event-dot.reunion { background: #22c55e; }
.calendar-event-dot.cirugia { background: #ef4444; }
.calendar-event-dot.auditoria { background: #f59e0b; }
.calendar-event-dot.capacitacion { background: #3b82f6; }
.calendar-event-dot.control { background: #1F6BA7; }
.calendar-event-dot.otro { background: #64748b; }

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    font-size: 0.8rem;
    color: var(--gray-dark);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

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

.legend-dot.reunion { background: #22c55e; }
.legend-dot.cirugia { background: #ef4444; }
.legend-dot.auditoria { background: #f59e0b; }
.legend-dot.capacitacion { background: #3b82f6; }
.legend-dot.otros { background: #64748b; }

.calendar-agenda {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid var(--gray);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}

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

.agenda-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #0f172a;
}

.agenda-actions {
    display: flex;
    gap: 8px;
}

.agenda-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
}

.agenda-empty {
    text-align: center;
    padding: 30px 12px;
    color: var(--gray-dark);
}

.agenda-empty i {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.agenda-item {
    border-radius: 12px;
    border: 1px solid var(--gray);
    padding: 12px;
    background: var(--white);
    box-shadow: var(--shadow);
}

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

.agenda-item-title {
    font-weight: 600;
    color: #0f172a;
}

.agenda-item-tag {
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 999px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agenda-item-tag.reunion { background: #22c55e; }
.agenda-item-tag.cirugia { background: #ef4444; }
.agenda-item-tag.auditoria { background: #f59e0b; }
.agenda-item-tag.capacitacion { background: #3b82f6; }
.agenda-item-tag.control { background: #1F6BA7; }
.agenda-item-tag.otro { background: #64748b; }

.agenda-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--text-blue);
    margin-top: 6px;
}

.agenda-item-meta i {
    margin-right: 4px;
    color: var(--primary-blue);
}

@media (max-width: 1100px) {
    .calendar-body {
        grid-template-columns: 1fr;
    }
}

/* Medical Staff Cards - Premium Design */
.staff-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 28px;
    margin-bottom: 40px;
}

.staff-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none;
    border-radius: var(--border-radius-xl);
    padding: 28px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, background 0.2s ease;
    border-top: 5px solid;
    border-image: linear-gradient(135deg, #1F6BA7, #082A5D) 1;
    position: relative;
    overflow: hidden;
}

.staff-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(31, 107, 167, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.staff-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 20px rgba(31, 107, 167, 0.15);
}

.staff-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f1f5f9;
}

.staff-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 18px;
    border: 4px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #1F6BA7, #082A5D) border-box;
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.2);
    transition: transform 0.2s ease, background 0.2s ease;
    object-fit: cover;
    cursor: pointer;
}

.staff-card:hover .staff-avatar {
    transform: scale(1.12) rotate(3deg);
    box-shadow: 0 10px 30px rgba(31, 107, 167, 0.3);
}

.change-photo-btn {
    position: absolute;
    bottom: 0;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1F6BA7;
    border: 3px solid white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.4);
}

.change-photo-btn:hover {
    background: linear-gradient(135deg, #082A5D, #1F6BA7);
    transform: scale(1.15);
    box-shadow: 0 6px 18px rgba(31, 107, 167, 0.5);
}

.change-photo-btn i {
    font-size: 12px;
}

.staff-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

.staff-specialty {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 10px;
}

.staff-status {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.staff-status.active {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
}

.staff-status.vacation {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.staff-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.staff-detail {
    text-align: center;
    padding: 14px 8px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.staff-detail:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, #D7EBEA 0%, #A9C5D0 100%);
}

.staff-detail-value {
    font-size: 1.6rem;
    font-weight: 800;
    background: #1F6BA7;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

.staff-detail-label {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.staff-actions {
    display: flex;
    gap: 14px;
}

.staff-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--shadow);
    position: relative;
}

.staff-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.staff-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    border: 3px solid var(--primary);
}

.staff-info {
    flex: 1;
}

.staff-name {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 5px;
}

.staff-specialty {
    font-size: 0.9rem;
    color: var(--gray-medium);
    margin-bottom: 5px;
}

.staff-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.staff-status.active {
    background: #e6f7ee;
    color: var(--success);
}

.staff-status.vacation {
    background: #fef5e6;
    color: var(--warning);
}

.staff-status.leave {
    background: #e6f0ff;
    color: var(--info);
}

.staff-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.staff-detail {
    text-align: center;
    padding: 8px;
    border-radius: 4px;
    background: #f8f9fa;
}

.staff-detail-value {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.staff-detail-label {
    font-size: 0.7rem;
    color: var(--gray);
}

.staff-actions {
    display: flex;
    gap: 10px;
}

/* Protocol Cards */
.protocol-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.protocol-card {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 24px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary);
    transition: transform 0.2s ease, background 0.2s ease;
}

.protocol-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-left-width: 6px;
}

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

.protocol-title {
    font-size: 1.1rem;
    font-weight: 500;
}

.protocol-category {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    background: #e6f0ff;
    color: var(--info);
}

.protocol-description {
    margin-bottom: 15px;
    color: var(--gray-medium);
    font-size: 0.9rem;
}

.protocol-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--gray);
}

/* Patient Experience Cards */
.experience-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.experience-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--shadow);
    text-align: center;
}

.experience-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.experience-label {
    font-size: 1rem;
    color: var(--gray);
    margin-bottom: 15px;
}

.experience-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--gray);
}

/* Innovation Projects */
.innovation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.innovation-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

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

.innovation-title {
    font-size: 1.1rem;
    font-weight: 500;
}

.innovation-stage {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    background: #e6f0ff;
    color: var(--info);
}

.innovation-description {
    margin-bottom: 15px;
    color: var(--gray-medium);
    font-size: 0.9rem;
}

.innovation-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--gray);
}

/* Responsive */
@media (max-width: 1200px) {
    .charts {
        grid-template-columns: 1fr;
    }
    
    .kanban-board {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    /* Sidebar responsive ya manejado por premium-ui.css */
    
    .dashboard-cards {
        grid-template-columns: 1fr 1fr;
    }
    
    .section {
        padding: 24px 20px;
    }
}

@media (max-width: 768px) {
    /* No cambiar flex-direction — sidebar se oculta via premium-ui.css */
    
    .dashboard-cards {
        grid-template-columns: 1fr;
    }
    
    .table-container {
        overflow-x: auto;
    }
    
    .service-indicators {
        grid-template-columns: 1fr;
    }
    
    .service-card {
        padding: 22px;
    }
    
    .service-metrics {
        gap: 12px;
    }
    
    .metric {
        padding: 14px 10px;
        min-height: 75px;
    }
    
    .metric-value {
        font-size: 1.25rem;
    }
    
    .metric-label {
        font-size: 0.7rem;
    }
    
    .clinica-buttons {
        flex-direction: column;
        gap: 6px;
    }
    
    .section-title-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .section-title-wrapper::before {
        width: 100%;
        height: 4px;
        top: 0;
        left: 0;
        border-radius: 4px 4px 0 0;
    }
    
    .module-page-header {
        flex-direction: column;
        text-align: center;
        padding: 18px;
        gap: 12px;
    }
    
    .module-page-header::before {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        border-radius: 4px;
        margin: 0 auto;
    }
    
    .module-page-header .module-icon {
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
    }
    
    .module-page-header .module-info h2 {
        font-size: 1.15rem;
    }
    
    .module-page-header .module-info p {
        font-size: 0.82rem;
    }
    
    .section {
        padding: 16px 12px;
    }
    
    .kanban-board {
        grid-template-columns: 1fr;
    }
    
    .header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .user-info {
        margin-top: 15px;
    }
    
    .table-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .table-controls {
        width: 100%;
        justify-content: space-between;
    }
    
    .staff-cards, .protocol-cards, .experience-cards, .innovation-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .sidebar-menu li {
        padding: 10px 15px;
    }
    
    .notification-dropdown {
        width: 280px;
    }
}

/* ================================
   ANIMACIONES Y EFECTOS ADICIONALES
   ================================ */

/* Fade in animation for sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse animation for notifications */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.notification-badge {
    /* Animaci�n desactivada para mejor rendimiento */
    animation: none;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #1F6BA7;
    border-radius: 10px;
    transition: transform 0.2s ease, background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0D3567 0%, #1F6BA7 100%);
}

/* Loading animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

/* Skeleton loading */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.skeleton {
    background: #f0f0f0;
    border-radius: 8px;
}

/* Hover effects for links */
a {
    transition: color 0.2s ease;
}

a:hover {
    opacity: 0.8;
}

/* Selection color */
::selection {
    background: var(--primary);
    color: white;
}

::-moz-selection {
    background: var(--primary);
    color: white;
}

/* Focus styles */
*:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Mejora de accesibilidad */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Animaci�n de entrada para cards */
.card,
.service-card,
.performance-card,
.staff-card,
.improvement-card {
    animation: fadeInUp 0.6s ease-out backwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }

/* Glassmorphism effect - Premium */
.glass {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Gradient text effect */
.gradient-text {
    background: #1F6BA7;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Shadow on scroll */
.shadow-on-scroll {
    transition: transform 0.2s ease, background 0.2s ease;
}

/* Animaciones para notificaciones */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

.shadow-on-scroll.scrolled {
    box-shadow: var(--shadow-lg);
}

/* Print styles */
@media print {
    .sidebar,
    .notifications,
    .btn,
    .alert-banner {
        display: none !important;
    }
    
    .container {
        height: auto;
        overflow: visible;
    }
    
    .main-content {
        margin-left: 0;
        padding: 0;
        height: auto;
        overflow: visible;
    }
    
    .card,
    .projects-table {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ================================
   ESTILOS FORMULARIO NUEVO M?DICO
   ================================ */

/* Modal Extra Large */
.modal-content.modal-xl {
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

/* ============================================
   ESTILOS MODAL M�DICOS POR CL�NICA - PREMIUM
   ============================================ */

#modal-medicos-clinica {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#modal-medicos-clinica.active {
    display: flex;
    opacity: 1;
}

#modal-medicos-clinica .modal-content {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 25px 80px rgba(0, 0, 0, 0.35),
        0 10px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: modalPremiumSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#modal-medicos-clinica .modal-header {
    position: relative;
    padding: 28px 30px;
    overflow: hidden;
}

#modal-medicos-clinica .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

#modal-medicos-clinica .modal-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin: 0;
}

#modal-medicos-clinica .modal-title i {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    font-size: 1.3rem;
    backdrop-filter: blur(10px);
}

#modal-medicos-clinica .close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 2;
    color: white;
}

#modal-medicos-clinica .close-modal:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
}

.clinica-stats-row {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
}

.clinica-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 22px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    box-shadow: 
        0 4px 15px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    flex: 1;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.clinica-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.12);
}

.clinica-stat i {
    font-size: 1.4rem;
    color: #1F6BA7;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.1) 0%, rgba(36, 130, 184, 0.15) 100%);
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(31, 107, 167, 0.1);
}

.clinica-stat.activos i {
    color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.15) 100%);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.1);
}

.clinica-stat.especialidades i {
    color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(96, 165, 250, 0.15) 100%);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.1);
}

.clinica-stat .stat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, #082A5D 0%, #1F6BA7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.clinica-stat .stat-label {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.medicos-clinica-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
    padding: 24px;
    max-height: 500px;
    overflow-y: auto;
}

.medicos-clinica-grid::-webkit-scrollbar {
    width: 6px;
}

.medicos-clinica-grid::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.medicos-clinica-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1F6BA7, #2482B8);
    border-radius: 3px;
}

.medico-clinica-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 18px;
    box-shadow: 
        0 4px 20px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.9);
    position: relative;
}

.medico-clinica-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1F6BA7, #2482B8);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.medico-clinica-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 50px rgba(31, 107, 167, 0.18),
        0 8px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.medico-clinica-card:hover::before {
    opacity: 1;
}

.medico-clinica-foto {
    position: relative;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.medico-clinica-foto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.medico-clinica-foto img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.9);
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.medico-clinica-card:hover .medico-clinica-foto img {
    transform: scale(1.08);
}

.medico-estado-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.medico-estado-badge.activo {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.95));
    color: white;
}

.medico-estado-badge.inactivo {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.95));
    color: white;
}

.medico-clinica-info {
    padding: 20px;
}

.medico-clinica-info .medico-nombre {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
}

.medico-clinica-info p {
    margin: 8px 0;
    font-size: 0.85rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.medico-clinica-info p i {
    width: 18px;
    color: #1F6BA7;
    font-size: 0.9rem;
}

.medico-clinica-info .medico-especialidad {
    color: #1F6BA7;
    font-weight: 600;
}

.medico-clinica-acciones {
    padding: 15px 20px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.medico-clinica-acciones .btn-accion {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.medico-clinica-acciones .btn-accion.ver {
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.1) 0%, rgba(36, 130, 184, 0.15) 100%);
    color: #1F6BA7;
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.1);
}

.medico-clinica-acciones .btn-accion.ver:hover {
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.3);
}

.medicos-clinica-vacio,
.medicos-clinica-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 30px;
    color: #64748b;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 20px;
    border: 2px dashed #e2e8f0;
}

.medicos-clinica-vacio i,
.medicos-clinica-error i {
    font-size: 4rem;
    margin-bottom: 20px;
    color: #cbd5e1;
}

.medicos-clinica-vacio p,
.medicos-clinica-error p {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.medicos-clinica-error i {
    color: #ef4444;
}

.medicos-clinica-error button {
    margin-top: 20px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.3);
}

.medicos-clinica-error button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.4);
}

.loading-spinner {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #1F6BA7;
    font-size: 1.1rem;
}

.loading-spinner i {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

/* ============================================
   ESTILOS MODAL INDICADORES POR CL�NICA - PREMIUM
   ============================================ */

#modal-indicador-clinica {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#modal-indicador-clinica.active {
    display: flex;
    opacity: 1;
}

#modal-indicador-clinica .modal-content {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    width: 95%;
    max-width: 650px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 25px 80px rgba(0, 0, 0, 0.35),
        0 10px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: modalPremiumSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center;
}

@keyframes modalPremiumSlide {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(40px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#modal-indicador-clinica .modal-header {
    position: relative;
    padding: 28px 30px;
    overflow: hidden;
}

#modal-indicador-clinica .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

#modal-indicador-clinica .modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

#modal-indicador-clinica .modal-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin: 0;
}

#modal-indicador-clinica .modal-title i {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    font-size: 1.3rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

#modal-indicador-clinica .close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 2;
}

#modal-indicador-clinica .close-modal:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
}

#modal-indicador-clinica .close-modal i {
    font-size: 1.1rem;
}

#modal-indicador-clinica .modal-body {
    padding: 30px;
    max-height: 60vh;
    overflow-y: auto;
}

#modal-indicador-clinica .modal-body::-webkit-scrollbar {
    width: 6px;
}

#modal-indicador-clinica .modal-body::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

#modal-indicador-clinica .modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1F6BA7, #2482B8);
    border-radius: 3px;
}

.indicador-clinica-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.clinica-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 30px;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.clinica-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmerBadge 2s infinite;
}

@keyframes shimmerBadge {
    0% { left: -100%; }
    100% { left: 100%; }
}

.clinica-badge i {
    font-size: 1.1rem;
}

.indicador-valor-principal {
    text-align: right;
}

.indicador-valor-principal .valor {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #082A5D 0%, #1F6BA7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1;
    text-shadow: none;
}

.indicador-valor-principal .trend {
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    margin-top: 10px;
}

.indicador-valor-principal .trend.positivo {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.2) 100%);
    color: #059669;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.indicador-valor-principal .trend.negativo {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.2) 100%);
    color: #dc2626;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.indicador-valor-principal .trend i {
    font-size: 0.8rem;
}

.indicador-detalle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.indicador-detalle-grid.eventos {
    grid-template-columns: repeat(3, 1fr);
}

.indicador-stat-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.indicador-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1F6BA7, #2482B8);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.indicador-stat-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(31, 107, 167, 0.15),
        0 8px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.indicador-stat-card:hover::before {
    opacity: 1;
}

.indicador-stat-card i {
    font-size: 1.6rem;
    color: #1F6BA7;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.1) 0%, rgba(36, 130, 184, 0.15) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.1);
    flex-shrink: 0;
}

.indicador-stat-card.ocupadas i {
    color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.15) 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.indicador-stat-card.ocupadas::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.indicador-stat-card.disponibles i {
    color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.15) 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.indicador-stat-card.disponibles::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.indicador-stat-card.success i {
    color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.15) 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.indicador-stat-card.success::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.indicador-stat-card.warning i {
    color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.15) 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.indicador-stat-card.warning::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.indicador-stat-card.danger i {
    color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.15) 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.indicador-stat-card.danger::before {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.indicador-stat-card.info i {
    color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(96, 165, 250, 0.15) 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.indicador-stat-card.info::before {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.indicador-stat-card.satisfaccion {
    flex-direction: column;
    text-align: center;
    padding: 25px 20px;
}

.indicador-stat-card.satisfaccion::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.indicador-stat-card .rating-stars {
    font-size: 1.8rem;
    color: #f59e0b;
    letter-spacing: 4px;
    text-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.indicador-stat-card .stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.indicador-stat-card .stat-numero {
    font-size: 1.7rem;
    font-weight: 800;
    background: linear-gradient(135deg, #082A5D 0%, #1F6BA7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.indicador-stat-card .stat-etiqueta {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.indicador-progress {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.indicador-progress .progress-bar {
    height: 16px;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.indicador-progress .progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.indicador-progress .progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.indicador-progress .progress-label {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
}

.eventos-resumen {
    margin-top: 24px;
    padding: 24px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 18px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.eventos-resumen p {
    margin: 8px 0;
    font-size: 1rem;
}

.eventos-resumen p strong {
    color: #1e293b;
}

.eventos-resumen .trend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 10px;
}

.eventos-resumen .trend.positivo {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.2) 100%);
    color: #059669;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.eventos-resumen .trend.negativo {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.2) 100%);
    color: #dc2626;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

#modal-indicador-clinica .modal-footer {
    padding: 20px 30px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

#modal-indicador-clinica .modal-footer .btn-secondary {
    background: linear-gradient(135deg, #1C507B 0%, #2482B8 100%);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.3);
}

#modal-indicador-clinica .modal-footer .btn-secondary:hover {
    background: linear-gradient(135deg, #082A5D 0%, #1C507B 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.4);
}

/* Responsive para modales de cl�nicas */
@media (max-width: 768px) {
    #modal-indicador-clinica .modal-content,
    #modal-medicos-clinica .modal-content {
        width: 98%;
        border-radius: 20px;
        margin: 10px;
    }
    
    #modal-indicador-clinica .modal-header,
    #modal-medicos-clinica .modal-header {
        padding: 20px;
    }
    
    #modal-indicador-clinica .modal-title,
    #modal-medicos-clinica .modal-title {
        font-size: 1.2rem;
    }
    
    #modal-indicador-clinica .modal-title i,
    #modal-medicos-clinica .modal-title i {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    #modal-indicador-clinica .modal-body,
    #modal-medicos-clinica .modal-body {
        padding: 20px;
    }
    
    .indicador-clinica-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 15px;
    }
    
    .indicador-valor-principal {
        text-align: center;
    }
    
    .indicador-valor-principal .valor {
        font-size: 2.5rem;
    }
    
    .indicador-detalle-grid {
        grid-template-columns: 1fr;
    }
    
    .indicador-detalle-grid.eventos {
        grid-template-columns: 1fr;
    }
    
    .clinica-stats-row {
        flex-direction: column;
        gap: 12px;
        padding: 15px;
    }
    
    .clinica-stat {
        padding: 15px;
    }
    
    .medicos-clinica-grid {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 15px;
    }
}

/* ============================================
   ESTILOS MODAL SERVICIOS POR CL�NICA - PREMIUM
   ============================================ */

#modal-servicio-clinica {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#modal-servicio-clinica.active {
    display: flex;
    opacity: 1;
}

#modal-servicio-clinica .modal-content {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    width: 95%;
    max-width: 750px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 25px 80px rgba(0, 0, 0, 0.35),
        0 10px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: modalPremiumSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#modal-servicio-clinica .modal-header {
    position: relative;
    padding: 28px 30px;
    overflow: hidden;
}

#modal-servicio-clinica .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

#modal-servicio-clinica .modal-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin: 0;
}

#modal-servicio-clinica .modal-title i {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    font-size: 1.3rem;
    backdrop-filter: blur(10px);
}

#modal-servicio-clinica .close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 2;
}

#modal-servicio-clinica .close-modal:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
}

#modal-servicio-clinica .modal-body {
    padding: 30px;
    max-height: 65vh;
    overflow-y: auto;
}

#modal-servicio-clinica .modal-body::-webkit-scrollbar {
    width: 6px;
}

#modal-servicio-clinica .modal-body::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

#modal-servicio-clinica .modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1F6BA7, #2482B8);
    border-radius: 3px;
}

#modal-servicio-clinica .modal-footer {
    padding: 20px 30px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

#modal-servicio-clinica .modal-footer .btn-secondary {
    background: linear-gradient(135deg, #1C507B 0%, #2482B8 100%);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.3);
}

#modal-servicio-clinica .modal-footer .btn-secondary:hover {
    background: linear-gradient(135deg, #082A5D 0%, #1C507B 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.4);
}

/* Grid de m�tricas de servicios */
.servicio-metricas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.servicio-metrica-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.servicio-metrica-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1F6BA7, #2482B8);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.servicio-metrica-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(31, 107, 167, 0.12);
}

.servicio-metrica-card:hover::before {
    opacity: 1;
}

.servicio-metrica-card i {
    font-size: 1.6rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #1F6BA7;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.1) 0%, rgba(36, 130, 184, 0.15) 100%);
}

.servicio-metrica-card.tiempo i {
    color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.15));
}

.servicio-metrica-card.tiempo::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

.servicio-metrica-card.pacientes i {
    color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.15));
}

.servicio-metrica-card.pacientes::before { background: linear-gradient(90deg, #10b981, #34d399); }

.servicio-metrica-card.reconsultas i,
.servicio-metrica-card.infeccion i {
    color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.15));
}

.servicio-metrica-card.reconsultas::before,
.servicio-metrica-card.infeccion::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.servicio-metrica-card.satisfaccion i {
    color: #2482B8;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.1), rgba(91, 186, 213, 0.15));
}

.servicio-metrica-card.satisfaccion::before { background: linear-gradient(90deg, #2482B8, #84CCD5); }

.servicio-metrica-card.ocupacion i {
    color: #06b6d4;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(34, 211, 238, 0.15));
}

.servicio-metrica-card.ocupacion::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }

.servicio-metrica-card.cirugias i {
    color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.15));
}

.servicio-metrica-card.cirugias::before { background: linear-gradient(90deg, #10b981, #34d399); }

.servicio-metrica-card.estancia i {
    color: #2482B8;
    background: linear-gradient(135deg, rgba(36, 130, 184, 0.1), rgba(129, 140, 248, 0.15));
}

.servicio-metrica-card.estancia::before { background: linear-gradient(90deg, #2482B8, #5bbad5); }

.servicio-metrica-card.mortalidad i,
.servicio-metrica-card.critico i {
    color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.15));
}

.servicio-metrica-card.mortalidad::before,
.servicio-metrica-card.critico::before { background: linear-gradient(90deg, #ef4444, #f87171); }

.servicio-metrica-card.eficiencia i {
    color: #2482B8;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.1), rgba(91, 186, 213, 0.15));
}

.servicio-metrica-card.eficiencia::before { background: linear-gradient(90deg, #2482B8, #84CCD5); }

/* Bot�n de Tendencia en cada m�trica */
.btn-tendencia {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #2482B8 0%, #1F6BA7 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.4);
    z-index: 10;
}

.servicio-metrica-card {
    position: relative;
}

.servicio-metrica-card:hover .btn-tendencia {
    opacity: 1;
    transform: scale(1);
}

.btn-tendencia:hover {
    background: linear-gradient(135deg, #1F6BA7 0%, #082A5D 100%);
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.5);
}

.btn-tendencia:active {
    transform: scale(0.95) !important;
}

/* Modal de Tendencia */
#modal-tendencia-metrica {
    z-index: 10001;
}

.modal-tendencia {
    max-width: 750px !important;
    width: 95%;
}

.tendencia-header {
    background: linear-gradient(135deg, #2482B8 0%, #1F6BA7 100%) !important;
}

.tendencia-info-header {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.tendencia-clinica,
.tendencia-servicio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.tendencia-clinica i,
.tendencia-servicio i {
    color: #2482B8;
}

/* Filtros de periodo */
.tendencia-periodo-filters {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.periodo-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.periodo-label i {
    color: #2482B8;
}

.periodo-buttons {
    display: flex;
    gap: 8px;
}

.periodo-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.periodo-btn:hover {
    border-color: #2482B8;
    color: #2482B8;
    background: rgba(31, 107, 167, 0.05);
}

.periodo-btn.active {
    background: linear-gradient(135deg, #2482B8 0%, #1F6BA7 100%);
    border-color: #2482B8;
    color: white;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.3);
}

.periodo-btn.active:hover {
    background: linear-gradient(135deg, #1F6BA7 0%, #082A5D 100%);
}

.periodo-btn i {
    font-size: 0.75rem;
}

.tendencia-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.tendencia-stat {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tendencia-stat .stat-label {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.tendencia-stat .stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
}

.tendencia-stat.actual { border-left: 3px solid #2482B8; }
.tendencia-stat.promedio { border-left: 3px solid #3b82f6; }
.tendencia-stat.maximo { border-left: 3px solid #10b981; }
.tendencia-stat.minimo { border-left: 3px solid #f59e0b; }

.tendencia-cambio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.tendencia-cambio.positivo {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.15));
    color: #059669;
}

.tendencia-cambio.negativo {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.15));
    color: #dc2626;
}

.tendencia-cambio i {
    font-size: 1rem;
}

.tendencia-chart-container {
    background: linear-gradient(145deg, #ffffff, #fafafa);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.tendencia-chart {
    width: 100%;
    height: auto;
}

.tendencia-tabla {
    overflow-x: auto;
}

.tendencia-tabla table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.tendencia-tabla th {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: #475569;
    font-weight: 600;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.tendencia-tabla td {
    background: white;
    color: #1e293b;
    font-weight: 500;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.tendencia-tabla tr:hover td {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

@media (max-width: 768px) {
    .tendencia-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tendencia-info-header {
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-tendencia {
        max-width: 100% !important;
    }
}

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

.metrica-valor {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #082A5D 0%, #1F6BA7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.metrica-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

/* Triaje Distribuci�n */
.triaje-distribucion {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.triaje-distribucion h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px 0;
    color: #1e293b;
    font-size: 1rem;
}

.triaje-distribucion h4 i {
    color: #1F6BA7;
}

.triaje-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.triaje-item {
    display: grid;
    grid-template-columns: 100px 1fr 50px;
    align-items: center;
    gap: 12px;
}

.triaje-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}

.triaje-bar-container {
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.triaje-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.triaje-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: progressShimmer 2s infinite;
}

.triaje-count {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    text-align: right;
}

/* Quir�fano Stats */
.quirofano-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.quirofano-stat-box {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.quirofano-stat-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(31, 107, 167, 0.1);
}

.quirofano-stat-box i {
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #1F6BA7;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.1), rgba(36, 130, 184, 0.15));
}

.quirofano-stat-box.success i {
    color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.15));
}

.quirofano-stat-box.danger i {
    color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.15));
}

.quirofano-stat-box .stat-big {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
}

.quirofano-stat-box .stat-desc {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
}

/* Camas Visual */
.camas-visual {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

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

.camas-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #1e293b;
    font-size: 1rem;
}

.camas-header h4 i {
    color: #3b82f6;
}

.camas-total {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
}

.camas-progress {
    height: 14px;
    background: #e2e8f0;
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 15px;
}

.camas-bar {
    height: 100%;
    border-radius: 7px;
    transition: width 0.8s ease;
    position: relative;
}

.camas-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: progressShimmer 2s infinite;
}

.camas-stats {
    display: flex;
    gap: 20px;
}

.cama-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.cama-stat.disponible {
    color: #10b981;
}

.cama-stat.altas {
    color: #2482B8;
}

/* UCI Recursos */
.uci-recursos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.uci-recurso-box {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.uci-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.4rem;
    color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.15));
    margin-bottom: 12px;
}

.uci-recurso-box.ventiladores .uci-icon {
    color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.15));
}

.uci-info {
    margin-bottom: 10px;
}

.uci-valor {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
}

.uci-label {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
}

.uci-bar {
    height: 10px;
    background: #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
}

.uci-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 5px;
    transition: width 0.8s ease;
}

/* Consulta Resumen */
.consulta-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.consulta-stat {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.consulta-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(31, 107, 167, 0.1);
}

.consulta-stat i {
    font-size: 1.5rem;
    color: #2482B8;
    margin-bottom: 10px;
}

.consulta-stat.agendadas i {
    color: #3b82f6;
}

.consulta-stat.cumplidas i {
    color: #10b981;
}

.consulta-valor {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e293b;
}

.consulta-label {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
}

/* Eficiencia Visual */
.eficiencia-visual {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 15px;
}

.eficiencia-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.eficiencia-bar {
    flex: 1;
    height: 14px;
    background: #e2e8f0;
    border-radius: 7px;
    overflow: hidden;
}

.eficiencia-fill {
    height: 100%;
    border-radius: 7px;
    transition: width 0.8s ease;
    position: relative;
}

.eficiencia-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: progressShimmer 2s infinite;
}

.eficiencia-pct {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2482B8;
    min-width: 50px;
    text-align: right;
}

/* Responsive servicios */
@media (max-width: 768px) {
    .servicio-metricas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quirofano-stats,
    .consulta-resumen {
        grid-template-columns: 1fr;
    }
    
    .uci-recursos {
        grid-template-columns: 1fr;
    }
    
    .triaje-item {
        grid-template-columns: 80px 1fr 40px;
    }
    
    .eficiencia-visual {
        flex-direction: column;
        text-align: center;
    }
    
    .eficiencia-bar {
        width: 100%;
    }
    
    #modal-servicio-clinica .modal-content {
        width: 98%;
        border-radius: 20px;
        margin: 10px;
    }
}

/* Progress Steps - Premium */
.form-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
    padding: 24px 30px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    position: relative;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
}

.form-steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 70px;
    right: 70px;
    height: 4px;
    background: linear-gradient(90deg, #e2e8f0, #cbd5e1);
    z-index: 0;
    border-radius: 2px;
}

.form-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.form-step .step-number {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 10px;
    transition: transform 0.2s ease, background 0.2s ease;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.form-step .step-label {
    font-size: 0.78rem;
    color: #64748b;
    text-align: center;
    max-width: 110px;
    font-weight: 500;
    transition: transform 0.2s ease, background 0.2s ease;
}

.form-step.active .step-number,
.form-step.completed .step-number {
    background: #1F6BA7;
    color: #fff;
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.4);
}

.form-step.active .step-label,
.form-step.completed .step-label {
    color: #1F6BA7;
    font-weight: 600;
}

.form-step.completed .step-number::after {
    content: '?';
    position: absolute;
}

/* Form Sections */
.form-section {
    display: none;
    animation: fadeIn 0.3s ease;
}

.form-section.active {
    display: block;
}

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

/* Cub?culo Badge - Premium */
.cubiculo-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1F6BA7;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 24px;
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.35);
    letter-spacing: 0.3px;
}

.cubiculo-badge i {
    font-size: 1.2rem;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3rem;
    background: #1F6BA7;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 3px solid #f1f5f9;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.section-title i {
    font-size: 1.6rem;
    -webkit-text-fill-color: #1F6BA7;
}

.section-description {
    color: #666;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

/* Form Rows */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 15px;
}

.form-row .form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.form-group label .required {
    color: #dc3545;
    margin-left: 3px;
}

/* Subsections */
.subsection {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

.subsection-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}

.info-text {
    color: #6c757d;
    font-size: 0.85rem;
    font-style: italic;
    margin: 10px 0;
}

.info-text i {
    margin-right: 5px;
    color: var(--primary);
}

/* Estudio Adicional Card */
.estudio-card, .titulo-card {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #dee2e6;
    position: relative;
    animation: slideDown 0.3s ease;
}

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

.estudio-card .remove-btn, .titulo-card .remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #dc3545;
    color: #fff;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}

.estudio-card .remove-btn:hover, .titulo-card .remove-btn:hover {
    background: #c82333;
    transform: scale(1.1);
}

/* Upload Zone - Premium */
.upload-zone {
    border: 2px dashed;
    border-image: linear-gradient(135deg, #1F6BA7, #082A5D) 1;
    border-radius: 16px;
    padding: 50px;
    text-align: center;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.03) 0%, rgba(6, 182, 212, 0.05) 100%);
    margin-bottom: 28px;
    transition: transform 0.2s ease, background 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.upload-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(31, 107, 167, 0.08), transparent);
    transition: left 0.6s ease;
}

.upload-zone:hover {
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.08) 0%, rgba(6, 182, 212, 0.1) 100%);
    transform: scale(1.01);
}

.upload-zone:hover::before {
    left: 100%;
}

.upload-zone.dragover {
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.15) 0%, rgba(6, 182, 212, 0.18) 100%);
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(31, 107, 167, 0.15);
}

.upload-icon {
    font-size: 3.5rem;
    background: #1F6BA7;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 18px;
}

.upload-zone h5 {
    color: #1e293b;
    margin-bottom: 12px;
    font-weight: 600;
}

.upload-zone p {
    color: #64748b;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.upload-zone .file-types {
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Uploaded Files */
.uploaded-files-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
}

.uploaded-files-container h5 {
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.uploaded-files-list {
    max-height: 200px;
    overflow-y: auto;
}

.uploaded-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #e9ecef;
    transition: transform 0.2s ease, background 0.2s ease;
}

.uploaded-file:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.1);
}

.uploaded-file .file-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.uploaded-file .file-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #1F6BA7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.3);
}

.uploaded-file .file-details .file-name {
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.uploaded-file .file-details .file-size {
    color: #999;
    font-size: 0.75rem;
}

.uploaded-file .file-actions button {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.uploaded-file .file-actions button:hover {
    background: rgba(220, 53, 69, 0.1);
}

/* Documents Checklist */
.documents-checklist {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.documents-checklist h5 {
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: default;
    transition: transform 0.2s ease, background 0.2s ease;
}

.checklist-item input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}

.checklist-item input[type="checkbox"]:checked + span {
    text-decoration: line-through;
    color: #1F6BA7;
}

.checklist-item .obligatorio {
    margin-left: auto;
    font-size: 0.7rem;
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.checklist-item .opcional {
    margin-left: auto;
    font-size: 0.7rem;
    background: rgba(31, 107, 167, 0.1);
    color: #1F6BA7;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* Permisos Grid */
.permisos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.permiso-card {
    cursor: pointer;
}

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

.permiso-content {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.permiso-card:hover .permiso-content {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.1);
}

.permiso-card input[type="checkbox"]:checked + .permiso-content {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.05) 0%, rgba(31, 107, 167, 0.1) 100%);
}

.permiso-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    flex-shrink: 0;
}

.permiso-icon.urgencias { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); }
.permiso-icon.hospitalizacion { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); }
.permiso-icon.consulta { background: linear-gradient(135deg, #28a745 0%, #218838 100%); }
.permiso-icon.cirugia { background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%); }
.permiso-icon.partos { background: linear-gradient(135deg, #e83e8c 0%, #d91a72 100%); }
.permiso-icon.uci { background: linear-gradient(135deg, #fd7e14 0%, #dc6502 100%); }
.permiso-icon.prevencion { background: linear-gradient(135deg, #20c997 0%, #17a085 100%); }
.permiso-icon.telemedicina { background: #1F6BA7; }

.permiso-info {
    flex: 1;
}

.permiso-name {
    display: block;
    font-weight: 700;
    color: #333;
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.permiso-desc {
    display: block;
    font-size: 0.8rem;
    color: #666;
}

.permiso-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: transform 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
}

.permiso-card input[type="checkbox"]:checked + .permiso-content .permiso-check {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Permisos Summary */
.permisos-summary {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

.permisos-summary h5 {
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#permisos-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#permisos-selected-list .permiso-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #1F6BA7;
    color: #fff;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.3);
}

/* Form Navigation */
.form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #e9ecef;
}

.form-navigation .nav-spacer {
    flex: 1;
}

.form-navigation .btn {
    min-width: 140px;
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: none;
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Responsive adjustments for form */
@media (max-width: 768px) {
    .modal-content.modal-xl {
        width: 98%;
        max-height: 95vh;
    }
    
    .form-steps {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .form-steps::before {
        display: none;
    }
    
    .form-step {
        flex: 0 0 calc(50% - 10px);
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .checklist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .permisos-grid {
        grid-template-columns: 1fr;
    }
    
    .form-navigation {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .form-navigation .btn {
        min-width: 120px;
    }
}

@media (max-width: 576px) {
    .checklist-grid {
        grid-template-columns: 1fr;
    }
    
    .form-step .step-label {
        font-size: 0.65rem;
        max-width: 70px;
    }
}

/* ============================================
   SISTEMA DE CREDENCIALES Y PRIVILEGIOS
   ============================================ */

/* Campos Universales */
.credenciales-header {
    background: linear-gradient(135deg, #f8f4fc 0%, #fff 100%);
    border: 1px solid #e0d4e8;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.checkbox-group-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s;
}

.checkbox-inline:hover {
    border-color: #1F6BA7;
    background: #eff6ff;
}

.checkbox-inline input:checked + span,
.checkbox-inline:has(input:checked) {
    color: #1F6BA7;
    font-weight: 500;
}

/* Gating Section */
.gating-section {
    background: linear-gradient(135deg, #eff6ff 0%, #e6f4fb 100%);
    border: 1px solid #1F6BA7;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.gating-info {
    color: #1F6BA7;
    font-size: 0.9rem;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: rgba(31, 107, 167, 0.1);
    border-radius: 10px;
}

.gating-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}

.gating-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.gating-item:hover {
    border-color: #1F6BA7;
    background: #eff6ff;
}

.gating-item input:checked + span {
    color: #1F6BA7;
    font-weight: 500;
}

.gating-item:has(input:checked) {
    border-color: #1F6BA7;
    background: linear-gradient(135deg, #D7EBEA 0%, #A9C5D0 100%);
}

/* ?mbitos Section */
.ambitos-section {
    margin-bottom: 20px;
}

.ambitos-info {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* Formularios por ?mbito */
.ambito-form {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
}

.ambito-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: #1F6BA7;
    color: white;
}

.ambito-form-header h5 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-collapse {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-collapse:hover {
    background: rgba(255,255,255,0.3);
}

.btn-collapse.collapsed i {
    transform: rotate(180deg);
}

.ambito-form-body {
    padding: 20px;
}

.ambito-form-body.collapsed {
    display: none;
}

/* Privilegios Sections */
.privilegio-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.privilegio-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.privilegio-section h6 {
    color: #1F6BA7;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.privilegio-subsection {
    margin-bottom: 15px;
    padding-left: 15px;
    border-left: 3px solid;
    border-image: linear-gradient(135deg, #1F6BA7, #082A5D) 1;
}

.privilegio-category {
    display: block;
    font-weight: 600;
    color: #475569;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.privilegio-legend {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #1F6BA7;
    margin-bottom: 18px;
    border: 1px solid #bfdbfe;
}

/* Checkbox Groups */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.checkbox-group label:hover {
    background: linear-gradient(135deg, #e6f4fb 0%, #D7EBEA 100%);
}

.checkbox-group label:has(input:checked) {
    background: linear-gradient(135deg, #dbeafe 0%, #A9C5D0 100%);
    color: #1F6BA7;
}

/* Tabla de Procedimientos */
.procedimientos-table {
    overflow-x: auto;
}

.table-privilegios {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.table-privilegios th,
.table-privilegios td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.table-privilegios th {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    color: #1F6BA7;
    font-weight: 600;
    white-space: nowrap;
}

.table-privilegios th:nth-child(n+2):nth-child(-n+5) {
    text-align: center;
    width: 50px;
}

.table-privilegios td:nth-child(n+2):nth-child(-n+5) {
    text-align: center;
}

.table-privilegios td:last-child {
    min-width: 150px;
}

.table-privilegios tr:hover {
    background: linear-gradient(90deg, rgba(31, 107, 167, 0.05) 0%, rgba(31, 107, 167, 0.03) 100%);
}

.table-privilegios .procedimiento-category {
    background: linear-gradient(135deg, #eff6ff 0%, #e6f4fb 100%) !important;
}

.table-privilegios .procedimiento-category td {
    color: #1F6BA7;
    font-weight: 600;
    padding: 8px 12px;
}

.table-privilegios input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1F6BA7;
}

.table-privilegios .form-control-sm {
    padding: 6px 10px;
    font-size: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
}

/* FPPE Section */
.fppe-section {
    background: linear-gradient(135deg, #e6f4fb 0%, #D7EBEA 100%);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.08);
}

/* Aprobaciones */
.aprobaciones-section {
    background: linear-gradient(135deg, #e6f4fb 0%, #fff 100%);
    border: 2px solid #1F6BA7;
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
    box-shadow: 0 4px 16px rgba(31, 107, 167, 0.1);
}

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

.aprobaciones-header .subsection-title {
    margin-bottom: 0;
}

.aprobaciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.aprobacion-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.aprobacion-item label {
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.aprobacion-item .form-control-sm {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
}

.aprobacion-item:has(input[type="checkbox"]:checked) {
    border-color: #1F6BA7;
    background: linear-gradient(135deg, #e6f4fb 0%, #D7EBEA 100%);
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.12);
}

/* Restricciones Obligatorias */
.restricciones-obligatorias label:has(input:disabled) {
    background: linear-gradient(135deg, #e6f4fb 0%, #D7EBEA 100%);
    color: #1F6BA7;
    border: 1px solid #bfdbfe;
}

/* Responsive para credenciales */
@media (max-width: 768px) {
    .gating-grid {
        grid-template-columns: 1fr;
    }
    
    .aprobaciones-grid {
        grid-template-columns: 1fr;
    }
    
    .checkbox-group-inline {
        flex-direction: column;
    }
    
    .table-privilegios {
        font-size: 0.8rem;
    }
    
    .table-privilegios th,
    .table-privilegios td {
        padding: 8px;
    }
}

/* ============================================
   MODAL VER PERFIL M?DICO
   ============================================ */

.modal-md {
    max-width: 600px;
    width: 95%;
}

.medico-perfil {
    padding: 10px;
}

.perfil-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 20px;
}

.perfil-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #1F6BA7;
    box-shadow: 0 4px 16px rgba(31, 107, 167, 0.35);
}

.perfil-info h3 {
    margin: 0 0 5px 0;
    color: #1e293b;
    font-size: 1.3rem;
}

.perfil-especialidad {
    color: #1F6BA7;
    font-weight: 600;
    margin-bottom: 10px;
}

.perfil-detalles {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detalle-grupo {
    background: linear-gradient(135deg, #e6f4fb 0%, #D7EBEA 100%);
    border-radius: 12px;
    padding: 18px;
    border: 1px solid #bfdbfe;
}

.detalle-grupo h4 {
    color: #1F6BA7;
    margin: 0 0 15px 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detalle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

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

.detalle-label {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
}

.detalle-valor {
    font-size: 0.95rem;
    color: #333;
    font-weight: 600;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
    border-radius: 0 0 16px 16px;
}

@media (max-width: 480px) {
    .perfil-header {
        flex-direction: column;
        text-align: center;
    }
    
    .detalle-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SISTEMA DE GESTI?N DE CAPACITACI?N CL?NICA (SGCC)
   ============================================ */

/* Navegaci?n Tabs SGCC - Dise?o Moderno */
.sgcc-nav-tabs {
    display: flex;
    gap: 12px;
    margin: 25px 0;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    flex-wrap: wrap;
    justify-content: center;
}

.sgcc-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: white;
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    min-width: 130px;
    position: relative;
    overflow: hidden;
}

.sgcc-nav-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1F6BA7, #082A5D);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.sgcc-nav-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(31, 107, 167, 0.2);
    border-color: rgba(31, 107, 167, 0.3);
}

.sgcc-nav-btn:hover::before {
    transform: scaleX(1);
}

.sgcc-nav-btn.active {
    background: #1F6BA7;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(31, 107, 167, 0.35);
}

.sgcc-nav-btn.active::before {
    display: none;
}

.sgcc-nav-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.1) 0%, rgba(36, 130, 184, 0.1) 100%);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.sgcc-nav-btn.active .sgcc-nav-icon {
    background: rgba(255, 255, 255, 0.2);
}

.sgcc-nav-icon i {
    font-size: 1.4rem;
    color: #1F6BA7;
    transition: all 0.3s ease;
}

.sgcc-nav-btn.active .sgcc-nav-icon i {
    color: white;
}

.sgcc-nav-btn:hover:not(.active) .sgcc-nav-icon {
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.15) 0%, rgba(36, 130, 184, 0.15) 100%);
    transform: scale(1.05);
}

.sgcc-nav-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    transition: all 0.3s ease;
}

.sgcc-nav-btn.active .sgcc-nav-text {
    color: white;
}

/* Tabs de Detalle de Curso (dise?o mejorado) */
.sgcc-detail-tabs {
    display: flex;
    gap: 0;
    background: #f0f0f0;
    border-radius: 12px;
    padding: 5px;
    margin-bottom: 20px;
}

.sgcc-detail-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: #666;
    transition: all 0.3s ease;
    position: relative;
}

.sgcc-detail-tab:hover {
    background: rgba(31, 107, 167, 0.08);
    color: #1F6BA7;
}

.sgcc-detail-tab.active {
    background: #1F6BA7;
    color: white;
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.35);
}

.sgcc-detail-tab i {
    font-size: 1.1rem;
}

.sgcc-detail-tab.active i {
    color: white;
}

.sgcc-tab-badge {
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
    color: #1F6BA7;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 14px;
    min-width: 22px;
    text-align: center;
}

.sgcc-detail-tab.active .sgcc-tab-badge {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Tab Content SGCC */
.tab-content-sgcc {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content-sgcc.active {
    display: block;
}

/* Tab Content M?dulo */
.tab-content-modulo {
    animation: fadeIn 0.3s ease;
}

/* Tarjeta de Archivo - Premium */
.archivo-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid;
    border-image: linear-gradient(135deg, #1F6BA7, #082A5D) 1;
    transition: all 0.3s ease;
}

.archivo-card:hover {
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.15);
    transform: translateY(-4px);
}

.archivo-card .archivo-icon {
    font-size: 36px;
    background: #1F6BA7;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

.archivo-card .archivo-nombre {
    font-weight: 600;
    font-size: 15px;
    color: #1e293b;
    margin-bottom: 6px;
}

.archivo-card .archivo-info {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 12px;
}

.archivo-card .archivo-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #888;
    flex-wrap: wrap;
}

.archivo-card .archivo-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
}

.archivo-card .archivo-badge.obligatorio {
    background: #fff3cd;
    color: #856404;
}

.archivo-card .archivo-badge.opcional {
    background: #d4edda;
    color: #155724;
}

.archivo-card .archivo-acciones {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

/* Pregunta en lista */
.pregunta-row {
    transition: background 0.2s;
}

.pregunta-row:hover {
    background: #f8f5fc;
}

/* Progreso de curso */
.progreso-modulo-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
}

.progreso-modulo-item .modulo-nombre {
    flex: 1;
    font-weight: 500;
}

.progreso-modulo-item .modulo-nota {
    font-weight: 600;
    min-width: 60px;
    text-align: center;
}

.progreso-modulo-item .modulo-estado {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
}

.progreso-modulo-item .modulo-estado.completado {
    background: #d4edda;
    color: #155724;
}

.progreso-modulo-item .modulo-estado.en-progreso {
    background: #fff3cd;
    color: #856404;
}

.progreso-modulo-item .modulo-estado.no-cursado {
    background: #e2e3e5;
    color: #383d41;
}

/* Modal Extra Large para SGCC */
.modal-xlarge {
    max-width: 1200px !important;
    width: 95% !important;
}

.modal-xlarge .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}

/* Estilos del Dashboard SGCC - Premium */
.sgcc-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.sgcc-stat-card {
    background: #1F6BA7;
    color: white;
    padding: 24px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sgcc-stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.sgcc-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(31, 107, 167, 0.45);
}

.sgcc-stat-card i {
    font-size: 2.8rem;
    opacity: 0.95;
}

.sgcc-stat-card .stat-info h3 {
    font-size: 2rem;
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.sgcc-stat-card .stat-info p {
    margin: 6px 0 0 0;
    opacity: 0.9;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Banner de Alertas SGCC */
.sgcc-alertas-banner {
    background: linear-gradient(90deg, #ff9800 0%, #ffc107 100%);
    color: #333;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.sgcc-alertas-banner i {
    font-size: 1.2rem;
}

.sgcc-alertas-banner .btn-close-alert {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.sgcc-alertas-banner .btn-close-alert:hover {
    opacity: 1;
}

/* Filtros SGCC */
.sgcc-filtros {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
}

.sgcc-filtros .form-control,
.sgcc-filtros select {
    flex: 1;
    min-width: 180px;
}

/* Tabs de Sub-navegaci?n */
.sgcc-subtabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
}

.sgcc-subtab-btn {
    padding: 8px 20px;
    background: #f0f0f0;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.sgcc-subtab-btn.active,
.sgcc-subtab-btn:hover {
    background: #1F6BA7;
    color: white;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.3);
}

/* Grid de Cards SGCC */
.sgcc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Progress Bar SGCC - Premium */
.sgcc-progress-bar {
    height: 10px;
    background: linear-gradient(90deg, #e2e8f0, #cbd5e1);
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.sgcc-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1F6BA7 0%, #082A5D 100%);
    border-radius: 12px;
    transition: width 0.5s ease;
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.3);
}

/* Tabla Participantes */
.tabla-participantes th,
.tabla-participantes td {
    padding: 12px 15px;
    vertical-align: middle;
}

.tabla-participantes tr:hover {
    background: rgba(31, 107, 167, 0.05);
}

/* M?dulo Cards - Premium */
.modulo-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 12px;
    border-left: 5px solid;
    border-image: linear-gradient(135deg, #1F6BA7, #082A5D) 1;
    transition: all 0.3s ease;
}

.modulo-card:hover {
    background: linear-gradient(135deg, #eff6ff 0%, #e6f4fb 100%);
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.12);
    transform: translateX(4px);
}

/* Version Cards */
.version-card {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.version-card:hover {
    background: #f0f0f0;
}

/* Sesi�n Cards - Premium */
.sesion-card {
    background: linear-gradient(135deg, #eff6ff 0%, #e6f4fb 100%);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 12px;
    border-left: 5px solid #1F6BA7;
    transition: all 0.3s ease;
}

.sesion-card:hover {
    background: linear-gradient(135deg, #e6f4fb 0%, #D7EBEA 100%);
    transform: translateX(4px);
}

/* Form Builder Preview */
.form-builder-preview {
    background: #fff;
    border: 2px dashed #ddd;
    border-radius: 10px;
    padding: 30px;
    min-height: 400px;
    text-align: center;
    color: #888;
}

/* Opciones de Pregunta */
.opcion-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.opcion-item input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.opcion-item input[type="text"] {
    flex: 1;
}

/* Charts Container */
.sgcc-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sgcc-chart-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sgcc-chart-card h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1rem;
}

.sgcc-chart-card canvas {
    height: 250px !important;
}

/* Info Grid en Detalle */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.info-item {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.info-item label {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 5px;
}

.info-item label i {
    margin-right: 5px;
    color: #1F6BA7;
}

.info-item p {
    margin: 0;
    font-weight: 500;
    color: #333;
}

/* Animaci?n de entrada */
@keyframes slideIn {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* =====================================================
   NOTIFICACIONES TOAST - Sistema de Alertas
   ===================================================== */

/* Contenedor de Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.toast {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-left: 4px solid #1F6BA7;
    animation: toastSlideIn 0.3s ease;
    position: relative;
    overflow: hidden;
}

.toast.success { border-left-color: #10b981; }
.toast.warning { border-left-color: #f59e0b; }
.toast.danger { border-left-color: #ef4444; }
.toast.info { border-left-color: #1F6BA7; }

.toast-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast.success .toast-icon { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.toast.warning .toast-icon { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.toast.danger .toast-icon { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.toast.info .toast-icon { background: rgba(31, 107, 167, 0.1); color: #1F6BA7; }

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.toast-message {
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.4;
}

.toast-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    font-size: 1rem;
    transition: color 0.2s;
}

.toast-close:hover {
    color: #64748b;
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #1F6BA7;
    animation: toastProgress 5s linear forwards;
}

.toast.success .toast-progress { background: #10b981; }
.toast.warning .toast-progress { background: #f59e0b; }
.toast.danger .toast-progress { background: #ef4444; }

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

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

@keyframes slideOut {
    to {
        opacity: 0;
        transform: translateX(100%);
        height: 0;
        padding: 0;
        margin: 0;
    }
}

/* =====================================================
   MODAL TODAS LAS NOTIFICACIONES
   ===================================================== */
.notif-modal-filtros {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.notif-filtro-btn {
    padding: 10px 18px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-filtro-btn:hover {
    border-color: #1F6BA7;
    color: #1F6BA7;
}

.notif-filtro-btn.active {
    background: #1F6BA7;
    color: white;
    border-color: #1F6BA7;
}

.notif-modal-lista {
    max-height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notif-modal-loading,
.notif-modal-vacio,
.notif-modal-error {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.notif-modal-loading i,
.notif-modal-vacio i,
.notif-modal-error i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.notif-modal-error i {
    color: #ef4444;
}

.notif-modal-error button {
    margin-top: 16px;
    padding: 10px 20px;
    background: #1F6BA7;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.notif-modal-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 4px solid #1F6BA7;
    transition: all 0.2s ease;
}

.notif-modal-item:hover {
    background: #f1f5f9;
}

.notif-modal-item.leida {
    opacity: 0.7;
    border-left-color: #cbd5e1;
}

.notif-modal-icono {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(31, 107, 167, 0.1);
    color: #1F6BA7;
}

.notif-modal-icono.warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.notif-modal-icono.danger { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.notif-modal-icono.success { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.notif-modal-icono.info { background: rgba(31, 107, 167, 0.1); color: #1F6BA7; }

.notif-modal-contenido {
    flex: 1;
    min-width: 0;
}

.notif-modal-titulo {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.notif-modal-mensaje {
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 8px;
}

.notif-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: #94a3b8;
}

.notif-modal-tiempo,
.notif-modal-modulo {
    display: flex;
    align-items: center;
    gap: 4px;
}

.notif-modal-prioridad {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.notif-modal-prioridad.Alta,
.notif-modal-prioridad.Urgente { background: #fef2f2; color: #ef4444; }
.notif-modal-prioridad.Media { background: #fffbeb; color: #f59e0b; }
.notif-modal-prioridad.Normal,
.notif-modal-prioridad.Baja { background: #f0fdf4; color: #10b981; }

.notif-modal-acciones {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.notif-modal-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: white;
    color: #64748b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.notif-modal-btn:hover {
    background: #1F6BA7;
    color: white;
}

.notif-modal-btn.eliminar:hover {
    background: #ef4444;
}

/* =====================================================
   MODAL NOTIFICACIONES - FOOTER BUTTONS DESIGN
   ===================================================== */
#modal-todas-notificaciones .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 20px 20px;
}

#modal-todas-notificaciones .modal-footer .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: white;
    color: #64748b;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#modal-todas-notificaciones .modal-footer .btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#modal-todas-notificaciones .modal-footer .btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#modal-todas-notificaciones .modal-footer .btn-secondary i {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

#modal-todas-notificaciones .modal-footer .btn-secondary:hover i {
    transform: rotate(90deg);
}

#modal-todas-notificaciones .modal-footer .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #1F6BA7 0%, #082A5D 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(31, 107, 167, 0.35);
    position: relative;
    overflow: hidden;
}

#modal-todas-notificaciones .modal-footer .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

#modal-todas-notificaciones .modal-footer .btn-primary:hover::before {
    left: 100%;
}

#modal-todas-notificaciones .modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #2482B8 0%, #1F6BA7 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.45);
}

#modal-todas-notificaciones .modal-footer .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(31, 107, 167, 0.35);
}

#modal-todas-notificaciones .modal-footer .btn-primary i {
    font-size: 1rem;
    animation: none;
    transition: transform 0.3s ease;
}

#modal-todas-notificaciones .modal-footer .btn-primary:hover i {
    animation: checkBounce 0.5s ease;
}

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

/* Responsive para modal notificaciones footer */
@media (max-width: 480px) {
    #modal-todas-notificaciones .modal-footer {
        flex-direction: column;
        gap: 12px;
    }
    
    #modal-todas-notificaciones .modal-footer .btn-secondary,
    #modal-todas-notificaciones .modal-footer .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   WORKFLOW BUILDER - Constructor Visual
   ===================================================== */
.wf-etapas-container {
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

.wf-etapa-vacia {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.wf-etapa-vacia i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.wf-etapa-vacia p {
    font-weight: 600;
    color: #64748b;
    margin: 0 0 8px 0;
}

.wf-etapa-vacia span {
    font-size: 0.85rem;
}

.wf-etapa-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}

.wf-etapa-card:hover {
    border-color: #1F6BA7;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.1);
}

.wf-etapa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1F6BA7 0%, #082A5D 100%);
    color: white;
}

.wf-etapa-numero {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.wf-etapa-controles {
    display: flex;
    gap: 6px;
}

.wf-ctrl-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: rgba(255,255,255,0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.wf-ctrl-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.3);
}

.wf-ctrl-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.wf-ctrl-btn.eliminar:hover {
    background: #ef4444;
}

.wf-etapa-body {
    padding: 16px;
}

.wf-etapa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.wf-etapa-opciones {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.wf-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #64748b;
}

.wf-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: #1F6BA7;
}

.wf-checkbox span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wf-etapa-conector {
    display: flex;
    justify-content: center;
    padding: 4px 0;
    color: #1F6BA7;
    font-size: 1.2rem;
}

/* Preview del flujo */
.wf-preview {
    margin-top: 20px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.wf-preview-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 0;
}

.wf-flow-start,
.wf-flow-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.wf-flow-start {
    background: #dbeafe;
    color: #1F6BA7;
}

.wf-flow-end {
    background: #d1fae5;
    color: #059669;
}

.wf-flow-start i,
.wf-flow-end i {
    font-size: 1.2rem;
}

.wf-flow-arrow {
    color: #cbd5e1;
    font-size: 1rem;
    flex-shrink: 0;
}

.wf-flow-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: white;
    border: 2px solid var(--step-color, #1F6BA7);
    border-radius: 10px;
    flex-shrink: 0;
}

.wf-flow-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--step-color, #1F6BA7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wf-flow-step-info {
    display: flex;
    flex-direction: column;
}

.wf-flow-step-info strong {
    font-size: 0.85rem;
    color: #1e293b;
}

.wf-flow-step-info span {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Responsive Workflow Builder */
@media (max-width: 768px) {
    .wf-etapa-grid {
        grid-template-columns: 1fr;
    }
    
    .wf-etapa-opciones {
        flex-direction: column;
        gap: 10px;
    }
    
    .wf-preview-flow {
        flex-direction: column;
    }
    
    .wf-flow-arrow {
        transform: rotate(90deg);
    }
}

/* Notificacion inline (SGCC) */
.notificacion {
    animation: slideIn 0.3s ease;
}

/* Responsive SGCC */
@media (max-width: 1200px) {
    .sgcc-charts-grid {
        grid-template-columns: 1fr;
    }
    
    .sgcc-nav-btn {
        min-width: 110px;
        padding: 14px 18px;
    }
}

@media (max-width: 768px) {
    .sgcc-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sgcc-filtros {
        flex-direction: column;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-xlarge {
        width: 98% !important;
        margin: 10px auto;
    }
    
    .sgcc-nav-tabs {
        gap: 8px;
        padding: 12px;
    }
    
    .sgcc-nav-btn {
        min-width: 100px;
        padding: 12px 14px;
    }
    
    .sgcc-nav-icon {
        width: 40px;
        height: 40px;
    }
    
    .sgcc-nav-icon i {
        font-size: 1.2rem;
    }
    
    .sgcc-nav-text {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .sgcc-dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .sgcc-card-grid {
        grid-template-columns: 1fr;
    }
    
    .sgcc-nav-tabs {
        gap: 6px;
        padding: 10px;
    }
    
    .sgcc-nav-btn {
        min-width: 80px;
        padding: 10px 12px;
        flex: 1 1 calc(33.333% - 6px);
    }
    
    .sgcc-nav-icon {
        width: 36px;
        height: 36px;
    }
    
    .sgcc-nav-icon i {
        font-size: 1rem;
    }
    
    .sgcc-nav-text {
        font-size: 0.7rem;
    }
}

/* ============== TABS DEL MODAL DE M?DULO ============== */
.modulo-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding: 10px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 1px solid #dee2e6;
}

.modulo-tabs .tab-btn {
    flex: 1;
    min-width: 140px;
    padding: 12px 16px;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 13px;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.modulo-tabs .tab-btn:hover {
    background: #f8f9fa;
    border-color: #1F6BA7;
    color: #1F6BA7;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(31, 107, 167, 0.15);
}

.modulo-tabs .tab-btn.active {
    background: #1F6BA7;
    border-color: #1F6BA7;
    color: white;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.3);
}

.modulo-tabs .tab-btn i {
    font-size: 14px;
}

@media (max-width: 768px) {
    .modulo-tabs {
        flex-direction: column;
    }
    
    .modulo-tabs .tab-btn {
        min-width: 100%;
        justify-content: flex-start;
    }
}

/* =========================================== */
/* MGDI - GESTI?N DOCUMENTAL INTEGRADA        */
/* =========================================== */

/* Animaci?n de carga */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Tabs de navegaci?n MGDI */
.mgdi-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #64748b;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mgdi-tab:hover {
    background: #f8fafc;
    color: #667eea;
    border-color: #667eea;
}

.mgdi-tab.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: #667eea;
}

.mgdi-tab.active i {
    color: white !important;
}

.mgdi-tab i {
    font-size: 14px;
}

/* ?rbol de navegaci?n MGDI */
.tree-item {
    padding: 10px 14px;
    margin: 3px 0;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    font-size: 14px;
}

.tree-item:hover {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    transform: translateX(4px);
}

.tree-item.selected {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
    color: #667eea;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.tree-item i {
    width: 18px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
}

.tree-item.selected i {
    color: #667eea;
}

.tree-children {
    margin-left: 24px;
    border-left: 2px solid #e2e8f0;
    padding-left: 12px;
}

.tree-toggle {
    cursor: pointer;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.2s;
}

.tree-toggle.expanded {
    transform: rotate(90deg);
}

/* Cards de documentos */
.doc-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.doc-card:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.doc-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.doc-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.doc-icon.pdf { background: linear-gradient(135deg, #ef4444, #dc2626); }
.doc-icon.word { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.doc-icon.excel { background: linear-gradient(135deg, #22c55e, #16a34a); }
.doc-icon.ppt { background: linear-gradient(135deg, #f97316, #ea580c); }
.doc-icon.procedimiento { background: linear-gradient(135deg, #667eea, #764ba2); }
.doc-icon.protocolo { background: #1F6BA7; }
.doc-icon.guia { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.doc-icon.manual { background: linear-gradient(135deg, #2482B8, #1F6BA7); }

.doc-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.4;
}

.doc-code {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

.doc-meta {
    font-size: 12px;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.doc-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.doc-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

.doc-status.vigente { background: #dcfce7; color: #16a34a; }
.doc-status.revision { background: #fef3c7; color: #d97706; }
.doc-status.borrador { background: #e2e8f0; color: #64748b; }
.doc-status.obsoleto { background: #fee2e2; color: #dc2626; }

/* Lista de documentos */
.doc-list-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

.doc-list-item:hover {
    background: #f8fafc;
}

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

/* Workflow task card */
.task-card {
    background: white;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding: 12px;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.task-card:hover {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.task-type {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.task-type.revision { background: #dbeafe; color: #2563eb; }
.task-type.aprobacion { background: #fef3c7; color: #d97706; }
.task-type.firma { background: #dcfce7; color: #16a34a; }

.task-date {
    font-size: 11px;
    color: #94a3b8;
}

.task-title {
    font-weight: 500;
    font-size: 13px;
    color: #1e293b;
    margin-bottom: 4px;
}

.task-doc {
    font-size: 12px;
    color: #64748b;
}

.task-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* Comit? card */
.comite-card {
    background: white;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.comite-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.comite-header {
    padding: 20px;
    color: white;
    display: flex;
    align-items: center;
    gap: 15px;
}

.comite-header.directivo { background: linear-gradient(135deg, #667eea, #764ba2); }
.comite-header.clinico { background: #1F6BA7; }
.comite-header.calidad { background: linear-gradient(135deg, #22c55e, #16a34a); }
.comite-header.seguridad { background: linear-gradient(135deg, #f59e0b, #d97706); }
.comite-header.etica { background: linear-gradient(135deg, #2482B8, #1F6BA7); }
.comite-header.operativo { background: linear-gradient(135deg, #14b8a6, #0d9488); }

.comite-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.comite-title {
    font-weight: 600;
    font-size: 16px;
}

.comite-code {
    font-size: 12px;
    opacity: 0.8;
}

.comite-body {
    padding: 20px;
}

.comite-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    color: #64748b;
}

.comite-stat i {
    width: 20px;
    color: #94a3b8;
}

/* Botones peque?os */
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

.btn-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    border-color: #667eea;
    color: #667eea;
}

.btn-icon.active {
    background: #667eea;
    border-color: #667eea;
    color: white;
}

/* Editor toolbar buttons */
.btn-editor {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-editor:hover {
    background: #f5f5f5;
    border-color: #667eea;
    color: #667eea;
}

/* Acreditaci?n progress */
.estandar-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

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

.estandar-codigo {
    min-width: 80px;
    font-weight: 600;
    color: #667eea;
    font-size: 13px;
}

.estandar-nombre {
    flex: 1;
    font-size: 13px;
    color: #1e293b;
}

.estandar-progreso {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}

.estandar-bar {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.estandar-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.estandar-bar-fill.high { background: linear-gradient(135deg, #22c55e, #16a34a); }
.estandar-bar-fill.medium { background: linear-gradient(135deg, #f59e0b, #d97706); }
.estandar-bar-fill.low { background: linear-gradient(135deg, #ef4444, #dc2626); }

.estandar-pct {
    min-width: 45px;
    text-align: right;
    font-weight: 600;
    font-size: 13px;
}

/* Reuni?n pr?xima */
.reunion-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 10px;
    margin-bottom: 10px;
}

.reunion-fecha {
    min-width: 60px;
    text-align: center;
    padding: 10px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.reunion-dia {
    font-size: 24px;
    font-weight: 700;
    color: #667eea;
}

.reunion-mes {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
}

.reunion-info {
    flex: 1;
}

.reunion-comite {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
}

.reunion-hora {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* Acuerdo item */
.acuerdo-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    margin-bottom: 10px;
}

.acuerdo-icon {
    width: 36px;
    height: 36px;
    background: #fef3c7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
}

.acuerdo-content {
    flex: 1;
}

.acuerdo-titulo {
    font-weight: 500;
    font-size: 13px;
    color: #1e293b;
}

.acuerdo-meta {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.acuerdo-vencimiento {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    background: #fee2e2;
    color: #dc2626;
}

/* Comité header type: obligatorio */
.comite-header.obligatorio {
    background: linear-gradient(135deg, #1F6BA7, #082A5D);
}

/* Confidencialidad badges */
.conf-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.conf-badge.publico { background: #dcfce7; color: #16a34a; }
.conf-badge.interno { background: #dbeafe; color: #2563eb; }
.conf-badge.restringido { background: #fef3c7; color: #d97706; }
.conf-badge.confidencial { background: #fee2e2; color: #dc2626; }

/* Version timeline */
.version-timeline-item {
    display: flex;
    gap: 15px;
    position: relative;
    padding-bottom: 20px;
}

.version-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    z-index: 1;
    flex-shrink: 0;
}

.version-timeline-line {
    width: 2px;
    flex: 1;
    background: #e2e8f0;
    margin-top: 4px;
}

/* Premium animation for MGDI cards */
.comite-card,
.estandar-item,
.reunion-item,
.task-card,
.doc-list-item {
    animation: fadeIn 0.3s ease-out;
}

/* MGDI stat cards premium hover */
#mgdi-biblioteca .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

/* Tab content transitions */
.mgdi-doc-tab-content {
    animation: fadeIn 0.2s ease;
}

/* Workflow badge mejoras */
.task-type.elaboracion { background: #e0e7ff; color: #4338ca; }
.task-type.difusion { background: #f0fdf4; color: #15803d; }

/* Responsive MGDI */
@media (max-width: 1200px) {
    #mgdi-biblioteca .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    #mgdi-biblioteca .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1024px) {
    #mgdi-biblioteca > div:last-child {
        grid-template-columns: 1fr;
    }
    
    .mgdi-tree-panel {
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .mgdi-nav-tabs {
        flex-direction: column;
    }
    
    .mgdi-tab {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ========================================= */
/* ESTILOS PREMIUM ADICIONALES MGDI         */
/* ========================================= */

/* Tablas MGDI Premium */
.mgdi-modulo .data-table {
    border-collapse: separate;
    border-spacing: 0;
}

.mgdi-modulo .data-table thead th {
    background: #f8fafc;
    font-weight: 600;
    color: #475569;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    border-bottom: 2px solid #e2e8f0;
}

.mgdi-modulo .data-table tbody tr {
    transition: all 0.2s ease;
}

.mgdi-modulo .data-table tbody tr:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03), rgba(118, 75, 162, 0.03));
}

.mgdi-modulo .data-table tbody td {
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

/* Badges MGDI */
.badge-mgdi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-mgdi.success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(22, 163, 74, 0.12));
    color: #16a34a;
}

.badge-mgdi.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(217, 119, 6, 0.12));
    color: #d97706;
}

.badge-mgdi.danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(220, 38, 38, 0.12));
    color: #dc2626;
}

.badge-mgdi.info {
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.12), rgba(8, 42, 93, 0.12));
    color: #1F6BA7;
}

.badge-mgdi.purple {
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.12), rgba(31, 107, 167, 0.12));
    color: #1F6BA7;
}

/* Botones de acci?n peque?os */
.btn-action-sm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 14px;
}

.btn-action-sm.view {
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.1), rgba(8, 42, 93, 0.1));
    color: #1F6BA7;
}

.btn-action-sm.view:hover {
    background: #1F6BA7;
    color: white;
    transform: scale(1.1);
}

.btn-action-sm.edit {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.1));
    color: #d97706;
}

.btn-action-sm.edit:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    transform: scale(1.1);
}

.btn-action-sm.delete {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
    color: #dc2626;
}

.btn-action-sm.delete:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    transform: scale(1.1);
}

/* Cards con hover premium */
.premium-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, background 0.2s ease;
}

.premium-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

/* Progress bars animados */
.progress-animated {
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.progress-animated .bar {
    height: 100%;
    border-radius: 10px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.progress-animated .bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    /* animation: shimmer 2s infinite; - Deshabilitado para rendimiento */
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Empty states mejorados */
.empty-state-mgdi {
    text-align: center;
    padding: 60px 30px;
    color: #94a3b8;
}

.empty-state-mgdi .icon-box {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
}

.empty-state-mgdi h4 {
    margin: 0 0 8px;
    font-size: 16px;
    color: #64748b;
}

.empty-state-mgdi p {
    margin: 0;
    font-size: 14px;
}

/* Tooltips personalizados */
.tooltip-mgdi {
    position: relative;
}

.tooltip-mgdi::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #1e293b;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 100;
}

.tooltip-mgdi:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* Scrollbar personalizado MGDI */
.mgdi-modulo ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mgdi-modulo ::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.mgdi-modulo ::-webkit-scrollbar-thumb {
    background: #1F6BA7;
    border-radius: 10px;
}

.mgdi-modulo ::-webkit-scrollbar-thumb:hover {
    background: #082A5D;
}

/* =====================================================
   MÓDULO GOBIERNO CORPORATIVO - JCI v8 COMPLIANT
   ===================================================== */

.gc-modulo {
    padding: 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f0fdfa 100%);
}

/* Header del módulo */
.gc-header {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #2dd4bf 100%);
    color: white;
    padding: 36px 44px;
    border-radius: 0 0 28px 28px;
    margin-bottom: 35px;
    box-shadow: 0 15px 20px rgba(13, 148, 136, 0.25);
    position: relative;
    overflow: hidden;
}

.gc-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.gc-header h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    letter-spacing: -0.5px;
}

.gc-header p {
    opacity: 0.92;
    font-size: 15px;
    font-weight: 500;
}

/* Navegación por tabs */
.gc-nav-tabs {
    display: flex;
    gap: 10px;
    padding: 0 44px;
    margin-top: -22px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

/* =====================================================
   SELECTOR DE CLÍNICA - GOBIERNO CORPORATIVO
   ===================================================== */
.gc-clinica-selector {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 20px 24px;
    margin: 0 20px 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.gc-clinica-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.gc-clinica-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.gc-clinica-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(31, 107, 167, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gc-clinica-tab:hover {
    border-color: #1F6BA7;
    color: #1F6BA7;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.12);
}

.gc-clinica-tab:hover::before {
    opacity: 1;
}

.gc-clinica-tab.active {
    background: linear-gradient(135deg, #1F6BA7 0%, #082A5D 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 24px rgba(31, 107, 167, 0.35);
}

.gc-clinica-tab.active[data-clinica="Centro medico 1"] {
    background: linear-gradient(135deg, #0d9488 0%, #059669 100%);
    box-shadow: 0 6px 24px rgba(13, 148, 136, 0.35);
}

.gc-clinica-tab.active[data-clinica="palmareal"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.35);
}

.gc-clinica-tab i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.gc-clinica-tab:hover i {
    transform: scale(1.1);
}

.gc-clinica-tab.active i {
    animation: clinicaPulse 1s ease-out;
}

@keyframes clinicaPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.gc-clinica-badge {
    background: rgba(0, 0, 0, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
}

.gc-clinica-tab.active .gc-clinica-badge {
    background: rgba(255, 255, 255, 0.25);
}

.gc-clinica-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: white;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #64748b;
    border-left: 3px solid #1F6BA7;
}

.gc-clinica-info i {
    color: #1F6BA7;
}

.gc-clinica-info.centro-medico-1 {
    border-left-color: #0d9488;
}

.gc-clinica-info.centro-medico-1 i {
    color: #0d9488;
}

.gc-clinica-info.palmareal {
    border-left-color: #3b82f6;
}

.gc-clinica-info.palmareal i {
    color: #3b82f6;
}

/* Indicador visual de clínica seleccionada en cards */
.gc-card-clinica {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gc-card-clinica.centro-medico-1 {
    background: rgba(13, 148, 136, 0.15);
    color: #0d9488;
}

.gc-card-clinica.palmareal {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* Responsive para selector de clínica */
@media (max-width: 768px) {
    .gc-clinica-selector {
        margin: 0 10px 20px;
        padding: 16px;
    }
    
    .gc-clinica-tabs {
        flex-direction: column;
    }
    
    .gc-clinica-tab {
        justify-content: center;
        padding: 12px 20px;
    }
    
    .gc-clinica-tab span:not(.gc-clinica-badge) {
        flex: 1;
    }
}

/* Barra de navegación interna del módulo */
.gc-nav-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    border-radius: 14px;
    padding: 5px;
    margin: 0 20px 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gc-nav-bar::-webkit-scrollbar { display: none; }

.gc-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    position: relative;
}

.gc-tab:hover {
    background: rgba(255,255,255,0.85);
    color: #0f766e;
}

.gc-tab.active {
    background: white;
    color: #0f766e;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.gc-tab.active i {
    color: #0d9488;
}

.gc-tab i {
    font-size: 15px;
    width: 18px;
    text-align: center;
}

/* Paneles */
.gc-panel {
    display: none;
    padding: 0 40px 40px;
    animation: fadeIn 0.3s ease;
}

.gc-panel.active {
    display: block;
}

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

/* Cards de estadísticas */
.gc-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 35px;
}

.gc-stat-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 22px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.8);
}

.gc-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 20px rgba(13, 148, 136, 0.12);
}

.gc-stat-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.gc-stat-icon.comites { background: linear-gradient(135deg, #0d9488, #2dd4bf); }
.gc-stat-icon.reuniones { background: linear-gradient(135deg, #1F6BA7, #84CCD5); }
.gc-stat-icon.acuerdos { background: linear-gradient(135deg, #ea580c, #fdba74); }
.gc-stat-icon.capa { background: linear-gradient(135deg, #dc2626, #fca5a5); }

.gc-stat-info h3 {
    font-size: 36px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 6px;
    letter-spacing: -1px;
}

.gc-stat-info span {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

/* Dashboard Grid */
.gc-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.gc-dash-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.gc-dash-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gc-dash-card h4 i {
    color: #0f766e;
}

/* Items de pr?ximas reuniones */
.gc-reunion-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 10px;
}

.gc-reunion-item:hover {
    background: #f0fdfa;
}

.gc-reunion-fecha {
    width: 50px;
    text-align: center;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-radius: 10px;
    padding: 8px;
    color: white;
}

.gc-reunion-fecha .dia {
    display: block;
    font-size: 20px;
    font-weight: 700;
}

.gc-reunion-fecha .mes {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.gc-reunion-info {
    flex: 1;
}

.gc-reunion-titulo {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.gc-reunion-hora {
    font-size: 12px;
    color: #64748b;
}

.gc-reunion-hora i {
    margin-right: 4px;
}

/* Badges de estado */
.gc-estado-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.gc-estado-badge.programada { background: #dbeafe; color: #1d4ed8; }
.gc-estado-badge.en-curso { background: #fef3c7; color: #d97706; }
.gc-estado-badge.realizada { background: #dcfce7; color: #15803d; }
.gc-estado-badge.cancelada { background: #fee2e2; color: #dc2626; }
.gc-estado-badge.activo { background: #dcfce7; color: #15803d; }
.gc-estado-badge.inactivo { background: #f1f5f9; color: #64748b; }
.gc-estado-badge.pendiente { background: #fef3c7; color: #d97706; }
.gc-estado-badge.en-proceso { background: #dbeafe; color: #1d4ed8; }
.gc-estado-badge.cumplido { background: #dcfce7; color: #15803d; }
.gc-estado-badge.vencido { background: #fee2e2; color: #dc2626; }
.gc-estado-badge.abierta { background: #dbeafe; color: #1d4ed8; }
.gc-estado-badge.cerrada { background: #dcfce7; color: #15803d; }

/* Items de acuerdos pr?ximos */
.gc-acuerdo-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 10px;
    border-left: 4px solid #e2e8f0;
}

.gc-acuerdo-item.urgente { border-left-color: #dc2626; background: #fef2f2; }
.gc-acuerdo-item.pronto { border-left-color: #f59e0b; background: #fffbeb; }
.gc-acuerdo-item.normal { border-left-color: #22c55e; }

.gc-acuerdo-info { flex: 1; }
.gc-acuerdo-titulo { font-weight: 500; color: #1e293b; margin-bottom: 4px; }
.gc-acuerdo-meta { font-size: 12px; color: #64748b; display: flex; gap: 15px; }
.gc-acuerdo-meta span { display: flex; align-items: center; gap: 4px; }

.gc-dias-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.gc-dias-badge.urgente { background: #dc2626; color: white; }
.gc-dias-badge.pronto { background: #f59e0b; color: white; }
.gc-dias-badge.normal { background: #22c55e; color: white; }

/* Estructura por niveles */
.gc-estructura-grid {
    display: grid;
    gap: 24px;
}

.gc-nivel-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.gc-nivel-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.gc-nivel-header.nivel-estrategico { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.gc-nivel-header.nivel-institucional { background: linear-gradient(135deg, #1F6BA7, #84CCD5); }
.gc-nivel-header.nivel-subcomites { background: linear-gradient(135deg, #ea580c, #fb923c); }
.gc-nivel-header.nivel-programas { background: linear-gradient(135deg, #1F6BA7, #5bbad5); }

.gc-nivel-header h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.gc-nivel-badge {
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
}

.gc-nivel-body {
    padding: 24px;
}

.gc-nivel-desc {
    color: #64748b;
    margin-bottom: 16px;
    font-size: 14px;
}

.gc-nivel-comites {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gc-comite-mini {
    background: #f8fafc;
    padding: 10px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.gc-comite-mini:hover {
    background: #f0fdfa;
    transform: translateX(5px);
}

.gc-comite-mini i {
    color: #0f766e;
}

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

.gc-estado-dot.activo { background: #22c55e; }
.gc-estado-dot.inactivo { background: #94a3b8; }

.gc-empty-nivel {
    color: #94a3b8;
    font-style: italic;
    font-size: 14px;
}

/* Grid de comit?s */
.gc-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 15px;
}

.gc-filtros {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.gc-filtros select {
    padding: 10px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    background: white;
    color: #1e293b;
    cursor: pointer;
}

.gc-comites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.gc-comite-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.gc-comite-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-color: #14b8a6;
}

.gc-comite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.gc-nivel-tag {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.gc-nivel-tag.nivel-1 { background: #ccfbf1; color: #0f766e; }
.gc-nivel-tag.nivel-2 { background: #D7EBEA; color: #1F6BA7; }
.gc-nivel-tag.nivel-3 { background: #ffedd5; color: #ea580c; }
.gc-nivel-tag.nivel-4 { background: #e6f4fb; color: #1F6BA7; }

.gc-comite-nombre {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.gc-comite-desc {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.5;
}

.gc-comite-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 16px;
}

.gc-comite-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gc-comite-meta i {
    color: #0f766e;
}

.gc-comite-stats {
    display: flex;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.gc-stat-mini {
    text-align: center;
}

.gc-stat-mini .valor {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #0f766e;
}

.gc-stat-mini .label {
    font-size: 11px;
    color: #94a3b8;
}

.gc-comite-jci {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.gc-jci-tag {
    background: #f0fdfa;
    color: #0f766e;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.gc-jci-more {
    background: #e2e8f0;
    color: #64748b;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* Lista de reuniones */
.gc-reuniones-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gc-reunion-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gc-reunion-card:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.gc-reunion-fecha-card {
    width: 70px;
    text-align: center;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-radius: 12px;
    padding: 12px 8px;
    color: white;
}

.gc-reunion-fecha-card .dia {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.gc-reunion-fecha-card .mes {
    display: block;
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
}

.gc-reunion-fecha-card .ano {
    display: block;
    font-size: 10px;
    opacity: 0.8;
}

.gc-reunion-contenido {
    flex: 1;
}

.gc-reunion-contenido h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
}

.gc-reunion-comite {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 8px;
}

.gc-reunion-comite i {
    margin-right: 6px;
    color: #0f766e;
}

.gc-reunion-detalles {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #94a3b8;
}

.gc-reunion-detalles span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gc-reunion-temas {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
}

.gc-reunion-actions {
    display: flex;
    gap: 8px;
}

/* Tabla de acuerdos */
.gc-acuerdos-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.gc-summary-card {
    background: white;
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.gc-summary-card .valor {
    font-size: 24px;
    font-weight: 700;
}

.gc-summary-card .label {
    font-size: 13px;
    color: #64748b;
}

.gc-summary-card.pendiente .valor { color: #f59e0b; }
.gc-summary-card.proceso .valor { color: #3b82f6; }
.gc-summary-card.cumplido .valor { color: #22c55e; }
.gc-summary-card.vencido .valor { color: #dc2626; }

.gc-table-container {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.gc-table {
    width: 100%;
    border-collapse: collapse;
}

.gc-table th {
    background: #f8fafc;
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
}

.gc-table td {
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #1e293b;
}

.gc-table tr:hover {
    background: #f8fafc;
}

.gc-acuerdo-row.vencido {
    background: #fef2f2;
}

.gc-acuerdo-row.urgente {
    background: #fffbeb;
}

.gc-acuerdo-codigo {
    font-family: monospace;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.gc-acuerdo-desc {
    font-weight: 500;
    margin-bottom: 4px;
}

.gc-acuerdo-reunion {
    color: #94a3b8;
    font-size: 12px;
}

.gc-progreso-bar {
    width: 100px;
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.gc-progreso-fill {
    height: 100%;
    background: linear-gradient(90deg, #0f766e, #14b8a6);
    border-radius: 10px;
    transition: width 0.5s ease;
}

.gc-progreso-text {
    position: absolute;
    right: -35px;
    top: -2px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

/* CAPA Grid */
.gc-capa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.gc-capa-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-left: 4px solid #1F6BA7;
}

.gc-capa-card.alta { border-left-color: #dc2626; }
.gc-capa-card.media { border-left-color: #f59e0b; }
.gc-capa-card.baja { border-left-color: #22c55e; }

.gc-capa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.gc-capa-codigo {
    font-family: monospace;
    font-size: 12px;
    color: #64748b;
}

.gc-tipo-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.gc-tipo-badge.correctiva { background: #fee2e2; color: #dc2626; }
.gc-tipo-badge.preventiva { background: #dbeafe; color: #1d4ed8; }

.gc-capa-titulo {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.gc-capa-desc {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.5;
}

.gc-capa-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 16px;
}

.gc-capa-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

/* JCI Compliance */
.gc-jci-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.gc-jci-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gc-jci-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.gc-jci-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.gc-jci-codigo {
    font-size: 24px;
    font-weight: 700;
    color: #0f766e;
}

.gc-jci-gauge {
    width: 60px;
    height: 60px;
}

.gc-jci-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gc-gauge-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 3;
}

.gc-gauge-fill {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.gc-jci-gauge.alto .gc-gauge-fill { stroke: #22c55e; }
.gc-jci-gauge.medio .gc-gauge-fill { stroke: #f59e0b; }
.gc-jci-gauge.bajo .gc-gauge-fill { stroke: #dc2626; }

.gc-gauge-text {
    transform: rotate(90deg);
    font-size: 8px;
    font-weight: 700;
    fill: #1e293b;
    text-anchor: middle;
}

.gc-jci-nombre {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.4;
}

.gc-jci-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}

.gc-jci-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gc-jci-stats .fa-check-circle { color: #22c55e; }
.gc-jci-stats .fa-clock { color: #f59e0b; }

.gc-jci-comites {
    font-size: 12px;
    color: #94a3b8;
}

/* Empty states */
.gc-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.gc-empty-state i {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.gc-empty-state p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Modales GC */
.gc-modal-content {
    max-width: 700px;
    margin: 50px auto;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 20px rgba(0,0,0,0.2);
    animation: slideUp 0.3s ease;
}

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

.gc-modal-header {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: white;
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gc-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.gc-modal-close {
    background: rgba(255,255,255,0.2);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
}

.gc-modal-close:hover {
    background: rgba(255,255,255,0.3);
    transform: rotate(90deg);
}

.gc-modal-body {
    padding: 30px;
    max-height: 60vh;
    overflow-y: auto;
}

.gc-form-group {
    margin-bottom: 20px;
}

.gc-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.gc-form-group input,
.gc-form-group select,
.gc-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
}

.gc-form-group input:focus,
.gc-form-group select:focus,
.gc-form-group textarea:focus {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.gc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gc-modal-footer {
    padding: 20px 30px;
    background: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.gc-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.gc-btn-secondary {
    background: #e2e8f0;
    color: #64748b;
}

.gc-btn-secondary:hover {
    background: #cbd5e1;
}

.gc-btn-primary {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: white;
}

.gc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.4);
}

/* Detalle de comit? */
.gc-detalle-section {
    margin-bottom: 24px;
}

.gc-detalle-section h5 {
    font-size: 14px;
    font-weight: 600;
    color: #0f766e;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0fdfa;
}

.gc-detalle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gc-detalle-item {
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 10px;
}

.gc-detalle-item label {
    font-size: 11px;
    color: #64748b;
    display: block;
    margin-bottom: 4px;
}

.gc-detalle-item span {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

.gc-miembro-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.gc-miembro-nombre {
    font-weight: 500;
    color: #1e293b;
}

.gc-miembro-rol {
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Detalle de reuni?n */
.gc-asistencia-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
}

.gc-asistencia-item.presente { background: #dcfce7; }
.gc-asistencia-item.justificado { background: #fef3c7; }
.gc-asistencia-item.ausente { background: #fee2e2; }

.gc-asistencia-nombre {
    font-weight: 500;
    color: #1e293b;
}

.gc-tema-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    margin-bottom: 8px;
}

.gc-tema-orden {
    width: 28px;
    height: 28px;
    background: #0f766e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.gc-tema-contenido {
    flex: 1;
}

.gc-tema-titulo {
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 2px;
}

.gc-tema-tiempo {
    font-size: 12px;
    color: #64748b;
    background: white;
    padding: 4px 10px;
    border-radius: 6px;
}

.gc-indicador-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 6px;
}

.gc-indicador-nombre {
    font-weight: 500;
    color: #1e293b;
}

.gc-indicador-meta {
    font-size: 12px;
    color: #0f766e;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .gc-header {
        padding: 20px;
        border-radius: 0;
    }
    
    .gc-nav-tabs {
        padding: 0 20px;
        margin-top: 0;
    }
    
    .gc-tab {
        padding: 10px 16px;
        font-size: 12px;
    }
    
    .gc-panel {
        padding: 0 20px 20px;
    }
    
    .gc-dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .gc-form-row {
        grid-template-columns: 1fr;
    }
    
    .gc-detalle-grid {
        grid-template-columns: 1fr;
    }
    
    .gc-reunion-card {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .gc-reunion-fecha-card {
        width: 100%;
        display: flex;
        gap: 10px;
        justify-content: center;
        padding: 10px;
    }
    
    .gc-reunion-fecha-card .dia {
        font-size: 20px;
    }
}

/* =====================================================
   M?DULO DE SEGURIDAD DEL PACIENTE
   Sistema Integral de Gesti?n de Incidentes y Eventos Adversos
   ===================================================== */

/* Contenedor de Pesta?as */
.sp-tabs-container {
    background: white;
    padding: 0;
    margin-bottom: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.sp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.sp-tab {
    padding: 15px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease, background 0.2s ease;
    position: relative;
}

.sp-tab:hover {
    background: rgba(31, 107, 167, 0.05);
    color: var(--primary);
}

.sp-tab.active {
    color: var(--primary);
    background: white;
    border-bottom: 3px solid var(--primary);
    margin-bottom: -2px;
}

.sp-tab i {
    font-size: 16px;
}

.sp-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.sp-badge-warning {
    background: #f97316;
    color: white;
}

.sp-badge-danger {
    background: #ef4444;
    color: white;
}

/* Contenido de Pesta?as */
.sp-tab-content {
    display: none;
}

.sp-tab-content.active {
    display: block;
}

/* Cultura Justa Banner (legacy) */
.sp-culture-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #e6f4fb 100%);
    border: 1px solid #bfdbfe;
    border-radius: var(--border-radius);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.sp-culture-banner i {
    font-size: 24px;
    color: #1F6BA7;
}

.sp-culture-banner span {
    color: #1C507B;
    font-size: 14px;
}

/* Formulario de Reporte */
.sp-form-container {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 30px;
}

.sp-form-header {
    margin-bottom: 30px;
}

.sp-form-header h2 {
    color: var(--primary);
    margin-bottom: 10px;
}

.sp-form-subtitle {
    color: #6b7280;
    font-size: 14px;
}

.sp-form-section {
    background: #f9fafb;
    border-radius: var(--border-radius);
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid #e5e7eb;
}

.sp-form-section h3 {
    color: var(--primary);
    font-size: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-step-number {
    background: var(--primary);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

/* Cards de Clasificaci?n */
.sp-clasificacion-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.sp-clasificacion-option input {
    display: none;
}

.sp-clasificacion-card {
    border: 2px solid #e5e7eb;
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    background: white;
}

.sp-clasificacion-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.sp-clasificacion-option input:checked + .sp-clasificacion-card {
    border-color: var(--primary);
    background: rgba(31, 107, 167, 0.05);
    box-shadow: 0 0 0 3px rgba(31, 107, 167, 0.1);
}

.sp-clasificacion-card i {
    font-size: 28px;
    margin-bottom: 10px;
    display: block;
}

.sp-clasificacion-card.near-miss i { color: #22c55e; }
.sp-clasificacion-card.incidente i { color: #f97316; }
.sp-clasificacion-card.evento-adverso i { color: #ef4444; }
.sp-clasificacion-card.centinela i { color: #7f1d1d; }

.sp-clasif-title {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #1f2937;
}

.sp-clasif-desc {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

/* Upload Zone */
.sp-upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: var(--border-radius);
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    background: #f9fafb;
}

.sp-upload-zone:hover,
.sp-upload-zone.dragover {
    border-color: var(--primary);
    background: rgba(31, 107, 167, 0.02);
}

.sp-upload-zone i {
    font-size: 48px;
    color: #9ca3af;
    margin-bottom: 10px;
}

.sp-upload-zone p {
    color: #6b7280;
    margin-bottom: 5px;
}

.sp-upload-zone span {
    font-size: 12px;
    color: #9ca3af;
}

.sp-archivos-lista {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-archivo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.sp-archivo-item i {
    color: var(--primary);
}

.sp-archivo-size {
    color: #9ca3af;
    font-size: 12px;
}

.sp-archivo-remove {
    margin-left: auto;
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
}

/* Checkbox y Toggle de An?nimo */
.sp-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
}

.sp-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.sp-anonimo-toggle {
    margin-bottom: 20px;
}

.sp-anonimo-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
    margin-left: 28px;
}

/* Acciones del Formulario */
.sp-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

/* =============================================================
   SP REPORTAR EVENTO V2 — Rediseño completo del formulario
   ============================================================= */

/* Wrapper */
.sp-report-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4px;
}

/* Hero header */
.sp-report-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #1F6BA7 100%);
    color: #fff;
    padding: 28px 32px;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 6px 24px rgba(15,23,42,.3);
}
.sp-report-hero-icon {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    backdrop-filter: blur(6px);
}
.sp-report-hero-text h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.sp-report-hero-text p {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,.92);
    line-height: 1.5;
}

/* Cultura Justa banner v2 */
.sp-culture-banner-v2 {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg,#eff6ff,#ecfdf5);
    border: 1px solid #a7f3d0;
    border-left: 4px solid #10b981;
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 20px;
}
.sp-culture-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg,#34d399,#10b981);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}
.sp-culture-text {
    font-size: 13px;
    color: #1C507B;
    line-height: 1.55;
}

/* Progress stepper */
.sp-report-stepper {
    margin-bottom: 24px;
    overflow-x: auto;
    padding: 4px 0;
}
.sp-stepper-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 560px;
}
.sp-stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    z-index: 2;
}
.sp-stepper-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    transition: all .25s ease;
    border: 2px solid transparent;
}
.sp-stepper-item.active .sp-stepper-num {
    background: #1F6BA7;
    color: #fff;
    border-color: rgba(31,107,167,.3);
    box-shadow: 0 0 0 4px rgba(31,107,167,.12);
}
.sp-stepper-item.done .sp-stepper-num {
    background: #22c55e;
    color: #fff;
}
.sp-stepper-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
}
.sp-stepper-item.active .sp-stepper-label {
    color: #1F6BA7;
    font-weight: 700;
}
.sp-stepper-item.done .sp-stepper-label {
    color: #22c55e;
}
.sp-stepper-line {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    min-width: 28px;
    margin-top: -18px;
    z-index: 1;
}

/* Report cards */
.sp-report-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    transition: box-shadow .25s ease, border-color .25s ease;
}
.sp-report-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(0,0,0,.07);
}
.sp-report-card:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59,130,246,.08), 0 4px 16px rgba(0,0,0,.06);
}
.sp-report-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}
.sp-rcard-number {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg,#1e3a8a,#1F6BA7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}
.sp-rcard-title {
    flex: 1;
}
.sp-rcard-title h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}
.sp-rcard-title p {
    margin: 3px 0 0;
    font-size: 12px;
    color: #94a3b8;
}
.sp-rcard-icon {
    font-size: 20px;
    color: #cbd5e1;
    flex-shrink: 0;
}
.sp-report-card-body {
    padding: 22px 24px 24px;
}

/* Grid layout */
.sp-report-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}
.sp-report-grid:last-child { margin-bottom: 0; }
.sp-grid-2 { grid-template-columns: 1fr 1fr; }
.sp-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
    .sp-grid-2, .sp-grid-3 { grid-template-columns: 1fr; }
}

/* Field */
.sp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sp-field label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sp-field label i {
    color: #94a3b8;
    font-size: 13px;
    width: 16px;
    text-align: center;
}
.sp-required {
    color: #ef4444;
    font-weight: 700;
}
.sp-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background: #fff;
    transition: all .2s ease;
    box-sizing: border-box;
    font-family: inherit;
}
.sp-input:hover {
    border-color: #cbd5e1;
}
.sp-input:focus {
    outline: none;
    border-color: #1F6BA7;
    box-shadow: 0 0 0 3px rgba(31,107,167,.1);
}
.sp-input::placeholder {
    color: #94a3b8;
}
.sp-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}

/* Clasificacion cards v2 — horizontal selection */
.sp-clasif-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 6px;
}
@media (max-width: 640px) {
    .sp-clasif-grid { grid-template-columns: 1fr; }
}
.sp-clasif-option {
    cursor: pointer;
}
.sp-clasif-option > input { display: none; }
.sp-clasif-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    transition: all .2s ease;
    position: relative;
}
.sp-clasif-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.sp-clasif-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.sp-clasif-nearmiss .sp-clasif-icon { background: #ecfdf5; color: #059669; }
.sp-clasif-incidente .sp-clasif-icon  { background: #fff7ed; color: #ea580c; }
.sp-clasif-adverso .sp-clasif-icon    { background: #fef2f2; color: #dc2626; }
.sp-clasif-centinela .sp-clasif-icon   { background: #fef2f2; color: #7f1d1d; }
.sp-clasif-info { flex: 1; }
.sp-clasif-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}
.sp-clasif-detail {
    display: block;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}
.sp-clasif-check {
    font-size: 20px;
    color: #e2e8f0;
    transition: all .2s;
}
/* Selected state */
.sp-clasif-option > input:checked + .sp-clasif-nearmiss { border-color: #22c55e; background: #f0fdf4; }
.sp-clasif-option > input:checked + .sp-clasif-incidente { border-color: #f97316; background: #fff7ed; }
.sp-clasif-option > input:checked + .sp-clasif-adverso { border-color: #ef4444; background: #fef2f2; }
.sp-clasif-option > input:checked + .sp-clasif-centinela { border-color: #991b1b; background: #fef2f2; }
.sp-clasif-option > input:checked + .sp-clasif-card .sp-clasif-check { color: #22c55e; }
.sp-clasif-option > input:checked + .sp-clasif-card { box-shadow: 0 0 0 3px rgba(34,197,94,.12); }

/* Toggle switch */
.sp-toggle-row {
    margin-bottom: 18px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
.sp-switch-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    color: #374151;
}
.sp-switch-label input { display: none; }
.sp-switch-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 12px;
    flex-shrink: 0;
    transition: background .2s;
}
.sp-switch-slider::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.sp-switch-label input:checked + .sp-switch-slider {
    background: #1F6BA7;
}
.sp-switch-label input:checked + .sp-switch-slider::after {
    transform: translateX(20px);
}

/* Upload zone v2 */
.sp-upload-zone-v2 {
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    background: #f8fafc;
    transition: all .25s ease;
}
.sp-upload-zone-v2:hover,
.sp-upload-zone-v2.dragover {
    border-color: #1F6BA7;
    background: #eff6ff;
}
.sp-upload-illustration {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    background: linear-gradient(135deg,#dbeafe,#eff6ff);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-upload-illustration i {
    font-size: 24px;
    color: #1F6BA7;
}
.sp-upload-main {
    font-size: 14px;
    color: #475569;
    margin: 0 0 6px;
}
.sp-upload-main span {
    color: #1F6BA7;
    font-weight: 600;
    text-decoration: underline;
}
.sp-upload-hint {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

/* Anonimo banner v2 */
.sp-anonimo-banner {
    padding: 16px 20px;
    background: linear-gradient(135deg,#fefce8,#fef9c3);
    border: 1px solid #fde68a;
    border-left: 4px solid #eab308;
    border-radius: 12px;
    margin-bottom: 20px;
}
.sp-anonimo-hint {
    font-size: 12px;
    color: #92400e;
    margin: 10px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Report actions bar */
.sp-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 0 4px;
}
.sp-btn-secondary {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .2s;
}
.sp-btn-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.sp-btn-submit {
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    background: linear-gradient(135deg,#1e3a8a,#1F6BA7);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(31,107,167,.3);
    transition: all .25s ease;
}
.sp-btn-submit:hover {
    box-shadow: 0 8px 24px rgba(31,107,167,.4);
    transform: translateY(-1px);
}

/* Responsive report card */
@media (max-width: 640px) {
    .sp-report-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }
    .sp-report-card-header {
        padding: 14px 16px;
    }
    .sp-report-card-body {
        padding: 16px;
    }
    .sp-report-actions {
        flex-direction: column;
    }
    .sp-btn-submit { justify-content: center; width: 100%; }
    .sp-stepper-track {
        justify-content: flex-start;
    }
}

/* =============================================================
   SP TRIAGE V3 — Rediseño premium con ring-KPIs, command bar, enriched cards
   ============================================================= */

/* Legacy triage header (keep for backward compat) */
.sp-triage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}
.sp-triage-header h2 { color: var(--primary); }

/* ── Hero v3 ── */
.sp-tri-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 22px;
    background: linear-gradient(135deg, #0a1628 0%, #1e3a8a 45%, #1F6BA7 80%, #0891b2 100%);
    box-shadow: 0 8px 32px rgba(15,23,42,.35);
}
.sp-tri-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(56,189,248,.18) 0%, transparent 50%),
        radial-gradient(circle at 15% 80%, rgba(99,102,241,.14) 0%, transparent 45%);
    pointer-events: none;
}
.sp-tri-hero-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 32px;
    gap: 20px;
    flex-wrap: wrap;
}
.sp-tri-hero-left {
    display: flex;
    align-items: center;
    gap: 18px;
}
.sp-tri-hero-icon {
    width: 54px;
    height: 54px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #38bdf8;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
}
.sp-tri-hero-text h2 {
    margin: 0 0 5px;
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px;
}
.sp-tri-hero-text p {
    margin: 0;
    font-size: 13.5px;
    color: rgba(255,255,255,.92);
    line-height: 1.4;
}
.sp-tri-hero-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.sp-tri-sla-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 12px 18px;
}
.sp-tri-sla-box.sla-danger {
    background: rgba(239,68,68,.2);
    border-color: rgba(239,68,68,.4);
}
.sp-tri-sla-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(251,191,36,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fbbf24;
}
.sp-tri-sla-box.sla-danger .sp-tri-sla-icon {
    background: rgba(239,68,68,.25);
    color: #fca5a5;
}
.sp-tri-sla-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sp-tri-sla-label {
    font-size: 11px;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 600;
}
.sp-tri-sla-value {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.sp-tri-live {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(255,255,255,.85);
    font-weight: 600;
}
.sp-tri-live-dot {
    width: 9px;
    height: 9px;
    background: #22c55e;
    border-radius: 50%;
    animation: sp-tri-pulse 1.8s infinite;
}
@keyframes sp-tri-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
    50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* ── KPI Ring Cards ── */
.sp-tri-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
.sp-tri-kpi {
    background: #fff;
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    position: relative;
    overflow: hidden;
}
.sp-tri-kpi::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: .6;
    transition: opacity .25s;
}
.sp-tri-kpi:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0,0,0,.1); }
.sp-tri-kpi:hover::after { opacity: 1; }
.sp-tri-kpi--critical::after { background: linear-gradient(90deg,#dc2626,#ef4444); }
.sp-tri-kpi--urgent::after  { background: linear-gradient(90deg,#ea580c,#f97316); }
.sp-tri-kpi--normal::after  { background: linear-gradient(90deg,#059669,#34d399); }
.sp-tri-kpi--overdue::after { background: linear-gradient(90deg,#991b1b,#dc2626); }
.sp-tri-kpi.sp-tri-kpi-alert {
    animation: sp-tri-kpi-pulse 2s infinite;
}
@keyframes sp-tri-kpi-pulse {
    0%, 100% { border-color: #e2e8f0; }
    50% { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
}

/* Ring SVG */
.sp-tri-kpi-ring {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}
.sp-tri-kpi-ring svg {
    width: 52px;
    height: 52px;
    transform: rotate(-90deg);
}
.sp-tri-ring-bg {
    fill: none;
    stroke: #f1f5f9;
    stroke-width: 3;
}
.sp-tri-ring-fill {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100.53;
    stroke-dashoffset: 100.53;
    transition: stroke-dashoffset .8s ease;
}
.sp-tri-kpi--critical .sp-tri-ring-fill { stroke: #dc2626; }
.sp-tri-kpi--urgent  .sp-tri-ring-fill { stroke: #f97316; }
.sp-tri-kpi--normal  .sp-tri-ring-fill { stroke: #22c55e; }
.sp-tri-kpi--overdue .sp-tri-ring-fill { stroke: #991b1b; }
.sp-tri-kpi-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}
.sp-tri-kpi-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.sp-tri-kpi-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.sp-tri-kpi-sla {
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sp-tri-kpi--critical .sp-tri-kpi-sla i { color: #dc2626; }
.sp-tri-kpi--urgent  .sp-tri-kpi-sla i { color: #f97316; }
.sp-tri-kpi--normal  .sp-tri-kpi-sla i { color: #22c55e; }
.sp-tri-kpi--overdue .sp-tri-kpi-sla i { color: #991b1b; }

/* ── Command Bar ── */
.sp-tri-cmdbar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    box-shadow: 0 1px 4px rgba(0,0,0,.03);
}
.sp-tri-search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}
.sp-tri-search i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
}
.sp-tri-search input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    color: #1e293b;
    background: #f8fafc;
    transition: all .2s;
    box-sizing: border-box;
}
.sp-tri-search input:focus {
    outline: none;
    border-color: #1F6BA7;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(31,107,167,.1);
}
.sp-tri-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.sp-tri-select {
    padding: 9px 32px 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    color: #475569;
    background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    min-width: 130px;
    transition: all .2s;
}
.sp-tri-select:focus {
    outline: none;
    border-color: #1F6BA7;
    box-shadow: 0 0 0 3px rgba(31,107,167,.08);
}
.sp-tri-cmdbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.sp-tri-sort-pills {
    display: flex;
    gap: 4px;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 3px;
}
.sp-tri-pill {
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all .2s;
    white-space: nowrap;
}
.sp-tri-pill:hover { color: #1e293b; }
.sp-tri-pill.active {
    background: #fff;
    color: #1F6BA7;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.sp-tri-counter {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 14px;
    background: #eff6ff;
    border-radius: 20px;
    color: #1F6BA7;
}
.sp-tri-refresh {
    width: 38px;
    height: 38px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
}
.sp-tri-refresh:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.sp-tri-refresh:hover i { transform: rotate(180deg); transition: transform .4s; }

/* Active filter tag */
.sp-tri-active-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    font-size: 13px;
    color: #1e40af;
    font-weight: 600;
}
.sp-tri-active-filter button {
    background: none;
    border: none;
    color: #1e40af;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 6px;
}
.sp-tri-active-filter button:hover { background: rgba(30,64,175,.1); }

/* ── Triage list v3 ── */
.sp-tri-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Triage Card v3 ── */
.sp-tri-card {
    display: flex;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all .3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.sp-tri-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 28px rgba(0,0,0,.1);
    transform: translateY(-2px);
}
.sp-tri-card.overdue {
    border-color: #fecaca;
    animation: sp-tri-border-pulse 2s infinite;
}
@keyframes sp-tri-border-pulse {
    0%, 100% { border-color: #fecaca; }
    50% { border-color: #ef4444; }
}

/* Priority stripe */
.sp-tri-stripe {
    width: 5px;
    flex-shrink: 0;
}
.sp-tri-stripe--critical { background: linear-gradient(180deg,#dc2626,#991b1b); }
.sp-tri-stripe--urgent   { background: linear-gradient(180deg,#f97316,#ea580c); }
.sp-tri-stripe--normal   { background: linear-gradient(180deg,#22c55e,#059669); }

/* Priority icon */
.sp-tri-prio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    flex-shrink: 0;
}
.sp-tri-prio-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}
.sp-tri-prio-icon.critical { background: linear-gradient(135deg,#dc2626,#991b1b); }
.sp-tri-prio-icon.urgent   { background: linear-gradient(135deg,#f97316,#ea580c); }
.sp-tri-prio-icon.normal   { background: linear-gradient(135deg,#22c55e,#059669); }

/* Card body */
.sp-tri-body {
    flex: 1;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.sp-tri-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.sp-tri-code {
    font-weight: 700;
    font-size: 14px;
    color: #1F6BA7;
    font-family: 'SF Mono', 'Consolas', monospace;
}
.sp-tri-elapsed {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.sp-tri-elapsed i { font-size: 11px; }
.sp-tri-elapsed.sla-warn { background: #fef3c7; color: #92400e; }
.sp-tri-elapsed.sla-overdue { background: #fef2f2; color: #dc2626; }
.sp-tri-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.45;
    margin: 0;
}
.sp-tri-desc {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sp-tri-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2px;
}
.sp-tri-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
}
.sp-tri-tag i {
    font-size: 10px;
    opacity: .7;
}
.sp-tri-tag--sede { background: #f0fdf4; color: #15803d; }
.sp-tri-tag--clasif { background: #eff6ff; color: #1e40af; }
.sp-tri-tag--reporter { background: #faf5ff; color: #7c3aed; }
.sp-tri-overdue-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Actions column */
.sp-tri-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px 18px;
    justify-content: center;
    border-left: 1px solid #f1f5f9;
    min-width: 130px;
}
.sp-tri-btn {
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    transition: all .2s;
}
.sp-tri-btn--primary {
    background: linear-gradient(135deg,#1e3a8a,#1F6BA7);
    color: #fff;
    box-shadow: 0 3px 10px rgba(31,107,167,.3);
}
.sp-tri-btn--primary:hover {
    box-shadow: 0 5px 16px rgba(31,107,167,.45);
    transform: translateY(-1px);
}
.sp-tri-btn--ghost {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.sp-tri-btn--ghost:hover { background: #e2e8f0; }
.sp-tri-btn--danger {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}
.sp-tri-btn--danger:hover { background: #fee2e2; }

/* ── Empty state ── */
.sp-tri-empty {
    text-align: center;
    padding: 72px 24px;
    background: #fff;
    border-radius: 16px;
    border: 1.5px solid #e2e8f0;
}
.sp-tri-empty-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg,#ecfdf5,#d1fae5);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #22c55e;
    margin: 0 auto 18px;
}
.sp-tri-empty h4 {
    font-size: 17px;
    color: #0f172a;
    margin: 0 0 6px;
    font-weight: 700;
}
.sp-tri-empty p {
    font-size: 13.5px;
    color: #94a3b8;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .sp-tri-kpis { grid-template-columns: repeat(2, 1fr); }
    .sp-tri-cmdbar { flex-direction: column; align-items: stretch; }
    .sp-tri-cmdbar-right { margin-left: 0; flex-wrap: wrap; }
    .sp-tri-search { max-width: 100%; }
}
@media (max-width: 768px) {
    .sp-tri-hero-content { flex-direction: column; text-align: center; }
    .sp-tri-hero-left { flex-direction: column; }
    .sp-tri-hero-right { justify-content: center; }
    .sp-tri-card { flex-direction: column; }
    .sp-tri-actions { flex-direction: row; border-left: none; border-top: 1px solid #f1f5f9; min-width: auto; }
    .sp-tri-sort-pills { display: none; }
}
@media (max-width: 480px) {
    .sp-tri-kpis { grid-template-columns: 1fr 1fr; }
    .sp-tri-kpi { padding: 14px 16px; gap: 12px; }
    .sp-tri-kpi-ring { width: 44px; height: 44px; }
    .sp-tri-kpi-ring svg { width: 44px; height: 44px; }
}

/* Legacy stat-box (keep for other uses) */
.sp-stat-box {
    padding: 15px 25px;
    border-radius: var(--border-radius);
    text-align: center;
    min-width: 120px;
}
.sp-stat-box.critical { background: linear-gradient(135deg, #fef2f2, #fee2e2); border: 1px solid #fecaca; }
.sp-stat-box.urgent { background: linear-gradient(135deg, #fff7ed, #ffedd5); border: 1px solid #fed7aa; }
.sp-stat-box.normal { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1px solid #bbf7d0; }
.sp-stat-box.overdue { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 1px solid #bfdbfe; }

.sp-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
}

.sp-stat-label {
    font-size: 12px;
    color: #6b7280;
}

.sp-triage-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.sp-triage-filters select { min-width: 180px; }

.sp-triage-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Legacy triage card */
.sp-triage-card {
    display: flex;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.2s ease, background 0.2s ease;
}
.sp-triage-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.sp-triage-priority {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}
.sp-triage-card.critical .sp-triage-priority { background: #7f1d1d; }
.sp-triage-card.urgent .sp-triage-priority { background: #f97316; }
.sp-triage-card.normal .sp-triage-priority { background: #22c55e; }

.sp-triage-content { flex: 1; padding: 20px; }
.sp-triage-code { font-weight: 600; color: var(--primary); }
.sp-triage-time { font-size: 12px; color: #6b7280; }
.sp-triage-title { font-size: 16px; color: #1f2937; margin-bottom: 10px; }
.sp-triage-meta { display: flex; gap: 15px; flex-wrap: wrap; }
.sp-triage-meta span { font-size: 13px; color: #6b7280; }
.sp-triage-meta i { margin-right: 5px; color: var(--primary); }
.sp-triage-actions { display: flex; flex-direction: column; gap: 10px; padding: 20px; justify-content: center; }

/* ===== SP Badges — Clasificación ===== */
.sp-clasif-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.sp-clasif-badge.nearmiss {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}
.sp-clasif-badge.incidente {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}
.sp-clasif-badge.eventoadverso {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}
.sp-clasif-badge.centinela,
.sp-clasif-badge.eventocentinela {
    background: #450a0a;
    color: #fecaca;
    border: 1px solid #7f1d1d;
}

/* ===== SP Badges — Severidad (pill suave) ===== */
.sp-sev-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.sp-sev-0 { /* Sin Daño */
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.sp-sev-1 { /* Daño Leve */
    background: #fefce8;
    color: #854d0e;
    border: 1px solid #fde68a;
}
.sp-sev-2 { /* Daño Moderado */
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fdba74;
}
.sp-sev-3 { /* Daño Severo */
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
.sp-sev-4 { /* Muerte */
    background: #450a0a;
    color: #fecaca;
    border: 1px solid #7f1d1d;
}

/* ===== SP Badges — Estado (pill con icono) ===== */
.sp-estado-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.sp-estado-pill i {
    font-size: 10px;
}

/* Compatibilidad antigua */
.sp-estado-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
}
.sp-estado-badge.pendiente { background: #fef3c7; color: #92400e; }
.sp-estado-badge.entriage { background: #e0e7ff; color: #4338ca; }
.sp-estado-badge.eninvestigacion { background: #ede9fe; color: #6d28d9; }
.sp-estado-badge.encapa { background: #dbeafe; color: #1e40af; }
.sp-estado-badge.enverificacion { background: #ccfbf1; color: #0f766e; }
.sp-estado-badge.cerrado { background: #d1fae5; color: #065f46; }
.sp-estado-badge.enprogreso { background: #dbeafe; color: #1e40af; }
.sp-estado-badge.ejecutada { background: #d1fae5; color: #065f46; }
.sp-estado-badge.completada { background: #d1fae5; color: #065f46; }

/* ===== SP: Severidad legacy ===== */
.sp-severidad-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

/* IPSG Grid */
.sp-ipsg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.sp-ipsg-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    gap: 15px;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.sp-ipsg-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.sp-ipsg-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary), #5a2368);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.sp-ipsg-content {
    flex: 1;
}

.sp-ipsg-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 10px;
}

.sp-ipsg-bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.sp-ipsg-progress {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.sp-ipsg-value {
    font-size: 13px;
    color: #6b7280;
}

/* ===== SP Dashboard: Filtros por Fecha ===== */
.sp-dash-filtros {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.sp-dash-filtros-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.sp-dash-filtro-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sp-dash-filtro-group label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
.sp-dash-filtro-group input,
.sp-dash-filtro-group select {
    min-width: 160px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
}
.sp-dash-filtro-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.sp-dash-periodo {
    margin-top: 10px;
    font-size: 12px;
    color: #1F6BA7;
    font-weight: 600;
}
.sp-dash-periodo:empty {
    display: none;
}

/* SP KPI click hint */
.sp-kpi-click-hint {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}
.card:hover .sp-kpi-click-hint {
    opacity: 1;
}

/* SP Modal drill-down */
.sp-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sp-modal-content {
    background: white;
    border-radius: 16px;
    max-width: 900px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}
.sp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    z-index: 1;
}
.sp-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #1e293b;
}
.sp-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px 8px;
    border-radius: 6px;
}
.sp-modal-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}
.sp-modal-body {
    padding: 24px;
}
.sp-modal-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sp-modal-body th {
    background: #f8fafc;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.sp-modal-body td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}
.sp-modal-body tr:hover td {
    background: #f8fafc;
}

/* Progress Bar */
.sp-progress-bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    width: 80px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.sp-progress-bar.small {
    width: 60px;
    height: 6px;
}

.sp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #082A5D);
    border-radius: 4px;
}

/* =====================================================
   INVESTIGACIONES v2 — Premium Redesign
   ===================================================== */
.sp-inv-hero, .sp-capa-hero, .sp-ron-hero, .sp-ale-hero, .sp-cfg-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #1F6BA7 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.sp-inv-hero::before, .sp-capa-hero::before, .sp-ron-hero::before, .sp-ale-hero::before, .sp-cfg-hero::before {
    content: '';
    position: absolute;
    top: -40%; right: -10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    border-radius: 50%;
}
.sp-inv-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}
.sp-inv-hero-text h2 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
}
.sp-inv-hero-text h2 i { margin-right: 10px; opacity: 0.85; }
.sp-inv-hero-text p {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
}
.sp-inv-hero-actions { display: flex; gap: 10px; }

/* KPI Cards (shared) */
.sp-inv-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.sp-inv-kpis-3 { grid-template-columns: repeat(3, 1fr); }
.sp-inv-kpi {
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}
.sp-inv-kpi:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.sp-inv-kpi::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 4px; height: 100%;
}
.sp-inv-kpi:nth-child(1)::before { background: #3b82f6; }
.sp-inv-kpi:nth-child(2)::before { background: #f59e0b; }
.sp-inv-kpi:nth-child(3)::before { background: #22c55e; }
.sp-inv-kpi:nth-child(4)::before { background: #8b5cf6; }
.sp-inv-kpi-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    margin-bottom: 10px;
}
.sp-inv-kpi-value {
    font-size: 1.5rem; font-weight: 700; color: #0f172a;
    line-height: 1; margin-bottom: 4px;
}
.sp-inv-kpi-label {
    font-size: 0.72rem; color: #64748b; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* Command Bar (shared) */
.sp-inv-cmdbar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 14px;
}

/* Investigaciones — Tools Panel */
.sp-inv-tools {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 24px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sp-inv-tools-header h3 {
    margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: #1e293b;
}
.sp-inv-tools-header h3 i { margin-right: 8px; color: #3b82f6; }
.sp-inv-tools-header p {
    margin: 0 0 18px; font-size: 0.82rem; color: #64748b;
}
.sp-inv-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}
.sp-inv-tool-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.25s;
}
.sp-inv-tool-card:hover {
    background: #fff;
    border-color: #93c5fd;
    box-shadow: 0 4px 16px rgba(59,130,246,0.1);
    transform: translateY(-2px);
}
.sp-inv-tool-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.sp-inv-tool-info { flex: 1; }
.sp-inv-tool-info strong { display: block; font-size: 0.88rem; color: #1e293b; margin-bottom: 2px; }
.sp-inv-tool-info span { font-size: 0.75rem; color: #64748b; }
.sp-inv-tool-arrow { color: #cbd5e1; font-size: 12px; transition: color 0.2s; }
.sp-inv-tool-card:hover .sp-inv-tool-arrow { color: #3b82f6; }
/* London Protocol — highlighted card */
.sp-inv-tool-card--london {
    grid-column: 1 / -1;
    padding: 20px 24px;
}
.sp-inv-tool-card--london .sp-inv-tool-info strong { font-size: 0.95rem; }
.sp-inv-tool-card--london .sp-inv-tool-info span { font-size: 0.8rem; }
.sp-inv-tool-card--london:hover { border-color: #3b82f6; box-shadow: 0 4px 20px rgba(37,99,235,0.3); }
.sp-inv-tool-card--london:hover .sp-inv-tool-arrow { color: #3b82f6; }

/* =====================================================
   CAPA v2 — Premium
   ===================================================== */
.sp-capa-leyenda {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 16px 20px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sp-capa-leyenda-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 600; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.sp-capa-leyenda-header i { color: #94a3b8; }
.sp-capa-leyenda-items {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.sp-capa-leyenda-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
}
.sp-capa-leyenda-item.alta { background: #d1fae5; color: #065f46; }
.sp-capa-leyenda-item.media { background: #fef3c7; color: #92400e; }
.sp-capa-leyenda-item.baja { background: #fee2e2; color: #b91c1c; }

/* CAPA progress bar inline */
.sp-capa-progress {
    display: flex; align-items: center; gap: 8px;
}
.sp-capa-progress-bar {
    flex: 1; height: 6px; background: #f1f5f9;
    border-radius: 3px; overflow: hidden; min-width: 60px;
}
.sp-capa-progress-fill {
    height: 100%; border-radius: 3px;
    transition: width 0.4s ease;
}
.sp-capa-progress-text {
    font-size: 0.75rem; font-weight: 600; color: #475569; min-width: 32px;
}

/* CAPA tipo badge */
.sp-capa-tipo {
    padding: 4px 10px; border-radius: 6px;
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.sp-capa-tipo-correctiva { background: #dbeafe; color: #1e40af; }
.sp-capa-tipo-preventiva { background: #d1fae5; color: #065f46; }
.sp-capa-tipo-mejora { background: #ede9fe; color: #7c3aed; }

/* CAPA verif badges */
.sp-capa-verif {
    padding: 4px 10px; border-radius: 6px;
    font-size: 0.72rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
}
.sp-capa-verif-ok { background: #d1fae5; color: #065f46; }
.sp-capa-verif-pend { background: #f1f5f9; color: #94a3b8; }

/* =====================================================
   RONDAS v2 — Premium (reuses sp-inv-* shared styles)
   ===================================================== */
.sp-ron-cumpl {
    padding: 4px 14px; border-radius: 20px;
    font-weight: 600; font-size: 0.82rem;
}
.sp-ron-cumpl-alto { background: #d1fae5; color: #065f46; }
.sp-ron-cumpl-medio { background: #fef3c7; color: #92400e; }
.sp-ron-cumpl-bajo { background: #fee2e2; color: #b91c1c; }
.sp-ron-hallazgo {
    background: #f97316; color: #fff;
    padding: 3px 10px; border-radius: 20px;
    font-weight: 600; font-size: 0.78rem;
}
.sp-ron-sin-hallazgo { color: #94a3b8; font-size: 0.82rem; }

/* =====================================================
   ALERTAS v2 — Premium
   ===================================================== */
.sp-ale-subtabs {
    display: flex; gap: 6px;
    margin-bottom: 20px; padding: 5px;
    background: #f1f5f9; border-radius: 12px;
}
.sp-ale-subtab {
    padding: 10px 18px; border: none;
    background: transparent; cursor: pointer;
    border-radius: 8px; font-weight: 500; font-size: 0.82rem;
    color: #64748b; display: flex; align-items: center; gap: 7px;
    transition: all 0.2s;
}
.sp-ale-subtab:hover { color: #1e293b; background: rgba(255,255,255,0.5); }
.sp-ale-subtab.active {
    background: #fff; color: #1F6BA7; font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sp-ale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
}
.sp-ale-card {
    background: #fff; border-radius: 14px;
    padding: 20px 22px; border: 1px solid #f1f5f9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: relative; overflow: hidden;
    transition: all 0.25s;
}
.sp-ale-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}
.sp-ale-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 4px; height: 100%;
}
.sp-ale-card-alert::before { background: #f97316; }
.sp-ale-card-flash::before { background: #ef4444; }
.sp-ale-card-leccion::before { background: #22c55e; }
.sp-ale-card-boletin::before { background: #3b82f6; }
.sp-ale-card-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.sp-ale-card-badge {
    padding: 4px 10px; border-radius: 6px;
    font-size: 0.7rem; font-weight: 600;
}
.sp-ale-badge-alert { background: #fef3c7; color: #92400e; }
.sp-ale-badge-flash { background: #fee2e2; color: #b91c1c; }
.sp-ale-badge-leccion { background: #d1fae5; color: #065f46; }
.sp-ale-badge-boletin { background: #dbeafe; color: #1e40af; }
.sp-ale-card-fecha { font-size: 0.75rem; color: #94a3b8; }
.sp-ale-card h4 {
    margin: 0 0 14px; font-size: 0.92rem;
    font-weight: 600; color: #1e293b; line-height: 1.4;
}
.sp-ale-card-actions { display: flex; gap: 8px; }
.sp-ale-card-btn {
    padding: 6px 14px; border-radius: 8px;
    font-size: 0.78rem; font-weight: 500;
    border: 1px solid #e2e8f0; background: #f8fafc;
    color: #475569; cursor: pointer; display: flex;
    align-items: center; gap: 6px; transition: all 0.2s;
}
.sp-ale-card-btn:hover {
    background: #1F6BA7; color: #fff; border-color: #1F6BA7;
}

/* =====================================================
   CONFIGURACIÓN v2 — Premium
   ===================================================== */
.sp-cfg-sections {
    display: flex; flex-direction: column; gap: 20px;
}
.sp-cfg-section {
    background: #fff; border-radius: 14px;
    border: 1px solid #f1f5f9; padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sp-cfg-section-header {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 20px;
}
.sp-cfg-section-icon {
    width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.sp-cfg-section-header h3 {
    margin: 0 0 2px; font-size: 1rem; font-weight: 700; color: #1e293b;
}
.sp-cfg-section-header p {
    margin: 0; font-size: 0.8rem; color: #64748b;
}
.sp-cfg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.sp-cfg-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 10px;
    border: 1px solid #f1f5f9; background: #f8fafc;
    cursor: pointer; transition: all 0.25s;
}
.sp-cfg-card:hover {
    background: #fff; border-color: #93c5fd;
    box-shadow: 0 4px 16px rgba(59,130,246,0.1);
    transform: translateY(-2px);
}
.sp-cfg-card-icon {
    width: 38px; height: 38px;
    border-radius: 10px; background: #eff6ff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: #3b82f6; flex-shrink: 0;
}
.sp-cfg-card-info { flex: 1; }
.sp-cfg-card-info strong { display: block; font-size: 0.85rem; color: #1e293b; margin-bottom: 2px; }
.sp-cfg-card-info span { font-size: 0.75rem; color: #64748b; }
.sp-cfg-arrow { color: #cbd5e1; font-size: 12px; transition: color 0.2s; }
.sp-cfg-card:hover .sp-cfg-arrow { color: #3b82f6; }

/* SLA Grid */
.sp-cfg-sla-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.sp-cfg-sla-item {
    background: #f8fafc; border-radius: 10px;
    padding: 14px 16px; border: 1px solid #f1f5f9;
}
.sp-cfg-sla-item label {
    display: block; font-size: 0.8rem; font-weight: 600;
    color: #475569; margin-bottom: 8px;
}
.sp-cfg-sla-item label i { margin-right: 6px; color: #94a3b8; }
.sp-cfg-sla-input {
    display: flex; align-items: center; gap: 8px;
}
.sp-cfg-sla-input input {
    width: 80px; text-align: center;
    font-weight: 600; font-size: 1.05rem;
}
.sp-cfg-sla-input span {
    font-size: 0.78rem; color: #94a3b8; font-weight: 500;
}

/* =====================================================
   RESPONSIVE — All SP v2 tabs
   ===================================================== */
@media (max-width: 1200px) {
    .sp-inv-kpis { grid-template-columns: repeat(2, 1fr); }
    .sp-inv-kpis-3 { grid-template-columns: repeat(3, 1fr); }
    .sp-inv-cmdbar { flex-wrap: wrap; }
    .sp-cfg-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .sp-inv-hero-content { flex-direction: column; gap: 16px; text-align: center; }
    .sp-inv-hero-actions { justify-content: center; }
    .sp-inv-kpis, .sp-inv-kpis-3 { grid-template-columns: 1fr; }
    .sp-inv-cmdbar { flex-direction: column; }
    .sp-inv-tools-grid { grid-template-columns: 1fr; }
    .sp-ale-grid { grid-template-columns: 1fr; }
    .sp-ale-subtabs { flex-wrap: wrap; }
    .sp-cfg-cards { grid-template-columns: 1fr; }
    .sp-cfg-sla-grid { grid-template-columns: 1fr; }
}

/* Rutas de Triage */
.sp-ruta-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.sp-ruta-option input {
    display: none;
}

.sp-ruta-card {
    border: 2px solid #e5e7eb;
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    background: white;
}

.sp-ruta-card:hover {
    border-color: var(--primary);
}

.sp-ruta-option input:checked + .sp-ruta-card {
    border-color: var(--primary);
    background: rgba(31, 107, 167, 0.05);
}

.sp-ruta-card i {
    font-size: 24px;
    color: var(--primary);
    margin-bottom: 10px;
    display: block;
}

.sp-ruta-card.centinela i {
    color: #7f1d1d;
}

.sp-ruta-title {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

.sp-ruta-desc {
    display: block;
    font-size: 12px;
    color: #6b7280;
}

/* Acciones Inmediatas */
.sp-accion-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.sp-accion-item input {
    flex: 1;
}

/* Timeline */
.sp-timeline {
    position: relative;
    padding-left: 30px;
}

.sp-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background: #e5e7eb;
}

.sp-timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.sp-timeline-dot {
    position: absolute;
    left: -26px;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e5e7eb;
    border: 3px solid white;
    box-shadow: 0 0 0 2px #e5e7eb;
}

.sp-timeline-item.completed .sp-timeline-dot {
    background: #22c55e;
    box-shadow: 0 0 0 2px #22c55e;
}

.sp-timeline-item.active .sp-timeline-dot {
    background: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
    /* Animaci�n removida para mejor rendimiento */
}

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

.sp-timeline-content {
    display: flex;
    flex-direction: column;
}

.sp-timeline-date {
    font-size: 12px;
    color: #9ca3af;
}

.sp-timeline-action {
    font-weight: 500;
    color: #1f2937;
}

/* Evento Detalle */
.sp-evento-detalle {
    max-height: 70vh;
    overflow-y: auto;
}

.sp-detalle-header {
    margin-bottom: 25px;
}

.sp-detalle-header h3 {
    margin-bottom: 10px;
}

.sp-detalle-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sp-detalle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.sp-detalle-section h4 {
    color: var(--primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-detalle-table {
    width: 100%;
}

.sp-detalle-table td {
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.sp-detalle-table td:first-child {
    color: #6b7280;
    width: 40%;
}

/* Empty State */
.sp-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.sp-empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
}

.sp-empty-state p {
    font-size: 16px;
}

/* Responsive */
@media (max-width: 1200px) {
    .sp-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    
    .sp-tab {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .sp-triage-stats,
    .sp-capa-summary,
    .sp-rondas-stats {
        flex-direction: column;
    }
    
    .sp-clasificacion-cards {
        grid-template-columns: 1fr 1fr;
    }
    
    .sp-detalle-grid {
        grid-template-columns: 1fr;
    }
    
    .sp-triage-card {
        flex-direction: column;
    }
    
    .sp-triage-priority {
        width: 100%;
        padding: 10px;
    }
    
    .sp-triage-actions {
        flex-direction: row;
        border-top: 1px solid #e5e7eb;
    }
}

/* --- SP Toast Notifications --- */
.sp-toast { position: fixed; top: 24px; right: 24px; z-index: 100010; background: #1e293b; color: #fff; padding: 14px 24px; border-radius: 10px; font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; align-items: center; gap: 10px; transform: translateX(120%); transition: transform .3s cubic-bezier(.34,1.56,.64,1); max-width: 420px; }
.sp-toast-show { transform: translateX(0); }
.sp-toast-success { background: linear-gradient(135deg,#059669,#047857); }
.sp-toast-error { background: linear-gradient(135deg,#dc2626,#b91c1c); }
.sp-toast-info { background: linear-gradient(135deg,#2563eb,#1d4ed8); }

/* --- SP London Protocol --- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } }
.sp-london-protocol { display: flex; flex-direction: column; gap: 20px; }
.sp-lp-header { background: linear-gradient(135deg,#0f172a,#1e293b); color: #fff; padding: 20px 24px; border-radius: 12px; }
.sp-lp-header h3 { margin: 0 0 6px; font-size: 18px; }
.sp-lp-evento { margin: 0 0 8px; color: rgba(255,255,255,.92); font-size: 14px; }
.sp-lp-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: rgba(255,255,255,.88); }
.sp-lp-meta span { display: flex; align-items: center; gap: 5px; }
.sp-lp-steps { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 8px 0; }
.sp-lp-step { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; min-width: 90px; }
.sp-lp-step-num { width: 36px; height: 36px; border-radius: 50%; background: #e2e8f0; color: #64748b; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; transition: all .2s; }
.sp-lp-step.active .sp-lp-step-num { background: #1F6BA7; color: #fff; box-shadow: 0 0 0 4px rgba(31,107,167,.25); }
.sp-lp-step.completed .sp-lp-step-num { background: #22c55e; color: #fff; }
.sp-lp-step-label { font-size: 11px; color: #64748b; text-align: center; max-width: 90px; line-height: 1.3; }
.sp-lp-step.active .sp-lp-step-label { color: #1F6BA7; font-weight: 600; }
.sp-lp-step-line { flex: 1; height: 2px; background: #e2e8f0; min-width: 20px; }
.sp-lp-content { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.sp-lp-paso h4 { margin: 0 0 6px; color: #0f172a; font-size: 16px; }
.sp-lp-instruccion { color: #64748b; font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.sp-lp-footer { display: flex; justify-content: space-between; gap: 12px; }
.sp-lp-resumen-evento { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; margin-top: 16px; }
.sp-lp-resumen-evento h5 { margin: 0 0 8px; font-size: 14px; color: #475569; }

/* LP Data Sources */
.sp-lp-data-sources { margin-bottom: 16px; }
.sp-lp-data-sources h5 { margin: 0 0 10px; font-size: 14px; }
.sp-lp-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-lp-checklist label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; padding: 6px 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; transition: all .2s; }
.sp-lp-checklist label:hover { border-color: #1F6BA7; background: #f0f9ff; }
.sp-lp-checklist input:checked + label, .sp-lp-checklist label:has(input:checked) { border-color: #22c55e; background: #f0fdf4; }

/* LP Timeline Builder */
.sp-lp-timeline-builder { margin-top: 8px; }
.sp-lp-tl-header { display: grid; grid-template-columns: 150px 1fr 150px 36px; gap: 8px; font-size: 12px; color: #64748b; font-weight: 600; text-transform: uppercase; margin-bottom: 6px; padding: 0 4px; }
.sp-lp-timeline-item { display: grid; grid-template-columns: 150px 1fr 150px 36px; gap: 8px; margin-bottom: 6px; align-items: center; }
.sp-lp-timeline-item input { font-size: 13px; padding: 8px 10px; }

/* LP CDP Builder */
.sp-lp-cdp-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; }
.sp-lp-cdp-num { width: 28px; height: 28px; border-radius: 50%; background: #dbeafe; color: #1e40af; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.sp-lp-cdp-content { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sp-lp-cdp-content select { max-width: 300px; }

/* LP Factores Grid */
.sp-lp-factores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.sp-lp-factor-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; }
.sp-lp-factor-header { font-weight: 600; font-size: 14px; color: #0f172a; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.sp-lp-factor-header i { color: #1F6BA7; }
.sp-lp-factor-ejemplos { font-size: 12px; color: #94a3b8; margin: 0 0 8px; font-style: italic; }

/* LP Recommendations Builder */
.sp-lp-rec-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; }
.sp-lp-rec-num { width: 28px; height: 28px; border-radius: 50%; background: #fef3c7; color: #92400e; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.sp-lp-rec-content { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sp-lp-rec-meta { display: grid; grid-template-columns: 140px 1fr 140px; gap: 6px; }
.sp-lp-generar-capa { margin-top: 16px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px 16px; }
.sp-lp-generar-capa label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #047857; cursor: pointer; }

/* SP Form Actions */
.sp-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e8f0; }

/* SP Método Badge */
.sp-metodo-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: #ede9fe; color: #7c3aed; border: 1px solid #c4b5fd; }

/* SP Progress Text */
.sp-progress-text { font-size: 12px; color: #64748b; font-weight: 500; }

/* SP Verificacion badges */
.sp-verif-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #059669; font-weight: 500; }
.sp-verif-pendiente { font-size: 12px; color: #94a3b8; }

/* SP Tipo Badge */
.sp-tipo-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.sp-tipo-badge.correctiva { background: #fee2e2; color: #991b1b; }
.sp-tipo-badge.preventiva { background: #dbeafe; color: #1e40af; }
.sp-tipo-badge.mejora { background: #fef3c7; color: #92400e; }

/* SP 5 Porqués Tool */
.sp-herr-5p { max-width: 700px; margin: 0 auto; }
.sp-5p-chain { display: flex; flex-direction: column; align-items: center; gap: 0; }
.sp-5p-item { width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; }
.sp-5p-label { font-weight: 700; color: #dc2626; margin-bottom: 6px; display: block; }
.sp-5p-arrow { color: #94a3b8; font-size: 20px; padding: 4px 0; }
.sp-5p-input { font-size: 14px; }

/* SP Ishikawa Tool */
.sp-ish-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sp-ish-category { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; }
.sp-ish-category h5 { margin: 0 0 8px; color: #1F6BA7; font-size: 14px; }
.sp-ish-efecto { background: #fef2f2; border: 2px solid #fecaca; border-radius: 10px; padding: 16px; }
.sp-ish-efecto label { font-size: 14px; margin-bottom: 6px; display: block; color: #991b1b; }

/* SP Barreras Tool */
.sp-barr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-barr-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; }
.sp-barr-item h5 { margin: 0 0 8px; font-size: 13px; color: #0f172a; }
.sp-barr-item select { margin-top: 8px; font-size: 13px; }

/* SP Ronda Checklist */
.sp-ronda-checklist { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 16px; }
.sp-check-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; cursor: pointer; transition: all .2s; }
.sp-check-item:hover { background: #f0f9ff; border-color: #93c5fd; }
.sp-check-item input:checked ~ * { color: #059669; }

/* SP Boletín Detail */
.sp-boletin-card-full { padding: 24px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; }
.sp-boletin-card-full.safetyalert { border-left: 4px solid #f59e0b; }
.sp-boletin-card-full.safetyflash { border-left: 4px solid #ef4444; }
.sp-boletin-card-full.leccionaprendida { border-left: 4px solid #3b82f6; }
.sp-bol-det-header { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 13px; }
.sp-boletin-card-full h3 { margin: 0 0 20px; font-size: 18px; color: #0f172a; }
.sp-bol-section { margin-bottom: 16px; padding: 14px 16px; background: #f8fafc; border-radius: 8px; }
.sp-bol-section h5 { margin: 0 0 6px; font-size: 14px; color: #1F6BA7; display: flex; align-items: center; gap: 8px; }
.sp-bol-section p { margin: 0; font-size: 14px; color: #374151; line-height: 1.6; }

/* SP Plantillas Rondas */
.sp-plantillas-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sp-plantilla-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
.sp-plantilla-item strong { font-size: 14px; }
.sp-plantilla-item small { color: #64748b; }

/* SP Ronda Detail */
.sp-ronda-detalle .sp-detalle-section { margin-top: 16px; }

/* London Protocol Responsive */
@media (max-width: 768px) {
    .sp-lp-steps { flex-wrap: wrap; }
    .sp-lp-step-line { display: none; }
    .sp-lp-tl-header, .sp-lp-timeline-item { grid-template-columns: 1fr; }
    .sp-lp-factores-grid { grid-template-columns: 1fr; }
    .sp-lp-rec-meta { grid-template-columns: 1fr; }
    .sp-barr-grid { grid-template-columns: 1fr; }
    .sp-lp-checklist { grid-template-columns: 1fr; }
    .sp-lp-footer { flex-wrap: wrap; }
}

/* --- SP Events Table: Header Controls Contrast Fix --- */
/* Select dropdowns on dark gradient header */
.table-header select,
.table-header .form-control {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 8px;
    padding: 9px 34px 9px 14px;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.table-header select option {
    background: #1e293b;
    color: #fff;
}
.table-header select:focus,
.table-header .form-control:focus {
    outline: none;
    background-color: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}
.table-header select:hover {
    background-color: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.5);
}

/* btn-outline on dark gradient = white border + glass effect */
.table-header .btn-outline {
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.45);
    color: #fff;
    backdrop-filter: blur(4px);
    box-shadow: none;
}
.table-header .btn-outline:hover {
    background: rgba(255,255,255,0.25);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 4px 16px rgba(255,255,255,0.12);
}

/* btn-primary on dark gradient = solid white CTA */
.table-header .btn-primary {
    background: #fff;
    color: #1e3a8a;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.table-header .btn-primary:hover {
    background: #f0f9ff;
    color: #1e3a8a;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}

/* --- SP Events Table: Polished Icon Action Buttons --- */
#sp-tabla-eventos td:last-child {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
#sp-tabla-eventos .btn.btn-sm {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 14px;
    transition: all 0.2s ease;
    border: 1.5px solid transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
/* Eye icon button — view detail */
#sp-tabla-eventos .btn.btn-sm.btn-outline {
    background: #eff6ff;
    color: #1F6BA7;
    border-color: #bfdbfe;
}
#sp-tabla-eventos .btn.btn-sm.btn-outline:hover {
    background: #1F6BA7;
    color: #fff;
    border-color: #1F6BA7;
    box-shadow: 0 4px 14px rgba(31,107,167,0.35);
    transform: translateY(-2px);
}
/* Triage button */
#sp-tabla-eventos .btn.btn-sm.btn-primary {
    background: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}
#sp-tabla-eventos .btn.btn-sm.btn-primary:hover {
    background: #1e40af;
    color: #fff;
    border-color: #1e40af;
    box-shadow: 0 4px 14px rgba(30,64,175,0.35);
    transform: translateY(-2px);
}
/* Investigation button */
#sp-tabla-eventos .btn.btn-sm.btn-secondary {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #c4b5fd;
}
#sp-tabla-eventos .btn.btn-sm.btn-secondary:hover {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
    box-shadow: 0 4px 14px rgba(124,58,237,0.35);
    transform: translateY(-2px);
}

/* =====================================================
   SP EVENTOS v2 — Premium Event Management
   ===================================================== */

/* Hero */
.sp-evt-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #1F6BA7 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.sp-evt-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    border-radius: 50%;
}
.sp-evt-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}
.sp-evt-hero-text h2 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
}
.sp-evt-hero-text h2 i { margin-right: 10px; opacity: 0.85; }
.sp-evt-hero-text p {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
}
.sp-evt-hero-actions { display: flex; gap: 10px; }
.sp-evt-btn-nuevo {
    background: #fff;
    color: #1e3a8a;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    transition: all 0.2s;
}
.sp-evt-btn-nuevo:hover {
    background: #f0f9ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.sp-evt-btn-export {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.3);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(4px);
    transition: all 0.2s;
}
.sp-evt-btn-export:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.6);
}

/* KPI Summary Cards */
.sp-evt-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.sp-evt-kpi {
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}
.sp-evt-kpi:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.sp-evt-kpi-active {
    border-color: #1F6BA7 !important;
    box-shadow: 0 0 0 2px rgba(31,107,167,0.18) !important;
}
.sp-evt-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
}
.sp-evt-kpi:nth-child(1)::before { background: #3b82f6; }
.sp-evt-kpi:nth-child(2)::before { background: #f59e0b; }
.sp-evt-kpi:nth-child(3)::before { background: #8b5cf6; }
.sp-evt-kpi:nth-child(4)::before { background: #22c55e; }
.sp-evt-kpi:nth-child(5)::before { background: #ef4444; }
.sp-evt-kpi-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    margin-bottom: 10px;
}
.sp-evt-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 4px;
}
.sp-evt-kpi-label {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Command Bar */
.sp-evt-cmdbar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 10px;
}
.sp-evt-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.sp-evt-search-wrap i {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
}
.sp-evt-search-wrap input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #1e293b;
    background: #f8fafc;
    transition: all 0.2s;
}
.sp-evt-search-wrap input:focus {
    outline: none;
    border-color: #1F6BA7;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(31,107,167,0.1);
}
.sp-evt-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.sp-evt-filters select {
    padding: 9px 30px 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #475569;
    background: #f8fafc;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: all 0.2s;
}
.sp-evt-filters select:focus {
    outline: none;
    border-color: #1F6BA7;
    box-shadow: 0 0 0 3px rgba(31,107,167,0.1);
}
.sp-evt-cmdbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.sp-evt-counter {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 20px;
}
.sp-evt-btn-clear {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: color 0.2s;
}
.sp-evt-btn-clear:hover { color: #ef4444; }

/* Sort Bar */
.sp-evt-sortbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 0 4px;
}
.sp-evt-sort-label {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
}
.sp-evt-sort-pill {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}
.sp-evt-sort-pill:hover {
    background: #f0f9ff;
    border-color: #93c5fd;
    color: #1e40af;
}
.sp-evt-sort-pill.active {
    background: #1F6BA7;
    color: #fff;
    border-color: #1F6BA7;
}

/* Table */
.sp-evt-table-wrap {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sp-evt-table {
    width: 100%;
    border-collapse: collapse;
}
.sp-evt-table thead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.sp-evt-table th {
    padding: 12px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
    text-align: left;
    white-space: nowrap;
}
.sp-evt-table td {
    padding: 12px 14px;
    font-size: 0.82rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.sp-evt-table tbody tr { transition: background 0.15s; }
.sp-evt-table tbody tr:hover { background: #f8fafc; }
.sp-evt-table tbody tr:last-child td { border-bottom: none; }
.sp-evt-code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-weight: 600;
    color: #1F6BA7;
    font-size: 0.8rem;
}
.sp-evt-title-cell { max-width: 260px; }
.sp-evt-title-text {
    font-weight: 500;
    color: #1e293b;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-evt-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.sp-evt-days { font-weight: 700; font-size: 0.82rem; }
.sp-evt-days-ok { color: #22c55e; }
.sp-evt-days-warn { color: #f59e0b; }
.sp-evt-days-danger { color: #ef4444; }
.sp-evt-days-closed { color: #94a3b8; }

/* Action Buttons */
.sp-evt-actions { display: flex; gap: 6px; align-items: center; }
.sp-evt-action-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.sp-evt-action-view { background: #eff6ff; color: #1F6BA7; border-color: #bfdbfe; }
.sp-evt-action-view:hover {
    background: #1F6BA7; color: #fff; border-color: #1F6BA7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(31,107,167,0.3);
}
.sp-evt-action-triage { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.sp-evt-action-triage:hover {
    background: #f59e0b; color: #fff; border-color: #f59e0b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}
.sp-evt-action-invest { background: #ede9fe; color: #7c3aed; border-color: #c4b5fd; }
.sp-evt-action-invest:hover {
    background: #7c3aed; color: #fff; border-color: #7c3aed;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}

/* Pagination */
.sp-evt-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 16px;
    margin-top: 8px;
}
.sp-evt-page-btn {
    min-width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center; justify-content: center;
    transition: all 0.2s;
}
.sp-evt-page-btn:hover { background: #f0f9ff; border-color: #93c5fd; color: #1e40af; }
.sp-evt-page-btn.active { background: #1F6BA7; color: #fff; border-color: #1F6BA7; }
.sp-evt-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sp-evt-page-info { font-size: 0.78rem; color: #64748b; margin: 0 12px; }

/* Empty state */
.sp-evt-empty { text-align: center; padding: 48px 20px; color: #94a3b8; }
.sp-evt-empty i { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
.sp-evt-empty p { font-size: 14px; margin: 0; }

/* Row priority stripe */
.sp-evt-row-critical { border-left: 3px solid #ef4444; }
.sp-evt-row-centinela { border-left: 3px solid #7f1d1d; background: #fef2f220; }

/* Responsive */
@media (max-width: 1200px) {
    .sp-evt-kpis { grid-template-columns: repeat(3, 1fr); }
    .sp-evt-cmdbar { flex-wrap: wrap; }
}
@media (max-width: 768px) {
    .sp-evt-hero-content { flex-direction: column; gap: 16px; text-align: center; }
    .sp-evt-hero-actions { justify-content: center; }
    .sp-evt-kpis { grid-template-columns: repeat(2, 1fr); }
    .sp-evt-cmdbar { flex-direction: column; }
    .sp-evt-filters { width: 100%; }
    .sp-evt-table-wrap { overflow-x: auto; }
    .sp-evt-sortbar { flex-wrap: wrap; }
}

/* =====================================================
   ESTILOS MGDI - Gesti?n Documental Integrada
   ===================================================== */

/* Tarjetas de Permisos */
.mgdi-permiso-card {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.mgdi-permiso-card:hover {
    border-color: #1F6BA7;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.15);
}

.mgdi-permiso-card.selected {
    border-color: #22c55e;
    background: #f0fdf4;
}

.mgdi-permiso-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.mgdi-permiso-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.mgdi-permiso-icon.editar {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.mgdi-permiso-icon.visualizar {
    background: #1F6BA7;
    color: white;
}

.mgdi-permiso-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.mgdi-permiso-features span {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Cron�metro de Edici�n */
.mgdi-cronometro {
    text-align: center;
    padding: 30px;
    background: #1F6BA7;
    border-radius: 16px;
    color: white;
    margin-bottom: 25px;
    box-shadow: 0 8px 24px rgba(31, 107, 167, 0.3);
}

.mgdi-cronometro-tiempo {
    font-size: 48px;
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin-bottom: 5px;
}

.mgdi-cronometro.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}

.mgdi-cronometro.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
    animation: pulse-danger 1s ease-in-out infinite;
}

@keyframes pulse-danger {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Acciones de Edici?n */
.mgdi-edicion-acciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.mgdi-accion-btn {
    padding: 15px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mgdi-accion-btn:hover {
    border-color: #1F6BA7;
    background: #eff6ff;
    transform: translateY(-2px);
}

.mgdi-accion-btn i {
    font-size: 24px;
    color: #1F6BA7;
}

.mgdi-accion-btn span {
    font-size: 12px;
    color: #64748b;
}

/* Calendario M?dico */
.mgdi-calendario {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.mgdi-calendario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.mgdi-calendario-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mgdi-calendario-nav button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mgdi-calendario-nav button:hover {
    background: #1F6BA7;
    color: white;
}

.mgdi-calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.mgdi-calendario-dia {
    text-align: center;
    padding: 10px 5px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-height: 45px;
}

.mgdi-calendario-dia:hover {
    background: #eff6ff;
}

.mgdi-calendario-dia.hoy {
    background: #1F6BA7;
    color: white;
    font-weight: 600;
}

.mgdi-calendario-dia.tiene-reunion::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
}

/* Lista de Reuniones */
.mgdi-reuniones-lista {
    max-height: 300px;
    overflow-y: auto;
}

.mgdi-reunion-card {
    padding: 15px;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 4px solid #1F6BA7;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.mgdi-reunion-card:hover {
    background: #f0f9ff;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
}

.mgdi-reunion-card.comite {
    border-left-color: #2482B8;
}

.mgdi-reunion-card.asamblea {
    border-left-color: #f59e0b;
}

.mgdi-reunion-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.mgdi-reunion-titulo {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

.mgdi-reunion-hora {
    color: #64748b;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Grabaci?n */
.mgdi-grabacion-container {
    text-align: center;
    padding: 25px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 16px;
    margin-bottom: 20px;
}

.mgdi-grabacion-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

.mgdi-grabacion-btn:hover {
    transform: scale(1.1);
}

.mgdi-grabacion-btn.grabando {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
    animation: pulse-grabacion 2s ease-in-out infinite;
}

@keyframes pulse-grabacion {
    0%, 100% { box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 8px 20px rgba(34, 197, 94, 0.6); }
}

.mgdi-estado-grabacion {
    margin-top: 15px;
    color: #22c55e;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mgdi-estado-grabacion i {
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Acuerdos */
.mgdi-acuerdos-lista {
    max-height: 250px;
    overflow-y: auto;
}

.mgdi-acuerdo-card {
    padding: 15px;
    background: white;
    border-radius: 10px;
    margin-bottom: 10px;
    border-left: 4px solid #f59e0b;
    transition: all 0.2s ease;
}

.mgdi-acuerdo-card:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

/* Permisos Grid */
.mgdi-permisos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.mgdi-permiso-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mgdi-permiso-check:hover {
    background: #f0f9ff;
}

.mgdi-permiso-check input[type="checkbox"] {
    accent-color: #1F6BA7;
}

/* Modal Visor */
.mgdi-visor-container {
    background: #1e293b;
    border-radius: 12px;
    overflow: hidden;
}

.mgdi-visor-toolbar {
    padding: 10px 15px;
    background: #0f172a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mgdi-visor-toolbar button {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mgdi-visor-toolbar button:hover {
    background: rgba(255,255,255,0.2);
}

.mgdi-visor-iframe {
    width: 100%;
    height: 70vh;
    border: none;
    background: white;
}

/* Alerta de Permisos */
.mgdi-alert-permisos {
    padding: 15px 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 10px;
    border-left: 4px solid #f59e0b;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.mgdi-alert-permisos i {
    font-size: 20px;
    color: #d97706;
}

.mgdi-alert-permisos span {
    font-size: 13px;
    color: #92400e;
}

/* Responsive MGDI */
@media (max-width: 768px) {
    .mgdi-edicion-acciones {
        grid-template-columns: 1fr;
    }
    
    .mgdi-permisos-grid {
        grid-template-columns: 1fr;
    }
    
    .mgdi-cronometro-tiempo {
        font-size: 36px;
    }
}

/* ===== ESTILOS GENERADOR PAQUETE EVIDENCIAS ===== */
.paquete-estandar-check {
    cursor: pointer;
}

.paquete-estandar-check input {
    display: none;
}

.paquete-estandar-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.paquete-estandar-card i {
    font-size: 1.5rem;
}

.paquete-estandar-card div {
    display: flex;
    flex-direction: column;
}

.paquete-estandar-card strong {
    font-size: 0.9rem;
    color: #1e293b;
}

.paquete-estandar-card span {
    font-size: 0.75rem;
    color: #64748b;
}

.paquete-estandar-check input:checked + .paquete-estandar-card {
    background: linear-gradient(135deg, #e6f4fb, #D7EBEA);
    border-color: #2482B8;
    box-shadow: 0 0 0 3px rgba(31, 107, 167, 0.1);
}

.paquete-formato-option {
    cursor: pointer;
}

.paquete-formato-option input {
    display: none;
}

.paquete-formato-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s ease;
}

.paquete-formato-card strong {
    font-size: 0.95rem;
    color: #1e293b;
}

.paquete-formato-card span {
    font-size: 0.75rem;
    color: #64748b;
}

.paquete-formato-option input:checked + .paquete-formato-card {
    background: linear-gradient(135deg, #e6f4fb, #D7EBEA);
    border-color: #2482B8;
    box-shadow: 0 0 0 3px rgba(31, 107, 167, 0.15);
}

.paquete-doc-item {
    display: block;
    cursor: pointer;
    margin-bottom: 8px;
}

.paquete-doc-item input {
    display: none;
}

.paquete-doc-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.paquete-doc-card:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.paquete-doc-item input:checked + .paquete-doc-card {
    background: linear-gradient(135deg, #e6f4fb, #eff6ff);
    border-color: #2482B8;
}

.paquete-doc-item input:checked + .paquete-doc-card::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 16px;
    color: #2482B8;
}

.paquete-doc-item input:checked + .paquete-doc-card {
    position: relative;
}

.paquete-doc-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.paquete-doc-icon i {
    font-size: 1.1rem;
}

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

.paquete-doc-info strong {
    display: block;
    font-size: 0.9rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.paquete-doc-meta {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}

.paquete-doc-meta span {
    font-size: 0.75rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}

.paquete-doc-meta i {
    font-size: 0.65rem;
}

.paquete-doc-estandar {
    padding: 4px 10px;
    background: #2482B8;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 20px;
    flex-shrink: 0;
}

/* Botones del modal paquete evidencias */
#modal-paquete-evidencia .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: none;
}

#modal-paquete-evidencia .modal-footer .btn-primary {
    background: linear-gradient(135deg, #2482B8, #1F6BA7);
    color: white;
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.3);
}

#modal-paquete-evidencia .modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #1F6BA7, #082A5D);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.4);
}

#modal-paquete-evidencia .modal-footer .btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

#modal-paquete-evidencia .modal-footer .btn-secondary:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* ===== ESTILOS MODAL MARCO DE ACREDITACI�N ===== */
.marco-color-option {
    cursor: pointer;
    display: inline-block;
}

.marco-color-option input {
    display: none;
}

.marco-color-option span {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.marco-color-option:hover span {
    transform: scale(1.1);
}

.marco-color-option input:checked + span {
    border-color: #1e293b;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

#modal-marco-acreditacion .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: none;
}

#modal-marco-acreditacion .modal-footer .btn-primary {
    background: linear-gradient(135deg, #2482B8, #1F6BA7);
    color: white;
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.3);
}

#modal-marco-acreditacion .modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #1F6BA7, #082A5D);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.4);
}

#modal-marco-acreditacion .modal-footer .btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

#modal-marco-acreditacion .modal-footer .btn-secondary:hover {
    background: #e2e8f0;
    color: #1e293b;
}

#modal-rol-institucional .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: none;
}

#modal-rol-institucional .modal-footer .btn-primary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

#modal-rol-institucional .modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-1px);
}

#modal-rol-institucional .modal-footer .btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

#modal-rol-institucional .modal-footer .btn-secondary:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* ============================================
   MODAL OVERLAY - Seguridad del Paciente
   ============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.modal-overlay[style*="display: flex"] {
    display: flex !important;
}

.modal-overlay .modal-content {
    background: #FFFFFF;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    animation: modalSlideUp 0.35s ease-out;
}

.modal-overlay .modal-content.modal-lg {
    max-width: 800px;
}

.modal-overlay .modal-content.modal-xl {
    max-width: 1100px;
}

.modal-overlay .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #1F6BA7, #667eea);
    color: white;
}

.modal-overlay .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-overlay .modal-header h3 i {
    margin-right: 10px;
}

.modal-overlay .modal-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-overlay .modal-close:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}

.modal-overlay .modal-body {
    padding: 24px;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}

.modal-overlay .modal-footer {
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Checkboxes de Permisos */
.sp-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #e2e8f0;
    font-size: 0.85rem;
}

.sp-checkbox-item:hover {
    border-color: #1F6BA7;
    background: #eff6ff;
}

.sp-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #1F6BA7;
    cursor: pointer;
}

.sp-checkbox-item input[type="checkbox"]:checked + span {
    color: #1F6BA7;
    font-weight: 500;
}

.sp-checkbox-item span {
    color: #374151;
}

.sp-checkbox-item .text-danger {
    color: #dc2626;
}
/* ============================================
   ESTILOS PARA M�DULO DE CAT�LOGOS
   ============================================ */

/* Lista de cat�logos en sidebar */
.lista-catalogos {
    padding: 0;
}

.catalogo-grupo {
    margin-bottom: 8px;
}

.catalogo-grupo-titulo {
    padding: 12px 16px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.catalogo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s;
}

.catalogo-item:hover {
    background: #f8fafc;
}

.catalogo-item.active {
    background: linear-gradient(90deg, #1F6BA7, #9b27b0);
    color: white;
}

.catalogo-item.active .catalogo-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.catalogo-nombre {
    font-size: 0.9rem;
    font-weight: 500;
}

.catalogo-count {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: #e2e8f0;
    border-radius: 12px;
    color: #64748b;
    font-weight: 600;
}

/* Badge de orden en cat�logos */
.orden-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

/* Status badge mejorado para tablas de configuraci�n */
.status-badge.active {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.inactive {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Botones de acci�n en tablas */
.action-buttons {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: #f1f5f9;
    color: #64748b;
}

.btn-icon:hover {
    background: #1F6BA7;
    color: white;
    transform: scale(1.1);
}

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

.btn-icon.success:hover {
    background: #16a34a;
}

/* Badge gen�rico para contadores */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: linear-gradient(135deg, #1F6BA7, #9b27b0);
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Estilos para tabs de configuraci�n */
.config-tab {
    position: relative;
    padding: 12px 20px !important;
    font-weight: 500;
    border-radius: 8px !important;
    transition: all 0.2s;
}

.config-tab:hover {
    background: #f8fafc;
}

.config-tab.active {
    background: linear-gradient(135deg, #1F6BA7, #9b27b0) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.25);
}

.config-tab.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #1F6BA7;
}

/* Cards de configuraci�n mejoradas */
.config-panel .card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.config-panel .card-header {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.config-panel .card-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.config-panel .card-header h3 i {
    color: #1F6BA7;
    margin-right: 8px;
}

.config-panel .card-body {
    padding: 20px;
}

/* ================================================================
   QMS - SISTEMA DE CALIDAD Y AUDITOR�A INTERNA
   ================================================================ */

/* Tabs del m�dulo QMS */
.qms-tab-btn {
    padding: 10px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qms-tab-btn:hover {
    background: #f3f4f6;
    border-color: #059669;
    color: #059669;
}

.qms-tab-btn.active {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    border-color: #047857 !important;
}

.qms-tab-content.hidden {
    display: none !important;
}

/* �rbol de procesos */
.qms-tree-node {
    margin-bottom: 2px;
}

.qms-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
}

.qms-tree-item:hover {
    background: #f3f4f6;
}

.qms-tree-item.selected {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-left: 3px solid #059669;
}

.qms-tree-toggle {
    cursor: pointer;
    color: #9ca3af;
    width: 16px;
    transition: transform 0.2s ease;
}

.qms-tree-toggle.fa-chevron-down {
    transform: rotate(90deg);
}

.qms-tree-spacer {
    width: 16px;
}

.qms-tree-icon {
    color: #059669;
    width: 16px;
}

.qms-tree-code {
    font-weight: 600;
    color: #374151;
    font-size: 12px;
}

.qms-tree-name {
    color: #6b7280;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qms-tree-children {
    margin-left: 12px;
}

.qms-tree-children.collapsed {
    display: none;
}

/* Badges de riesgo */
.qms-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.qms-badge.riesgo-alto {
    background: #fef2f2;
    color: #dc2626;
}

.qms-badge.riesgo-medio {
    background: #fffbeb;
    color: #d97706;
}

.qms-badge.riesgo-bajo {
    background: #ecfdf5;
    color: #059669;
}

/* Detalle de proceso */
.qms-proceso-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
}

.qms-proceso-titulo h4 {
    margin: 8px 0 0 0;
    color: #111827;
}

.qms-proceso-actions {
    display: flex;
    gap: 8px;
}

.qms-proceso-info {
    background: #f9fafb;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.qms-proceso-info p {
    margin: 5px 0;
    font-size: 14px;
}

/* Tabs de detalle */
.qms-detail-tabs {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 15px;
}

.qms-detail-tabs .nav-link {
    color: #6b7280;
    padding: 10px 15px;
    border: none;
    border-bottom: 2px solid transparent;
}

.qms-detail-tabs .nav-link.active {
    color: #059669;
    border-bottom-color: #059669;
    background: transparent;
}

.qms-detail-content {
    min-height: 200px;
}

/* KPI Grid */
.qms-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.qms-kpi-card {
    background: #f9fafb;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
}

.qms-kpi-card h6 {
    margin: 0 0 8px 0;
    color: #111827;
}

.qms-kpi-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #6b7280;
}

.qms-kpi-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Gr�fico de severidad */
.qms-severity-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.qms-severity-label {
    width: 80px;
    font-size: 13px;
    color: #6b7280;
}

.qms-severity-value {
    padding: 4px 12px;
    color: white;
    border-radius: 4px;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}

/* CAPA Cards */
.qms-capa-section {
    margin-bottom: 25px;
}

.qms-capa-section h6 {
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 600;
}

.qms-capa-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 15px;
}

.qms-capa-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qms-capa-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.qms-capa-card.vencida {
    border-left: 4px solid #dc2626;
}

.qms-capa-card.proximavencer {
    border-left: 4px solid #f59e0b;
}

.qms-capa-card.entiempo {
    border-left: 4px solid #059669;
}

.qms-capa-card.cerrada {
    border-left: 4px solid #1C507B;
    opacity: 0.8;
}

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

.qms-capa-codigo {
    font-weight: 700;
    color: #374151;
}

.qms-capa-titulo {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #111827;
    line-height: 1.4;
}

.qms-capa-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 12px;
}

.qms-capa-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.qms-capa-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.qms-capa-progress .progress {
    flex: 1;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.qms-capa-progress .progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.qms-capa-progress span {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    min-width: 35px;
}

/* Evidencias */
.qms-evidencias-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.qms-evidencia-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 13px;
}

.qms-evidencia-card i {
    color: #6b7280;
}

.qms-evidencia-card small {
    color: #9ca3af;
}

/* Verificaciones */
.qms-verificacion-card {
    background: #f9fafb;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
}

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

/* Auditor�a detalle */
.qms-auditoria-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.qms-auditoria-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Modal din�mico QMS */
#modal-qms-dinamico {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-qms-dinamico .modal-container {
    background: white;
    border-radius: 12px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.2s ease;
}

#modal-qms-dinamico .modal-lg {
    width: 700px;
    max-width: 95%;
}

#modal-qms-dinamico .modal-xl {
    width: 1000px;
    max-width: 95%;
}

#modal-qms-dinamico .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
}

#modal-qms-dinamico .modal-title {
    margin: 0;
    font-size: 18px;
}

#modal-qms-dinamico .close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.8;
}

#modal-qms-dinamico .close:hover {
    opacity: 1;
}

#modal-qms-dinamico .modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 120px);
}

#modal-qms-dinamico .modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

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

/* Botones peque�os */
.btn-xs {
    padding: 4px 8px;
    font-size: 12px;
}

/* Badge outline */
.badge-outline {
    background: transparent;
    border: 1px solid #9ca3af;
    color: #6b7280;
}

/* ============================================
   ESTILOS AMI - AUDITOR�A M�DICA INTELIGENTE
   ============================================ */

/* Navigation Tabs */
.ami-nav-tabs {
    display: flex;
    gap: 5px;
    padding: 15px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.ami-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ami-tab-btn:hover {
    background: rgba(31, 107, 167, 0.1);
    color: var(--primary);
}

.ami-tab-btn.active {
    background: var(--primary);
    color: white;
}

.ami-tab-btn i {
    font-size: 14px;
}

/* Tab Content */
.ami-tab-content {
    display: none;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.ami-tab-content.active {
    display: block;
}

/* Section Header */
.ami-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ami-section-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ami-section-header h2 i {
    color: var(--primary);
}

.ami-header-actions {
    display: flex;
    gap: 10px;
}

/* Filters */
.ami-filters {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ami-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}

.ami-filters .filter-group label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}

.ami-filters .filter-group.search-group {
    flex: 1;
    min-width: 200px;
}

/* KPI Grid */
.ami-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.ami-kpi-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ami-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.ami-kpi-card.kpi-alert {
    border-left: 4px solid var(--danger);
}

.ami-kpi-icon {
    font-size: 24px;
    color: var(--primary);
    margin-bottom: 10px;
}

.ami-kpi-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.ami-kpi-value.text-danger {
    color: var(--danger);
}

.ami-kpi-label {
    font-size: 14px;
    color: #64748b;
    margin-top: 5px;
}

.ami-kpi-detail {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 10px;
}

/* Charts Row */
.ami-charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.ami-chart-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.ami-chart-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ami-chart-card h4 i {
    color: var(--primary);
}

/* Bar Chart (Simple CSS) */
.ami-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 200px;
    padding: 10px 0;
}

.ami-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.ami-bar {
    width: 40px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 6px 6px 0 0;
    min-height: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5px;
    transition: height 0.5s ease;
}

.ami-bar-value {
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.ami-bar-label {
    font-size: 11px;
    color: #64748b;
    text-align: center;
}

/* Line Chart (Simple CSS) */
.ami-line-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 200px;
    padding: 20px 0;
    position: relative;
}

.ami-line-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
}

.ami-line-dot {
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

.ami-line-dot:hover .ami-line-tooltip {
    opacity: 1;
    visibility: visible;
}

.ami-line-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-bottom: 5px;
}

.ami-line-label {
    font-size: 11px;
    color: #64748b;
    margin-top: auto;
}

/* QHC Bars */
.ami-qhc-bars {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ami-qhc-bar-item {
    display: grid;
    grid-template-columns: 100px 1fr 50px;
    align-items: center;
    gap: 10px;
}

.ami-qhc-label {
    font-size: 13px;
    color: #64748b;
}

.ami-qhc-bar-bg {
    height: 10px;
    background: #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
}

.ami-qhc-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 5px;
    transition: width 0.5s ease;
}

.ami-qhc-value {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    text-align: right;
}

/* Table */
.ami-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.ami-table thead {
    background: #f8fafc;
}

.ami-table th,
.ami-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.ami-table th {
    font-weight: 600;
    color: #64748b;
    font-size: 13px;
    text-transform: uppercase;
}

.ami-table tbody tr:hover {
    background: #f8fafc;
}

.ami-table tbody tr.row-alert {
    background: rgba(239, 68, 68, 0.05);
}

/* Badges */
.ami-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
}

.ami-badge.badge-success { background: #dcfce7; color: #15803d; }
.ami-badge.badge-warning { background: #fef3c7; color: #b45309; }
.ami-badge.badge-danger { background: #fee2e2; color: #dc2626; }
.ami-badge.badge-info { background: #dbeafe; color: #1d4ed8; }
.ami-badge.badge-secondary { background: #f3f4f6; color: #6b7280; }
.ami-badge.badge-ia { background: #D7EBEA; color: #1F6BA7; }

/* Risk Score */
.ami-risk-score {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.ami-risk-score.risk-high { background: #fee2e2; color: #dc2626; }
.ami-risk-score.risk-medium { background: #fef3c7; color: #b45309; }
.ami-risk-score.risk-low { background: #dcfce7; color: #15803d; }

/* Button Icons */
.ami-btn-icon {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ami-btn-icon:hover {
    background: rgba(31, 107, 167, 0.1);
    color: var(--primary);
}

/* Empty State */
.ami-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.ami-empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
}

.ami-empty-state p {
    font-size: 16px;
}

.ami-empty-state.ami-empty-sm {
    padding: 30px 20px;
}

.ami-empty-state.ami-empty-sm i {
    font-size: 32px;
}

/* Loading State */
.ami-loading {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.ami-loading i {
    font-size: 32px;
    margin-bottom: 15px;
}

/* Error State */
.ami-error {
    text-align: center;
    padding: 60px 20px;
    color: var(--danger);
}

.ami-error i {
    font-size: 48px;
    margin-bottom: 15px;
}

/* Programs Grid */
.ami-programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.ami-program-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ami-program-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.ami-program-card .program-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ami-program-card .program-code {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.ami-program-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.ami-program-card p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 15px;
}

.ami-program-card .program-meta {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 15px;
}

.ami-program-card .program-meta div {
    margin-bottom: 5px;
}

.ami-program-card .program-meta i {
    width: 16px;
    margin-right: 5px;
}

.ami-program-card .program-stats {
    display: flex;
    gap: 20px;
    padding-top: 15px;
    border-top: 1px solid #e5e7eb;
}

.ami-program-card .stat {
    text-align: center;
}

.ami-program-card .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.ami-program-card .stat-label {
    font-size: 11px;
    color: #94a3b8;
}

.ami-program-card .program-actions {
    margin-top: 15px;
}

/* Reports Grid */
.ami-reportes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.ami-report-card {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.2s ease;
}

.ami-report-card:hover {
    transform: translateY(-3px);
}

.ami-report-card .report-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.ami-report-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.ami-report-card p {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 15px;
}

/* Modal AMI */
.ami-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.ami-modal-content {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

.ami-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
}

.ami-modal-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.ami-modal-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.ami-modal-close:hover {
    opacity: 1;
}

.ami-case-code {
    font-size: 14px;
    opacity: 0.9;
}

/* Case Detail Tabs */
.ami-case-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    overflow-x: auto;
}

.ami-case-tab {
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ami-case-tab:hover {
    color: var(--primary);
}

.ami-case-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: white;
}

.ami-case-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.ami-case-tab-content {
    display: none;
}

.ami-case-tab-content.active {
    display: block;
}

.ami-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Info Grid */
.ami-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.ami-info-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
}

.ami-info-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ami-info-section h4 i {
    color: var(--primary);
}

.ami-info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

.ami-info-row:last-child {
    border-bottom: none;
}

.ami-info-label {
    font-size: 13px;
    color: #64748b;
}

.ami-info-value {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
}

/* Risk Display */
.ami-risk-display {
    text-align: center;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.ami-risk-display.risk-high { background: #fee2e2; }
.ami-risk-display.risk-medium { background: #fef3c7; }
.ami-risk-display.risk-low { background: #dcfce7; }

.ami-risk-value {
    font-size: 36px;
    font-weight: 700;
}

.ami-risk-label {
    font-size: 14px;
    color: #64748b;
}

/* QHC Section */
.ami-qhc-pending {
    text-align: center;
    padding: 40px;
    color: #94a3b8;
}

.ami-qhc-pending i {
    font-size: 48px;
    margin-bottom: 15px;
}

.ami-qhc-result {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ami-qhc-global {
    text-align: center;
    padding: 20px;
}

.ami-qhc-score {
    font-size: 48px;
    font-weight: 700;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.ami-qhc-score.qhc-excellent { background: #dcfce7; color: #15803d; }
.ami-qhc-score.qhc-good { background: #dbeafe; color: #1d4ed8; }
.ami-qhc-score.qhc-acceptable { background: #fef3c7; color: #b45309; }
.ami-qhc-score.qhc-deficient { background: #fee2e2; color: #dc2626; }

.ami-qhc-category {
    font-size: 18px;
    font-weight: 600;
    color: #64748b;
}

.ami-qhc-domains {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8fafc;
    padding: 15px;
    border-radius: 12px;
}

.ami-qhc-domain {
    display: grid;
    grid-template-columns: 100px 1fr 60px;
    align-items: center;
    gap: 10px;
}

.ami-qhc-domain .domain-label {
    font-size: 13px;
    color: #64748b;
}

.ami-qhc-domain .domain-bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.ami-qhc-domain .domain-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.ami-qhc-domain .domain-fill.qhc-excellent { background: #10b981; }
.ami-qhc-domain .domain-fill.qhc-good { background: #3b82f6; }
.ami-qhc-domain .domain-fill.qhc-acceptable { background: #f59e0b; }
.ami-qhc-domain .domain-fill.qhc-deficient { background: #ef4444; }

.ami-qhc-domain .domain-value {
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

.ami-qhc-meta {
    text-align: center;
    color: #94a3b8;
}

/* Hallazgos Section */
.ami-hallazgos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ami-hallazgos-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ami-hallazgo-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
    border-left: 4px solid #e5e7eb;
}

.ami-hallazgo-card.hallazgo-ia {
    border-left-color: var(--primary);
}

.ami-hallazgo-card .hallazgo-header {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.ami-hallazgo-card .hallazgo-codigo {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.ami-hallazgo-card h5 {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.ami-hallazgo-card p {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 10px;
}

.ami-hallazgo-card .hallazgo-capa-alert {
    background: #fef3c7;
    color: #b45309;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ami-hallazgo-card .hallazgo-actions {
    display: flex;
    gap: 5px;
}

/* IA Section */
.ami-ia-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ami-ia-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ami-ia-disclaimer {
    background: #D7EBEA;
    color: #1F6BA7;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ami-sugerencias-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ami-sugerencia-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
    border-left: 4px solid var(--primary);
}

.ami-sugerencia-card.aceptada {
    border-left-color: var(--success);
    opacity: 0.8;
}

.ami-sugerencia-card.rechazada {
    border-left-color: var(--danger);
    opacity: 0.6;
}

.ami-sugerencia-card .sugerencia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ami-sugerencia-card .sugerencia-categoria {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.ami-sugerencia-card .sugerencia-confianza {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
}

.ami-sugerencia-card h5 {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.ami-sugerencia-card p {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 10px;
}

.ami-sugerencia-card .sugerencia-justificacion {
    background: rgba(31, 107, 167, 0.05);
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 10px;
}

.ami-sugerencia-card .sugerencia-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ami-sugerencia-card .sugerencia-estado {
    font-size: 13px;
    color: #64748b;
}

/* Checklist Section */
.ami-checklist-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.ami-checklist-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ami-checklist-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
}

.ami-checklist-card .checklist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ami-checklist-card h5 {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.ami-checklist-card .checklist-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ami-checklist-card .progress-bar {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.ami-checklist-card .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.ami-checklist-card .checklist-actions {
    display: flex;
    justify-content: flex-end;
}

/* AMI Buttons */
.ami-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ami-btn-primary {
    background: var(--primary);
    color: white;
}

.ami-btn-primary:hover {
    background: var(--secondary);
}

.ami-btn-secondary {
    background: #f3f4f6;
    color: #374151;
}

.ami-btn-secondary:hover {
    background: #e5e7eb;
}

.ami-btn-success {
    background: var(--success);
    color: white;
}

.ami-btn-success:hover {
    background: #059669;
}

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

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

.ami-btn-outline {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}

.ami-btn-outline:hover {
    background: var(--primary);
    color: white;
}

.ami-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .ami-nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .ami-tab-btn span {
        display: none;
    }
    
    .ami-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ami-charts-row {
        grid-template-columns: 1fr;
    }
    
    .ami-info-grid {
        grid-template-columns: 1fr;
    }
    
    .ami-case-tabs {
        overflow-x: auto;
    }
}

/* Text Utilities */
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-success { color: var(--success) !important; }
.text-info { color: var(--info) !important; }
.text-muted { color: #94a3b8 !important; }

/* ====================================
   AMI - Estilos de Formularios
   ==================================== */

.ami-form-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.ami-form-section h4 {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.ami-form-section h4 i {
    color: #667eea;
}

.ami-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.ami-form-group {
    margin-bottom: 15px;
}

.ami-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 6px;
}

.ami-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #1e293b;
    transition: all 0.2s ease;
}

.ami-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ami-input::placeholder {
    color: #94a3b8;
}

.ami-input:disabled {
    background: #f1f5f9;
    cursor: not-allowed;
}

textarea.ami-input {
    resize: vertical;
    min-height: 80px;
}

select.ami-input {
    cursor: pointer;
}

.ami-form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ami-form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #667eea;
}

.ami-form-check label {
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    margin: 0;
}

.ami-help-text {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
    margin-bottom: 8px;
}

/* Upload Zone */
.ami-upload-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f8fafc;
}

.ami-upload-zone:hover {
    border-color: #667eea;
    background: #f0f7ff;
}

.ami-upload-zone i {
    font-size: 48px;
    color: #94a3b8;
    margin-bottom: 10px;
}

.ami-upload-zone p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 5px;
}

.ami-upload-zone small {
    font-size: 12px;
    color: #94a3b8;
}

/* Slider/Range */
.ami-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #e5e7eb;
    outline: none;
    cursor: pointer;
    margin: 0 10px;
}

.ami-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.ami-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    border: none;
}

.ami-slider-value {
    display: inline-block;
    min-width: 45px;
    text-align: right;
    font-weight: 600;
    color: #667eea;
}

.ami-qhc-domain-input {
    background: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
}

.ami-qhc-domain-input label {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ami-qhc-domain-input label i {
    color: #667eea;
}

.ami-qhc-domain-input .ami-help-text {
    margin-bottom: 10px;
}

.ami-qhc-domain-input .ami-slider {
    flex: 1;
}

/* Report Cards */
.ami-report-section {
    margin-bottom: 30px;
}

.ami-report-section h3 {
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ami-report-section h3 i {
    color: #667eea;
}

/* Modal body scrollable */
.ami-modal-body {
    padding: 20px;
    max-height: 65vh;
    overflow-y: auto;
}

/* Responsive para formularios AMI */
@media (max-width: 768px) {
    .ami-form-row {
        grid-template-columns: 1fr;
    }
    
    .ami-modal-content {
        margin: 10px;
        max-width: calc(100vw - 20px) !important;
    }
    
    .ami-upload-zone {
        padding: 25px 15px;
    }
    
    .ami-upload-zone i {
        font-size: 36px;
    }
}

/* ============================================
   ESTILOS MMO - CONSOLA OPERACIONAL
   MEDICACI�N Y MOVILIDAD
   ============================================ */

/* Colores MMO */
:root {
    --mmo-primary: #0891b2;
    --mmo-secondary: #06b6d4;
    --mmo-success: #10b981;
    --mmo-warning: #f59e0b;
    --mmo-danger: #ef4444;
    --mmo-critical: #dc2626;
    --mmo-info: #3b82f6;
    --mmo-purple: #2482B8;
    --mmo-dark: #1e293b;
    --mmo-light: #f8fafc;
    --mmo-border: #e2e8f0;
}

/* Fila de m�tricas principales */
.mmo-metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    padding: 0 10px;
}

.mmo-metric-card {
    background: linear-gradient(135deg, var(--mmo-primary) 0%, var(--mmo-secondary) 100%);
    border-radius: 16px;
    padding: 20px;
    color: white;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.mmo-metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(8, 145, 178, 0.3);
}

.mmo-metric-card.success {
    background: linear-gradient(135deg, var(--mmo-success) 0%, #059669 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.mmo-metric-card.warning {
    background: linear-gradient(135deg, var(--mmo-warning) 0%, #d97706 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
}

.mmo-metric-card.danger {
    background: linear-gradient(135deg, var(--mmo-danger) 0%, #dc2626 100%);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

.mmo-metric-card.purple {
    background: linear-gradient(135deg, var(--mmo-purple) 0%, #1F6BA7 100%);
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.2);
}

.mmo-metric-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.mmo-metric-info h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.mmo-metric-info p {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: 0.9;
}

/* Barra de herramientas */
.mmo-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: white;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
    gap: 15px;
}

.mmo-view-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mmo-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 2px solid var(--mmo-border);
    background: white;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mmo-dark);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.mmo-view-btn:hover {
    border-color: var(--mmo-primary);
    color: var(--mmo-primary);
}

.mmo-view-btn.active {
    background: var(--mmo-primary);
    border-color: var(--mmo-primary);
    color: white;
}

.mmo-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--mmo-danger);
    color: white;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mmo-pulse 2s infinite;
}

@keyframes mmo-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.mmo-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mmo-select {
    padding: 10px 14px;
    border: 2px solid var(--mmo-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--mmo-dark);
    background: white;
    min-width: 150px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.mmo-select:focus {
    outline: none;
    border-color: var(--mmo-primary);
}

.mmo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.mmo-btn-primary {
    background: var(--mmo-primary);
    color: white;
}

.mmo-btn-primary:hover {
    background: var(--mmo-secondary);
}

.mmo-btn-outline {
    background: transparent;
    border: 2px solid var(--mmo-border);
    color: var(--mmo-dark);
}

.mmo-btn-outline:hover {
    border-color: var(--mmo-primary);
    color: var(--mmo-primary);
}

.mmo-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.mmo-btn-success {
    background: var(--mmo-success);
    color: white;
}

.mmo-btn-warning {
    background: var(--mmo-warning);
    color: white;
}

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

/* Contenedor principal */
.mmo-main-container {
    display: flex;
    gap: 20px;
    position: relative;
}

.mmo-view-content {
    flex: 1;
    min-height: 500px;
}

/* Loading */
.mmo-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--mmo-primary);
    font-size: 16px;
    gap: 12px;
    min-height: 300px;
    width: 100%;
    text-align: center;
}

.mmo-loading i {
    font-size: 24px;
}

/* ============================================
   BEDBOARD - Tablero de Camas
   ============================================ */

.mmo-bedboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mmo-floor-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.mmo-floor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--mmo-primary) 0%, var(--mmo-secondary) 100%);
    color: white;
}

.mmo-floor-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.mmo-floor-stats {
    display: flex;
    gap: 15px;
}

.mmo-floor-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
}

.mmo-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    padding: 20px;
}

.mmo-room-card {
    background: var(--mmo-light);
    border: 2px solid var(--mmo-border);
    border-radius: 12px;
    overflow: hidden;
}

.mmo-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: white;
    border-bottom: 1px solid var(--mmo-border);
}

.mmo-room-name {
    font-weight: 600;
    color: var(--mmo-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mmo-room-name i {
    color: var(--mmo-primary);
}

.mmo-beds-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

/* Cama individual */
.mmo-bed-card {
    background: white;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.mmo-bed-card:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mmo-bed-card.occupied {
    border-left: 4px solid var(--mmo-success);
}

.mmo-bed-card.available {
    border-left: 4px solid var(--mmo-info);
}

.mmo-bed-card.reserved {
    border-left: 4px solid var(--mmo-warning);
}

.mmo-bed-card.cleaning {
    border-left: 4px solid var(--mmo-purple);
}

.mmo-bed-card.maintenance {
    border-left: 4px solid var(--gray);
}

.mmo-bed-card.blocked {
    border-left: 4px solid var(--mmo-danger);
}

.mmo-bed-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.mmo-bed-card.occupied .mmo-bed-icon {
    background: rgba(16, 185, 129, 0.15);
    color: var(--mmo-success);
}

.mmo-bed-card.available .mmo-bed-icon {
    background: rgba(59, 130, 246, 0.15);
    color: var(--mmo-info);
}

.mmo-bed-card.reserved .mmo-bed-icon {
    background: rgba(245, 158, 11, 0.15);
    color: var(--mmo-warning);
}

.mmo-bed-card.cleaning .mmo-bed-icon {
    background: rgba(31, 107, 167, 0.15);
    color: var(--mmo-purple);
}

.mmo-bed-card.maintenance .mmo-bed-icon,
.mmo-bed-card.blocked .mmo-bed-icon {
    background: rgba(148, 163, 184, 0.15);
    color: var(--gray);
}

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

.mmo-bed-number {
    font-weight: 600;
    color: var(--mmo-dark);
    font-size: 14px;
}

.mmo-patient-name {
    font-size: 13px;
    color: var(--mmo-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mmo-patient-dx {
    font-size: 12px;
    color: var(--gray-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mmo-bed-status-label {
    font-size: 12px;
    color: var(--gray-medium);
}

.mmo-bed-flags {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.mmo-flag {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
}

.mmo-flag.npo {
    background: var(--mmo-danger);
}

.mmo-flag.isolation {
    background: var(--mmo-warning);
}

.mmo-flag.fall-risk {
    background: var(--mmo-purple);
}

.mmo-flag.allergy {
    background: #2482B8;
}

.mmo-flag.medication {
    background: var(--mmo-success);
}

.mmo-flag.diet {
    background: var(--mmo-info);
}

.mmo-flag.mobility {
    background: #f97316;
}

.mmo-flag.alert {
    background: var(--mmo-danger);
    animation: mmo-pulse 2s infinite;
}

/* Tooltip para flags */
.mmo-flag[title] {
    cursor: help;
}

/* ============================================
   CLINICBOARD - Consultorios
   ============================================ */

.mmo-clinicboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 10px;
}

.mmo-station-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 2px solid var(--mmo-border);
    transition: all 0.2s;
    cursor: pointer;
}

.mmo-station-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.mmo-station-card.in-progress {
    border-color: var(--mmo-success);
}

.mmo-station-card.ready {
    border-color: var(--mmo-info);
}

.mmo-station-card.waiting {
    border-color: var(--mmo-warning);
}

.mmo-station-card.offline {
    border-color: var(--gray);
    opacity: 0.7;
}

.mmo-station-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 15px;
}

.mmo-station-info h4 {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--mmo-dark);
}

.mmo-station-info p {
    margin: 0;
    font-size: 13px;
    color: var(--gray-medium);
}

.mmo-station-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.mmo-station-card.in-progress .mmo-station-status {
    background: rgba(16, 185, 129, 0.15);
    color: var(--mmo-success);
}

.mmo-station-card.ready .mmo-station-status {
    background: rgba(59, 130, 246, 0.15);
    color: var(--mmo-info);
}

.mmo-station-card.waiting .mmo-station-status {
    background: rgba(245, 158, 11, 0.15);
    color: var(--mmo-warning);
}

.mmo-station-card.offline .mmo-station-status {
    background: rgba(148, 163, 184, 0.15);
    color: var(--gray);
}

.mmo-station-patient {
    padding: 12px;
    background: var(--mmo-light);
    border-radius: 8px;
    margin-bottom: 12px;
}

.mmo-station-patient strong {
    display: block;
    font-size: 14px;
    color: var(--mmo-dark);
    margin-bottom: 4px;
}

.mmo-station-patient span {
    font-size: 12px;
    color: var(--gray-medium);
}

.mmo-station-metrics {
    display: flex;
    gap: 15px;
}

.mmo-station-metric {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-medium);
}

.mmo-station-metric i {
    color: var(--mmo-primary);
}

/* ============================================
   ALERTAS
   ============================================ */

.mmo-alerts-header,
.mmo-transfers-header,
.mmo-metrics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.mmo-alerts-header h3,
.mmo-transfers-header h3,
.mmo-metrics-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--mmo-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.mmo-alerts-header h3 i {
    color: var(--mmo-danger);
}

.mmo-transfers-header h3 i {
    color: var(--mmo-primary);
}

.mmo-metrics-header h3 i {
    color: var(--mmo-success);
}

.mmo-alerts-filters {
    display: flex;
    gap: 8px;
}

.mmo-alerts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mmo-alert-card {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-left: 4px solid;
    transition: all 0.2s;
}

.mmo-alert-card:hover {
    transform: translateX(5px);
}

.mmo-alert-card.CRITICAL {
    border-color: var(--mmo-critical);
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.05) 0%, white 100%);
}

.mmo-alert-card.HIGH {
    border-color: var(--mmo-danger);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, white 100%);
}

.mmo-alert-card.MEDIUM {
    border-color: var(--mmo-warning);
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, white 100%);
}

.mmo-alert-card.LOW {
    border-color: var(--mmo-info);
}

.mmo-alert-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.mmo-alert-card.CRITICAL .mmo-alert-icon {
    background: rgba(220, 38, 38, 0.15);
    color: var(--mmo-critical);
    animation: mmo-pulse 1.5s infinite;
}

.mmo-alert-card.HIGH .mmo-alert-icon {
    background: rgba(239, 68, 68, 0.15);
    color: var(--mmo-danger);
}

.mmo-alert-card.MEDIUM .mmo-alert-icon {
    background: rgba(245, 158, 11, 0.15);
    color: var(--mmo-warning);
}

.mmo-alert-card.LOW .mmo-alert-icon {
    background: rgba(59, 130, 246, 0.15);
    color: var(--mmo-info);
}

.mmo-alert-content {
    flex: 1;
    min-width: 0;
}

.mmo-alert-title {
    font-weight: 600;
    color: var(--mmo-dark);
    font-size: 14px;
    margin-bottom: 4px;
}

.mmo-alert-detail {
    font-size: 13px;
    color: var(--gray-medium);
}

.mmo-alert-meta {
    display: flex;
    gap: 15px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--gray);
}

.mmo-alert-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mmo-alert-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ============================================
   TRASLADOS
   ============================================ */

.mmo-transfers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 16px;
}

.mmo-transfer-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.mmo-transfer-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--mmo-border);
}

.mmo-transfer-patient {
    font-weight: 600;
    color: var(--mmo-dark);
    font-size: 15px;
}

.mmo-transfer-patient span {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--gray-medium);
    margin-top: 3px;
}

.mmo-transfer-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.mmo-transfer-status.pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--mmo-warning);
}

.mmo-transfer-status.approved {
    background: rgba(59, 130, 246, 0.15);
    color: var(--mmo-info);
}

.mmo-transfer-status.in-transit {
    background: rgba(31, 107, 167, 0.15);
    color: var(--mmo-purple);
}

.mmo-transfer-status.completed {
    background: rgba(16, 185, 129, 0.15);
    color: var(--mmo-success);
}

.mmo-transfer-status.cancelled {
    background: rgba(148, 163, 184, 0.15);
    color: var(--gray);
}

.mmo-transfer-route {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.mmo-transfer-location {
    flex: 1;
    padding: 12px;
    background: var(--mmo-light);
    border-radius: 8px;
    text-align: center;
}

.mmo-transfer-location label {
    display: block;
    font-size: 11px;
    color: var(--gray);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.mmo-transfer-location strong {
    font-size: 14px;
    color: var(--mmo-dark);
}

.mmo-transfer-arrow {
    color: var(--mmo-primary);
    font-size: 20px;
}

.mmo-transfer-info {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 13px;
    color: var(--gray-medium);
}

.mmo-transfer-info span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mmo-transfer-info i {
    color: var(--mmo-primary);
}

.mmo-transfer-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ============================================
   PANEL PACIENTE 360
   ============================================ */

.mmo-p360-panel {
    position: fixed;
    top: 0;
    right: -500px;
    width: 480px;
    height: 100vh;
    background: white;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: right 0.3s ease;
    overflow-y: auto;
}

.mmo-p360-panel.open {
    right: 0;
}

.mmo-p360-header {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, var(--mmo-primary) 0%, var(--mmo-secondary) 100%);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    z-index: 10;
}

.mmo-p360-patient h2 {
    margin: 0 0 5px;
    font-size: 20px;
}

.mmo-p360-patient p {
    margin: 0;
    opacity: 0.9;
    font-size: 13px;
}

.mmo-p360-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.2s;
}

.mmo-p360-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mmo-p360-body {
    padding: 20px;
}

.mmo-p360-section {
    margin-bottom: 20px;
}

.mmo-p360-section h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--mmo-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mmo-border);
}

.mmo-p360-section h4 i {
    color: var(--mmo-primary);
}

.mmo-p360-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.mmo-p360-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.mmo-p360-flag.danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--mmo-danger);
}

.mmo-p360-flag.warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--mmo-warning);
}

.mmo-p360-flag.info {
    background: rgba(59, 130, 246, 0.15);
    color: var(--mmo-info);
}

.mmo-p360-flag.purple {
    background: rgba(31, 107, 167, 0.15);
    color: var(--mmo-purple);
}

.mmo-p360-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--mmo-border);
    font-size: 13px;
}

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

.mmo-p360-item label {
    color: var(--gray-medium);
}

.mmo-p360-item span {
    color: var(--mmo-dark);
    font-weight: 500;
}

.mmo-p360-timeline {
    position: relative;
    padding-left: 25px;
}

.mmo-p360-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--mmo-border);
}

.mmo-p360-timeline-item {
    position: relative;
    padding-bottom: 15px;
}

.mmo-p360-timeline-item::before {
    content: '';
    position: absolute;
    left: -21px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mmo-primary);
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--mmo-primary);
}

.mmo-p360-timeline-item.completed::before {
    background: var(--mmo-success);
    box-shadow: 0 0 0 2px var(--mmo-success);
}

.mmo-p360-timeline-item.pending::before {
    background: var(--mmo-warning);
    box-shadow: 0 0 0 2px var(--mmo-warning);
}

.mmo-p360-timeline-time {
    font-size: 11px;
    color: var(--gray);
    margin-bottom: 3px;
}

.mmo-p360-timeline-text {
    font-size: 13px;
    color: var(--mmo-dark);
}

.mmo-p360-medication-list,
.mmo-p360-diet-info,
.mmo-p360-mobility-info {
    padding: 12px;
    background: var(--mmo-light);
    border-radius: 8px;
    font-size: 13px;
}

.mmo-p360-medication-list li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--mmo-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mmo-p360-medication-list li:last-child {
    border-bottom: none;
}

.mmo-p360-med-time {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
}

.mmo-p360-med-time.done {
    background: rgba(16, 185, 129, 0.15);
    color: var(--mmo-success);
}

.mmo-p360-med-time.pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--mmo-warning);
}

.mmo-p360-med-time.overdue {
    background: rgba(239, 68, 68, 0.15);
    color: var(--mmo-danger);
}

/* ============================================
   M�TRICAS DASHBOARD - DISE�O LIMPIO
   ============================================ */

/* Grid de M�tricas */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

/* Tarjeta de M�trica */
.metric-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    border: 1px solid #e5e7eb;
}

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

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.metric-icon-green { background: #dcfce7; color: #16a34a; }
.metric-icon-orange { background: #ffedd5; color: #ea580c; }
.metric-icon-blue { background: #dbeafe; color: #2563eb; }
.metric-icon-purple { background: #D7EBEA; color: #1F6BA7; }

.metric-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success { background: #dcfce7; color: #16a34a; }
.badge-warning { background: #fef3c7; color: #d97706; }
.badge-danger { background: #fee2e2; color: #dc2626; }
.badge-info { background: #dbeafe; color: #2563eb; }

.metric-value {
    font-size: 48px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    margin-bottom: 4px;
}

.metric-unit {
    font-size: 24px;
    font-weight: 500;
    color: #6b7280;
    margin-left: 2px;
}

.metric-label {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
}

.metric-bar {
    height: 6px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 16px;
}

.metric-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.metric-bar-green { background: linear-gradient(90deg, #22c55e, #16a34a); }
.metric-bar-orange { background: linear-gradient(90deg, #fb923c, #ea580c); }
.metric-bar-blue { background: linear-gradient(90deg, #60a5fa, #2563eb); }
.metric-bar-purple { background: linear-gradient(90deg, #84CCD5, #1F6BA7); }

.metric-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 16px 0;
}

.metric-footer {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #6b7280;
}

.metric-footer strong {
    color: #374151;
}

/* Resumen */
.metrics-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
}

.summary-item i {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.summary-success i { background: #dcfce7; color: #16a34a; }
.summary-warning i { background: #fef3c7; color: #d97706; }
.summary-danger i { background: #fee2e2; color: #dc2626; }
.summary-info i { background: #dbeafe; color: #2563eb; }

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

.summary-number {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.summary-text {
    font-size: 13px;
    color: #6b7280;
}

/* Responsive */
@media (max-width: 1200px) {
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .metrics-summary { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .metrics-grid { grid-template-columns: 1fr; }
    .metrics-summary { grid-template-columns: 1fr; }
    .metric-value { font-size: 40px; }
}

/* ============================================
   MMO DASHBOARD LEGACY
   ============================================ */

.mmo-metrics-dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Grid principal de m�tricas (legacy) */
.mmo-metrics-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

/* Tarjeta de m�trica grande con gauge circular */
.mmo-metric-card-lg {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
}

.mmo-metric-card-lg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mmo-primary), var(--mmo-secondary));
}

.mmo-metric-card-lg:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Clases de color seg�n estado */
.mmo-metric-card-lg.mmo-gauge-excellent::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.mmo-metric-card-lg.mmo-gauge-good::before {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.mmo-metric-card-lg.mmo-gauge-warning::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.mmo-metric-card-lg.mmo-gauge-critical::before {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.mmo-metric-card-lg.mmo-metric-time::before {
    background: linear-gradient(90deg, #2482B8, #84CCD5);
}

/* Header de la tarjeta */
.mmo-metric-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mmo-dark);
}

.mmo-metric-card-header i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.mmo-gauge-excellent .mmo-metric-card-header i {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.mmo-gauge-good .mmo-metric-card-header i {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.mmo-gauge-warning .mmo-metric-card-header i {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.mmo-gauge-critical .mmo-metric-card-header i {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.mmo-metric-time .mmo-metric-card-header i {
    background: rgba(31, 107, 167, 0.15);
    color: #2482B8;
}

/* Gauge circular SVG */
.mmo-metric-gauge-circle {
    position: relative;
    width: 130px;
    height: 130px;
    margin-bottom: 20px;
}

.mmo-metric-gauge-circle svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.mmo-metric-gauge-circle .mmo-gauge-bg {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 8;
}

.mmo-metric-gauge-circle .mmo-gauge-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease;
}

.mmo-gauge-excellent .mmo-gauge-fill {
    stroke: #10b981;
}

.mmo-gauge-good .mmo-gauge-fill {
    stroke: #3b82f6;
}

.mmo-gauge-warning .mmo-gauge-fill {
    stroke: #f59e0b;
}

.mmo-gauge-critical .mmo-gauge-fill {
    stroke: #ef4444;
}

.mmo-gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.mmo-gauge-percent {
    font-size: 28px;
    font-weight: 700;
    color: var(--mmo-dark);
}

.mmo-gauge-excellent .mmo-gauge-percent {
    color: #10b981;
}

.mmo-gauge-good .mmo-gauge-percent {
    color: #3b82f6;
}

.mmo-gauge-warning .mmo-gauge-percent {
    color: #f59e0b;
}

.mmo-gauge-critical .mmo-gauge-percent {
    color: #ef4444;
}

/* Display de tiempo */
.mmo-metric-time-display {
    text-align: center;
    margin-bottom: 20px;
    padding: 20px 0;
}

.mmo-time-big {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.mmo-time-value {
    font-size: 48px;
    font-weight: 700;
    color: #2482B8;
    line-height: 1;
}

.mmo-time-unit {
    font-size: 18px;
    font-weight: 500;
    color: #2482B8;
}

.mmo-time-label {
    font-size: 13px;
    color: var(--gray-medium);
    margin-top: 8px;
}

/* Footer de la tarjeta */
.mmo-metric-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
    width: 100%;
}

.mmo-metric-stat {
    text-align: center;
}

.mmo-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--mmo-dark);
}

.mmo-stat-label {
    display: block;
    font-size: 11px;
    color: var(--gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mmo-metric-divider {
    width: 1px;
    height: 30px;
    background: #e5e7eb;
}

/* Fila de resumen */
.mmo-metrics-summary-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.mmo-summary-card {
    background: white;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s;
}

.mmo-summary-card:hover {
    transform: translateY(-2px);
}

.mmo-summary-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
}

.mmo-bg-success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.mmo-bg-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.mmo-bg-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.mmo-bg-info {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.mmo-summary-content {
    display: flex;
    flex-direction: column;
}

.mmo-summary-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--mmo-dark);
    line-height: 1.2;
}

.mmo-summary-label {
    font-size: 12px;
    color: var(--gray-medium);
}

.mmo-metrics-chart-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.mmo-metrics-chart-card h4 {
    margin: 0 0 15px;
    font-size: 15px;
    color: var(--mmo-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mmo-metrics-chart-card h4 i {
    color: var(--mmo-primary);
}

.mmo-metrics-chart-card.full-width {
    grid-column: 1 / -1;
}

.mmo-metrics-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mmo-metrics-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--mmo-light);
    border-radius: 8px;
}

.mmo-metrics-list-item i {
    font-size: 18px;
    color: var(--mmo-primary);
}

.mmo-metrics-list-item .value {
    font-size: 22px;
    font-weight: 700;
    color: var(--mmo-dark);
}

.mmo-metrics-list-item .label {
    font-size: 13px;
    color: var(--gray-medium);
}

/* ============================================
   MODALES MMO
   ============================================ */

.mmo-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mmo-modal.open {
    display: flex;
}

.mmo-modal-content {
    background: white;
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mmo-modal-lg {
    max-width: 900px;
}

.mmo-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--mmo-border);
}

.mmo-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--mmo-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.mmo-modal-header h3 i {
    color: var(--mmo-primary);
}

.mmo-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid var(--mmo-border);
    background: white;
    color: var(--gray-medium);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.mmo-modal-close:hover {
    border-color: var(--mmo-danger);
    color: var(--mmo-danger);
}

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

/* Formularios MMO */
.mmo-form-group {
    margin-bottom: 16px;
}

.mmo-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--mmo-dark);
    margin-bottom: 6px;
}

.mmo-form-group input,
.mmo-form-group select,
.mmo-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--mmo-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--mmo-dark);
    transition: border-color 0.2s;
}

.mmo-form-group input:focus,
.mmo-form-group select:focus,
.mmo-form-group textarea:focus {
    outline: none;
    border-color: var(--mmo-primary);
}

.mmo-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* �rbol de ubicaciones */
.mmo-location-tree {
    padding: 10px;
}

.mmo-location-node {
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
}

.mmo-location-node:hover {
    background: var(--mmo-light);
}

.mmo-location-node i {
    color: var(--mmo-primary);
}

.mmo-location-node.selected {
    background: rgba(8, 145, 178, 0.1);
    border: 1px solid var(--mmo-primary);
}

.mmo-location-children {
    padding-left: 25px;
    border-left: 2px dashed var(--mmo-border);
    margin-left: 15px;
}

/* Empty state */
.mmo-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-medium);
    min-height: 300px;
    width: 100%;
}

.mmo-empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
    color: var(--mmo-border);
}

.mmo-empty-state h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
}

.mmo-empty-state p {
    font-size: 15px;
    margin: 0;
}

/* ============================================
   RESPONSIVE MMO
   ============================================ */

@media (max-width: 1400px) {
    .mmo-metrics-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mmo-metrics-summary-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .mmo-metrics-dashboard {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .mmo-p360-panel {
        width: 100%;
        right: -100%;
    }
    
    .mmo-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .mmo-view-buttons {
        justify-content: center;
    }
    
    .mmo-filters {
        justify-content: center;
    }
    
    .mmo-metrics-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mmo-metrics-summary-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mmo-metrics-row {
        grid-template-columns: 1fr 1fr;
    }
    
    .mmo-rooms-grid {
        grid-template-columns: 1fr;
    }
    
    .mmo-transfers {
        grid-template-columns: 1fr;
    }
    
    .mmo-clinicboard {
        grid-template-columns: 1fr;
    }
    
    .mmo-form-row {
        grid-template-columns: 1fr;
    }
    
    .mmo-metrics-dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .mmo-metrics-summary-row {
        grid-template-columns: 1fr;
    }
    
    .mmo-metric-card-lg {
        padding: 20px;
    }
    
    .mmo-metric-gauge-circle {
        width: 110px;
        height: 110px;
    }
    
    .mmo-gauge-percent {
        font-size: 24px;
    }
    
    .mmo-time-value {
        font-size: 40px;
    }
}

@media (max-width: 480px) {
    .mmo-metrics-row {
        grid-template-columns: 1fr;
    }
    
    .mmo-view-buttons {
        flex-direction: column;
    }
    
    .mmo-view-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   MODAL OVERLAY MMO - DISE�O PROFESIONAL
   ============================================ */

.mmo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.mmo-modal-overlay .mmo-modal {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-height: 90vh;
    overflow: hidden;
    margin: auto;
    position: relative;
}

.mmo-modal-overlay .mmo-modal.mmo-modal-sm { width: 100%; max-width: 420px; margin: auto; }
.mmo-modal-overlay .mmo-modal.mmo-modal-md { width: 100%; max-width: 560px; margin: auto; }
.mmo-modal-overlay .mmo-modal.mmo-modal-lg { width: 100%; max-width: 800px; margin: auto; }

/* Header del Modal */
.mmo-modal-overlay .mmo-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.mmo-modal-overlay .mmo-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mmo-modal-overlay .mmo-modal-header h3 i {
    color: #0891b2;
    font-size: 16px;
}

.mmo-modal-overlay .mmo-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.15s;
}

.mmo-modal-overlay .mmo-modal-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* Body del Modal */
.mmo-modal-overlay .mmo-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Footer del Modal */
.mmo-modal-overlay .mmo-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

/* ============================================
   FORMULARIOS - DISE�O LIMPIO
   ============================================ */

.mmo-form-group {
    margin-bottom: 16px;
    position: relative;
}

.mmo-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 6px;
}

.mmo-form-group label i {
    margin-right: 6px;
    color: #0891b2;
    font-size: 12px;
}

.mmo-input,
.mmo-select,
.mmo-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #1e293b;
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.mmo-input:focus,
.mmo-select:focus,
.mmo-textarea:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.mmo-input::placeholder,
.mmo-textarea::placeholder {
    color: #9ca3af;
}

.mmo-textarea {
    resize: vertical;
    min-height: 70px;
}

.mmo-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 36px;
}

/* Filas de formulario */
.mmo-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.mmo-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.mmo-form-row-2 .mmo-form-group,
.mmo-form-row .mmo-form-group {
    margin-bottom: 0;
}

/* Checkboxes */
.mmo-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mmo-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    color: #475569;
    transition: all 0.15s;
    user-select: none;
}

.mmo-checkbox:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.mmo-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #0891b2;
    margin: 0;
}

/* Sugerencias autocomplete */
.mmo-suggestions-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    max-height: 180px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.mmo-suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
}

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

.mmo-suggestion-item:hover {
    background: #f0f9ff;
}

.mmo-suggestion-item strong {
    display: block;
    color: #1e293b;
    font-size: 13px;
    margin-bottom: 2px;
}

.mmo-suggestion-item span {
    font-size: 12px;
    color: #64748b;
}

.mmo-suggestion-empty {
    padding: 12px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

/* Botones del modal */
.mmo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
}

.mmo-btn-outline {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #475569;
}

.mmo-btn-outline:hover {
    background: #f1f5f9;
    border-color: #9ca3af;
}

.mmo-btn-primary {
    background: #86efac;
    color: #ffffff;
}

.mmo-btn-primary:hover {
    background: #0e7490;
}

/* Notificaciones */
.mmo-notification {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    border-left: 4px solid #0891b2;
}

.mmo-notification-show {
    transform: translateX(0);
}

.mmo-notification i {
    font-size: 18px;
}

.mmo-notification span {
    font-size: 14px;
    color: #374151;
}

.mmo-notification-success i {
    color: #10b981;
}

.mmo-notification-error i {
    color: #ef4444;
}

.mmo-notification-info i {
    color: #3b82f6;
}

/* Configuraci�n de ubicaciones mejorada */
.mmo-loc-type-section {
    margin-bottom: 20px;
}

.mmo-loc-type-section h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.mmo-loc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #f9fafb;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.mmo-loc-item:hover {
    background: #f0f9ff;
    border-left: 3px solid var(--mmo-primary);
}

.mmo-loc-name {
    font-weight: 600;
    color: #374151;
}

.mmo-loc-meta {
    font-size: 12px;
    color: #9ca3af;
}

.mmo-loc-actions {
    margin-top: 20px;
    text-align: right;
}

/* Modal abierto (estilo antiguo) */
.mmo-modal.mmo-modal-open {
    display: flex;
}

/* ============================================
   ESTILOS PID-ME - DESEMPE�O M�DICO Y ENFERMER�A
   ============================================ */

/* Variables PID-ME */
:root {
    --pidme-primary: #0d9488;
    --pidme-secondary: #14b8a6;
    --pidme-success: #10b981;
    --pidme-warning: #f59e0b;
    --pidme-danger: #ef4444;
    --pidme-critical: #dc2626;
    --pidme-info: #3b82f6;
    --pidme-dark: #1e293b;
    --pidme-light: #f0fdfa;
    --pidme-border: #99f6e4;
}

/* Filtros globales */
.pidme-global-filters {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    background: linear-gradient(135deg, var(--pidme-light) 0%, #ccfbf1 100%);
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pidme-global-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pidme-global-filters label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pidme-dark);
}

.pidme-global-filters .form-control {
    min-width: 150px;
    padding: 8px 12px;
    border: 1px solid var(--pidme-border);
    border-radius: 6px;
    font-size: 14px;
}

/* Navegaci�n del m�dulo */
.pidme-nav-tabs {
    display: flex;
    gap: 8px;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pidme-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--pidme-dark);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pidme-nav-btn:hover {
    background: var(--pidme-light);
    color: var(--pidme-primary);
}

.pidme-nav-btn.active {
    background: linear-gradient(135deg, var(--pidme-primary) 0%, var(--pidme-secondary) 100%);
    color: white;
}

/* Secciones */
.pidme-section {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.pidme-section.hidden {
    display: none;
}

/* Loading */
.pidme-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: var(--pidme-primary);
    font-size: 16px;
}

.pidme-error {
    padding: 20px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    text-align: center;
}

/* Cards */
.pidme-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.pidme-card h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--pidme-dark);
}

/* Dashboard Grid - Redise�ado */
.pidme-dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.pidme-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    color: white;
}

.dashboard-title h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.dashboard-timestamp {
    font-size: 12px;
    opacity: 0.85;
}

.btn-refresh-dashboard {
    background: rgba(255,255,255,0.2);
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-refresh-dashboard:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

/* KPI Row - Nueva fila de KPIs */
.pidme-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
}

@media (max-width: 1400px) {
    .pidme-kpi-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .pidme-kpi-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .pidme-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .pidme-kpi-row {
        grid-template-columns: 1fr;
    }
}

.pidme-kpi-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid #2482B8;
}

.pidme-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.pidme-kpi-card.warning {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.pidme-kpi-card.critical {
    border-left-color: #dc2626;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.pidme-kpi-card .kpi-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.pidme-kpi-card .kpi-content {
    flex: 1;
    min-width: 0;
}

.pidme-kpi-card .kpi-value {
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
    margin-bottom: 5px;
}

.pidme-kpi-card .kpi-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.pidme-kpi-card .kpi-details {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pidme-kpi-card .badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 600;
}

.pidme-kpi-card .badge.critical {
    background: #fee2e2;
    color: #dc2626;
}

.pidme-kpi-card .badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.pidme-kpi-card .badge.info {
    background: #dbeafe;
    color: #2563eb;
}

/* Traffic Lights para KPIs */
.kpi-traffic-lights {
    display: flex;
    gap: 8px;
    margin-bottom: 5px;
}

.traffic-light {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: white;
}

.traffic-light.red { background: #dc2626; }
.traffic-light.yellow { background: #f59e0b; }
.traffic-light.green { background: #16a34a; }

/* Quick Access Grid */
.pidme-quick-access {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.pidme-quick-access h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #1e293b;
}

.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.quick-access-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 25px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.quick-access-btn:hover {
    border-color: #2482B8;
    background: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(36, 130, 184,0.15);
}

.quick-access-btn .qa-icon {
    font-size: 36px;
}

.quick-access-btn .qa-label {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

.quick-access-btn .qa-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #dc2626;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    min-width: 20px;
    text-align: center;
}

.quick-access-btn.urgencias:hover { border-color: #dc2626; }
.quick-access-btn.hospitalizacion:hover { border-color: #3b82f6; }
.quick-access-btn.cirugia:hover { border-color: #2482B8; }
.quick-access-btn.colas:hover { border-color: #f59e0b; }
.quick-access-btn.alertas:hover { border-color: #ef4444; }
.quick-access-btn.config:hover { border-color: #64748b; }

/* Status Message */
.pidme-status-message {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.pidme-status-message.empty {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px dashed #86efac;
}

.pidme-status-message .status-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.pidme-status-message h4 {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: #1e293b;
}

.pidme-status-message p {
    margin: 0 0 5px 0;
    color: #64748b;
}

.pidme-status-message .status-hint {
    font-size: 13px;
    color: #94a3b8;
    font-style: italic;
}

/* KPI Cards Legacy */
.pidme-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.pidme-kpi-card {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    border-radius: 10px;
    padding: 15px;
    border-left: 4px solid var(--pidme-primary);
}

.pidme-kpi-card.good {
    border-left-color: var(--pidme-success);
}

.pidme-kpi-card.warning {
    border-left-color: var(--pidme-warning);
}

.pidme-kpi-card.critical {
    border-left-color: var(--pidme-danger);
}

.pidme-kpi-card .kpi-name {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 5px;
}

.pidme-kpi-card .kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--pidme-dark);
}

.pidme-kpi-card .kpi-target {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 5px;
}

.pidme-kpi-card .kpi-progress {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.pidme-kpi-card .kpi-progress-bar {
    height: 100%;
    background: var(--pidme-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.pidme-kpi-card.good .kpi-progress-bar {
    background: var(--pidme-success);
}

.pidme-kpi-card.warning .kpi-progress-bar {
    background: var(--pidme-warning);
}

.pidme-kpi-card.critical .kpi-progress-bar {
    background: var(--pidme-danger);
}

.pidme-kpi-card .kpi-trend {
    font-size: 11px;
    margin-top: 5px;
}

/* Alertas */
.pidme-alerts-list {
    max-height: 300px;
    overflow-y: auto;
}

.pidme-alert-item {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fefce8;
    border-left: 3px solid #eab308;
}

.pidme-alert-item.critical {
    background: #fef2f2;
    border-left-color: #dc2626;
}

.pidme-alert-item.high {
    background: #fff7ed;
    border-left-color: #f97316;
}

.pidme-alert-item.low {
    background: #f0fdf4;
    border-left-color: #22c55e;
}

.pidme-alert-item .alert-time {
    float: right;
    font-size: 11px;
    color: #94a3b8;
}

/* Queues */
.pidme-queues-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pidme-queue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid var(--pidme-primary);
}

.pidme-queue-item.critical {
    border-left-color: var(--pidme-danger);
    background: #fef2f2;
}

.pidme-queue-item.high {
    border-left-color: var(--pidme-warning);
    background: #fffbeb;
}

.pidme-queue-item .queue-count {
    font-weight: 700;
    font-size: 18px;
    color: var(--pidme-dark);
}

.pidme-queue-item .queue-overdue {
    font-size: 12px;
    color: var(--pidme-danger);
}

/* Services Summary */
.pidme-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.pidme-service-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.pidme-service-card.red {
    border-top: 4px solid #ef4444;
}

.pidme-service-card.blue {
    border-top: 4px solid #3b82f6;
}

.pidme-service-card.green {
    border-top: 4px solid #22c55e;
}

.pidme-service-card .service-header {
    margin-bottom: 15px;
}

.pidme-service-card .service-icon {
    font-size: 24px;
}

.pidme-service-card .service-name {
    font-weight: 600;
    margin-left: 8px;
}

.pidme-service-card .service-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
}

.pidme-service-card .stat {
    text-align: center;
}

.pidme-service-card .stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--pidme-dark);
}

.pidme-service-card .stat-label {
    font-size: 11px;
    color: #94a3b8;
}

/* Console Headers */
.pidme-console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.pidme-console-header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--pidme-dark);
}

.pidme-console-header .console-time {
    font-size: 12px;
    color: #94a3b8;
}

/* ED Metrics Grid */
.pidme-ed-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.pidme-ed-metrics-grid .metric-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-top: 4px solid var(--pidme-primary);
}

.pidme-ed-metrics-grid .metric-card.triage {
    border-top-color: #f59e0b;
}

.pidme-ed-metrics-grid .metric-card.provider {
    border-top-color: #3b82f6;
}

.pidme-ed-metrics-grid .metric-card.treatment {
    border-top-color: #10b981;
}

.pidme-ed-metrics-grid .metric-card.disposition {
    border-top-color: #2482B8;
}

.pidme-ed-metrics-grid .metric-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.pidme-ed-metrics-grid .metric-label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 5px;
}

.pidme-ed-metrics-grid .metric-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--pidme-dark);
}

.pidme-ed-metrics-grid .metric-sla {
    font-size: 11px;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 4px;
}

.pidme-ed-metrics-grid .metric-sla.in-sla {
    background: #d1fae5;
    color: #059669;
}

.pidme-ed-metrics-grid .metric-sla.out-sla {
    background: #fecaca;
    color: #dc2626;
}

/* Triage Distribution */
.triage-distribution {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.triage-level {
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

.triage-level .level-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
}

.triage-level .level-count {
    display: block;
    font-size: 28px;
    font-weight: 700;
}

/* Hospitalization Summary Grid */
.pidme-hosp-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.pidme-hosp-summary-grid .summary-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.pidme-hosp-summary-grid .summary-icon {
    font-size: 32px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pidme-light);
    border-radius: 12px;
}

.pidme-hosp-summary-grid .summary-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--pidme-dark);
}

.pidme-hosp-summary-grid .summary-label {
    font-size: 12px;
    color: #64748b;
}

.pidme-hosp-summary-grid .summary-alert {
    font-size: 11px;
    color: #94a3b8;
}

.pidme-hosp-summary-grid .summary-alert.alert {
    color: var(--pidme-danger);
    font-weight: 600;
}

/* Tabs */
.pidme-tabs {
    display: flex;
    gap: 5px;
    background: #f1f5f9;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.pidme-tabs .tab-btn {
    flex: 1;
    padding: 10px 15px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.pidme-tabs .tab-btn:hover {
    color: var(--pidme-primary);
}

.pidme-tabs .tab-btn.active {
    background: #fff;
    color: var(--pidme-primary);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.pidme-tab-content {
    display: block;
}

.pidme-tab-content.hidden {
    display: none;
}

/* Tables */
.pidme-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pidme-table thead th {
    background: #f8fafc;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    border-bottom: 2px solid #e2e8f0;
}

.pidme-table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
}

.pidme-table tbody tr:hover {
    background: #f8fafc;
}

.pidme-table tbody tr.critical {
    background: #fef2f2;
}

.pidme-table tbody tr.warning {
    background: #fffbeb;
}

.pidme-table tbody tr.success {
    background: #f0fdf4;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.critical {
    background: #fee2e2;
    color: #dc2626;
}

.status-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.normal, .status-badge.success {
    background: #d1fae5;
    color: #059669;
}

/* Triage Badge */
.triage-badge {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
}

.triage-badge.triage-I {
    background: #dc3545;
    color: white;
}

.triage-badge.triage-II {
    background: #fd7e14;
    color: white;
}

.triage-badge.triage-III {
    background: #ffc107;
    color: #333;
}

.triage-badge.triage-IV {
    background: #28a745;
    color: white;
}

.triage-badge.triage-V {
    background: #17a2b8;
    color: white;
}

/* Queue Items - Dise�o Moderno Mejorado */
.pidme-queues-container {
    padding: 0;
}

.pidme-queues-header-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 25px 30px;
    margin-bottom: 20px;
    color: white;
}

.queues-title-section h2 {
    margin: 0 0 5px 0;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.queues-icon {
    font-size: 28px;
}

.queues-subtitle {
    margin: 0;
    opacity: 0.85;
    font-size: 14px;
}

.queues-stats-row {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.queue-stat-pill {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.queue-stat-pill .stat-number {
    font-size: 22px;
    font-weight: 700;
}

.queue-stat-pill .stat-label {
    font-size: 12px;
    opacity: 0.9;
}

.queue-stat-pill.total { background: rgba(255,255,255,0.25); }
.queue-stat-pill.critical { background: rgba(220,38,38,0.4); }
.queue-stat-pill.high { background: rgba(249,115,22,0.4); }
.queue-stat-pill.overdue { background: rgba(239,68,68,0.4); }

/* Filtros modernos */
.pidme-queues-filters-modern {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 150px;
}

.filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
}

.filter-icon {
    font-style: normal;
}

.filter-group select {
    padding: 10px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-group select:hover {
    border-color: #cbd5e1;
}

.filter-group select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}

.btn-refresh-queues {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-refresh-queues:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102,126,234,0.4);
}

/* Board de colas (estilo Kanban) */
.pidme-queues-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    padding-bottom: 20px;
}

.pidme-queue-column {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.pidme-queue-column.empty {
    opacity: 0.6;
}

.queue-column-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid;
}

.queue-column-header.warning { 
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
}

.queue-column-header.danger { 
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #dc2626;
}

.queue-column-header.info { 
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
}

.queue-column-header.primary { 
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #2482B8;
}

.queue-column-header.secondary { 
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-color: #94a3b8;
}

.column-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.column-icon {
    font-size: 20px;
}

.column-name {
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
}

.column-badges {
    display: flex;
    gap: 8px;
    align-items: center;
}

.column-count {
    background: rgba(0,0,0,0.1);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.column-overdue {
    background: #dc2626;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}

.queue-column-items {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
}

.queue-empty-state {
    text-align: center;
    padding: 30px 20px;
    color: #94a3b8;
}

.queue-empty-state span {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
}

.queue-empty-state p {
    margin: 0;
    font-size: 13px;
}

/* Items modernos de cola */
.queue-item-modern {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
}

.queue-item-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.queue-item-modern.overdue {
    animation: shake-subtle 0.5s ease-in-out;
    animation-delay: 0.5s;
}

@keyframes shake-subtle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.item-priority-bar {
    width: 5px;
    flex-shrink: 0;
}

.item-priority-bar.critical { background: #dc2626; }
.item-priority-bar.high { background: #f97316; }
.item-priority-bar.normal { background: #eab308; }
.item-priority-bar.low { background: #22c55e; }

.item-content {
    padding: 15px;
    flex: 1;
}

.item-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.item-patient {
    font-weight: 700;
    color: #1e293b;
    font-size: 14px;
}

.priority-badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 600;
}

.priority-badge.critical { background: #fee2e2; color: #dc2626; }
.priority-badge.high { background: #ffedd5; color: #ea580c; }
.priority-badge.normal { background: #fef3c7; color: #ca8a04; }
.priority-badge.low { background: #dcfce7; color: #16a34a; }

.item-description {
    font-size: 13px;
    color: #475569;
    margin-bottom: 10px;
    line-height: 1.4;
}

.item-meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.meta-location {
    color: #64748b;
}

.time-remaining {
    color: #64748b;
}

.time-overdue {
    color: #dc2626;
    font-weight: 600;
}

.item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.assigned-badge {
    font-size: 12px;
    color: #2482B8;
    background: #dbeafe;
    padding: 4px 10px;
    border-radius: 20px;
}

.unassigned-badge {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

.item-actions {
    display: flex;
    gap: 5px;
}

.queue-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.queue-btn.assign {
    background: #dbeafe;
    color: #2482B8;
}

.queue-btn.assign:hover {
    background: #2482B8;
    color: white;
}

.queue-btn.resolve {
    background: #dcfce7;
    color: #16a34a;
}

.queue-btn.resolve:hover {
    background: #16a34a;
    color: white;
}

.queue-btn.details {
    background: #f1f5f9;
    color: #64748b;
}

.queue-btn.details:hover {
    background: #64748b;
    color: white;
}

/* Estado vac�o completo */
.queues-empty-state-full {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 40px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.queues-empty-state-full .empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.queues-empty-state-full h3 {
    margin: 0 0 10px 0;
    color: #1e293b;
    font-size: 24px;
}

.queues-empty-state-full p {
    margin: 0 0 5px 0;
    color: #64748b;
    font-size: 16px;
}

.queues-empty-state-full .empty-hint {
    font-size: 13px;
    color: #94a3b8;
    font-style: italic;
}

/* Alert Cards */
.pidme-alerts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.pidme-alerts-header h2 {
    margin: 0;
}

.alerts-count {
    background: #fee2e2;
    color: #dc2626;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.pidme-alert-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    border-left: 4px solid #eab308;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.pidme-alert-card.critical {
    border-left-color: #dc2626;
    background: linear-gradient(90deg, #fef2f2 0%, #fff 20%);
}

.pidme-alert-card.high {
    border-left-color: #f97316;
    background: linear-gradient(90deg, #fff7ed 0%, #fff 20%);
}

.pidme-alert-card.low {
    border-left-color: #22c55e;
}

.pidme-alert-card .alert-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pidme-alert-card .alert-body {
    color: #475569;
}

.pidme-alert-card .alert-encounter,
.pidme-alert-card .alert-site {
    display: inline-block;
    font-size: 11px;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
    margin-top: 8px;
}

.pidme-alert-card .alert-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

/* Configuration */
.pidme-config-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}

.config-tab-btn {
    padding: 10px 20px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
}

.config-tab-btn.active {
    background: var(--pidme-primary);
    color: white;
}

.pidme-config-content {
    display: block;
}

.pidme-config-content.hidden {
    display: none;
}

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

.config-section-header h3 {
    margin: 0;
}

/* Surgery */
.pidme-surgery-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.pidme-surgery-metrics-grid .metric-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-top: 4px solid #22c55e;
}

.pidme-surgery-metrics-grid .metric-card.utilization {
    border-top-color: #3b82f6;
}

.pidme-surgery-metrics-grid .metric-card.ontime {
    border-top-color: #22c55e;
}

.pidme-surgery-metrics-grid .metric-card.turnover {
    border-top-color: #f59e0b;
}

.pidme-surgery-metrics-grid .metric-card.cancelled {
    border-top-color: #ef4444;
}

/* OR Status Grid */
.or-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.or-status-card {
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

.or-status-card.busy {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.or-status-card.turnover {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.or-status-card.available {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.or-status-card .or-name {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
}

.or-status-card .or-status {
    font-size: 12px;
    color: #64748b;
}

.or-status-card .or-procedure {
    font-size: 11px;
    color: #475569;
    margin-top: 8px;
}

.or-status-card .or-surgeon {
    font-size: 11px;
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 768px) {
    .pidme-global-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .pidme-nav-tabs {
        flex-wrap: wrap;
    }
    
    .pidme-dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .triage-distribution {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .pidme-ed-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   COP-CTRL: Control de Presupuesto, N�mina y Productividad
   ===================================================== */

/* Variables CSS COP */
:root {
    --cop-primary: #059669;
    --cop-primary-light: #10b981;
    --cop-primary-dark: #047857;
    --cop-secondary: #0284c7;
    --cop-warning: #f59e0b;
    --cop-danger: #dc2626;
    --cop-success: #22c55e;
    --cop-dark: #1e293b;
    --cop-gray: #64748b;
    --cop-light: #f8fafc;
}

/* Contenedor principal COP */
.cop-container {
    padding: 20px;
    background: var(--cop-light);
    min-height: 100vh;
}

/* Filtros Globales COP */
.cop-global-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    align-items: center;
}

.cop-global-filters label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cop-dark);
    margin-right: 5px;
}

.cop-global-filters select,
.cop-global-filters input[type="date"] {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: var(--cop-dark);
    background: white;
    min-width: 150px;
}

.cop-global-filters select:focus,
.cop-global-filters input:focus {
    outline: none;
    border-color: var(--cop-primary);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

/* Navegaci�n por pesta�as COP */
.cop-nav-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    background: white;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    flex-wrap: wrap;
}

.cop-nav-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--cop-gray);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cop-nav-btn:hover {
    background: var(--cop-light);
    color: var(--cop-primary);
}

.cop-nav-btn.active {
    background: var(--cop-primary);
    color: white;
}

.cop-nav-btn i {
    font-size: 14px;
}

/* Secciones COP */
.cop-section {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.cop-section.hidden {
    display: none;
}

/* Loading y Error COP */
.cop-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: var(--cop-primary);
    font-size: 16px;
}

.cop-error {
    padding: 20px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    text-align: center;
}

/* Dashboard Header COP */
.cop-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: linear-gradient(135deg, var(--cop-primary) 0%, var(--cop-primary-dark) 100%);
    border-radius: 16px;
    color: white;
    margin-bottom: 25px;
}

.cop-dashboard-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.cop-dashboard-header .subtitle {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 5px;
}

.cop-header-actions {
    display: flex;
    gap: 10px;
}

.cop-header-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.cop-header-btn.primary {
    background: white;
    color: var(--cop-primary);
}

.cop-header-btn.primary:hover {
    background: #f0fdf4;
    transform: translateY(-1px);
}

.cop-header-btn.secondary {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
}

.cop-header-btn.secondary:hover {
    background: rgba(255,255,255,0.3);
}

/* KPI Grid COP */
.cop-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.cop-kpi-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

.cop-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--cop-primary);
}

.cop-kpi-card.warning::before {
    background: var(--cop-warning);
}

.cop-kpi-card.danger::before {
    background: var(--cop-danger);
}

.cop-kpi-card.success::before {
    background: var(--cop-success);
}

.cop-kpi-card.info::before {
    background: var(--cop-secondary);
}

.cop-kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.cop-kpi-title {
    font-size: 13px;
    color: var(--cop-gray);
    font-weight: 500;
}

.cop-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 150, 105, 0.1);
    color: var(--cop-primary);
}

.cop-kpi-card.warning .cop-kpi-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--cop-warning);
}

.cop-kpi-card.danger .cop-kpi-icon {
    background: rgba(220, 38, 38, 0.1);
    color: var(--cop-danger);
}

.cop-kpi-card.success .cop-kpi-icon {
    background: rgba(34, 197, 94, 0.1);
    color: var(--cop-success);
}

.cop-kpi-card.info .cop-kpi-icon {
    background: rgba(2, 132, 199, 0.1);
    color: var(--cop-secondary);
}

.cop-kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--cop-dark);
    margin-bottom: 5px;
}

.cop-kpi-change {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cop-kpi-change.positive {
    color: var(--cop-success);
}

.cop-kpi-change.negative {
    color: var(--cop-danger);
}

.cop-kpi-change.neutral {
    color: var(--cop-gray);
}

/* Budget vs Actual Table */
.cop-budget-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cop-budget-table th {
    background: var(--cop-light);
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: var(--cop-dark);
    border-bottom: 2px solid #e2e8f0;
}

.cop-budget-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--cop-dark);
}

.cop-budget-table tr:hover {
    background: #f8fafc;
}

.cop-budget-table .amount {
    font-family: 'Roboto Mono', monospace;
    text-align: right;
}

.cop-budget-table .variance.positive {
    color: var(--cop-success);
    font-weight: 600;
}

.cop-budget-table .variance.negative {
    color: var(--cop-danger);
    font-weight: 600;
}

/* Progress Bar COP */
.cop-progress {
    background: #e2e8f0;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

.cop-progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.cop-progress-bar.under {
    background: var(--cop-success);
}

.cop-progress-bar.on-track {
    background: var(--cop-primary);
}

.cop-progress-bar.warning {
    background: var(--cop-warning);
}

.cop-progress-bar.over {
    background: var(--cop-danger);
}

/* Alerts Section COP */
.cop-alerts-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cop-alert-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: white;
    border-radius: 10px;
    border-left: 4px solid var(--cop-warning);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    gap: 15px;
}

.cop-alert-item.critical {
    border-left-color: var(--cop-danger);
    background: #fef2f2;
}

.cop-alert-item.warning {
    border-left-color: var(--cop-warning);
    background: #fffbeb;
}

.cop-alert-item.info {
    border-left-color: var(--cop-secondary);
    background: #f0f9ff;
}

.cop-alert-item.resolved {
    border-left-color: var(--cop-success);
    background: #f0fdf4;
    opacity: 0.7;
}

.cop-alert-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.cop-alert-item.critical .cop-alert-icon {
    background: rgba(220, 38, 38, 0.1);
    color: var(--cop-danger);
}

.cop-alert-item.warning .cop-alert-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--cop-warning);
}

.cop-alert-content {
    flex: 1;
}

.cop-alert-title {
    font-weight: 600;
    color: var(--cop-dark);
    margin-bottom: 4px;
}

.cop-alert-meta {
    font-size: 12px;
    color: var(--cop-gray);
}

.cop-alert-actions {
    display: flex;
    gap: 8px;
}

.cop-alert-btn {
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cop-alert-btn:hover {
    border-color: var(--cop-primary);
    color: var(--cop-primary);
}

.cop-alert-btn.resolve {
    background: var(--cop-success);
    color: white;
    border-color: var(--cop-success);
}

/* Cards Grid COP */
.cop-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.cop-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.cop-card h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--cop-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.cop-card h3 i {
    color: var(--cop-primary);
}

/* Chart Container COP */
.cop-chart-container {
    height: 300px;
    position: relative;
}

/* Payroll Summary */
.cop-payroll-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.cop-payroll-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.cop-payroll-card .icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 15px;
    background: rgba(5, 150, 105, 0.1);
    color: var(--cop-primary);
}

.cop-payroll-card .value {
    font-size: 26px;
    font-weight: 700;
    color: var(--cop-dark);
    margin-bottom: 5px;
}

.cop-payroll-card .label {
    font-size: 13px;
    color: var(--cop-gray);
}

/* Productivity Metrics */
.cop-productivity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.cop-metric-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    text-align: center;
}

.cop-metric-card .metric-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--cop-primary);
    margin-bottom: 10px;
}

.cop-metric-card .metric-label {
    font-size: 13px;
    color: var(--cop-gray);
    margin-bottom: 10px;
}

.cop-metric-card .metric-trend {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
}

.cop-metric-card .metric-trend.up {
    background: #dcfce7;
    color: var(--cop-success);
}

.cop-metric-card .metric-trend.down {
    background: #fef2f2;
    color: var(--cop-danger);
}

/* Configuration Form COP */
.cop-config-form {
    max-width: 800px;
}

.cop-config-section {
    background: white;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.cop-config-section h3 {
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--cop-dark);
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.cop-form-group {
    margin-bottom: 20px;
}

.cop-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cop-dark);
    margin-bottom: 8px;
}

.cop-form-group input,
.cop-form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: var(--cop-dark);
    transition: all 0.2s ease;
}

.cop-form-group input:focus,
.cop-form-group select:focus {
    outline: none;
    border-color: var(--cop-primary);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.cop-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.cop-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cop-btn-primary {
    background: var(--cop-primary);
    color: white;
}

.cop-btn-primary:hover {
    background: var(--cop-primary-dark);
    transform: translateY(-1px);
}

.cop-btn-secondary {
    background: white;
    color: var(--cop-gray);
    border: 1px solid #e2e8f0;
}

.cop-btn-secondary:hover {
    border-color: var(--cop-primary);
    color: var(--cop-primary);
}

/* Daily Cuts Table */
.cop-cuts-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.cop-cuts-table th,
.cop-cuts-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.cop-cuts-table th {
    background: var(--cop-light);
    font-weight: 600;
    color: var(--cop-dark);
}

.cop-cuts-table .status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.cop-cuts-table .status-badge.active {
    background: #dcfce7;
    color: var(--cop-success);
}

.cop-cuts-table .status-badge.inactive {
    background: #f1f5f9;
    color: var(--cop-gray);
}

/* Toast Notifications COP */
.cop-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 10px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 10000;
    animation: slideInRight 0.3s ease;
}

.cop-toast.success {
    background: var(--cop-success);
}

.cop-toast.error {
    background: var(--cop-danger);
}

.cop-toast.warning {
    background: var(--cop-warning);
}

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

/* Modal COP */
.cop-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cop-modal {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.cop-modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cop-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--cop-dark);
}

.cop-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--cop-gray);
    cursor: pointer;
}

.cop-modal-body {
    padding: 25px;
}

.cop-modal-lg {
    max-width: 800px;
}

.cop-modal-footer {
    padding: 15px 25px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Empty State */
.cop-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--cop-gray);
}

.cop-empty-state i {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.cop-empty-state p {
    font-size: 16px;
    margin: 0;
}

.cop-empty-state .btn {
    margin-top: 20px;
}

/* Form Styles COP */
.cop-form-group {
    margin-bottom: 20px;
}

.cop-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--cop-dark);
}

.cop-input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.cop-input:focus {
    outline: none;
    border-color: var(--cop-primary);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

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

/* Import Info Box */
.cop-import-info {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.cop-import-info p {
    margin: 0 0 10px 0;
    font-weight: 500;
    color: #166534;
}

.cop-import-info ul {
    margin: 0;
    padding-left: 20px;
}

.cop-import-info li {
    margin-bottom: 5px;
    font-size: 13px;
    color: #15803d;
}

.cop-note {
    font-size: 12px;
    color: var(--cop-gray);
    text-align: center;
    margin-top: 10px;
}

/* Responsive COP */
@media (max-width: 1200px) {
    .cop-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cop-productivity-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cop-kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .cop-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .cop-payroll-summary {
        grid-template-columns: 1fr;
    }
    
    .cop-productivity-grid {
        grid-template-columns: 1fr;
    }
    
    .cop-nav-tabs {
        flex-wrap: wrap;
    }
    
    .cop-dashboard-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .cop-form-row {
        grid-template-columns: 1fr;
    }
    
    .cop-global-filters {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =====================================================
   COP-CTRL: Configuraci�n - Tabs y Paneles
   ===================================================== */

/* Tabs de Configuraci�n */
.cop-config-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    padding: 8px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
    border-radius: 16px;
    border: 1px solid #d1fae5;
    flex-wrap: wrap;
}

.cop-config-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border: 2px solid transparent;
    background: white;
    color: var(--cop-gray);
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.cop-config-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--cop-primary) 0%, var(--cop-primary-dark) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
    border-radius: 12px;
}

.cop-config-tab i {
    font-size: 16px;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

/* Asegurar que el texto est� sobre el fondo */
.cop-config-tab {
    position: relative;
    z-index: 1;
}

/* El contenido de texto debe estar sobre el ::before */
.cop-config-tab > * {
    position: relative;
    z-index: 2;
}

.cop-config-tab:hover {
    border-color: var(--cop-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.15);
}

.cop-config-tab:hover i {
    transform: scale(1.15);
}

.cop-config-tab.active {
    color: white;
    border-color: var(--cop-primary);
    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.3);
    transform: translateY(-2px);
}

.cop-config-tab.active::before {
    opacity: 1;
}

.cop-config-tab.active i {
    color: white;
    position: relative;
    z-index: 2;
}

/* Iconos espec�ficos con colores */
.cop-config-tab:not(.active) i.fa-clock {
    color: #0ea5e9;
}

.cop-config-tab:not(.active) i.fa-sliders-h {
    color: #f59e0b;
}

.cop-config-tab:not(.active) i.fa-tags {
    color: #2482B8;
}

/* Panel de Configuraci�n */
.cop-config-panel {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    animation: fadeInUp 0.3s ease;
}

.cop-config-panel:not(.active) {
    display: none;
}

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

/* Header de secci�n */
.cop-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f5f9;
}

.cop-section-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--cop-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.cop-section-header h4::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--cop-primary);
    border-radius: 4px;
}

/* Tabla de configuraci�n */
.cop-table-container {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.cop-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cop-table thead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.cop-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--cop-dark);
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.cop-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--cop-dark);
}

.cop-table tbody tr:hover {
    background: #f8fafc;
}

.cop-table tbody tr:last-child td {
    border-bottom: none;
}

/* Botones de icono en tabla */
.cop-btn-icon {
    width: 34px;
    height: 34px;
    border: none;
    background: #f1f5f9;
    color: var(--cop-gray);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
}

.cop-btn-icon:hover {
    background: var(--cop-primary);
    color: white;
    transform: scale(1.08);
}

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

/* Grupo de configuraci�n */
.cop-config-group {
    margin-bottom: 24px;
}

.cop-config-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--cop-dark);
    margin-bottom: 8px;
}

.cop-config-group input,
.cop-config-group select {
    width: 100%;
    max-width: 400px;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: var(--cop-dark);
    transition: all 0.2s ease;
}

.cop-config-group input:focus,
.cop-config-group select:focus {
    outline: none;
    border-color: var(--cop-primary);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);
}

.cop-config-group small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--cop-gray);
}

/* Texto de utilidad */
.text-success {
    color: var(--cop-success) !important;
}

.text-danger {
    color: var(--cop-danger) !important;
}

.text-warning {
    color: var(--cop-warning) !important;
}

/* Responsive para tabs de configuraci�n */
@media (max-width: 768px) {
    .cop-config-tabs {
        flex-direction: column;
        gap: 8px;
    }
    
    .cop-config-tab {
        justify-content: center;
        padding: 12px 20px;
    }
    
    .cop-section-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .cop-config-group input,
    .cop-config-group select {
        max-width: 100%;
    }
}

/* =====================================================
   COP-CTRL: C�digos de Raz�n
   ===================================================== */

.cop-reason-codes-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cop-reason-category {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.cop-reason-category:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.cop-reason-category h5 {
    margin: 0 0 16px 0;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Colores por categor�a */
.cop-reason-category:nth-child(1) h5 {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.cop-reason-category:nth-child(2) h5 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.cop-reason-category:nth-child(3) h5 {
    background: linear-gradient(135deg, #2482B8 0%, #1F6BA7 100%);
}

.cop-reason-category h5 i {
    font-size: 16px;
    opacity: 0.9;
}

.cop-reason-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cop-reason-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: white;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

.cop-reason-item:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
    transform: translateX(4px);
}

.cop-reason-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #0369a1;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid #bae6fd;
}

/* Colores espec�ficos para cada categor�a de c�digo */
.cop-reason-category:nth-child(1) .cop-reason-code {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #047857;
    border-color: #a7f3d0;
}

.cop-reason-category:nth-child(2) .cop-reason-code {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #b45309;
    border-color: #fde68a;
}

.cop-reason-category:nth-child(3) .cop-reason-code {
    background: linear-gradient(135deg, #e6f4fb 0%, #D7EBEA 100%);
    color: #082A5D;
    border-color: #A9C5D0;
}

.cop-reason-desc {
    flex: 1;
    font-size: 13px;
    color: var(--cop-dark);
    line-height: 1.4;
}

/* Responsive para c�digos de raz�n */
@media (max-width: 1200px) {
    .cop-reason-codes-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cop-reason-codes-list {
        grid-template-columns: 1fr;
    }
    
    .cop-reason-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Acciones en items de c�digos de raz�n */
.cop-reason-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cop-reason-item:hover .cop-reason-actions {
    opacity: 1;
}

/* Estado vac�o de categor�a */
.cop-reason-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
    color: var(--cop-gray);
    gap: 12px;
}

.cop-reason-empty i {
    font-size: 32px;
    opacity: 0.5;
}

.cop-reason-empty span {
    font-size: 13px;
}

.cop-reason-empty .btn {
    margin-top: 5px;
}

/* Badge de categor�a en header */
.cop-category-code {
    font-size: 10px;
    padding: 3px 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    margin-left: auto;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Toast notifications */
.cop-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 14px 24px;
    border-radius: 10px;
    color: white;
    font-weight: 500;
    font-size: 14px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.2);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(120%);
    transition: transform 0.3s ease;
}

.cop-toast.show {
    transform: translateX(0);
}

.cop-toast-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.cop-toast-error {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.cop-toast-info {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

.cop-toast i {
    font-size: 18px;
}

/* =====================================================
   COP-CTRL: Configuraci�n de Umbrales
   ===================================================== */

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

.cop-header-actions .btn-outline {
    background: transparent;
    border: 2px solid var(--cop-primary);
    color: var(--cop-primary);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cop-header-actions .btn-outline:hover {
    background: var(--cop-primary);
    color: white;
}

.cop-thresholds-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.cop-threshold-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    gap: 20px;
    border: 2px solid #e2e8f0;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

.cop-threshold-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--cop-primary);
    border-radius: 20px 0 0 20px;
}

.cop-threshold-card[data-type="overtime"]::before {
    background: var(--cop-warning);
}

.cop-threshold-card[data-type="unitcost"]::before {
    background: #2482B8;
}

.cop-threshold-card[data-type="eac"]::before {
    background: #0ea5e9;
}

.cop-threshold-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(5, 150, 105, 0.15);
    border-color: var(--cop-primary);
}

.cop-threshold-card.modified {
    border-color: var(--cop-warning);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}

.cop-threshold-card-wide {
    grid-column: span 2;
}

.cop-threshold-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--cop-primary) 0%, var(--cop-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cop-threshold-card[data-type="overtime"] .cop-threshold-icon {
    background: linear-gradient(135deg, var(--cop-warning) 0%, #d97706 100%);
}

.cop-threshold-card[data-type="unitcost"] .cop-threshold-icon {
    background: linear-gradient(135deg, #2482B8 0%, #1F6BA7 100%);
}

.cop-threshold-card[data-type="eac"] .cop-threshold-icon {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.cop-threshold-icon i {
    font-size: 24px;
    color: white;
}

.cop-threshold-content {
    flex: 1;
}

.cop-threshold-content h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--cop-dark);
    margin: 0 0 8px 0;
}

.cop-threshold-content p {
    font-size: 13px;
    color: var(--cop-gray);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.cop-threshold-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.cop-threshold-input-group input {
    width: 100px;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--cop-dark);
    text-align: center;
    transition: all 0.2s ease;
}

.cop-threshold-input-group input:focus {
    outline: none;
    border-color: var(--cop-primary);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);
}

.cop-threshold-card[data-type="overtime"] .cop-threshold-input-group input:focus {
    border-color: var(--cop-warning);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
}

.cop-threshold-card[data-type="unitcost"] .cop-threshold-input-group input:focus {
    border-color: #2482B8;
    box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.1);
}

.cop-threshold-unit {
    font-size: 24px;
    font-weight: 700;
    color: var(--cop-primary);
}

.cop-threshold-card[data-type="overtime"] .cop-threshold-unit {
    color: var(--cop-warning);
}

.cop-threshold-card[data-type="unitcost"] .cop-threshold-unit {
    color: #2482B8;
}

.cop-threshold-preview {
    margin-top: 12px;
}

.cop-threshold-bar {
    height: 10px;
    background: #e2e8f0;
    border-radius: 10px;
    position: relative;
    overflow: visible;
}

.cop-threshold-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cop-primary) 0%, #34d399 100%);
    border-radius: 10px;
    transition: width 0.3s ease;
}

.cop-threshold-bar.overtime .cop-threshold-fill {
    background: linear-gradient(90deg, var(--cop-warning) 0%, #fbbf24 100%);
}

.cop-threshold-bar.unitcost .cop-threshold-fill {
    background: linear-gradient(90deg, #2482B8 0%, #84CCD5 100%);
}

.cop-threshold-marker {
    position: absolute;
    top: -6px;
    width: 22px;
    height: 22px;
    background: white;
    border: 4px solid var(--cop-primary);
    border-radius: 50%;
    transform: translateX(-50%);
    transition: left 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.cop-threshold-bar.overtime .cop-threshold-marker {
    border-color: var(--cop-warning);
}

.cop-threshold-bar.unitcost .cop-threshold-marker {
    border-color: #2482B8;
}

.cop-threshold-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--cop-gray);
}

.cop-threshold-current {
    font-weight: 700;
    color: var(--cop-primary);
    font-size: 13px;
}

.cop-threshold-card[data-type="overtime"] .cop-threshold-current {
    color: var(--cop-warning);
}

.cop-threshold-card[data-type="unitcost"] .cop-threshold-current {
    color: #2482B8;
}

.cop-threshold-status {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dcfce7;
    color: var(--cop-primary);
}

.cop-threshold-status.pending {
    background: #fef3c7;
    color: var(--cop-warning);
}

.cop-threshold-status i {
    font-size: 16px;
}

/* Tarjeta EAC especial */
.cop-eac-card {
    background: linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 2px solid #0ea5e9 !important;
}

.cop-eac-card .cop-eac-icon {
    background: linear-gradient(145deg, #0ea5e9, #0284c7) !important;
}

.cop-eac-card h5 {
    color: #0369a1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cop-eac-card h5 i {
    color: #0ea5e9;
}

/* Opciones EAC - Dise�o mejorado */
.cop-eac-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 16px;
}

.cop-eac-option {
    display: block;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease;
}

.cop-eac-option:hover {
    transform: translateY(-4px);
}

.cop-eac-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cop-eac-option-content {
    padding: 24px 20px;
    border: 3px solid #cbd5e1;
    border-radius: 20px;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cop-eac-option-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #cbd5e1;
    transition: all 0.3s ease;
}

.cop-eac-option-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.cop-eac-option-icon i {
    font-size: 28px;
    color: #64748b;
    transition: all 0.3s ease;
}

.cop-eac-option-text {
    text-align: center;
}

.cop-eac-option-text strong {
    display: block;
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 6px;
    font-weight: 700;
}

.cop-eac-option-text span {
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}

.cop-eac-check {
    position: absolute;
    top: 12px;
    right: 12px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.cop-eac-check i {
    font-size: 24px;
    color: #0ea5e9;
}

/* Hover */
.cop-eac-option:hover .cop-eac-option-content {
    border-color: #0ea5e9;
    background: #f8fafc;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.15);
}

.cop-eac-option:hover .cop-eac-option-content::before {
    background: linear-gradient(90deg, #0ea5e9, #06b6d4);
}

.cop-eac-option:hover .cop-eac-option-icon {
    background: linear-gradient(145deg, #e0f2fe, #bae6fd);
}

.cop-eac-option:hover .cop-eac-option-icon i {
    color: #0284c7;
}

/* Activo */
.cop-eac-option.active .cop-eac-option-content {
    border-color: #0ea5e9;
    background: linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 100%);
    box-shadow: 0 8px 30px rgba(14, 165, 233, 0.25);
}

.cop-eac-option.active .cop-eac-option-content::before {
    background: linear-gradient(90deg, #0ea5e9, #06b6d4);
    height: 6px;
}

.cop-eac-option.active .cop-eac-option-icon {
    background: linear-gradient(145deg, #0ea5e9, #0284c7);
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
}

.cop-eac-option.active .cop-eac-option-icon i {
    color: white;
}

.cop-eac-option.active .cop-eac-option-text strong {
    color: #0369a1;
}

.cop-eac-option.active .cop-eac-check {
    opacity: 1;
    transform: scale(1);
}

/* Pulse animation */
.cop-eac-option.pulse .cop-eac-option-content {
    animation: eacPulse 0.3s ease;
}

@keyframes eacPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* Descripci�n EAC */
.cop-eac-description {
    margin-top: 20px;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cop-eac-description i {
    color: #0ea5e9;
    font-size: 18px;
    margin-top: 2px;
}

.cop-eac-description span {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
}

/* Resumen de Alertas por Umbral */
.cop-thresholds-alerts-summary {
    margin-top: 32px;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

.cop-thresholds-alerts-summary h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--cop-dark);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cop-thresholds-alerts-summary h5 i {
    color: var(--cop-warning);
}

.cop-alerts-by-threshold {
    display: flex;
    gap: 24px;
}

.cop-alert-threshold-item {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.cop-alert-threshold-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.cop-alert-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cop-primary);
    flex-shrink: 0;
}

.cop-alert-dot.overtime {
    background: var(--cop-warning);
}

.cop-alert-dot.unitcost {
    background: #2482B8;
}

.cop-alert-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--cop-dark);
}

.cop-alert-count {
    font-size: 24px;
    font-weight: 800;
    color: var(--cop-dark);
    min-width: 40px;
    text-align: center;
    background: #f1f5f9;
    padding: 8px 16px;
    border-radius: 10px;
}

/* Responsive para Umbrales */
@media (max-width: 1024px) {
    .cop-thresholds-grid {
        grid-template-columns: 1fr;
    }
    
    .cop-threshold-card-wide {
        grid-column: span 1;
    }
    
    .cop-eac-options {
        grid-template-columns: 1fr;
    }
    
    .cop-alerts-by-threshold {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .cop-threshold-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .cop-threshold-icon {
        margin: 0 auto;
    }
    
    .cop-threshold-input-group {
        justify-content: center;
    }
    
    .cop-threshold-status {
        top: 12px;
        right: 12px;
    }
    
    .cop-header-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .cop-header-actions .btn {
        width: 100%;
    }
}

/* ========================================
   COP PRODUCTIVITY KPIs - Enhanced Design
   ======================================== */

/* Sample Data Banner */
.cop-sample-data-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.cop-sample-data-banner i {
    font-size: 24px;
    color: #d97706;
}

.cop-sample-data-banner div {
    flex: 1;
}

.cop-sample-data-banner strong {
    color: #92400e;
    font-size: 14px;
}

.cop-sample-data-banner small {
    display: block;
    color: #b45309;
    font-size: 12px;
    margin-top: 2px;
}

/* Productivity KPI Grid */
.cop-productivity-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.cop-productivity-kpi-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cop-productivity-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.cop-productivity-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--cop-primary);
}

.cop-productivity-kpi-card.cop-kpi-success::before {
    background: linear-gradient(90deg, #22c55e, #10b981);
}

.cop-productivity-kpi-card.cop-kpi-info::before {
    background: linear-gradient(90deg, #0284c7, #06b6d4);
}

.cop-productivity-kpi-card.cop-kpi-warning::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.cop-productivity-kpi-card.cop-kpi-primary::before {
    background: linear-gradient(90deg, #059669, #10b981);
}

.cop-productivity-kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.cop-productivity-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(5, 150, 105, 0.1);
    color: var(--cop-primary);
}

.cop-productivity-kpi-card.cop-kpi-success .cop-productivity-kpi-icon {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.cop-productivity-kpi-card.cop-kpi-info .cop-productivity-kpi-icon {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

.cop-productivity-kpi-card.cop-kpi-warning .cop-productivity-kpi-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.cop-productivity-kpi-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.cop-productivity-kpi-trend.up {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.cop-productivity-kpi-trend.down {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.cop-productivity-kpi-trend.neutral {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.cop-productivity-kpi-content {
    display: flex;
    flex-direction: column;
}

.cop-productivity-kpi-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--cop-dark);
    line-height: 1;
    margin-bottom: 6px;
    font-family: 'Inter', sans-serif;
}

.cop-productivity-kpi-label {
    font-size: 13px;
    color: var(--cop-gray);
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Cost Cards Section */
.cop-cost-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.cop-cost-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.3s ease;
}

.cop-cost-card:hover {
    background: #fff;
    border-color: var(--cop-primary);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1);
}

.cop-cost-card i {
    font-size: 28px;
    color: var(--cop-primary);
    margin-bottom: 12px;
    display: block;
}

.cop-cost-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--cop-dark);
    margin-bottom: 6px;
    font-family: 'Roboto Mono', monospace;
}

.cop-cost-label {
    font-size: 12px;
    color: var(--cop-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* HE Gauge Section */
.cop-he-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    margin-bottom: 28px;
}

.cop-he-gauge-container {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    border: 1px solid #fecaca;
}

.cop-he-gauge-title {
    font-size: 14px;
    color: #b91c1c;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cop-he-gauge {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 20px;
}

.cop-he-gauge-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        #dc2626 0deg calc(var(--he-percentage, 0) * 3.6deg),
        #e5e7eb calc(var(--he-percentage, 0) * 3.6deg) 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cop-he-gauge-circle::before {
    content: '';
    position: absolute;
    width: 70%;
    height: 70%;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 50%;
}

.cop-he-gauge-value {
    position: relative;
    z-index: 1;
    font-size: 32px;
    font-weight: 800;
    color: #dc2626;
}

.cop-he-gauge-value span {
    font-size: 16px;
    font-weight: 600;
}

.cop-he-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.cop-he-stat {
    background: white;
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #fecaca;
}

.cop-he-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #b91c1c;
}

.cop-he-stat-label {
    font-size: 11px;
    color: #991b1b;
    font-weight: 500;
}

/* Productivity Table Enhanced */
.cop-productivity-table-container {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    margin-bottom: 28px;
}

.cop-productivity-table-header {
    background: linear-gradient(135deg, var(--cop-primary) 0%, #047857 100%);
    color: white;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cop-productivity-table-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cop-productivity-table-actions {
    display: flex;
    gap: 10px;
}

.cop-productivity-table-actions .btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cop-productivity-table-actions .btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.cop-productivity-table {
    width: 100%;
    border-collapse: collapse;
}

.cop-productivity-table th {
    background: #f8fafc;
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--cop-dark);
    border-bottom: 2px solid #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cop-productivity-table td {
    padding: 14px 16px;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--cop-dark);
}

.cop-productivity-table tbody tr {
    transition: all 0.2s ease;
}

.cop-productivity-table tbody tr:hover {
    background: #f8fafc;
}

.cop-productivity-table .unit-name {
    font-weight: 600;
    color: var(--cop-primary);
}

.cop-productivity-table .numeric {
    font-family: 'Roboto Mono', monospace;
    text-align: right;
}

/* Badge Styles */
.cop-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.cop-badge-success {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.cop-badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.cop-badge-danger {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.cop-badge-info {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

/* Productivity Bar */
.cop-productivity-bar {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.cop-productivity-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.cop-productivity-bar-fill.excellent {
    background: linear-gradient(90deg, #22c55e, #10b981);
}

.cop-productivity-bar-fill.good {
    background: linear-gradient(90deg, #0284c7, #06b6d4);
}

.cop-productivity-bar-fill.average {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.cop-productivity-bar-fill.poor {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

/* Occupancy Indicator */
.cop-occupancy-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cop-occupancy-bar {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.cop-occupancy-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.cop-occupancy-fill.low {
    background: #22c55e;
}

.cop-occupancy-fill.medium {
    background: #f59e0b;
}

.cop-occupancy-fill.high {
    background: #dc2626;
}

.cop-occupancy-value {
    font-size: 12px;
    font-weight: 600;
    min-width: 45px;
    text-align: right;
}

/* Correlation Grid */
.cop-correlation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.cop-correlation-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 14px;
    padding: 22px;
    border: 1px solid #bbf7d0;
    transition: all 0.3s ease;
}

.cop-correlation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.15);
}

.cop-correlation-card h5 {
    font-size: 13px;
    color: #166534;
    margin: 0 0 16px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cop-correlation-card h5 i {
    font-size: 16px;
    color: #22c55e;
}

.cop-correlation-metrics {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cop-correlation-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: white;
    border-radius: 10px;
    border: 1px solid #d1fae5;
}

.cop-correlation-metric span:first-child {
    font-size: 12px;
    color: #166534;
    font-weight: 500;
}

.cop-correlation-metric span:last-child {
    font-size: 16px;
    font-weight: 700;
    color: #047857;
    font-family: 'Roboto Mono', monospace;
}

/* Responsive para Productivity KPIs */
@media (max-width: 1200px) {
    .cop-productivity-kpi-grid,
    .cop-cost-cards,
    .cop-correlation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cop-he-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cop-productivity-kpi-grid,
    .cop-cost-cards,
    .cop-correlation-grid {
        grid-template-columns: 1fr;
    }
    
    .cop-productivity-kpi-value {
        font-size: 28px;
    }
    
    .cop-sample-data-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .cop-productivity-table-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .cop-productivity-table {
        display: block;
        overflow-x: auto;
    }
    
    .cop-he-stats {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   COP CENTRO DE ALERTAS - Enhanced Design
   ======================================== */

/* Header de Alertas */
.cop-alerts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #082A5D 0%, #1F6BA7 100%);
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(8, 42, 93, 0.2);
}

.cop-alerts-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cop-alerts-icon-wrapper {
    position: relative;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cop-alerts-icon-wrapper i {
    font-size: 26px;
    color: #fbbf24;
}

.cop-alerts-pulse {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse-alert 1.5s infinite;
}

@keyframes pulse-alert {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.cop-alerts-title h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: white;
}

.cop-alerts-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
}

.cop-alerts-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cop-alert-filter-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    min-width: 180px;
}

.cop-alert-filter-select option {
    background: #1e293b;
    color: white;
}

.cop-btn-refresh {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.cop-btn-refresh:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Dashboard de M�tricas */
.cop-alerts-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.cop-alerts-metric-card {
    background: white;
    border-radius: 14px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cop-alerts-metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.cop-alerts-metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.cop-alerts-metric-card.cop-alerts-critical::before { background: #dc2626; }
.cop-alerts-metric-card.cop-alerts-warning::before { background: #f59e0b; }
.cop-alerts-metric-card.cop-alerts-info::before { background: #0284c7; }
.cop-alerts-metric-card.cop-alerts-resolved::before { background: #22c55e; }

.cop-alerts-metric-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.cop-alerts-critical .cop-alerts-metric-icon {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.cop-alerts-warning .cop-alerts-metric-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.cop-alerts-info .cop-alerts-metric-icon {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

.cop-alerts-resolved .cop-alerts-metric-icon {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.cop-alerts-metric-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cop-alerts-metric-value {
    font-size: 32px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.cop-alerts-metric-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    margin-top: 4px;
}

.cop-alerts-metric-trend {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.cop-alerts-metric-trend.up {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.cop-alerts-metric-trend.down {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.cop-alerts-metric-trend.neutral,
.cop-alerts-metric-trend.warning {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Tiempo de Respuesta */
.cop-alerts-response-time {
    display: flex;
    gap: 24px;
    padding: 20px 28px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 14px;
    margin-bottom: 24px;
    border: 1px solid #bae6fd;
}

.cop-response-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.cop-response-stat i {
    font-size: 24px;
    color: #0284c7;
}

.cop-response-stat div {
    display: flex;
    flex-direction: column;
}

.cop-response-value {
    font-size: 20px;
    font-weight: 700;
    color: #0369a1;
}

.cop-response-label {
    font-size: 12px;
    color: #0284c7;
    font-weight: 500;
}

/* Lista de Alertas Container */
.cop-alerts-list-container {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    margin-bottom: 24px;
}

.cop-alerts-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.cop-alerts-list-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cop-alerts-list-header h4 i {
    color: #64748b;
}

.cop-alerts-list-actions {
    display: flex;
    gap: 10px;
}

.cop-btn-outline-sm {
    background: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.cop-btn-outline-sm:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155;
}

/* Alert Cards */
.cop-alerts-list {
    max-height: 600px;
    overflow-y: auto;
}

.cop-alert-card {
    display: flex;
    padding: 0;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    animation: slideInAlert 0.3s ease forwards;
    opacity: 0;
    transform: translateX(-10px);
}

@keyframes slideInAlert {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cop-alert-card:hover {
    background: #f8fafc;
}

.cop-alert-card-indicator {
    width: 5px;
    flex-shrink: 0;
}

.cop-alert-card.cop-alert-critical .cop-alert-card-indicator { background: #dc2626; }
.cop-alert-card.cop-alert-warning .cop-alert-card-indicator { background: #f59e0b; }
.cop-alert-card.cop-alert-info .cop-alert-card-indicator { background: #0284c7; }

.cop-alert-card-main {
    flex: 1;
    padding: 18px 20px;
}

.cop-alert-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cop-alert-severity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cop-alert-severity-badge.critical {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.cop-alert-severity-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.cop-alert-severity-badge.info {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

.cop-alert-time {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cop-alert-card-body {
    margin-bottom: 12px;
}

.cop-alert-title {
    margin: 0 0 6px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.cop-alert-description {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.cop-alert-type-badge {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-right: 8px;
    text-transform: uppercase;
}

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

.cop-alert-location {
    display: flex;
    gap: 16px;
}

.cop-alert-location span {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cop-alert-location i {
    color: #94a3b8;
}

.cop-alert-status-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cop-alert-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.cop-alert-status-badge.open {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.cop-alert-status-badge.assigned {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.cop-alert-status-badge.progress {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

.cop-alert-status-badge.resolved {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.cop-alert-status-badge.closed {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.cop-alert-assignee {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #475569;
}

.cop-alert-assignee img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

/* Alert Card Actions */
.cop-alert-card-actions {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 8px;
    border-left: 1px solid #f1f5f9;
    background: #fafafa;
}

.cop-alert-action-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

.cop-alert-action-btn.assign {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

.cop-alert-action-btn.assign:hover {
    background: #0284c7;
    color: white;
}

.cop-alert-action-btn.resolve {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.cop-alert-action-btn.resolve:hover {
    background: #22c55e;
    color: white;
}

.cop-alert-action-btn.history {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.cop-alert-action-btn.history:hover {
    background: #6b7280;
    color: white;
}

.cop-alert-action-btn.more {
    background: transparent;
    color: #94a3b8;
}

.cop-alert-action-btn.more:hover {
    background: #e2e8f0;
    color: #475569;
}

/* Alertas Empty State */
.cop-alerts-empty {
    text-align: center;
    padding: 60px 20px;
}

.cop-alerts-empty i {
    font-size: 64px;
    color: #22c55e;
    margin-bottom: 20px;
}

.cop-alerts-empty h4 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: #1e293b;
}

.cop-alerts-empty p {
    margin: 0;
    color: #64748b;
}

/* Quick Actions */
.cop-alerts-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.cop-quick-action-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cop-quick-action-card:hover {
    border-color: var(--cop-primary);
    background: rgba(5, 150, 105, 0.02);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1);
}

.cop-quick-action-card i {
    font-size: 28px;
    color: var(--cop-primary);
    margin-bottom: 10px;
    display: block;
}

.cop-quick-action-card span {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

/* Responsive para Alertas */
@media (max-width: 1200px) {
    .cop-alerts-dashboard,
    .cop-alerts-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cop-alerts-response-time {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .cop-alerts-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .cop-alerts-title {
        flex-direction: column;
    }
    
    .cop-alerts-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .cop-alert-filter-select {
        width: 100%;
    }
    
    .cop-alerts-dashboard,
    .cop-alerts-quick-actions {
        grid-template-columns: 1fr;
    }
    
    .cop-alerts-response-time {
        flex-direction: column;
        gap: 16px;
    }
    
    .cop-alert-card {
        flex-direction: column;
    }
    
    .cop-alert-card-actions {
        flex-direction: row;
        justify-content: center;
        border-left: none;
        border-top: 1px solid #f1f5f9;
    }
    
    .cop-alert-card-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   COP ALERTS MODALS - Enhanced Design
   ======================================== */

/* Modal Overlay & Base */
.cop-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

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

.cop-modal {
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.cop-modal-overlay.active .cop-modal {
    transform: scale(1) translateY(0);
}

.cop-modal-md { width: 560px; max-width: 95vw; }
.cop-modal-lg { width: 720px; max-width: 95vw; }
.cop-modal-xl { width: 900px; max-width: 95vw; }

/* Modal Header */
.cop-modal-header {
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
}

.cop-modal-header-dark {
    background: linear-gradient(135deg, #082A5D 0%, #1C507B 100%);
    color: white;
    border-bottom: none;
}

.cop-modal-header-gradient {
    background: linear-gradient(135deg, #059669 0%, #0284c7 100%);
    color: white;
    border-bottom: none;
}

.cop-modal-header-info {
    background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
    color: white;
    border-bottom: none;
}

.cop-modal-header-critical {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: white;
    border-bottom: none;
}

.cop-modal-header-warning {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    color: white;
    border-bottom: none;
}

.cop-modal-title-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cop-modal-title-group > i {
    font-size: 28px;
    opacity: 0.9;
}

.cop-modal-title-group h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.cop-modal-title-group span {
    font-size: 13px;
    opacity: 0.8;
}

.cop-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cop-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Modal Body */
.cop-modal-body {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
}

/* Modal Footer */
.cop-modal-footer {
    padding: 20px 28px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.cop-modal-footer-actions {
    justify-content: space-between;
}

.cop-footer-left, .cop-footer-right {
    display: flex;
    gap: 12px;
}

/* History Modal Styles */
.cop-history-filters {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.cop-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cop-filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.cop-select {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
    min-width: 140px;
    background: white;
    cursor: pointer;
}

.cop-select:focus {
    outline: none;
    border-color: var(--cop-primary);
}

.cop-history-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.cop-history-stat {
    text-align: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.cop-history-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
}

.cop-history-stat-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.cop-text-success { color: #22c55e !important; }
.cop-text-warning { color: #f59e0b !important; }
.cop-text-info { color: #0284c7 !important; }

/* Timeline */
.cop-history-timeline {
    position: relative;
    padding-left: 24px;
}

.cop-history-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}

.cop-history-item {
    position: relative;
    padding: 16px 0 16px 24px;
    border-bottom: 1px solid #f1f5f9;
}

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

.cop-history-item-dot {
    position: absolute;
    left: -20px;
    top: 20px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 2px #e2e8f0;
}

.cop-history-item-dot.critical { background: #dc2626; box-shadow: 0 0 0 2px #fecaca; }
.cop-history-item-dot.warning { background: #f59e0b; box-shadow: 0 0 0 2px #fef3c7; }
.cop-history-item-dot.info { background: #0284c7; box-shadow: 0 0 0 2px #bae6fd; }

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

.cop-history-item-type {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.cop-history-item-date {
    font-size: 12px;
    color: #94a3b8;
}

.cop-history-item-message {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
}

.cop-history-item-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #64748b;
}

.cop-history-item-meta i {
    margin-right: 4px;
    color: #94a3b8;
}

.cop-history-item-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.cop-history-item-status.resolved {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.cop-history-item-status.closed {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Report Modal Styles */
.cop-report-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.cop-report-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.cop-report-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.cop-report-kpi-icon.critical { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.cop-report-kpi-icon.success { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.cop-report-kpi-icon.info { background: rgba(2, 132, 199, 0.1); color: #0284c7; }
.cop-report-kpi-icon.warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.cop-report-kpi-content {
    display: flex;
    flex-direction: column;
}

.cop-report-kpi-value {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
}

.cop-report-kpi-label {
    font-size: 12px;
    color: #64748b;
}

/* Report Charts */
.cop-report-charts {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.cop-report-chart-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
}

.cop-report-chart-card h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cop-report-chart-card h4 i {
    color: #64748b;
}

.cop-chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 120px;
    padding: 10px 0;
    gap: 4px;
}

.cop-chart-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.cop-chart-bar {
    width: 100%;
    max-width: 20px;
    background: linear-gradient(180deg, var(--cop-primary), #047857);
    border-radius: 4px 4px 0 0;
    margin-top: auto;
    transition: height 0.3s ease;
}

.cop-chart-bar-container span {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 6px;
}

.cop-chart-distribution {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cop-distribution-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cop-distribution-bar {
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.cop-distribution-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.cop-distribution-fill.budget { background: linear-gradient(90deg, #dc2626, #ef4444); }
.cop-distribution-fill.he { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.cop-distribution-fill.cost { background: linear-gradient(90deg, #0284c7, #06b6d4); }
.cop-distribution-fill.productivity { background: linear-gradient(90deg, #22c55e, #10b981); }

.cop-distribution-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #64748b;
}

/* Report Table */
.cop-report-table-section {
    background: #f8fafc;
    border-radius: 14px;
    padding: 20px;
}

.cop-report-table-section h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cop-report-table {
    width: 100%;
    border-collapse: collapse;
}

.cop-report-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    border-bottom: 2px solid #e2e8f0;
}

.cop-report-table td {
    padding: 14px 16px;
    font-size: 13px;
    color: #334155;
    border-bottom: 1px solid #e2e8f0;
}

.cop-badge-sm {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.cop-badge-sm.danger {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.cop-badge-sm.success {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.cop-mini-progress {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-right: 8px;
    vertical-align: middle;
}

.cop-mini-progress-fill {
    height: 100%;
    background: var(--cop-primary);
    border-radius: 3px;
}

/* Notification Settings Styles */
.cop-notification-section {
    margin-bottom: 28px;
}

.cop-notification-section h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cop-notification-section h4 i {
    color: var(--cop-primary);
}

.cop-notification-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cop-notification-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.cop-notification-option-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cop-notification-option-info > i {
    font-size: 22px;
    color: #64748b;
    width: 28px;
    text-align: center;
}

.cop-notification-option-info div span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.cop-notification-option-info div small {
    font-size: 12px;
    color: #94a3b8;
}

/* Toggle Switch */
.cop-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.cop-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cop-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbd5e1;
    border-radius: 28px;
    transition: 0.3s;
}

.cop-toggle-slider::before {
    position: absolute;
    content: '';
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cop-toggle input:checked + .cop-toggle-slider {
    background: var(--cop-primary);
}

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

/* Severity Checkbox Cards */
.cop-notification-severity {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.cop-checkbox-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cop-checkbox-card input {
    display: none;
}

.cop-checkbox-card i {
    font-size: 24px;
    color: #94a3b8;
}

.cop-checkbox-card span {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.cop-checkbox-card.active,
.cop-checkbox-card:has(input:checked) {
    border-color: var(--cop-primary);
    background: rgba(5, 150, 105, 0.05);
}

.cop-checkbox-card.critical.active i { color: #dc2626; }
.cop-checkbox-card.warning.active i { color: #f59e0b; }
.cop-checkbox-card.info.active i { color: #0284c7; }

.cop-checkbox-card.active span {
    color: #334155;
}

/* Schedule */
.cop-notification-schedule {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}

.cop-schedule-option {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cop-schedule-option label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.cop-input {
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #334155;
}

.cop-input:focus {
    outline: none;
    border-color: var(--cop-primary);
}

.cop-schedule-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fef3c7;
    border-radius: 8px;
    font-size: 12px;
    color: #92400e;
}

.cop-schedule-note i {
    color: #f59e0b;
}

/* Alert Details Modal */
.cop-alert-detail-main {
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 24px;
}

.cop-alert-detail-severity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.cop-alert-detail-severity.critical {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.cop-alert-detail-severity.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.cop-alert-detail-severity.info {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

.cop-alert-detail-main h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.cop-type-badge {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.cop-alert-detail-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.cop-alert-metric-box {
    text-align: center;
    padding: 18px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.cop-alert-metric-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.cop-alert-metric-value {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
}

.cop-alert-metric-value.danger { color: #dc2626; }
.cop-alert-metric-value.warning { color: #f59e0b; }

.cop-alert-detail-section {
    margin-bottom: 24px;
}

.cop-alert-detail-section h5 {
    margin: 0 0 14px 0;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cop-alert-detail-section h5 i {
    color: var(--cop-primary);
}

.cop-alert-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.cop-alert-detail-item {
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 10px;
}

.cop-alert-detail-item label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.cop-alert-detail-item span {
    font-size: 14px;
    color: #334155;
    font-weight: 500;
}

.cop-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.cop-status-badge.open { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.cop-status-badge.assigned { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.cop-status-badge.in_progress { background: rgba(2, 132, 199, 0.1); color: #0284c7; }
.cop-status-badge.resolved { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.cop-status-badge.closed { background: rgba(107, 114, 128, 0.1); color: #6b7280; }

.cop-textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #334155;
    resize: vertical;
    font-family: inherit;
}

.cop-textarea:focus {
    outline: none;
    border-color: var(--cop-primary);
}

/* Alert Read State */
.cop-alert-card.cop-alert-read {
    opacity: 0.7;
}

.cop-alert-card.cop-alert-read::after {
    content: '?';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: #22c55e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* Responsive for Alert Modals */
@media (max-width: 768px) {
    .cop-modal-md,
    .cop-modal-lg,
    .cop-modal-xl {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .cop-history-summary,
    .cop-report-kpis,
    .cop-alert-detail-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cop-report-charts {
        grid-template-columns: 1fr;
    }
    
    .cop-notification-severity,
    .cop-notification-schedule,
    .cop-alert-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .cop-modal-footer-actions {
        flex-direction: column;
    }
    
    .cop-footer-left,
    .cop-footer-right {
        width: 100%;
    }
    
    .cop-footer-right {
        justify-content: flex-end;
    }
}

/* ========================================
   COP Dashboard Panels - Modern Design
   ======================================== */

/* Panel Base */
.cop-dashboard-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.cop-panel {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.cop-panel:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.cop-panel-full {
    margin-bottom: 24px;
}

/* Panel Headers */
.cop-panel-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cop-panel-header-danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: white;
}

.cop-panel-header-warning {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    color: white;
}

.cop-panel-header-fire {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    color: white;
}

.cop-panel-header-info {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: white;
}

.cop-panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
}

.cop-panel-title i {
    font-size: 20px;
}

.cop-panel-subtitle {
    font-size: 13px;
    opacity: 0.9;
}

.cop-panel-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.cop-panel-body {
    padding: 24px;
}

/* Alert Cards */
.cop-alert-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.cop-alert-card {
    position: relative;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.cop-alert-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.cop-alert-card-content {
    display: flex;
    flex-direction: column;
}

.cop-alert-card-number {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.cop-alert-card-label {
    font-size: 13px;
    margin-top: 4px;
}

/* Critical Alert */
.cop-alert-critical {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
}

.cop-alert-critical .cop-alert-card-icon {
    background: #dc2626;
    color: white;
}

.cop-alert-critical .cop-alert-card-number {
    color: #dc2626;
}

.cop-alert-critical .cop-alert-card-label {
    color: #991b1b;
}

.cop-alert-critical.has-alerts {
    animation: pulse-critical 2s infinite;
}

@keyframes pulse-critical {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

.cop-alert-pulse {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    background: #dc2626;
    border-radius: 50%;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Warning Alert */
.cop-alert-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
}

.cop-alert-warning .cop-alert-card-icon {
    background: #d97706;
    color: white;
}

.cop-alert-warning .cop-alert-card-number {
    color: #d97706;
}

.cop-alert-warning .cop-alert-card-label {
    color: #92400e;
}

/* Pending Alert */
.cop-alert-pending {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
}

.cop-alert-pending .cop-alert-card-icon {
    background: #0284c7;
    color: white;
}

.cop-alert-pending .cop-alert-card-number {
    color: #0284c7;
}

.cop-alert-pending .cop-alert-card-label {
    color: #075985;
}

/* Panel Action Button */
.cop-panel-action-btn {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #082A5D 0%, #1F6BA7 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.cop-panel-action-btn:hover {
    background: linear-gradient(135deg, #1C507B 0%, #2482B8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.3);
}

/* Deviation List */
.cop-deviation-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cop-deviation-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.cop-deviation-item:hover {
    background: #f1f5f9;
}

.cop-deviation-rank {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #2482B8 0%, #5bbad5 100%);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.cop-deviation-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cop-deviation-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.cop-deviation-sede {
    font-size: 12px;
    color: #64748b;
}

.cop-deviation-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
}

.cop-deviation-value.negative {
    background: #fef2f2;
    color: #dc2626;
}

.cop-deviation-value.positive {
    background: #f0fdf4;
    color: #16a34a;
}

/* Empty State Mini */
.cop-empty-state-mini {
    text-align: center;
    padding: 40px 20px;
}

.cop-empty-state-mini i {
    font-size: 48px;
    color: #10b981;
    margin-bottom: 16px;
}

.cop-empty-state-mini p {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.cop-empty-state-mini span {
    font-size: 14px;
    color: #64748b;
}

/* Hotspots Modern */
.cop-hotspots-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cop-hotspot-modern {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.cop-hotspot-modern:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cop-hotspot-modern.warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
}

.cop-hotspot-modern.critical {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
}

.cop-hotspot-modern-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cop-hotspot-modern-name {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.cop-hotspot-modern-percent {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.cop-hotspot-modern.warning .cop-hotspot-modern-percent {
    color: #d97706;
}

.cop-hotspot-modern.critical .cop-hotspot-modern-percent {
    color: #dc2626;
}

.cop-hotspot-modern-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    margin-bottom: 16px;
    overflow: hidden;
}

.cop-hotspot-modern-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.cop-hotspot-modern.warning .cop-hotspot-modern-fill {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

.cop-hotspot-modern.critical .cop-hotspot-modern-fill {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.cop-hotspot-modern-stats {
    display: flex;
    justify-content: space-between;
}

.cop-hotspot-modern-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
}

.cop-hotspot-modern-stat i {
    font-size: 12px;
    color: #94a3b8;
}

/* Outputs Grid */
.cop-outputs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.cop-output-card {
    position: relative;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.cop-output-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.cop-output-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cop-output-content {
    display: flex;
    flex-direction: column;
}

.cop-output-value {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.cop-output-label {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

.cop-output-highlight {
    position: relative;
    overflow: hidden;
}

.cop-output-ring {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
}

.cop-output-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

/* Responsive */
@media (max-width: 1200px) {
    .cop-outputs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cop-hotspots-modern {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cop-dashboard-panels {
        grid-template-columns: 1fr;
    }
    
    .cop-alert-cards {
        grid-template-columns: 1fr;
    }
    
    .cop-outputs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cop-hotspots-modern {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   CONTROL DE HORAS EXTRA - MODERNO
   ======================================== */

.cop-he-modern-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 28px;
    border: 1px solid #e2e8f0;
}

.cop-he-modern-header {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.cop-he-header-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
}

.cop-he-header-text h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.cop-he-header-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
}

.cop-he-modern-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    padding: 28px;
}

.cop-he-gauge-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.cop-he-gauge-ring {
    position: relative;
    width: 180px;
    height: 180px;
}

.cop-he-gauge-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
}

.cop-he-gauge-ring circle {
    transition: stroke-dasharray 0.8s ease;
}

.cop-he-gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.cop-he-gauge-percent {
    font-size: 36px;
    font-weight: 800;
    color: #10b981;
    display: block;
    line-height: 1;
}

.cop-he-gauge-percent.warning {
    color: #f59e0b;
}

.cop-he-gauge-percent.critical {
    color: #ef4444;
    animation: pulse-critical 1.5s ease infinite;
}

.cop-he-gauge-sublabel {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cop-he-gauge-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cop-he-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
}

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

.cop-he-legend-dot.normal { background: #10b981; }
.cop-he-legend-dot.warning { background: #f59e0b; }
.cop-he-legend-dot.critical { background: #ef4444; }

.cop-he-stats-modern {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cop-he-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.cop-he-stat-card:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.cop-he-stat-card.target .cop-he-stat-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.cop-he-stat-card.cost .cop-he-stat-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.cop-he-stat-card.hours .cop-he-stat-icon {
    background: linear-gradient(135deg, #2482B8 0%, #082A5D 100%);
}

.cop-he-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

.cop-he-stat-content {
    flex: 1;
}

.cop-he-stat-number {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.cop-he-stat-title {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.cop-he-stat-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.cop-he-stat-indicator.success {
    background: #dcfce7;
    color: #16a34a;
}

.cop-he-stat-indicator.danger {
    background: #fee2e2;
    color: #dc2626;
}

.cop-he-stat-trend {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.cop-he-stat-trend.up {
    background: #fee2e2;
    color: #dc2626;
}

.cop-he-stat-trend.neutral {
    background: #f1f5f9;
    color: #64748b;
}

/* ========================================
   TABLA MODERNA - DETALLE POR UNIDAD
   ======================================== */

.cop-table-modern-section {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 28px;
    border: 1px solid #e2e8f0;
}

.cop-table-modern-header {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cop-table-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}

.cop-table-header-left i {
    font-size: 18px;
    opacity: 0.9;
}

.cop-table-header-left h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.cop-table-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.cop-table-header-right {
    display: flex;
    gap: 10px;
}

.cop-btn-modern {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.cop-btn-modern.export {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.cop-btn-modern.export:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.cop-table-modern-wrapper {
    overflow-x: auto;
}

.cop-table-modern {
    width: 100%;
    border-collapse: collapse;
}

.cop-table-modern thead th {
    background: #f8fafc;
    padding: 16px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.cop-table-modern thead th span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cop-table-modern tbody tr {
    transition: all 0.2s ease;
    animation: fadeInRow 0.4s ease forwards;
    opacity: 0;
}

@keyframes fadeInRow {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.cop-table-modern tbody tr:hover {
    background: #f8fafc;
}

.cop-table-modern tbody td {
    padding: 14px;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.cop-unit-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cop-unit-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.cop-unit-details {
    display: flex;
    flex-direction: column;
}

.cop-unit-site {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cop-unit-name {
    font-size: 13px;
    color: #1e293b;
    font-weight: 600;
}

.cop-cell-value {
    font-family: 'Roboto Mono', monospace;
    font-weight: 600;
    color: #334155;
}

.cop-cell-money {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: #059669;
    font-weight: 600;
}

.cop-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.cop-pill.success {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

.cop-pill.warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.cop-pill.danger {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
}

.cop-output-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cop-output-bar-bg {
    width: 60px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.cop-output-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.cop-output-value {
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
}

.cop-occupancy-modern {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0 auto;
}

.cop-occupancy-modern svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.cop-occupancy-modern circle {
    transition: stroke-dasharray 0.6s ease;
}

.cop-occupancy-modern.normal { color: #10b981; }
.cop-occupancy-modern.warning { color: #f59e0b; }
.cop-occupancy-modern.critical { color: #ef4444; }

.cop-occupancy-modern span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    color: inherit;
}

/* ========================================
   CORRELACI�N PID-ME - MODERNO
   ======================================== */

.cop-correlation-modern-section {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 28px;
    border: 1px solid #bbf7d0;
}

.cop-correlation-modern-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.cop-correlation-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cop-correlation-icon-wrap {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.cop-correlation-header-text h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #065f46;
}

.cop-correlation-header-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #047857;
}

.cop-correlation-modern-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cop-correlation-modern-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    animation: fadeInCard 0.5s ease forwards;
    opacity: 0;
}

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

.cop-correlation-modern-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.cop-correlation-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.cop-correlation-unit-badge {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #2482B8 0%, #082A5D 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 700;
}

.cop-correlation-unit-info {
    display: flex;
    flex-direction: column;
}

.cop-correlation-unit-name {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.cop-correlation-site-name {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.cop-correlation-metrics {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cop-correlation-metric-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cop-metric-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.cop-metric-icon.sun {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.cop-metric-icon.time {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.cop-metric-icon.calendar {
    background: linear-gradient(135deg, #e6f4fb 0%, #dbeafe 100%);
    color: #1F6BA7;
}

.cop-metric-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cop-metric-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.cop-metric-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cop-metric-bar {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.cop-metric-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.cop-metric-value {
    font-size: 12px;
    font-weight: 700;
    color: #d97706;
    white-space: nowrap;
}

.cop-metric-highlight {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

/* Responsive para las nuevas secciones */
@media (max-width: 1200px) {
    .cop-he-modern-grid {
        grid-template-columns: 1fr;
    }
    
    .cop-he-gauge-modern {
        flex-direction: row;
        justify-content: center;
        gap: 40px;
    }
    
    .cop-he-stats-modern {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .cop-he-stat-card {
        flex: 1;
        min-width: 200px;
    }
    
    .cop-correlation-modern-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cop-he-gauge-modern {
        flex-direction: column;
    }
    
    .cop-he-stats-modern {
        flex-direction: column;
    }
    
    .cop-he-stat-card {
        min-width: auto;
    }
    
    .cop-correlation-modern-grid {
        grid-template-columns: 1fr;
    }
    
    .cop-table-modern-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .cop-table-header-left,
    .cop-table-header-right {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   COP MODAL DE CONFIRMACI�N MODERNO
   ======================================== */

.cop-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

.cop-confirm-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cop-confirm-modal {
    background: white;
    border-radius: 24px;
    padding: 36px 40px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.25),
        0 10px 25px rgba(0, 0, 0, 0.1);
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cop-confirm-overlay.active .cop-confirm-modal {
    transform: scale(1) translateY(0);
}

@keyframes copConfirmSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.cop-confirm-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    border: 3px solid;
    animation: iconPulse 2s ease infinite;
}

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

.cop-confirm-icon-wrap i {
    font-size: 32px;
}

.cop-confirm-title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}

.cop-confirm-message {
    margin: 0 0 28px;
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
}

.cop-confirm-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
}

.cop-confirm-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 130px;
    justify-content: center;
}

.cop-confirm-btn.cancel {
    background: #f1f5f9;
    color: #475569;
}

.cop-confirm-btn.cancel:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
}

.cop-confirm-btn.confirm {
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cop-confirm-btn.confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.cop-confirm-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Prompt Modal */
.cop-prompt-modal {
    max-width: 450px;
}

.cop-prompt-input-wrap {
    margin-bottom: 24px;
}

.cop-prompt-input {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #1e293b;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.cop-prompt-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.cop-prompt-input::placeholder {
    color: #94a3b8;
}

/* ============================================
   NCA - NORMATIVIDAD, CUMPLIMIENTO Y ACREDITACI�N
   Sistema Completo de Gesti�n de Acreditaciones
   ============================================ */

/* Variables NCA Ampliadas */
:root {
    /* Colores Principales NCA */
    --nca-primary: #1F6BA7;
    --nca-primary-dark: #0D3567;
    --nca-primary-light: #84CCD5;
    --nca-primary-bg: #D7EBEA;
    --nca-secondary: #06b6d4;
    --nca-secondary-dark: #0891b2;
    --nca-secondary-light: #67e8f9;
    
    /* Estados y Alertas NCA */
    --nca-success: #10b981;
    --nca-success-light: #d1fae5;
    --nca-success-dark: #059669;
    --nca-warning: #f59e0b;
    --nca-warning-light: #fef3c7;
    --nca-warning-dark: #d97706;
    --nca-danger: #ef4444;
    --nca-danger-light: #fee2e2;
    --nca-danger-dark: #dc2626;
    --nca-info: #3b82f6;
    --nca-info-light: #dbeafe;
    --nca-info-dark: #2563eb;
    
    /* Colores por Framework */
    --nca-jci: #1e40af;
    --nca-canada: #dc2626;
    --nca-iso: #0891b2;
    --nca-nacional: #059669;
    --nca-excellence: #1F6BA7;
    
    /* Niveles de Riesgo */
    --nca-risk-critical: #991b1b;
    --nca-risk-high: #dc2626;
    --nca-risk-medium: #f59e0b;
    --nca-risk-low: #10b981;
    --nca-risk-minimal: #6ee7b7;
    
    /* Gradientes NCA */
    --nca-gradient-primary: linear-gradient(135deg, #1F6BA7 0%, #0D3567 100%);
    --nca-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --nca-gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --nca-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --nca-gradient-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --nca-gradient-jci: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    --nca-gradient-canada: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    --nca-gradient-iso: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    --nca-gradient-nacional: linear-gradient(135deg, #059669 0%, #047857 100%);
    
    /* Sombras NCA */
    --nca-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --nca-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --nca-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --nca-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --nca-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --nca-shadow-glow: 0 0 30px rgba(31, 107, 167, 0.2);
    --nca-shadow-colored: 0 10px 40px -10px;
}

/* =====================================================
   TABS PRINCIPALES NCA - Navegaci�n Mejorada
   ===================================================== */
.nca-main-tabs {
    display: flex;
    gap: 10px;
    padding: 20px 0;
    margin-bottom: 24px;
    flex-wrap: wrap;
    border-bottom: 2px solid #e2e8f0;
    position: relative;
}

.nca-main-tabs::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--nca-primary) 0%, transparent 100%);
    opacity: 0.3;
}

.nca-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.nca-tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(31, 107, 167, 0.1), transparent);
    transition: left 0.5s ease;
}

.nca-tab-btn:hover::before {
    left: 100%;
}

.nca-tab-btn:hover {
    background: var(--nca-primary-bg);
    border-color: var(--nca-primary-light);
    color: var(--nca-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--nca-shadow);
}

.nca-tab-btn.active {
    background: var(--nca-gradient-primary);
    border-color: var(--nca-primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--nca-shadow-md), 0 0 20px rgba(31, 107, 167, 0.3);
}

.nca-tab-btn i {
    font-size: 15px;
    transition: transform 0.3s ease;
}

.nca-tab-btn:hover i {
    transform: scale(1.1);
}

.nca-tab-btn.active i {
    animation: ncaPulse 2s ease-in-out infinite;
}

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

/* Tab Navigation Simple */
.nca-tab {
    padding: 10px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
}

.nca-tab:hover {
    background: #f3f4f6;
    border-color: var(--nca-primary-light);
}

.nca-tab.active {
    background: linear-gradient(135deg, var(--nca-primary), var(--nca-primary-dark)) !important;
    color: white !important;
    border-color: var(--nca-primary);
}

.nca-tab-content {
    display: none;
    animation: ncaFadeIn 0.4s ease;
}

.nca-tab-content.active {
    display: block;
}

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

/* =====================================================
   CONTENEDOR PRINCIPAL Y LOADING
   ===================================================== */
.nca-content-wrapper {
    min-height: 600px;
    position: relative;
}

.nca-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #64748b;
    gap: 20px;
}

.nca-loading i {
    font-size: 48px;
    color: var(--nca-primary);
    animation: ncaSpin 1s linear infinite;
}

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

.nca-loading p {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

/* =====================================================
   DASHBOARD NCA
   ===================================================== */
.nca-dashboard {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 4px;
}

/* KPI Grid Mejorado */
.nca-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.nca-kpi-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: white;
    border-radius: 20px;
    box-shadow: var(--nca-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid #f1f5f9;
}

.nca-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--nca-gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.nca-kpi-card:hover::before {
    transform: scaleX(1);
}

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

.nca-kpi-card.nca-kpi-warning {
    border-left: 4px solid var(--nca-warning);
}

.nca-kpi-card.nca-kpi-warning::before {
    background: var(--nca-gradient-warning);
}

.nca-kpi-card.nca-kpi-danger {
    border-left: 4px solid var(--nca-danger);
}

.nca-kpi-card.nca-kpi-danger::before {
    background: var(--nca-gradient-danger);
}

.nca-kpi-card.nca-kpi-success {
    border-left: 4px solid var(--nca-success);
}

.nca-kpi-card.nca-kpi-success::before {
    background: var(--nca-gradient-success);
}

.nca-kpi-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 26px;
    flex-shrink: 0;
    position: relative;
    box-shadow: var(--nca-shadow-colored) currentColor;
}

.nca-kpi-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 20px;
    background: inherit;
    opacity: 0.2;
    z-index: -1;
}

.nca-kpi-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nca-kpi-value {
    font-size: 32px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.nca-kpi-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.nca-kpi-content small {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.nca-kpi-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.nca-kpi-trend.up { color: var(--nca-success); }
.nca-kpi-trend.down { color: var(--nca-danger); }

/* =====================================================
   SECCIONES Y HEADERS
   ===================================================== */
.nca-section {
    margin-bottom: 28px;
}

.nca-section h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding-left: 16px;
}

.nca-section h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: var(--nca-gradient-primary);
    border-radius: 2px;
}

.nca-section h3 i {
    color: var(--nca-primary);
    font-size: 20px;
}

/* =====================================================
   GRID LAYOUT MEJORADO
   ===================================================== */
.nca-row {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.nca-col-3 { flex: 0 0 25%; max-width: 25%; }
.nca-col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.nca-col-5 { flex: 0 0 41.666%; max-width: 41.666%; }
.nca-col-6 { flex: 0 0 50%; max-width: 50%; }
.nca-col-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.nca-col-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.nca-col-9 { flex: 0 0 75%; max-width: 75%; }
.nca-col-12 { flex: 0 0 100%; max-width: 100%; }

@media (max-width: 1200px) {
    .nca-col-3, .nca-col-4, .nca-col-5 { flex: 0 0 50%; max-width: 50%; }
    .nca-col-6, .nca-col-7, .nca-col-8, .nca-col-9 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 768px) {
    .nca-row {
        flex-direction: column;
    }
    .nca-col-3, .nca-col-4, .nca-col-5, .nca-col-6, 
    .nca-col-7, .nca-col-8, .nca-col-9, .nca-col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* =====================================================
   CARDS NCA - Dise�o Premium
   ===================================================== */
.nca-card {
    background: white;
    border-radius: 20px;
    box-shadow: var(--nca-shadow);
    overflow: hidden;
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.nca-card:hover {
    box-shadow: var(--nca-shadow-md);
}

.nca-card.nca-card-warning {
    border-top: 4px solid var(--nca-warning);
}

.nca-card.nca-card-danger {
    border-top: 4px solid var(--nca-danger);
}

.nca-card.nca-card-success {
    border-top: 4px solid var(--nca-success);
}

.nca-card.nca-card-primary {
    border-top: 4px solid var(--nca-primary);
}

.nca-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

.nca-card-header h4 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.nca-card-header h4 i {
    color: var(--nca-primary);
    font-size: 18px;
}

.nca-card-body {
    padding: 24px;
}

.nca-card-body.nca-scroll {
    max-height: 450px;
    overflow-y: auto;
}

.nca-card-body.nca-scroll::-webkit-scrollbar {
    width: 6px;
}

.nca-card-body.nca-scroll::-webkit-scrollbar-thumb {
    background: var(--nca-primary-light);
    border-radius: 3px;
}

.nca-card-footer {
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* =====================================================
   PROGRAMS GRID - Tarjetas de Programas de Acreditaci�n
   ===================================================== */
.nca-programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.nca-program-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--nca-shadow);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid #f1f5f9;
}

.nca-program-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.nca-program-card:hover::before {
    opacity: 1;
}

.nca-program-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--nca-shadow-xl), var(--nca-shadow-glow);
}

.nca-program-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: white;
    position: relative;
    overflow: hidden;
}

.nca-program-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
}

.nca-program-header i {
    font-size: 28px;
    z-index: 1;
}

.nca-program-framework {
    font-size: 15px;
    font-weight: 700;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Framework Colors */
.nca-program-header.nca-jci { background: var(--nca-gradient-jci); }
.nca-program-header.nca-canada { background: var(--nca-gradient-canada); }
.nca-program-header.nca-iso { background: var(--nca-gradient-iso); }
.nca-program-header.nca-nacional { background: var(--nca-gradient-nacional); }
.nca-program-header.nca-excellence { background: var(--nca-gradient-primary); }

.nca-program-body {
    padding: 20px 24px;
}

.nca-program-body h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 14px;
    line-height: 1.3;
}

.nca-program-readiness {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

.nca-program-readiness span {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    min-width: 50px;
}

.nca-program-date {
    font-size: 13px;
    color: #64748b;
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 10px;
}

.nca-program-date i {
    color: var(--nca-primary);
}

.nca-program-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
}

/* =====================================================
   PROGRESS BARS - Barras de Progreso
   ===================================================== */
.nca-progress-bar {
    flex: 1;
    height: 10px;
    background: #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.nca-progress-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: ncaProgressShine 2s ease-in-out infinite;
}

@keyframes ncaProgressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.nca-progress-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.nca-progress-fill.nca-success { background: var(--nca-gradient-success); }
.nca-progress-fill.nca-warning { background: var(--nca-gradient-warning); }
.nca-progress-fill.nca-danger { background: var(--nca-gradient-danger); }
.nca-progress-fill.nca-primary { background: var(--nca-gradient-primary); }
.nca-progress-fill.nca-info { background: var(--nca-gradient-info); }

.nca-progress-bar-sm {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}

.nca-progress-bar-sm .nca-progress-fill {
    height: 100%;
    border-radius: 3px;
}

.nca-progress-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nca-progress-inline span {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    min-width: 50px;
}

/* =====================================================
   LISTS NCA - Listas Mejoradas
   ===================================================== */
.nca-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nca-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 8px;
    border: 1px solid transparent;
}

.nca-list-item:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #e2e8f0;
    transform: translateX(4px);
}

.nca-list-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: var(--nca-shadow-sm);
}

.nca-list-content {
    flex: 1;
    min-width: 0;
}

.nca-list-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    display: block;
    margin-bottom: 2px;
}

.nca-list-subtitle {
    font-size: 12px;
    color: #64748b;
    display: block;
}

.nca-list-badge {
    padding: 5px 12px;
    background: var(--nca-primary-bg);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nca-primary-dark);
}

.nca-list-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: column;
}

/* =====================================================
   BADGES NCA - Sistema de Etiquetas
   ===================================================== */
.nca-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #e2e8f0;
    color: #475569;
}

/* Estados de Programa */
.nca-badge-planeacion, .nca-badge-planificacion { 
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); 
    color: #1e40af; 
}
.nca-badge-preparacion { 
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); 
    color: #92400e; 
}
.nca-badge-evaluacion { 
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); 
    color: #065f46; 
}
.nca-badge-certificado { 
    background: var(--nca-gradient-success); 
    color: white; 
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.nca-badge-activo { 
    background: var(--nca-gradient-success); 
    color: white;
}
.nca-badge-suspendido, .nca-badge-cancelado { 
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); 
    color: #991b1b; 
}
.nca-badge-programado { 
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); 
    color: #1e40af; 
}
.nca-badge-en_progreso, .nca-badge-en_tratamiento, .nca-badge-en_proceso { 
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); 
    color: #92400e; 
}
.nca-badge-completado, .nca-badge-cerrado, .nca-badge-verificado { 
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); 
    color: #065f46; 
}
.nca-badge-borrador { 
    background: #f1f5f9; 
    color: #64748b; 
    border: 1px dashed #cbd5e1;
}
.nca-badge-abierto, .nca-badge-pendiente { 
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); 
    color: #991b1b; 
}
.nca-badge-verificando { 
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); 
    color: #1e40af; 
}
.nca-badge-identificado { 
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); 
    color: #92400e; 
}
.nca-badge-evaluado { 
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); 
    color: #1e40af; 
}
.nca-badge-vigente {
    background: var(--nca-gradient-success);
    color: white;
}
.nca-badge-derogada, .nca-badge-obsoleto {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
}

/* Tipos de Hallazgo */
.nca-badge-no_conformidad_mayor, .nca-badge-nc_mayor {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}
.nca-badge-no_conformidad_menor, .nca-badge-nc_menor {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
}
.nca-badge-observacion {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}
.nca-badge-ofi {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
}

/* Severidad/Criticidad */
.nca-severity-critica, .nca-badge-critico, .nca-badge-critical { 
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(153, 27, 27, 0.4);
}
.nca-severity-alta, .nca-badge-alto, .nca-badge-alta, .nca-badge-high { 
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
}
.nca-severity-media, .nca-badge-medio, .nca-badge-media, .nca-badge-medium { 
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}
.nca-severity-baja, .nca-badge-bajo, .nca-badge-baja, .nca-badge-low { 
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

/* Prioridad */
.nca-badge-prioridad-critica, .nca-badge-urgente { 
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
    color: white;
    animation: ncaBadgePulse 2s ease-in-out infinite;
}
.nca-badge-prioridad-alta { 
    background: var(--nca-gradient-danger);
    color: white;
}
.nca-badge-prioridad-media {
    background: var(--nca-gradient-warning);
    color: white;
}
.nca-badge-prioridad-baja {
    background: var(--nca-gradient-success);
    color: white;
}

@keyframes ncaBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(153, 27, 27, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(153, 27, 27, 0); }
}

/* =====================================================
   TABLES NCA - Tablas Mejoradas
   ===================================================== */
.nca-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.nca-table th {
    text-align: left;
    padding: 14px 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.nca-table th:first-child {
    border-radius: 12px 0 0 0;
}

.nca-table th:last-child {
    border-radius: 0 12px 0 0;
}

.nca-table td {
    padding: 16px 18px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #334155;
    vertical-align: middle;
}

.nca-table tr {
    transition: all 0.2s ease;
}

.nca-table tbody tr:hover {
    background: linear-gradient(90deg, var(--nca-primary-bg) 0%, transparent 100%);
}

.nca-table tbody tr:last-child td {
    border-bottom: none;
}

.nca-table-sm th,
.nca-table-sm td {
    padding: 10px 14px;
    font-size: 13px;
}

.nca-cell-title {
    font-weight: 700;
    color: #1e293b;
}

.nca-cell-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--nca-primary-dark);
}

.nca-table-container {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

/* =====================================================
   TOOLBAR NCA
   ===================================================== */
.nca-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: var(--nca-shadow-sm);
}

.nca-toolbar h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nca-toolbar h3 i {
    color: var(--nca-primary);
}

.nca-toolbar-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.nca-filters {
    display: flex;
    gap: 12px;
    align-items: center;
}

.nca-filters select,
.nca-filters input {
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    min-width: 160px;
    transition: all 0.2s ease;
    background: white;
}

.nca-filters select:focus,
.nca-filters input:focus {
    outline: none;
    border-color: var(--nca-primary);
    box-shadow: 0 0 0 3px var(--nca-primary-bg);
}

.nca-search-box {
    position: relative;
}

.nca-search-box input {
    padding-left: 40px;
    min-width: 250px;
}

.nca-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

/* =====================================================
   FRAMEWORKS GRID - Cat�logo de Marcos
   ===================================================== */
.nca-frameworks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 28px;
}

.nca-framework-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--nca-shadow);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #f1f5f9;
}

.nca-framework-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--nca-shadow-xl);
}

.nca-framework-header {
    padding: 32px 28px;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.nca-framework-header::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
    animation: ncaFrameworkShine 3s ease-in-out infinite;
}

@keyframes ncaFrameworkShine {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20%, 20%); }
}

.nca-framework-header i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    position: relative;
    z-index: 1;
}

.nca-framework-header h4 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.nca-framework-header p {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

/* Framework Header Colors */
.nca-framework-header.nca-jci { background: var(--nca-gradient-jci); }
.nca-framework-header.nca-canada { background: var(--nca-gradient-canada); }
.nca-framework-header.nca-iso { background: var(--nca-gradient-iso); }
.nca-framework-header.nca-nacional { background: var(--nca-gradient-nacional); }
.nca-framework-header.nca-excellence { background: var(--nca-gradient-primary); }

.nca-framework-body {
    padding: 28px;
}

.nca-framework-body > p {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.nca-framework-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 16px;
}

.nca-stat {
    text-align: center;
}

.nca-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--nca-primary);
    line-height: 1.2;
}

.nca-stat-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.nca-framework-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: #64748b;
}

.nca-framework-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nca-framework-meta i {
    color: var(--nca-primary);
}

.nca-framework-footer {
    padding: 20px 28px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafbfc;
}

/* =====================================================
   ASSESSMENTS GRID - Evaluaciones
   ===================================================== */
.nca-assessments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.nca-assessment-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--nca-shadow);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #f1f5f9;
    position: relative;
    overflow: hidden;
}

.nca-assessment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--nca-gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.nca-assessment-card:hover::before {
    transform: scaleX(1);
}

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

.nca-assessment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.nca-assessment-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--nca-primary);
    padding: 4px 10px;
    background: var(--nca-primary-bg);
    border-radius: 6px;
}

.nca-assessment-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    line-height: 1.3;
}

.nca-assessment-card p {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 0;
}

.nca-score-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    position: relative;
}

.nca-score-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(var(--nca-primary) var(--score, 0%), #e2e8f0 0%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nca-score-ring::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
}

.nca-score-value {
    font-size: 38px;
    font-weight: 800;
    color: var(--nca-primary);
    position: relative;
    z-index: 1;
}

.nca-score-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 10px;
}

.nca-score-large {
    text-align: center;
    padding: 24px;
    background: var(--nca-primary-bg);
    border-radius: 16px;
    margin: 16px 0;
}

.nca-score-large .nca-score-value {
    font-size: 48px;
    display: block;
    margin-bottom: 8px;
}

.nca-assessment-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
    margin-top: 16px;
}

.nca-assessment-stats span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.nca-assessment-stats span i {
    font-size: 14px;
}

.nca-assessment-stats-detail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.nca-assessment-stats-detail div {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

/* =====================================================
   FINDINGS - Hallazgos de Auditor�a
   ===================================================== */
.nca-findings-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nca-finding-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--nca-shadow);
    border-left: 5px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nca-finding-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8));
    pointer-events: none;
}

.nca-finding-card:hover {
    transform: translateX(4px);
    box-shadow: var(--nca-shadow-md);
}

.nca-finding-card.nca-finding-critica { 
    border-left-color: var(--nca-risk-critical); 
    background: linear-gradient(90deg, rgba(153,27,27,0.03) 0%, white 50%);
}
.nca-finding-card.nca-finding-alta { 
    border-left-color: var(--nca-danger); 
    background: linear-gradient(90deg, rgba(239,68,68,0.03) 0%, white 50%);
}
.nca-finding-card.nca-finding-media { 
    border-left-color: var(--nca-warning); 
    background: linear-gradient(90deg, rgba(245,158,11,0.03) 0%, white 50%);
}
.nca-finding-card.nca-finding-baja { 
    border-left-color: var(--nca-success); 
    background: linear-gradient(90deg, rgba(16,185,129,0.03) 0%, white 50%);
}

.nca-finding-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.nca-finding-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 6px;
}

.nca-finding-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    line-height: 1.4;
}

.nca-finding-card > p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.6;
}

.nca-finding-meta {
    display: flex;
    gap: 24px;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 18px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.nca-finding-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nca-finding-meta i {
    color: var(--nca-primary);
    font-size: 14px;
}

.nca-finding-actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
}

/* =====================================================
   RISKS - Gesti�n de Riesgos NCA
   ===================================================== */
.nca-risks-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nca-risk-item {
    display: flex;
    gap: 18px;
    padding: 20px;
    background: white;
    border-radius: 16px;
    box-shadow: var(--nca-shadow);
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
}

.nca-risk-item:hover {
    transform: translateX(4px);
    box-shadow: var(--nca-shadow-md);
}

.nca-risk-level {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    font-weight: 800;
    flex-shrink: 0;
    position: relative;
}

.nca-risk-level::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: inherit;
    opacity: 0.3;
    z-index: -1;
}

.nca-risk-level.critical { background: var(--nca-gradient-danger); }
.nca-risk-level.high { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); }
.nca-risk-level.medium { background: var(--nca-gradient-warning); }
.nca-risk-level.low { background: var(--nca-gradient-success); }

.nca-risk-content {
    flex: 1;
    min-width: 0;
}

.nca-risk-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.nca-risk-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 4px;
}

.nca-risk-content h5 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
    line-height: 1.4;
}

.nca-risk-content > p {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 12px;
}

.nca-risk-scores {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #64748b;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 10px;
}

.nca-risk-scores span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nca-risk-scores strong {
    color: #1e293b;
}

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

/* =====================================================
   HEATMAP - Mapa de Calor de Riesgos
   ===================================================== */
.nca-heatmap {
    padding: 24px;
}

.nca-heatmap-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nca-heatmap-ylabel {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-right: 12px;
}

.nca-heatmap-xlabel {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-top: 12px;
}

.nca-heatmap-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nca-heatmap-header,
.nca-heatmap-row {
    display: flex;
    gap: 6px;
}

.nca-heatmap-header div,
.nca-heatmap-row div {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.nca-heatmap-label {
    color: #64748b;
    font-size: 12px;
}

.nca-heatmap-cell {
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: white;
    position: relative;
    box-shadow: var(--nca-shadow-sm);
}

.nca-heatmap-cell:hover {
    transform: scale(1.15);
    z-index: 10;
    box-shadow: var(--nca-shadow-lg);
}

.nca-heatmap-cell.empty {
    background: #f1f5f9;
    color: #cbd5e1;
}

/* Colores del Heatmap */
.nca-heatmap-cell.critical { background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%); }
.nca-heatmap-cell.high { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
.nca-heatmap-cell.medium-high { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.nca-heatmap-cell.medium { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.nca-heatmap-cell.low-medium { background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%); }
.nca-heatmap-cell.low { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }

.nca-heatmap-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.nca-heatmap-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
}

.nca-heatmap-legend-color {
    width: 20px;
    height: 20px;
    border-radius: 6px;
}

/* =====================================================
   ACTION PLANS - Planes de Acci�n
   ===================================================== */
.nca-actions-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
}

.nca-action-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--nca-shadow);
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
    position: relative;
}

.nca-action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--nca-gradient-primary);
    border-radius: 20px 20px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nca-action-card:hover::before {
    opacity: 1;
}

.nca-action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nca-shadow-lg);
}

.nca-action-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.nca-action-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    line-height: 1.4;
}

.nca-action-card > p {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 16px;
}

.nca-action-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.nca-action-progress .nca-progress-bar {
    flex: 1;
}

.nca-action-progress span {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    min-width: 50px;
    text-align: right;
}

.nca-action-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 18px;
}

.nca-action-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nca-action-meta i {
    color: var(--nca-primary);
    font-size: 14px;
}

.nca-action-footer {
    display: flex;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px dashed #e2e8f0;
}

.nca-action-items {
    margin-top: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.nca-action-items h5 {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.nca-action-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

.nca-action-item-row:last-child {
    border-bottom: none;
}

/* =====================================================
   REGULATORY CHANGES - Cambios Normativos
   ===================================================== */
.nca-changes-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nca-change-item {
    padding: 20px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: 16px;
    border-left: 4px solid var(--nca-warning);
    transition: all 0.3s ease;
}

.nca-change-item:hover {
    transform: translateX(4px);
    box-shadow: var(--nca-shadow);
}

.nca-change-item.analyzed {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-left-color: var(--nca-success);
}

.nca-change-item.urgent {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-left-color: var(--nca-danger);
    animation: ncaChangeUrgent 2s ease-in-out infinite;
}

@keyframes ncaChangeUrgent {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 20px 0 rgba(239, 68, 68, 0.2); }
}

.nca-change-header {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    align-items: center;
}

.nca-change-item h5 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
    line-height: 1.4;
}

.nca-change-item > p {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 12px;
}

.nca-change-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #92400e;
    margin: 12px 0;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

.nca-change-date i {
    color: var(--nca-warning);
}

.nca-change-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

/* =====================================================
   EVIDENCE PACKAGES - Paquetes de Evidencia
   ===================================================== */
.nca-packages-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nca-package-item {
    padding: 20px;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.nca-package-item:hover {
    box-shadow: var(--nca-shadow);
    border-color: var(--nca-primary-light);
}

.nca-package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.nca-package-header code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: var(--nca-primary-bg);
    color: var(--nca-primary-dark);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.nca-package-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nca-package-info h5 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.nca-package-info span {
    font-size: 13px;
    color: #64748b;
}

.nca-package-stats {
    display: flex;
    gap: 24px;
    font-size: 13px;
    color: #64748b;
    margin-top: 14px;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 12px;
}

.nca-package-stats span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nca-package-stats i {
    color: var(--nca-primary);
}

.nca-package-progress {
    margin-top: 14px;
}

.nca-package-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}

.nca-package-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

/* =====================================================
   EMPTY & ERROR STATES
   ===================================================== */
.nca-empty {
    text-align: center;
    padding: 60px 40px;
    color: #94a3b8;
}

.nca-empty i {
    font-size: 56px;
    margin-bottom: 20px;
    color: #e2e8f0;
    display: block;
}

.nca-empty p {
    font-size: 15px;
    margin-bottom: 20px;
}

.nca-empty .btn {
    margin-top: 10px;
}

.nca-error {
    text-align: center;
    padding: 60px 40px;
    color: var(--nca-danger);
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 16px;
    border: 1px solid #fecaca;
}

.nca-error i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

/* =====================================================
   MODAL NCA - Sistema de Modales
   ===================================================== */
.nca-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.nca-modal-overlay.active {
    display: flex;
    animation: ncaModalOverlayIn 0.3s ease;
}

@keyframes ncaModalOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.nca-modal {
    background: white;
    border-radius: 24px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--nca-shadow-xl), 0 0 50px rgba(31, 107, 167, 0.15);
    position: relative;
    animation: ncaModalIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ncaModalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.nca-modal-sm { width: 100%; max-width: 420px; }
.nca-modal-md { width: 100%; max-width: 600px; }
.nca-modal-lg { width: 100%; max-width: 850px; }
.nca-modal-xl { width: 100%; max-width: 1100px; }

.nca-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255,255,255,0.95);
    border-radius: 12px;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: var(--nca-shadow);
    color: #64748b;
}

.nca-modal-close:hover {
    background: var(--nca-danger-light);
    color: var(--nca-danger);
    transform: rotate(90deg);
}

.nca-modal-header {
    padding: 28px 32px;
    color: white;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
}

.nca-modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
}

.nca-modal-header.nca-primary { background: var(--nca-gradient-primary); }
.nca-modal-header.nca-success { background: var(--nca-gradient-success); }
.nca-modal-header.nca-warning { background: var(--nca-gradient-warning); }
.nca-modal-header.nca-danger { background: var(--nca-gradient-danger); }
.nca-modal-header.nca-info { background: var(--nca-gradient-info); }

.nca-modal-header i {
    font-size: 32px;
    position: relative;
    z-index: 1;
}

.nca-modal-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.nca-modal-body {
    padding: 28px 32px;
}

.nca-modal-body h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 24px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nca-modal-body h4:first-child {
    margin-top: 0;
}

.nca-modal-body h4 i {
    color: var(--nca-primary);
}

.nca-modal-body h5 {
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    margin: 20px 0 12px;
}

.nca-modal-footer {
    padding: 20px 32px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    background: #fafbfc;
    border-radius: 0 0 24px 24px;
}

/* Form Modal NCA */
.nca-form-modal {
    padding: 32px;
}

.nca-form-modal h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 28px;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f1f5f9;
}

.nca-form-modal h3 i {
    color: var(--nca-primary);
    font-size: 26px;
}

.nca-form-modal .text-muted {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 20px;
}

.nca-form-modal .form-group {
    margin-bottom: 20px;
}

.nca-form-modal label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.nca-form-modal .form-control {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.nca-form-modal .form-control:focus {
    outline: none;
    border-color: var(--nca-primary);
    box-shadow: 0 0 0 4px var(--nca-primary-bg);
}

.nca-form-modal .form-control::placeholder {
    color: #94a3b8;
}

.nca-form-modal select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 44px;
}

.nca-form-modal textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.nca-form-modal .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.nca-form-modal .form-row .form-group {
    margin-bottom: 0;
}

.nca-form-modal .col-md-4 { grid-column: span 1; }
.nca-form-modal .col-md-6 { grid-column: span 1; }
.nca-form-modal .col-md-8 { grid-column: span 2; }

.nca-form-modal .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    padding: 14px 18px;
    background: #f8fafc;
    border-radius: 12px;
}

.nca-form-modal .form-check-input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--nca-primary);
}

.nca-form-modal .form-check-label {
    font-size: 14px;
    color: #334155;
    margin-bottom: 0;
    cursor: pointer;
}

@media (max-width: 600px) {
    .nca-form-modal .form-row {
        grid-template-columns: 1fr;
    }
    .nca-form-modal .col-md-4,
    .nca-form-modal .col-md-6,
    .nca-form-modal .col-md-8 {
        grid-column: span 1;
    }
}

/* =====================================================
   CHAPTERS & REQUIREMENTS - Cap�tulos y Requisitos
   ===================================================== */
.nca-chapters-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.nca-chapter {
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.nca-chapter:hover {
    border-color: var(--nca-primary-light);
    box-shadow: var(--nca-shadow);
}

.nca-chapter-header {
    padding: 18px 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nca-chapter-header:hover {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
}

.nca-chapter-header i {
    color: var(--nca-primary);
    font-size: 18px;
    transition: transform 0.3s ease;
}

.nca-chapter.expanded .nca-chapter-header i {
    transform: rotate(90deg);
}

.nca-chapter-header span {
    flex: 1;
    font-size: 15px;
    color: #1e293b;
}

.nca-chapter-count {
    background: var(--nca-primary-bg);
    color: var(--nca-primary-dark);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.nca-requirements-list {
    padding: 16px 20px;
    display: none;
}

.nca-chapter.expanded .nca-requirements-list {
    display: block;
}

.nca-requirement {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
}

.nca-requirement:last-child {
    border-bottom: none;
}

.nca-requirement:hover {
    background: #f8fafc;
}

.nca-req-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    background: #e2e8f0;
    color: #475569;
    padding: 5px 10px;
    border-radius: 8px;
    flex-shrink: 0;
}

.nca-req-title {
    flex: 1;
    font-size: 14px;
    color: #334155;
    line-height: 1.4;
}

.nca-req-criticality {
    flex-shrink: 0;
}

.nca-requirements-manager {
    padding: 24px;
}

.nca-requirements-manager .nca-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin-bottom: 20px;
    background: none;
    color: #1e293b;
}

/* =====================================================
   INFO ROWS & DETAILS
   ===================================================== */
.nca-info-row {
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.nca-info-row:last-child {
    border-bottom: none;
}

.nca-info-row strong {
    color: #64748b;
    font-weight: 600;
    min-width: 140px;
    flex-shrink: 0;
}

.nca-info-row span {
    color: #1e293b;
}

.nca-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin: 20px 0;
    padding: 20px;
    background: #f8fafc;
    border-radius: 16px;
}

.nca-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nca-detail-item label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.nca-detail-item span {
    font-size: 15px;
    color: #1e293b;
    font-weight: 600;
}

/* =====================================================
   WORKSTREAMS & TASKS
   ===================================================== */
.nca-workstreams {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nca-workstream {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 4px solid var(--nca-primary);
    transition: all 0.2s ease;
}

.nca-workstream:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

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

.nca-workstream-info h5 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.nca-workstream-info span {
    font-size: 12px;
    color: #64748b;
}

.nca-tasks-mini {
    max-height: 250px;
    overflow-y: auto;
}

.nca-task-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}

.nca-task-row:hover {
    background: #f8fafc;
}

.nca-task-row:last-child {
    border-bottom: none;
}

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

.nca-task-title {
    font-size: 14px;
    color: #334155;
    font-weight: 500;
}

.nca-task-meta {
    font-size: 12px;
    color: #64748b;
}

.nca-tasks-table {
    max-height: 350px;
    overflow-y: auto;
}

/* =====================================================
   GANTT CHART - Diagrama de Gantt Simplificado
   ===================================================== */
.nca-gantt-container {
    padding: 20px;
    background: #f8fafc;
    border-radius: 16px;
    margin-bottom: 24px;
    overflow-x: auto;
}

.nca-gantt-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.nca-gantt-simple {
    min-width: 700px;
}

.nca-gantt-header,
.nca-gantt-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    min-width: 700px;
}

.nca-gantt-header {
    padding-bottom: 14px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 12px;
}

.nca-gantt-task-col {
    font-size: 13px;
    padding: 10px 0;
    font-weight: 600;
    color: #1e293b;
}

.nca-gantt-header .nca-gantt-task-col {
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.nca-gantt-timeline {
    display: flex;
    position: relative;
    background: #e2e8f0;
    border-radius: 8px;
    height: 36px;
    align-items: center;
}

.nca-gantt-header .nca-gantt-timeline {
    background: transparent;
    height: auto;
    padding: 10px 0;
}

.nca-gantt-date {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.nca-gantt-bar {
    position: absolute;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 11px;
    color: white;
    font-weight: 600;
    box-shadow: var(--nca-shadow-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.nca-gantt-bar:hover {
    transform: scaleY(1.2);
    box-shadow: var(--nca-shadow);
}

.nca-gantt-bar.completed { background: var(--nca-gradient-success); }
.nca-gantt-bar.in-progress { background: var(--nca-gradient-info); }
.nca-gantt-bar.pending { background: var(--nca-gradient-warning); }
.nca-gantt-bar.overdue { background: var(--nca-gradient-danger); }
.nca-gantt-bar.milestone { 
    background: var(--nca-gradient-primary); 
    width: 12px !important;
    border-radius: 50%;
    height: 24px;
}

.nca-gantt-progress {
    height: 100%;
    background: rgba(255,255,255,0.3);
    border-radius: 6px;
}

/* =====================================================
   RISK LEVEL DISPLAY & MATRIX
   ===================================================== */
.nca-risk-level-display {
    text-align: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    margin: 16px 0;
}

.nca-risk-level-display .nca-badge {
    font-size: 14px;
    padding: 8px 16px;
}

.nca-risk-matrix {
    margin-top: 20px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 16px;
}

.nca-risk-matrix h5 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nca-risk-matrix h5 i {
    color: var(--nca-primary);
}

/* =====================================================
   FILTER INFO
   ===================================================== */
.nca-filter-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--nca-primary-bg);
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--nca-primary-dark);
    font-weight: 600;
}

.nca-filter-info i {
    margin-right: 8px;
}

/* =====================================================
   NOTIFICATIONS NCA
   ===================================================== */
.nca-notification {
    position: fixed;
    top: 24px;
    right: 24px;
    padding: 18px 28px;
    border-radius: 16px;
    box-shadow: var(--nca-shadow-xl);
    z-index: 10001;
    animation: ncaNotificationIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 420px;
}

@keyframes ncaNotificationIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.nca-notification.nca-notification-out {
    animation: ncaNotificationOut 0.3s ease forwards;
}

@keyframes ncaNotificationOut {
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

.nca-notification.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.nca-notification.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.nca-notification.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.nca-notification.info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.nca-notification i {
    font-size: 22px;
    flex-shrink: 0;
}

.nca-notification span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* =====================================================
   BUTTONS NCA
   ===================================================== */
.nca-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
}

.nca-btn i {
    font-size: 14px;
}

.nca-btn-primary {
    background: var(--nca-gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.3);
}

.nca-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.4);
}

.nca-btn-success {
    background: var(--nca-gradient-success);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.nca-btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.nca-btn-warning {
    background: var(--nca-gradient-warning);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.nca-btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.nca-btn-danger {
    background: var(--nca-gradient-danger);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.nca-btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.nca-btn-outline {
    background: white;
    color: var(--nca-primary);
    border: 2px solid var(--nca-primary);
}

.nca-btn-outline:hover {
    background: var(--nca-primary-bg);
}

.nca-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.nca-btn-lg {
    padding: 14px 24px;
    font-size: 15px;
}

.nca-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
}

.nca-btn-icon i {
    margin: 0;
}

/* =====================================================
   EVIDENCE SOURCE TOGGLE
   ===================================================== */
.nca-evidence-source {
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 2px dashed #e2e8f0;
}

.nca-evidence-source.active {
    border-color: var(--nca-primary);
    background: var(--nca-primary-bg);
}

/* =====================================================
   REGULATION DETAIL
   ===================================================== */
.nca-regulation-detail {
    padding: 0;
}

.nca-regulation-detail .nca-modal-header {
    justify-content: space-between;
}

.nca-regulation-detail .nca-modal-body {
    padding: 28px;
}

.nca-regulation-detail .nca-modal-body h4 {
    font-size: 18px;
    margin-bottom: 16px;
}

/* =====================================================
   COMMITTEE INTEGRATION
   ===================================================== */
.nca-committee-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 12px;
    margin-top: 16px;
    border-left: 4px solid var(--nca-success);
}

.nca-committee-link i {
    font-size: 20px;
    color: var(--nca-success);
}

.nca-committee-link-info {
    flex: 1;
}

.nca-committee-link-info h5 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 2px;
}

.nca-committee-link-info span {
    font-size: 12px;
    color: #64748b;
}

/* =====================================================
   RESPONSIVE AJUSTES FINALES
   ===================================================== */
@media (max-width: 1024px) {
    .nca-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nca-programs-grid,
    .nca-frameworks-grid,
    .nca-assessments-grid {
        grid-template-columns: 1fr;
    }
    
    .nca-actions-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nca-main-tabs {
        gap: 8px;
    }
    
    .nca-tab-btn {
        padding: 10px 14px;
        font-size: 12px;
    }
    
    .nca-tab-btn span {
        display: none;
    }
    
    .nca-kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .nca-kpi-card {
        padding: 18px;
    }
    
    .nca-kpi-value {
        font-size: 26px;
    }
    
    .nca-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .nca-toolbar-actions {
        flex-wrap: wrap;
    }
    
    .nca-filters {
        flex-wrap: wrap;
    }
    
    .nca-finding-meta,
    .nca-action-meta {
        grid-template-columns: 1fr;
    }
    
    .nca-modal {
        margin: 10px;
        border-radius: 20px;
    }
    
    .nca-form-modal {
        padding: 20px;
    }
    
    .nca-notification {
        left: 16px;
        right: 16px;
        max-width: none;
    }
    
    .nca-heatmap-cell {
        width: 45px !important;
        height: 45px !important;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .nca-tab-btn {
        padding: 8px 10px;
    }
    
    .nca-card-body {
        padding: 16px;
    }
    
    .nca-program-card,
    .nca-finding-card,
    .nca-action-card {
        padding: 16px;
    }
    
    .nca-form-modal h3 {
        font-size: 18px;
    }
    
    .nca-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   ANIMACIONES ADICIONALES
   ===================================================== */
@keyframes ncaSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes ncaScaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes ncaShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.nca-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: ncaShimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

.nca-skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}

.nca-skeleton-title {
    height: 20px;
    width: 60%;
    margin-bottom: 12px;
}

.nca-skeleton-card {
    height: 200px;
    border-radius: 16px;
}

/* Print Styles */
@media print {
    .nca-main-tabs,
    .nca-toolbar-actions,
    .nca-btn,
    .nca-modal-overlay {
        display: none !important;
    }
    
    .nca-card {
        box-shadow: none;
        border: 1px solid #e2e8f0;
        page-break-inside: avoid;
    }
    
    .nca-tab-content {
        display: block !important;
    }
}

/* =====================================================
   M�DULO INNO - ONE MEDITEL LATAM INNOVATION PLATFORM
   Dise�o Premium con Glassmorphism y efectos modernos
   ===================================================== */

:root {
    /* Paleta de colores INNO */
    --inno-primary: #2482B8;
    --inno-primary-light: #84CCD5;
    --inno-primary-dark: #1F6BA7;
    --inno-secondary: #06b6d4;
    --inno-success: #10b981;
    --inno-warning: #f59e0b;
    --inno-danger: #ef4444;
    --inno-info: #3b82f6;
    
    /* Gradientes */
    --inno-gradient: linear-gradient(135deg, #2482B8 0%, #2482B8 50%, #1F6BA7 100%);
    --inno-gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --inno-gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    --inno-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --inno-gradient-warm: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --inno-gradient-cool: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --inno-gradient-mesh: radial-gradient(at 40% 20%, hsla(268, 82%, 70%, 0.15) 0px, transparent 50%), 
                          radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.1) 0px, transparent 50%),
                          radial-gradient(at 0% 50%, hsla(355, 85%, 93%, 0.1) 0px, transparent 50%);
    
    /* Sombras */
    --inno-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --inno-shadow-sm: 0 2px 8px rgba(31, 107, 167, 0.08);
    --inno-shadow: 0 4px 14px rgba(31, 107, 167, 0.12);
    --inno-shadow-lg: 0 10px 30px rgba(31, 107, 167, 0.18);
    --inno-shadow-xl: 0 20px 50px rgba(31, 107, 167, 0.25);
    --inno-shadow-glow: 0 0 40px rgba(31, 107, 167, 0.3);
    
    /* Glass effect */
    --inno-glass-bg: rgba(255, 255, 255, 0.7);
    --inno-glass-border: rgba(255, 255, 255, 0.3);
    --inno-glass-blur: blur(20px);
}

/* Secci�n principal INNO - Background con mesh gradient */
#innovation {
    background: var(--inno-gradient-mesh), linear-gradient(180deg, #eff6ff 0%, #e6f4fb 50%, #D7EBEA 100%);
    min-height: 100vh;
}

#innovation .header {
    background: var(--inno-glass-bg);
    backdrop-filter: var(--inno-glass-blur);
    -webkit-backdrop-filter: var(--inno-glass-blur);
    border-bottom: 1px solid var(--inno-glass-border);
    margin: -30px -30px 0;
    padding: 24px 30px;
    position: sticky;
    top: 0;
    z-index: 100;
}

#innovation .header h1 {
    background: var(--inno-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tabs principales INNO - Dise�o Premium */
.inno-main-tabs {
    display: flex;
    gap: 12px;
    padding: 24px 0;
    margin-bottom: 24px;
    flex-wrap: wrap;
    position: relative;
}

.inno-main-tabs::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--inno-primary) 0%, var(--inno-secondary) 50%, var(--inno-primary-light) 100%);
    border-radius: 3px;
    opacity: 0.2;
}

.inno-main-tabs::after {
    display: none;
}

.inno-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--inno-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(31, 107, 167, 0.1);
    border-radius: 14px;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.inno-tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--inno-gradient);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.inno-tab-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.6s ease;
}

.inno-tab-btn:hover::after {
    transform: rotate(45deg) translateX(100%);
}

.inno-tab-btn:hover {
    background: rgba(31, 107, 167, 0.08);
    border-color: var(--inno-primary-light);
    color: var(--inno-primary-dark);
    transform: translateY(-3px);
    box-shadow: var(--inno-shadow);
}

.inno-tab-btn.active {
    background: transparent;
    border-color: transparent;
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--inno-shadow-lg);
}

.inno-tab-btn.active::before {
    opacity: 1;
}

.inno-tab-btn i {
    font-size: 16px;
    transition: all 0.3s ease;
}

.inno-tab-btn:hover i {
    transform: scale(1.15) rotate(-5deg);
}

.inno-tab-btn.active i {
    animation: innoIconPop 0.5s ease;
}

@keyframes innoIconPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Contenido tabs INNO con animaciones premium fluidas */
.inno-content-wrapper {
    min-height: 600px;
    position: relative;
}

.inno-tab-content {
    display: none;
    will-change: opacity, transform;
}

.inno-tab-content.active {
    display: block;
    animation: innoSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.inno-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    color: #64748b;
    gap: 24px;
}

.inno-loading i {
    color: var(--inno-primary);
    animation: innoSpin 1s linear infinite;
}

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

.inno-loading p {
    font-size: 15px;
    font-weight: 500;
}

/* Filtros INNO - Dise�o Glass */
.inno-filters-bar {
    background: var(--inno-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 20px 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: var(--inno-shadow-sm);
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
    border: 1px solid var(--inno-glass-border);
}

.inno-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inno-filter-group label {
    font-size: 11px;
    color: var(--inno-primary-dark);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.inno-filter-group select {
    padding: 12px 16px;
    border: 2px solid rgba(31, 107, 167, 0.15);
    border-radius: 10px;
    min-width: 170px;
    font-size: 14px;
    color: #1e293b;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.inno-filter-group select:hover {
    border-color: var(--inno-primary-light);
    box-shadow: var(--inno-shadow-xs);
}

.inno-filter-group select:focus {
    outline: none;
    border-color: var(--inno-primary);
    box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.15);
}

/* KPI Cards INNO - Dise�o Premium con Glassmorphism */
.inno-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.inno-kpi-card {
    background: white;
    border-radius: 20px;
    box-shadow: var(--inno-shadow-sm);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(31, 107, 167, 0.08);
    position: relative;
    overflow: hidden;
}

.inno-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--inno-gradient);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.inno-kpi-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--inno-shadow-lg);
    border-color: rgba(31, 107, 167, 0.2);
}

.inno-kpi-card:hover::before {
    transform: scaleX(1);
}

.inno-kpi-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    position: relative;
}

.inno-kpi-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: inherit;
    opacity: 0.3;
    filter: blur(8px);
    z-index: -1;
}

.inno-kpi-content .inno-kpi-value {
    font-size: 32px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.inno-kpi-content .inno-kpi-label {
    font-size: 13px;
    color: #64748b;
    margin-top: 6px;
    font-weight: 500;
}

/* Dashboard Grid INNO */
.inno-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.inno-dashboard-grid .inno-card-large {
    grid-column: span 2;
}

@media (max-width: 1200px) {
    .inno-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .inno-dashboard-grid .inno-card-large {
        grid-column: span 1;
    }
}

/* Cards INNO - Dise�o Premium con Animaciones Fluidas */
.inno-card {
    background: white;
    border-radius: 20px;
    box-shadow: var(--inno-shadow-sm);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s ease;
    border: 1px solid rgba(31, 107, 167, 0.06);
    animation: innoCardEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
    will-change: transform, box-shadow;
}

.inno-card:hover {
    box-shadow: var(--inno-shadow);
    border-color: rgba(31, 107, 167, 0.12);
    transform: translateY(-4px);
}

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

.inno-card .card-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(31, 107, 167, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, rgba(31, 107, 167, 0.03) 0%, transparent 100%);
}

.inno-card .card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inno-card .card-body {
    padding: 24px;
}

/* Country Cards - Dise�o Premium */
.inno-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.inno-country-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.03) 0%, rgba(36, 130, 184, 0.03) 100%);
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(31, 107, 167, 0.08);
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

.inno-country-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(31, 107, 167, 0.1), transparent);
    transition: left 0.6s ease;
}

.inno-country-card:hover::before {
    left: 100%;
}

.inno-country-card:hover {
    background: white;
    border-color: var(--inno-primary);
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--inno-shadow-lg);
}

.inno-country-flag {
    font-size: 48px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
    transition: transform 0.3s ease;
}

.inno-country-card:hover .inno-country-flag {
    transform: scale(1.1) rotate(-5deg);
}

.inno-country-name {
    font-weight: 700;
    font-size: 18px;
    color: #1e293b;
}

.inno-country-total {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.inno-country-stages {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.inno-mini-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.inno-mini-badge:hover {
    transform: scale(1.2);
}

/* Stage Pipeline - Dise�o Premium */
.inno-stage-pipeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 30px 16px;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.02) 0%, rgba(6, 182, 212, 0.02) 100%);
    border-radius: 16px;
    margin: -24px;
}

.inno-stage-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.inno-stage-item:hover {
    transform: translateY(-4px);
}

.inno-stage-bubble {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    font-weight: 800;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    position: relative;
}

.inno-stage-bubble::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    filter: blur(12px);
    transition: opacity 0.3s ease;
    z-index: -1;
}

.inno-stage-item:hover .inno-stage-bubble {
    transform: scale(1.15);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

.inno-stage-item:hover .inno-stage-bubble::after {
    opacity: 0.4;
}

.inno-stage-label {
    font-size: 13px;
    color: #64748b;
    text-align: center;
    font-weight: 600;
    transition: color 0.3s ease;
}

.inno-stage-item:hover .inno-stage-label {
    color: var(--inno-primary);
}

.inno-stage-arrow {
    font-size: 16px;
    color: #84CCD5;
    opacity: 0.6;
    animation: innoPulseArrow 2s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
}

.inno-stage-arrow i {
    transition: all 0.3s ease;
}

@keyframes innoPulseArrow {
    0%, 100% { opacity: 0.4; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(6px); }
}

/* Badges INNO - Dise�o Premium */
.inno-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.inno-stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}.inno-stage-badge .stage-number {
    background: rgba(255,255,255,0.35);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
}

/* Portfolio Grid - Dise�o Premium */
.inno-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.inno-project-card {
    background: white;
    border-radius: 20px;
    box-shadow: var(--inno-shadow-sm);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(31, 107, 167, 0.06);
    position: relative;
}

.inno-project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--inno-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.inno-project-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--inno-shadow-xl);
    border-color: var(--inno-primary);
}

.inno-project-card .card-header {
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.inno-project-card .card-body {
    padding: 22px;
    position: relative;
    z-index: 1;
    background: white;
}

.inno-project-card .project-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #1e293b;
    line-height: 1.3;
}

.inno-project-card .project-description {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.inno-project-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    font-size: 13px;
}

.inno-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inno-meta-label {
    color: #94a3b8;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.inno-meta-value {
    font-weight: 600;
    color: #1e293b;
}

/* Gates pendientes - Dise�o Premium */
.inno-gate-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.inno-gate-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.03) 0%, rgba(36, 130, 184, 0.02) 100%);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.4s ease;
    border: 1px solid rgba(31, 107, 167, 0.08);
}

.inno-gate-item:hover {
    background: white;
    box-shadow: var(--inno-shadow);
    border-color: var(--inno-primary-light);
    transform: translateX(8px);
}

.inno-gate-code {
    font-weight: 700;
    color: var(--inno-primary);
    min-width: 110px;
    font-size: 14px;
    font-family: 'Monaco', 'Consolas', monospace;
}

.inno-gate-info {
    flex: 1;
}

.inno-gate-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 15px;
}

.inno-gate-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: #64748b;
    margin-top: 6px;
    font-weight: 500;
}

.inno-gate-days.overdue {
    color: var(--inno-danger);
    font-weight: 700;
    animation: innoBlink 1.5s ease-in-out infinite;
}

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

/* Project 360 View */
.inno-project-header {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-left: 5px solid var(--inno-primary);
}

.inno-project-identity {
    margin-top: 12px;
}

.inno-project-identity .project-code {
    font-size: 14px;
    color: var(--inno-primary);
    font-weight: 600;
}

.inno-project-identity h1 {
    margin: 8px 0;
    font-size: 24px;
    color: #1e293b;
}

.inno-project-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Stage-Gate Tracker */
.inno-stage-tracker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 24px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}

.inno-tracker-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.inno-tracker-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
}

.inno-tracker-node.pending .inno-tracker-circle {
    background: #e2e8f0;
    color: #94a3b8;
}

.inno-tracker-node.active .inno-tracker-circle {
    box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.3);
}

.inno-tracker-info {
    text-align: center;
}

.inno-tracker-info .stage-name {
    font-size: 12px;
    color: #64748b;
}

.inno-tracker-info .stage-current {
    display: block;
    font-size: 10px;
    color: var(--inno-primary);
    font-weight: 600;
}

.inno-tracker-connector {
    width: 40px;
    height: 3px;
    background: #e2e8f0;
    border-radius: 2px;
}

/* Challenges - Dise�o Premium */
.inno-challenges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 28px;
}

.inno-challenge-card {
    background: white;
    border-radius: 24px;
    box-shadow: var(--inno-shadow-sm);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(31, 107, 167, 0.06);
}

.inno-challenge-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: var(--inno-shadow-xl);
    border-color: var(--inno-primary-light);
}

.inno-challenge-banner {
    height: 180px;
    background: var(--inno-gradient-hero);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.inno-challenge-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.85) 100%);
}

.inno-challenge-banner::before {
    content: '??';
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 64px;
    opacity: 0.2;
    transform: rotate(-10deg);
    z-index: 1;
}

.inno-challenge-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
    animation: shimmerBanner 3s infinite;
}

@keyframes shimmerBanner {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.inno-challenge-status {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.inno-challenge-content {
    padding: 28px;
}

.inno-challenge-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.3;
}

.inno-challenge-subtitle {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--inno-primary);
    font-weight: 600;
}

.inno-challenge-problem {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px;
    line-height: 1.7;
}

.inno-challenge-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.inno-challenge-meta .inno-stat-mini {
    flex: 1;
    min-width: 140px;
    padding: 12px 14px;
    background: rgba(31, 107, 167, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(31, 107, 167, 0.08);
}

.inno-challenge-meta .inno-stat-mini-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

/* Startups - Dise�o Premium */
.inno-startups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
}

.inno-startup-card {
    background: white;
    border-radius: 20px;
    box-shadow: var(--inno-shadow-sm);
    padding: 24px;
    display: flex;
    gap: 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(31, 107, 167, 0.06);
}.inno-startup-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--inno-shadow-lg);
    border-color: var(--inno-primary-light);
}

.inno-startup-logo {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--inno-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(31, 107, 167, 0.3);
}

.inno-startup-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.inno-startup-name {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.inno-startup-description {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 14px;
    line-height: 1.5;
}

.inno-startup-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* Knowledge Hub - Dise�o Premium */
.inno-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 24px;
}

.inno-asset-card {
    background: white;
    border-radius: 20px;
    box-shadow: var(--inno-shadow-sm);
    padding: 24px;
    display: flex;
    gap: 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(31, 107, 167, 0.06);
}

.inno-asset-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--inno-shadow-lg);
    border-color: var(--inno-primary-light);
}

.inno-asset-card:hover .inno-asset-icon {
    transform: scale(1.1) rotate(-5deg);
}

.inno-asset-icon {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(31, 107, 167, 0.2);
    transition: transform 0.4s ease;
}

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

.inno-asset-type {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.inno-asset-title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.inno-asset-description {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 14px;
    line-height: 1.6;
}

.inno-asset-meta {
    font-size: 13px;
    color: #64748b;
    display: flex;
    gap: 18px;
    font-weight: 600;
}

.inno-asset-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Buttons INNO - Dise�o Premium con Animaciones Fluidas */
.inno-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.25s ease,
                color 0.2s ease;
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

.inno-btn:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

.inno-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.inno-btn:hover::before {
    left: 100%;
}

.inno-btn-primary {
    background: var(--inno-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.3);
}

.inno-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.4);
}

.inno-btn-secondary {
    background: linear-gradient(135deg, #1C507B 0%, #2482B8 100%);
    color: white;
}

.inno-btn-secondary:hover {
    background: linear-gradient(135deg, #082A5D 0%, #1C507B 100%);
    transform: translateY(-2px);
}

.inno-btn-sm {
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 10px;
}

.inno-btn-outline {
    background: transparent;
    border: 2px solid var(--inno-primary);
    color: var(--inno-primary);
}

.inno-btn-outline:hover {
    background: var(--inno-primary);
    color: white;
}

/* Modal INNO - Dise�o Premium con Animaciones Fluidas */
.inno-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: innoModalFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes innoModalFadeIn {
    from { 
        opacity: 0; 
        backdrop-filter: blur(0px);
    }
    to { 
        opacity: 1; 
        backdrop-filter: blur(8px);
    }
}

.inno-modal {
    background: white;
    border-radius: 24px;
    width: 90%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    animation: innoModalSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.inno-modal.inno-modal-large {
    max-width: 900px;
}

@keyframes innoModalSlideUp {
    from { 
        opacity: 0;
        transform: translateY(40px) scale(0.92);
    }
    60% {
        opacity: 1;
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.inno-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(31, 107, 167, 0.1);
    background: linear-gradient(180deg, rgba(31, 107, 167, 0.03) 0%, transparent 100%);
}

.inno-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.inno-modal-close {
    background: rgba(31, 107, 167, 0.1);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inno-modal-close:hover {
    background: var(--inno-primary);
    color: white;
    transform: rotate(90deg);
}

.inno-modal-body {
    padding: 28px;
}

.inno-modal-footer {
    padding: 20px 28px;
    border-top: 1px solid rgba(31, 107, 167, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    background: linear-gradient(0deg, rgba(31, 107, 167, 0.02) 0%, transparent 100%);
}

/* Detail Modal Tabs con Animaciones Fluidas */
.inno-detail-tab {
    padding: 14px 24px;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.25s ease,
                background 0.25s ease;
    position: relative;
}

.inno-detail-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 3px;
    background: var(--inno-gradient);
    border-radius: 3px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.inno-detail-tab:hover {
    color: var(--inno-primary);
    background: rgba(31, 107, 167, 0.05);
}

.inno-detail-tab.active {
    color: var(--inno-primary);
}

.inno-detail-tab.active::after {
    transform: translateX(-50%) scaleX(1);
}

.inno-detail-content {
    animation: innoContentFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Stage Tracker Improvements */
.inno-tracker-node.completed .inno-tracker-circle {
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.inno-tracker-node.active .inno-tracker-circle {
    box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.2), 0 4px 15px rgba(31, 107, 167, 0.3);
    animation: pulseActive 2s infinite;
}

@keyframes pulseActive {
    0%, 100% { box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.2), 0 4px 15px rgba(31, 107, 167, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(31, 107, 167, 0.1), 0 4px 20px rgba(31, 107, 167, 0.4); }
}

/* Form INNO - Dise�o Premium */
.inno-form-group {
    margin-bottom: 22px;
}

.inno-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    letter-spacing: 0.3px;
}

.inno-form-group input,
.inno-form-group select,
.inno-form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid rgba(31, 107, 167, 0.15);
    border-radius: 12px;
    font-size: 14px;
    transition: border-color 0.25s ease,
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.25s ease;
    background: rgba(31, 107, 167, 0.02);
}

.inno-form-group input:focus,
.inno-form-group select:focus,
.inno-form-group textarea:focus {
    outline: none;
    border-color: var(--inno-primary);
    box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.12),
                0 4px 12px rgba(31, 107, 167, 0.1);
    background: white;
}

.inno-form-group input::placeholder,
.inno-form-group textarea::placeholder {
    color: #94a3b8;
}

.inno-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

/* Empty State - Dise�o Premium */
.inno-empty-state {
    text-align: center;
    padding: 80px 30px;
    color: #94a3b8;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.02) 0%, rgba(36, 130, 184, 0.02) 100%);
    border-radius: 20px;
    border: 2px dashed rgba(31, 107, 167, 0.15);
}

.inno-empty-state i {
    font-size: 60px;
    margin-bottom: 20px;
    opacity: 0.4;
    color: var(--inno-primary);
}

.inno-empty-state p {
    font-size: 16px;
    font-weight: 500;
}

/* Toast INNO - Dise�o Premium con Animaciones Fluidas */
.inno-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 18px 28px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translateY(120px) scale(0.9);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.35s ease;
    z-index: 2000;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    font-weight: 600;
    will-change: transform, opacity;
}

.inno-toast.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.inno-toast-success {
    background: linear-gradient(135deg, var(--inno-success) 0%, #059669 100%);
}

.inno-toast-error {
    background: linear-gradient(135deg, var(--inno-danger) 0%, #dc2626 100%);
}

.inno-toast i {
    font-size: 20px;
}

/* Pagination INNO - Premium */
.inno-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(31, 107, 167, 0.1);
}

.inno-pagination-btn {
    padding: 12px 24px;
    background: white;
    border: 2px solid rgba(31, 107, 167, 0.2);
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.inno-pagination-btn:hover:not(:disabled) {
    border-color: var(--inno-primary);
    color: var(--inno-primary);
    background: rgba(31, 107, 167, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.15);
}

.inno-pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f1f5f9;
}

.inno-pagination-info {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    padding: 8px 16px;
    background: rgba(31, 107, 167, 0.05);
    border-radius: 8px;
}

/* Responsive INNO */
@media (max-width: 1400px) {
    .inno-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .inno-portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .inno-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .inno-country-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .inno-challenges-grid,
    .inno-startups-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .inno-main-tabs {
        flex-wrap: wrap;
    }
    .inno-kpi-grid,
    .inno-country-grid,
    .inno-portfolio-grid,
    .inno-challenges-grid,
    .inno-startups-grid,
    .inno-assets-grid {
        grid-template-columns: 1fr;
    }
    .inno-form-row {
        grid-template-columns: 1fr;
    }
    .inno-modal {
        width: 95%;
        max-height: 90vh;
    }
    .inno-filters-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .inno-stage-pipeline {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Print Styles INNO */
@media print {
    .inno-main-tabs,
    .inno-filters-bar,
    .inno-btn,
    .inno-modal-overlay {
        display: none !important;
    }
    
    .inno-card {
        box-shadow: none;
        border: 1px solid #e2e8f0;
        page-break-inside: avoid;
    }
    
    .inno-tab-content {
        display: block !important;
    }
    
    #innovation {
        background: white !important;
    }
}

/* ===============================================
   ESTILOS ADICIONALES PREMIUM INNO
   =============================================== */

/* Efecto de texto gradiente para t�tulos */
.inno-gradient-text {
    background: var(--inno-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Efecto shimmer de carga */
.inno-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Tooltip personalizado INNO */
.inno-tooltip {
    position: relative;
}

.inno-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 14px;
    background: #1e293b;
    color: white;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.inno-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e293b;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.inno-tooltip:hover::after,
.inno-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Chip/Tag INNO */
.inno-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(31, 107, 167, 0.1);
    color: var(--inno-primary-dark);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.inno-chip:hover {
    background: rgba(31, 107, 167, 0.2);
    transform: scale(1.05);
}

.inno-chip-remove {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.inno-chip-remove:hover {
    opacity: 1;
}

/* Progress bar INNO */
.inno-progress {
    height: 8px;
    background: rgba(31, 107, 167, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.inno-progress-bar {
    height: 100%;
    background: var(--inno-gradient);
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.inno-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: progressShine 2s infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Avatar group INNO */
.inno-avatar-group {
    display: flex;
    align-items: center;
}

.inno-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid white;
    margin-left: -10px;
    overflow: hidden;
    background: var(--inno-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
    position: relative;
}

.inno-avatar:first-child {
    margin-left: 0;
}

.inno-avatar:hover {
    transform: translateY(-4px) scale(1.1);
    z-index: 10;
}

.inno-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Switch/Toggle INNO */
.inno-switch {
    position: relative;
    width: 52px;
    height: 28px;
}

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

.inno-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e2e8f0;
    border-radius: 28px;
    transition: all 0.3s ease;
}

.inno-switch-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.inno-switch input:checked + .inno-switch-slider {
    background: var(--inno-gradient);
}

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

/* Dropdown INNO */
.inno-dropdown {
    position: relative;
    display: inline-block;
}

.inno-dropdown-content {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: white;
    border-radius: 14px;
    box-shadow: var(--inno-shadow-lg);
    border: 1px solid rgba(31, 107, 167, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.inno-dropdown.open .inno-dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.inno-dropdown-item {
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #374151;
}

.inno-dropdown-item:hover {
    background: rgba(31, 107, 167, 0.05);
    color: var(--inno-primary);
}

.inno-dropdown-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 0;
}

/* Timeline INNO */
.inno-timeline {
    position: relative;
    padding-left: 30px;
}

.inno-timeline::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--inno-primary) 0%, var(--inno-secondary) 100%);
    border-radius: 2px;
}

.inno-timeline-item {
    position: relative;
    padding-bottom: 24px;
}

.inno-timeline-item:last-child {
    padding-bottom: 0;
}

.inno-timeline-dot {
    position: absolute;
    left: -30px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--inno-gradient);
    box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
}

.inno-timeline-content {
    background: white;
    padding: 16px 20px;
    border-radius: 14px;
    box-shadow: var(--inno-shadow-sm);
    border: 1px solid rgba(31, 107, 167, 0.08);
}

.inno-timeline-date {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.inno-timeline-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
}

.inno-timeline-description {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

/* Stat card mini INNO */
.inno-stat-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(31, 107, 167, 0.04);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.inno-stat-mini:hover {
    background: rgba(31, 107, 167, 0.08);
}

.inno-stat-mini-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.inno-stat-mini-value {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
}

.inno-stat-mini-label {
    font-size: 12px;
    color: #64748b;
}

/* Iconos animados INNO */
.inno-icon-bounce {
    animation: iconBounce 2s infinite;
}

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

.inno-icon-pulse {
    animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* Scrollbar personalizado para secci�n INNO */
#innovation::-webkit-scrollbar {
    width: 8px;
}

#innovation::-webkit-scrollbar-track {
    background: rgba(31, 107, 167, 0.05);
    border-radius: 10px;
}

#innovation::-webkit-scrollbar-thumb {
    background: var(--inno-gradient);
    border-radius: 10px;
}

#innovation::-webkit-scrollbar-thumb:hover {
    background: var(--inno-primary-dark);
}

/* ===============================================
   ANIMACIONES FLUIDAS ADICIONALES INNO
   =============================================== */

/* Stagger animation para listas */
.inno-portfolio-grid .inno-project-card,
.inno-kpi-grid .inno-kpi-card,
.inno-country-grid .inno-country-card,
.inno-challenges-grid > div,
.inno-startups-grid > div,
.inno-assets-grid .inno-asset-card {
    animation: innoStaggerFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.inno-portfolio-grid .inno-project-card:nth-child(1),
.inno-kpi-grid .inno-kpi-card:nth-child(1),
.inno-country-grid .inno-country-card:nth-child(1) { animation-delay: 0.05s; }
.inno-portfolio-grid .inno-project-card:nth-child(2),
.inno-kpi-grid .inno-kpi-card:nth-child(2),
.inno-country-grid .inno-country-card:nth-child(2) { animation-delay: 0.1s; }
.inno-portfolio-grid .inno-project-card:nth-child(3),
.inno-kpi-grid .inno-kpi-card:nth-child(3),
.inno-country-grid .inno-country-card:nth-child(3) { animation-delay: 0.15s; }
.inno-portfolio-grid .inno-project-card:nth-child(4),
.inno-kpi-grid .inno-kpi-card:nth-child(4),
.inno-country-grid .inno-country-card:nth-child(4) { animation-delay: 0.2s; }
.inno-portfolio-grid .inno-project-card:nth-child(5),
.inno-kpi-grid .inno-kpi-card:nth-child(5) { animation-delay: 0.25s; }
.inno-portfolio-grid .inno-project-card:nth-child(6),
.inno-kpi-grid .inno-kpi-card:nth-child(6) { animation-delay: 0.3s; }
.inno-portfolio-grid .inno-project-card:nth-child(n+7) { animation-delay: 0.35s; }

@keyframes innoStaggerFadeIn {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal close animation */
.inno-modal-overlay.closing {
    animation: innoModalFadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.inno-modal-overlay.closing .inno-modal {
    animation: innoModalSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes innoModalFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes innoModalSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
}

/* Smooth scroll behavior */
.inno-modal-body {
    scroll-behavior: smooth;
}

/* Ripple effect para botones */
.inno-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.inno-btn:active::after {
    transform: scale(2);
    opacity: 1;
    transition: transform 0s, opacity 0s;
}

/* Project card hover improvements */
.inno-project-card {
    will-change: transform, box-shadow;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease;
}

.inno-project-card:hover {
    transform: translateY(-8px) scale(1.01);
}

.inno-project-card:active {
    transform: translateY(-4px) scale(0.99);
    transition: transform 0.1s ease;
}

/* KPI card hover */
.inno-kpi-card {
    will-change: transform, box-shadow;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.inno-kpi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(31, 107, 167, 0.15);
}

/* Stage bubble hover */
.inno-stage-bubble {
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

.inno-stage-item:hover .inno-stage-bubble {
    transform: scale(1.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Main tabs smooth transitions */
.inno-main-tabs button {
    transition: color 0.25s ease,
                background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s ease,
                box-shadow 0.3s ease;
}

.inno-main-tabs button:hover:not(.active) {
    background: rgba(31, 107, 167, 0.08);
    transform: translateY(-2px);
}

.inno-main-tabs button:active {
    transform: translateY(0) scale(0.98);
}

/* Tab content transitions */
.inno-tab-content {
    transition: opacity 0.4s ease;
}

.inno-tab-content.fade-enter {
    opacity: 0;
    transform: translateY(10px);
}

.inno-tab-content.fade-enter-active {
    opacity: 1;
    transform: translateY(0);
}

/* Smooth loading states */
.inno-loading {
    position: relative;
}

.inno-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: innoLoadingPulse 1s ease-in-out infinite;
}

@keyframes innoLoadingPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* Micro-interactions */
.inno-btn i,
.inno-project-card-header i,
.inno-kpi-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.inno-btn:hover i {
    transform: scale(1.15);
}

.inno-project-card:hover .inno-project-card-header i {
    transform: rotate(-5deg) scale(1.1);
}

/* Filter chips animation */
.inno-chip {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease,
                box-shadow 0.25s ease;
}

.inno-chip:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.2);
}

.inno-chip:active {
    transform: scale(0.95);
}

/* Progress bar smooth animation */
.inno-progress-bar {
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dropdown smooth open */
.inno-dropdown-content {
    transition: opacity 0.25s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                visibility 0.25s ease;
}

/* Avatar group hover */
.inno-avatar {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                z-index 0s;
}

/* Timeline items */
.inno-timeline-item {
    animation: innoTimelineSlide 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.inno-timeline-item:nth-child(1) { animation-delay: 0.1s; }
.inno-timeline-item:nth-child(2) { animation-delay: 0.2s; }
.inno-timeline-item:nth-child(3) { animation-delay: 0.3s; }
.inno-timeline-item:nth-child(4) { animation-delay: 0.4s; }
.inno-timeline-item:nth-child(5) { animation-delay: 0.5s; }

@keyframes innoTimelineSlide {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===============================================
   SUPER FLUID ANIMATIONS - INNO
   =============================================== */

/* Global smooth scrolling */
#innovation,
.inno-modal-body {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Hardware acceleration for all animated elements */
.inno-card,
.inno-project-card,
.inno-kpi-card,
.inno-country-card,
.inno-btn,
.inno-modal,
.inno-challenge-card,
.inno-startup-card,
.inno-asset-card {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* Ultra-smooth button interactions */
.inno-btn {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                background 0.2s ease,
                opacity 0.15s ease;
}

.inno-btn:hover {
    transform: translateY(-2px) scale(1.02);
}

.inno-btn:active {
    transform: translateY(0) scale(0.98);
    transition: transform 0.1s ease;
}

/* Smooth focus states */
.inno-form-group input:focus,
.inno-form-group select:focus,
.inno-form-group textarea:focus {
    transform: scale(1.01);
}

/* Checkbox and radio smooth animations */
.inno-modal input[type="checkbox"],
.inno-modal input[type="radio"] {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.inno-modal input[type="checkbox"]:hover,
.inno-modal input[type="radio"]:hover {
    transform: scale(1.1);
}

.inno-modal input[type="checkbox"]:checked,
.inno-modal input[type="radio"]:checked {
    animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Modal content smooth reveal */
.inno-modal-body > * {
    animation: innoContentReveal 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.inno-modal-body > *:nth-child(1) { animation-delay: 0.05s; }
.inno-modal-body > *:nth-child(2) { animation-delay: 0.1s; }
.inno-modal-body > *:nth-child(3) { animation-delay: 0.15s; }
.inno-modal-body > *:nth-child(4) { animation-delay: 0.2s; }

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

/* Stats counter animation */
.inno-modal-body [style*="font-size: 32px"],
.inno-modal-body [style*="font-size: 28px"],
.inno-modal-body [style*="font-size: 24px"] {
    animation: innoCountUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: 0.2s;
}

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

/* Share buttons bounce */
.inno-modal button[onclick*="shareVia"] {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease;
}

.inno-modal button[onclick*="shareVia"]:hover {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.inno-modal button[onclick*="shareVia"]:active {
    transform: scale(0.95);
}

/* Card flip effect for challenges/startups */
.inno-challenge-card,
.inno-startup-card {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s ease;
}

.inno-challenge-card:hover,
.inno-startup-card:hover {
    transform: translateY(-8px) rotateX(2deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Smooth label hover in forms */
.inno-modal label[style*="cursor: pointer"] {
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.inno-modal label[style*="cursor: pointer"]:hover {
    transform: translateX(4px);
    box-shadow: -4px 0 0 var(--inno-primary);
}

/* Icon animations */
.inno-modal i {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.inno-btn:hover i,
.inno-modal-header i {
    animation: iconWiggle 0.5s ease;
}

@keyframes iconWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Link hover effects */
.inno-modal a {
    transition: transform 0.2s ease, color 0.2s ease;
}

.inno-modal a:hover {
    transform: translateX(4px);
}

/* Smooth scrollbar for modals */
.inno-modal-body::-webkit-scrollbar {
    width: 6px;
}

.inno-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.inno-modal-body::-webkit-scrollbar-thumb {
    background: rgba(31, 107, 167, 0.3);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.inno-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(31, 107, 167, 0.5);
}

/* Pulse animation for active elements */
.inno-modal [style*="border: 2px solid #10b981"],
.inno-modal [style*="border: 2px solid var(--inno-primary)"] {
    animation: subtlePulse 2s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.2); }
    50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1); }
}

/* Toast improvements */
.inno-toast {
    animation: toastSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%) scale(0.8);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .inno-card,
    .inno-project-card,
    .inno-kpi-card,
    .inno-country-card,
    .inno-btn,
    .inno-modal,
    .inno-modal-overlay,
    .inno-toast,
    .inno-detail-content,
    .inno-portfolio-grid > *,
    .inno-kpi-grid > *,
    .inno-timeline-item {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   EXP360 - EXPERIENCIA DEL PACIENTE
   Patient Experience 360� Platform
   ============================================ */

/* Variables EXP360 */
:root {
    --exp360-primary: #2482B8;
    --exp360-primary-dark: #1F6BA7;
    --exp360-primary-light: #5bbad5;
    --exp360-secondary: #2482B8;
    --exp360-bg: #eff6ff;
    --exp360-success: #10b981;
    --exp360-warning: #f59e0b;
    --exp360-danger: #ef4444;
    --exp360-info: #3b82f6;
    --exp360-neutral: #6b7280;
}

/* Animaci�n del �cono principal */
@keyframes exp360Pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1;
    }
    50% { 
        transform: scale(1.1); 
        opacity: 0.8;
    }
}

/* Tabs principales */
.exp360-main-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--exp360-bg) 0%, #e0f2fe 100%);
    border-radius: var(--border-radius-lg);
    margin-bottom: 20px;
    flex-wrap: wrap;
    box-shadow: var(--shadow);
}

.exp360-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    color: var(--gray-dark);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 14px;
}

.exp360-tab-btn:hover {
    background: var(--exp360-primary-light);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.exp360-tab-btn.active {
    background: linear-gradient(135deg, var(--exp360-primary) 0%, var(--exp360-primary-dark) 100%);
    color: white;
    border-color: var(--exp360-primary-dark);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
}

.exp360-tab-btn i {
    font-size: 16px;
}

/* Barra de filtros */
.exp360-filters-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}

.exp360-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exp360-filter-group label {
    font-size: 12px;
    color: var(--gray-medium);
    font-weight: 500;
}

.exp360-filter-group label i {
    margin-right: 4px;
    color: var(--exp360-primary);
}

.exp360-filter-group select,
.exp360-filter-group input {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    min-width: 180px;
    transition: var(--transition-fast);
}

.exp360-filter-group select:focus,
.exp360-filter-group input:focus {
    outline: none;
    border-color: var(--exp360-primary);
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
}

.exp360-filter-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--exp360-primary) 0%, var(--exp360-primary-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
    margin-left: auto;
}

.exp360-filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
}

/* Contenedor de contenido */
.exp360-content-wrapper {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 24px;
    min-height: 500px;
    box-shadow: var(--shadow);
}

.exp360-tab-content {
    display: none;
}

.exp360-tab-content.active {
    display: block;
    animation: exp360FadeIn 0.3s ease-out;
}

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

/* Loading state */
.exp360-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--exp360-primary);
    gap: 16px;
}

.exp360-loading i {
    color: var(--exp360-primary);
}

/* Error state */
.exp360-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--exp360-danger);
    gap: 16px;
    text-align: center;
}

.exp360-error i {
    font-size: 48px;
}

.exp360-error button {
    padding: 10px 24px;
    background: var(--exp360-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.exp360-error button:hover {
    background: var(--exp360-primary-dark);
}

/* Empty state */
.exp360-empty {
    text-align: center;
    padding: 24px;
    color: var(--gray-medium);
    font-style: italic;
}

/* ========== KPI GRID ========== */
.exp360-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.exp360-kpi-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    gap: 16px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--exp360-primary);
    transition: var(--transition-fast);
}

.exp360-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.exp360-kpi-card.nps.positive {
    border-left-color: var(--exp360-success);
}

.exp360-kpi-card.nps.neutral {
    border-left-color: var(--exp360-warning);
}

.exp360-kpi-card.nps.negative {
    border-left-color: var(--exp360-danger);
}

.exp360-kpi-card.warning {
    border-left-color: var(--exp360-warning);
    background: linear-gradient(135deg, #fffbeb 0%, white 100%);
}

.exp360-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, var(--exp360-primary) 0%, var(--exp360-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

.exp360-kpi-card.nps.positive .exp360-kpi-icon {
    background: linear-gradient(135deg, var(--exp360-success) 0%, #059669 100%);
}

.exp360-kpi-card.nps.negative .exp360-kpi-icon {
    background: linear-gradient(135deg, var(--exp360-danger) 0%, #dc2626 100%);
}

.exp360-kpi-content {
    flex: 1;
}

.exp360-kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-dark);
    line-height: 1;
}

.exp360-kpi-label {
    font-size: 13px;
    color: var(--gray-medium);
    margin-top: 4px;
}

.exp360-kpi-detail {
    font-size: 12px;
    color: var(--gray-medium);
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.exp360-kpi-detail.danger {
    color: var(--exp360-danger);
    font-weight: 500;
}

.exp360-kpi-detail .promoters { color: var(--exp360-success); }
.exp360-kpi-detail .passives { color: var(--exp360-warning); }
.exp360-kpi-detail .detractors { color: var(--exp360-danger); }

/* ========== PANELS GRID ========== */
.exp360-panels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

.exp360-panel {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid #f1f5f9;
}

.exp360-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.exp360-panel-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.exp360-panel-header h3 i {
    color: var(--exp360-primary);
}

.exp360-panel-count {
    background: var(--exp360-primary);
    color: white;
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
    font-size: 12px;
    font-weight: 600;
}

.exp360-panel-content {
    padding: 16px;
    max-height: 350px;
    overflow-y: auto;
}

/* ========== ALERTS PANEL ========== */
.exp360-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: var(--border-radius-sm);
    margin-bottom: 10px;
    border-left: 3px solid var(--gray-medium);
    transition: var(--transition-fast);
}

.exp360-alert-item:hover {
    background: #f1f5f9;
}

.exp360-alert-item.severity-critica {
    border-left-color: var(--exp360-danger);
    background: #fef2f2;
}

.exp360-alert-item.severity-alta {
    border-left-color: var(--exp360-warning);
    background: #fffbeb;
}

.exp360-alert-item.severity-media {
    border-left-color: var(--exp360-info);
    background: #eff6ff;
}

.exp360-alert-item.severity-baja {
    border-left-color: var(--exp360-success);
}

.exp360-alert-icon {
    flex-shrink: 0;
    padding-top: 2px;
}

.exp360-alert-content {
    flex: 1;
    min-width: 0;
}

.exp360-alert-title {
    font-weight: 500;
    color: var(--gray-dark);
    font-size: 14px;
    margin-bottom: 4px;
}

.exp360-alert-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--gray-medium);
}

.exp360-alert-actions button {
    padding: 6px 10px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    color: var(--gray-medium);
    cursor: pointer;
    transition: var(--transition-fast);
}

.exp360-alert-actions button:hover {
    background: var(--exp360-success);
    color: white;
    border-color: var(--exp360-success);
}

/* ========== PQRS PANEL ========== */
.exp360-pqrs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    margin-bottom: 10px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.exp360-pqrs-item:hover {
    border-color: var(--exp360-primary);
    box-shadow: var(--shadow);
}

.exp360-pqrs-item.sla-breached {
    border-left: 3px solid var(--exp360-danger);
    background: #fef2f2;
}

.exp360-pqrs-item.sla-at_risk {
    border-left: 3px solid var(--exp360-warning);
    background: #fffbeb;
}

.exp360-pqrs-type {
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.exp360-pqrs-type.tipo-P { background: var(--exp360-info); }
.exp360-pqrs-type.tipo-Q { background: var(--exp360-danger); }
.exp360-pqrs-type.tipo-R { background: var(--exp360-warning); }
.exp360-pqrs-type.tipo-S { background: var(--exp360-secondary); }
.exp360-pqrs-type.tipo-F { background: var(--exp360-success); }

.exp360-pqrs-content {
    flex: 1;
    min-width: 0;
}

.exp360-pqrs-title {
    font-weight: 500;
    color: var(--gray-dark);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exp360-pqrs-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--gray-medium);
    margin-top: 4px;
}

.exp360-pqrs-meta .sla.vencido {
    color: var(--exp360-danger);
    font-weight: 500;
}

.exp360-severity-badge {
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
    font-size: 11px;
    font-weight: 500;
}

.exp360-severity-badge.alta { background: #fef2f2; color: var(--exp360-danger); }
.exp360-severity-badge.media { background: #fffbeb; color: var(--exp360-warning); }
.exp360-severity-badge.baja { background: #f0fdf4; color: var(--exp360-success); }
.exp360-severity-badge.critica { background: var(--exp360-danger); color: white; }

/* ========== RECOVERY PANEL ========== */
.exp360-recovery-item {
    padding: 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    margin-bottom: 10px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.exp360-recovery-item:hover {
    border-color: var(--exp360-primary);
    box-shadow: var(--shadow);
}

.exp360-recovery-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.exp360-recovery-code {
    font-weight: 600;
    color: var(--exp360-primary);
    font-size: 13px;
}

.exp360-recovery-trigger {
    font-size: 11px;
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: var(--border-radius-sm);
    color: var(--gray-medium);
}

.exp360-recovery-desc {
    font-size: 13px;
    color: var(--gray-dark);
    margin-bottom: 10px;
    line-height: 1.5;
}

.exp360-recovery-footer {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--gray-medium);
}

.exp360-recovery-progress {
    font-weight: 500;
    color: var(--exp360-info);
}

/* ========== SURVEY FOLLOWUP PANEL ========== */
.exp360-survey-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    margin-bottom: 10px;
}

.exp360-survey-item.sentiment-negative {
    border-left: 3px solid var(--exp360-danger);
    background: #fef2f2;
}

.exp360-survey-item.sentiment-neutral {
    border-left: 3px solid var(--exp360-warning);
}

.exp360-survey-item.sentiment-positive {
    border-left: 3px solid var(--exp360-success);
}

.exp360-survey-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.exp360-survey-score .nps {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-dark);
}

.exp360-survey-score .csat {
    font-size: 13px;
    color: var(--exp360-warning);
}

.exp360-survey-content {
    flex: 1;
}

.exp360-survey-comment {
    font-size: 13px;
    color: var(--gray-dark);
    font-style: italic;
    margin-bottom: 6px;
}

.exp360-survey-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--gray-medium);
}

.exp360-btn-action,
.exp360-btn-followup {
    padding: 8px 14px;
    background: var(--exp360-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.exp360-btn-action:hover,
.exp360-btn-followup:hover {
    background: var(--exp360-primary-dark);
    transform: translateY(-1px);
}

/* ========== JOURNEY BUILDER ========== */
.exp360-journey-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.exp360-journey-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.exp360-journey-header h3 i {
    color: var(--exp360-primary);
}

.exp360-btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
}

.exp360-btn.primary {
    background: linear-gradient(135deg, var(--exp360-primary) 0%, var(--exp360-primary-dark) 100%);
    color: white;
}

.exp360-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
}

.exp360-btn.small {
    padding: 6px 12px;
    font-size: 13px;
}

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

.exp360-journey-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    gap: 16px;
    transition: var(--transition-fast);
}

.exp360-journey-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.exp360-journey-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

.exp360-journey-info {
    flex: 1;
}

.exp360-journey-info h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-dark);
    margin-bottom: 6px;
}

.exp360-journey-info p {
    font-size: 13px;
    color: var(--gray-medium);
    margin-bottom: 10px;
}

.exp360-journey-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--gray-medium);
}

.exp360-journey-meta .contexto {
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: var(--border-radius-sm);
}

.exp360-journey-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exp360-journey-actions button {
    padding: 8px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    color: var(--gray-medium);
    cursor: pointer;
    transition: var(--transition-fast);
}

.exp360-journey-actions button:hover {
    background: var(--exp360-primary);
    color: white;
    border-color: var(--exp360-primary);
}

/* Timeline de touchpoints */
.exp360-journey-timeline {
    background: #f8fafc;
    border-radius: var(--border-radius);
    padding: 24px;
    margin-top: 20px;
}

.exp360-journey-timeline h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.exp360-touchpoints-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exp360-touchpoint-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px;
    background: white;
    border-radius: var(--border-radius-sm);
    border: 1px solid #e2e8f0;
}

.exp360-touchpoint-item.hito {
    border-color: var(--exp360-primary);
    background: linear-gradient(135deg, #eff6ff 0%, white 100%);
}

.exp360-tp-order {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--exp360-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.exp360-touchpoint-item.hito .exp360-tp-order {
    background: var(--exp360-primary-dark);
    box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.2);
}

.exp360-tp-content {
    flex: 1;
}

.exp360-tp-name {
    font-weight: 600;
    color: var(--gray-dark);
    margin-bottom: 4px;
}

.exp360-tp-promise {
    font-size: 13px;
    color: var(--gray-medium);
    margin-bottom: 8px;
}

.exp360-tp-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--gray-medium);
}

.exp360-tp-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.exp360-tp-meta .survey-enabled {
    color: var(--exp360-success);
    font-weight: 500;
}

/* ========== VOP SURVEYS ========== */
.exp360-vop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.exp360-vop-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.exp360-vop-header h3 i {
    color: var(--exp360-primary);
}

.exp360-vop-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.exp360-subtab {
    padding: 10px 18px;
    background: #f8fafc;
    border: none;
    border-radius: var(--border-radius-sm);
    color: var(--gray-medium);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
}

.exp360-subtab:hover {
    background: #f1f5f9;
    color: var(--gray-dark);
}

.exp360-subtab.active {
    background: var(--exp360-primary);
    color: white;
}

.exp360-vop-section {
    display: none;
}

.exp360-vop-section.active {
    display: block;
}

.exp360-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    padding: 10px 0;
}

/* ========== TEMPLATE CARDS MEJORADAS ========== */
.exp360-template-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: var(--transition-fast);
    position: relative;
    display: flex;
    flex-direction: column;
}

.exp360-template-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--exp360-primary);
}

.exp360-template-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 20px 0;
}

.exp360-template-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.exp360-template-badge {
    padding: 5px 12px;
    border-radius: var(--border-radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.exp360-template-body {
    padding: 16px 20px;
    flex: 1;
}

.exp360-template-body h4 {
    font-size: 17px;
    font-weight: 600;
    color: var(--gray-dark);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.exp360-template-body p {
    font-size: 13px;
    color: var(--gray-medium);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.exp360-template-footer {
    padding: 16px 20px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exp360-template-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--gray-medium);
    border-top: none;
    padding-top: 0;
}

.exp360-template-stats .stat {
    display: flex;
    align-items: center;
    gap: 5px;
}

.exp360-template-stats .stat i {
    font-size: 11px;
    opacity: 0.7;
}

.exp360-template-actions {
    display: flex;
    gap: 6px;
    margin-top: 0;
}

.exp360-template-actions button {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    color: var(--gray-medium);
    cursor: pointer;
    transition: var(--transition-fast);
}

.exp360-template-actions button:hover {
    transform: scale(1.1);
}

.exp360-template-actions .btn-preview:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.exp360-template-actions .btn-edit:hover {
    background: var(--exp360-primary);
    color: white;
    border-color: var(--exp360-primary);
}

.exp360-template-actions .btn-duplicate:hover {
    background: #22c55e;
    color: white;
    border-color: #22c55e;
}

.exp360-template-status {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.exp360-template-status.active {
    background: #d1fae5;
    color: #047857;
}

.exp360-template-status.inactive {
    background: #fee2e2;
    color: #b91c1c;
}

.exp360-templates-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 24px;
    color: var(--gray-medium);
}

.exp360-templates-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--exp360-primary);
    opacity: 0.5;
}

.exp360-templates-empty h4 {
    font-size: 18px;
    color: var(--gray-dark);
    margin-bottom: 8px;
}

.exp360-templates-empty p {
    margin-bottom: 20px;
}

/* ========== MODAL DE TEMPLATE ========== */
.exp360-modal-lg {
    max-width: 800px;
    width: 95%;
}

.exp360-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
}

.exp360-form-row .exp360-form-group {
    margin-bottom: 16px;
}

.exp360-form-row .flex-1 { flex: 1; }
.exp360-form-row .flex-2 { flex: 2; }

.exp360-form-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dashed #e2e8f0;
}

.exp360-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.exp360-section-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exp360-btn.small {
    padding: 8px 14px;
    font-size: 12px;
}

.exp360-checkbox,
.exp360-checkbox-sm {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--gray-dark);
}

.exp360-checkbox input,
.exp360-checkbox-sm input {
    width: 18px;
    height: 18px;
    accent-color: var(--exp360-primary);
}

.exp360-checkbox-sm {
    font-size: 12px;
    color: var(--gray-medium);
}

/* Lista de preguntas */
.exp360-questions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 8px;
}

.exp360-empty-questions {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-medium);
    background: #f8fafc;
    border-radius: var(--border-radius);
    border: 2px dashed #e2e8f0;
}

.exp360-question-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition-fast);
}

.exp360-question-item:hover {
    border-color: var(--exp360-primary);
    box-shadow: var(--shadow-sm);
}

.exp360-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-bottom: 1px solid #e2e8f0;
}

.exp360-question-num {
    width: 28px;
    height: 28px;
    background: var(--exp360-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.exp360-question-actions {
    display: flex;
    gap: 4px;
}

.exp360-question-actions button {
    width: 28px;
    height: 28px;
    border: none;
    background: white;
    border-radius: var(--border-radius-sm);
    color: var(--gray-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.exp360-question-actions button:hover {
    background: var(--gray-dark);
    color: white;
}

.exp360-question-actions button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.exp360-question-actions .btn-delete:hover {
    background: var(--exp360-danger);
}

.exp360-question-body {
    padding: 14px;
}

.exp360-question-body input,
.exp360-question-body select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    transition: var(--transition-fast);
}

.exp360-question-body input:focus,
.exp360-question-body select:focus {
    outline: none;
    border-color: var(--exp360-primary);
    box-shadow: 0 0 0 3px rgba(31, 107, 167, 0.15);
}

/* ========== PREVIEW DE TEMPLATE ========== */
.exp360-preview-body {
    background: #f8fafc;
    padding: 0 !important;
}

.exp360-preview-header {
    padding: 24px;
    text-align: center;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.exp360-preview-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--border-radius-full);
    color: white;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.exp360-preview-desc {
    color: var(--gray-medium);
    font-size: 14px;
    margin: 0;
}

.exp360-preview-survey {
    padding: 24px;
}

.exp360-preview-question {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.exp360-question-number {
    width: 36px;
    height: 36px;
    background: var(--exp360-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.exp360-question-content {
    flex: 1;
}

.exp360-question-content h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-dark);
    margin: 0 0 8px 0;
}

.exp360-question-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: var(--border-radius-sm);
    font-size: 11px;
    color: var(--gray-medium);
    margin-bottom: 16px;
}

/* NPS Preview */
.exp360-preview-nps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.exp360-preview-nps .nps-btn {
    width: 36px;
    height: 36px;
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    background: white;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.exp360-preview-nps .nps-btn.detractor { border-color: #fca5a5; color: #dc2626; }
.exp360-preview-nps .nps-btn.passive { border-color: #fde68a; color: #d97706; }
.exp360-preview-nps .nps-btn.promoter { border-color: #86efac; color: #16a34a; }

.exp360-preview-nps .nps-labels {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--gray-medium);
    margin-top: 8px;
}

/* Stars Preview */
.exp360-preview-stars {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.exp360-preview-stars i {
    font-size: 24px;
    color: #fbbf24;
}

/* Yes/No Preview */
.exp360-preview-yesno {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.exp360-preview-yesno .yesno-btn {
    padding: 10px 24px;
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius);
    background: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exp360-preview-yesno .yesno-btn.yes { border-color: #86efac; color: #16a34a; }
.exp360-preview-yesno .yesno-btn.no { border-color: #fca5a5; color: #dc2626; }

/* Other Preview Inputs */
.exp360-preview-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    resize: none;
    margin-top: 8px;
    background: #f8fafc;
}

.exp360-preview-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.exp360-preview-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 14px;
}

.exp360-preview-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    margin-top: 8px;
    background: #f8fafc;
}

.exp360-preview-empty {
    text-align: center;
    padding: 40px;
    color: var(--gray-medium);
}

.exp360-preview-empty i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* ========== MODAL DE CONFIRMACI�N PERSONALIZADO ========== */
.exp360-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.exp360-confirm-overlay.active {
    opacity: 1;
    visibility: visible;
}

.exp360-confirm-dialog {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.2s ease;
}

.exp360-confirm-overlay.active .exp360-confirm-dialog {
    transform: scale(1) translateY(0);
}

.exp360-confirm-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
}

.exp360-confirm-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-dark);
    margin: 0 0 12px 0;
}

.exp360-confirm-message {
    font-size: 15px;
    color: var(--gray-medium);
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.exp360-confirm-detail {
    font-size: 14px;
    color: var(--gray-dark);
    font-style: italic;
    margin: 0 0 24px 0;
    padding: 12px;
    background: #f8fafc;
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--exp360-primary);
}

.exp360-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.exp360-confirm-btn {
    padding: 12px 24px;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    border: none;
    min-width: 120px;
}

.exp360-confirm-btn.cancel {
    background: #f1f5f9;
    color: var(--gray-dark);
}

.exp360-confirm-btn.cancel:hover {
    background: #e2e8f0;
}

.exp360-confirm-btn.primary {
    background: var(--exp360-primary);
    color: white;
}

.exp360-confirm-btn.primary:hover {
    background: #2482B8;
    transform: translateY(-1px);
}

.exp360-confirm-btn.danger {
    background: #dc2626;
    color: white;
}

.exp360-confirm-btn.danger:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

.exp360-confirm-btn.success {
    background: #22c55e;
    color: white;
}

.exp360-confirm-btn.success:hover {
    background: #16a34a;
    transform: translateY(-1px);
}

/* ========== MODAL PQRS ========== */
.exp360-modal-header.pqrs {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.exp360-form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-dark);
    padding: 12px 0 8px;
    margin-top: 16px;
    border-bottom: 2px solid #f1f5f9;
}

.exp360-form-section-title:first-of-type {
    margin-top: 0;
}

.exp360-form-section-title i {
    color: var(--exp360-primary);
}

/* Selector de tipo PQRS */
.exp360-pqrs-tipos {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.exp360-tipo-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
    min-width: 90px;
    background: white;
}

.exp360-tipo-option:hover {
    border-color: var(--gray-medium);
    transform: translateY(-2px);
}

.exp360-tipo-option input[type="radio"] {
    display: none;
}

.exp360-tipo-option .tipo-icon {
    font-size: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.exp360-tipo-option .tipo-name {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Colores por tipo */
.exp360-tipo-option.peticion .tipo-icon { background: #dbeafe; color: #2563eb; }
.exp360-tipo-option.queja .tipo-icon { background: #fee2e2; color: #dc2626; }
.exp360-tipo-option.reclamo .tipo-icon { background: #fef3c7; color: #d97706; }
.exp360-tipo-option.sugerencia .tipo-icon { background: #d1fae5; color: #059669; }
.exp360-tipo-option.felicitacion .tipo-icon { background: #e0f2fe; color: #1F6BA7; }

.exp360-tipo-option.peticion.selected { border-color: #2563eb; background: #eff6ff; }
.exp360-tipo-option.queja.selected { border-color: #dc2626; background: #fef2f2; }
.exp360-tipo-option.reclamo.selected { border-color: #d97706; background: #fffbeb; }
.exp360-tipo-option.sugerencia.selected { border-color: #059669; background: #ecfdf5; }
.exp360-tipo-option.felicitacion.selected { border-color: #1F6BA7; background: #fdf2f8; }

.exp360-tipo-option.selected .tipo-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========== MODAL RECOVERY ========== */
.exp360-modal-header.recovery {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* Selector de trigger types */
.exp360-trigger-types {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.exp360-trigger-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
    background: white;
    flex: 1;
    min-width: 150px;
}

.exp360-trigger-option:hover {
    border-color: var(--gray-medium);
    background: #f8fafc;
}

.exp360-trigger-option input[type="radio"] {
    display: none;
}

.exp360-trigger-option i {
    font-size: 20px;
    color: var(--gray-medium);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f5f9;
    transition: var(--transition-fast);
}

.exp360-trigger-option span {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-dark);
}

.exp360-trigger-option.selected {
    border-color: #dc2626;
    background: #fef2f2;
}

.exp360-trigger-option.selected i {
    background: #dc2626;
    color: white;
}

/* ========== MODAL ROUNDING ========== */
.exp360-modal-header.rounding {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* Selector de tipo de ronda */
.exp360-rounding-types {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.exp360-rounding-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
    background: white;
    flex: 1;
    min-width: 100px;
    text-align: center;
}

.exp360-rounding-type:hover {
    border-color: #10b981;
    background: #f0fdf4;
}

.exp360-rounding-type input[type="radio"] {
    display: none;
}

.exp360-rounding-type i {
    font-size: 24px;
    color: var(--gray-medium);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f5f9;
    transition: var(--transition-fast);
}

.exp360-rounding-type span {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-dark);
    text-transform: uppercase;
}

.exp360-rounding-type.selected {
    border-color: #059669;
    background: #ecfdf5;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
}

.exp360-rounding-type.selected i {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    transform: scale(1.1);
}

.exp360-rounding-type.selected span {
    color: #059669;
}

/* Participantes */
.exp360-participants-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius);
    background: #f8fafc;
    margin-bottom: 10px;
}

.exp360-no-participants {
    color: var(--gray-medium);
    font-size: 13px;
    font-style: italic;
}

.exp360-participant-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
}

.exp360-participant-tag i {
    color: #059669;
    font-size: 12px;
}

.exp360-participant-tag button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #94a3b8;
    transition: var(--transition-fast);
}

.exp360-participant-tag button:hover {
    color: #dc2626;
}

.exp360-participant-add {
    display: flex;
    gap: 10px;
}

.exp360-participant-add input {
    flex: 1;
}

/* Animaci�n de pregunta movida */
.exp360-question-item.just-moved {
    animation: exp360QuestionMoved 0.5s ease;
}

@keyframes exp360QuestionMoved {
    0% {
        background: #fef3c7;
        transform: scale(1.02);
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
    }
    100% {
        background: #f8fafc;
        transform: scale(1);
        box-shadow: none;
    }
}

/* Mejoras a los botones de mover */
.exp360-question-actions .btn-move {
    background: white;
    border: 1px solid #e2e8f0;
}

.exp360-question-actions .btn-move:hover:not(:disabled) {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    transform: translateY(-1px);
}

.exp360-question-actions .btn-move:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #f1f5f9;
}

.exp360-question-actions .btn-move i {
    font-size: 11px;
}

.exp360-responses-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exp360-response-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
}

.exp360-response-scores {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
}

.exp360-response-scores .score-nps {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-dark);
}

.exp360-response-scores .score-csat {
    font-size: 14px;
    color: var(--exp360-warning);
}

.exp360-response-content {
    flex: 1;
}

.exp360-response-template {
    font-size: 12px;
    color: var(--gray-medium);
    margin-bottom: 6px;
}

.exp360-response-comment {
    font-size: 14px;
    color: var(--gray-dark);
    margin-bottom: 8px;
}

.exp360-response-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--gray-medium);
}

.exp360-coming-soon {
    text-align: center;
    padding: 60px;
    color: var(--gray-medium);
    font-size: 18px;
}

.exp360-coming-soon i {
    display: block;
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--exp360-primary);
}

/* ========== PQRS TABLE ========== */
.exp360-pqrs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.exp360-pqrs-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.exp360-pqrs-header h3 i {
    color: var(--exp360-primary);
}

.exp360-pqrs-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.exp360-pqrs-filters select {
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    min-width: 150px;
}

.exp360-pqrs-table-container {
    overflow-x: auto;
}

.exp360-pqrs-table {
    width: 100%;
    border-collapse: collapse;
}

.exp360-pqrs-table th {
    padding: 12px 16px;
    background: #f8fafc;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-dark);
    border-bottom: 2px solid #e2e8f0;
}

.exp360-pqrs-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: var(--gray-dark);
}

.exp360-pqrs-table tr:hover {
    background: #f8fafc;
}

.exp360-pqrs-table tr.sla-breached {
    background: #fef2f2;
}

.exp360-pqrs-table tr.sla-at_risk {
    background: #fffbeb;
}

.exp360-pqrs-table a {
    color: var(--exp360-primary);
    text-decoration: none;
    font-weight: 500;
}

.exp360-pqrs-table a:hover {
    text-decoration: underline;
}

.exp360-tipo-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.exp360-tipo-badge.tipo-P { background: var(--exp360-info); }
.exp360-tipo-badge.tipo-Q { background: var(--exp360-danger); }
.exp360-tipo-badge.tipo-R { background: var(--exp360-warning); }
.exp360-tipo-badge.tipo-S { background: var(--exp360-secondary); }
.exp360-tipo-badge.tipo-F { background: var(--exp360-success); }

.exp360-estado-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
    font-size: 11px;
    font-weight: 500;
}

.exp360-estado-badge.nuevo { background: #dbeafe; color: var(--exp360-info); }
.exp360-estado-badge.asignado { background: #fef3c7; color: #92400e; }
.exp360-estado-badge.en_proceso { background: #dbeafe; color: #1d4ed8; }
.exp360-estado-badge.resuelto { background: #d1fae5; color: #047857; }
.exp360-estado-badge.cerrado { background: #f3f4f6; color: var(--gray-medium); }

.exp360-pqrs-table .sla-vencido {
    color: var(--exp360-danger);
    font-weight: 500;
}

.exp360-pqrs-table .exp360-actions {
    display: flex;
    gap: 8px;
}

.exp360-pqrs-table .exp360-actions button {
    padding: 6px 10px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    color: var(--gray-medium);
    cursor: pointer;
    transition: var(--transition-fast);
}

.exp360-pqrs-table .exp360-actions button:hover {
    background: var(--exp360-primary);
    color: white;
    border-color: var(--exp360-primary);
}

/* ========== SERVICE RECOVERY KANBAN ========== */
.exp360-recovery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.exp360-recovery-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.exp360-recovery-header h3 i {
    color: var(--exp360-primary);
}

.exp360-recovery-kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.exp360-kanban-column {
    background: #f8fafc;
    border-radius: var(--border-radius);
    padding: 16px;
    min-height: 400px;
}

.exp360-kanban-header {
    font-weight: 600;
    color: var(--gray-dark);
    padding: 12px 16px;
    background: white;
    border-radius: var(--border-radius-sm);
    margin-bottom: 16px;
    text-align: center;
    box-shadow: var(--shadow-xs);
}

.exp360-kanban-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exp360-kanban-card {
    background: white;
    border-radius: var(--border-radius-sm);
    padding: 14px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition-fast);
    border-left: 3px solid var(--gray-medium);
}

.exp360-kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.exp360-kanban-card.severity-alta {
    border-left-color: var(--exp360-danger);
}

.exp360-kanban-card.severity-media {
    border-left-color: var(--exp360-warning);
}

.exp360-kanban-card.severity-baja {
    border-left-color: var(--exp360-success);
}

.exp360-kanban-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.exp360-kanban-card-header .code {
    font-weight: 600;
    color: var(--exp360-primary);
    font-size: 13px;
}

.exp360-kanban-card-header .trigger {
    font-size: 10px;
    padding: 2px 6px;
    background: #f1f5f9;
    border-radius: var(--border-radius-sm);
    color: var(--gray-medium);
}

.exp360-kanban-card p {
    font-size: 13px;
    color: var(--gray-dark);
    margin-bottom: 10px;
    line-height: 1.4;
}

.exp360-kanban-card-footer {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--gray-medium);
}

.exp360-kanban-card-footer .progress {
    font-weight: 500;
    color: var(--exp360-info);
}

.exp360-kanban-sla {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    text-align: center;
}

.exp360-kanban-sla.breached {
    color: var(--exp360-danger);
    font-weight: 500;
}

.exp360-kanban-sla.at_risk {
    color: var(--exp360-warning);
}

.exp360-kanban-sla.on_time {
    color: var(--exp360-success);
}

.exp360-empty-column {
    text-align: center;
    padding: 24px;
    color: var(--gray-medium);
    font-style: italic;
    font-size: 13px;
}

/* ========== ROUNDING ========== */
.exp360-rounding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.exp360-rounding-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.exp360-rounding-header h3 i {
    color: var(--exp360-primary);
}

.exp360-rounding-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.exp360-rounding-stats .stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.exp360-rounding-stats .stat i {
    font-size: 24px;
    color: var(--exp360-primary);
}

.exp360-rounding-stats .stat .value {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-dark);
}

.exp360-rounding-stats .stat .label {
    font-size: 13px;
    color: var(--gray-medium);
}

.exp360-rounding-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.exp360-rounding-sessions h4,
.exp360-rounding-checklists h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-dark);
    margin-bottom: 16px;
}

.exp360-session-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    padding: 16px;
    margin-bottom: 12px;
    transition: var(--transition-fast);
}

.exp360-session-card:hover {
    box-shadow: var(--shadow);
}

.exp360-session-card.estado-en_progreso {
    border-left: 3px solid var(--exp360-info);
    background: #eff6ff;
}

.exp360-session-card.estado-completado {
    border-left: 3px solid var(--exp360-success);
}

.exp360-session-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.exp360-session-header .code {
    font-weight: 600;
    color: var(--exp360-primary);
}

.exp360-session-header .estado {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
    background: #f1f5f9;
    color: var(--gray-medium);
}

.exp360-session-card.estado-en_progreso .exp360-session-header .estado {
    background: var(--exp360-info);
    color: white;
}

.exp360-session-info {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--gray-medium);
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.exp360-session-info span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.exp360-session-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--gray-dark);
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.exp360-checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    margin-bottom: 10px;
}

.exp360-checklist-item i {
    color: var(--exp360-primary);
    font-size: 18px;
}

.exp360-checklist-item span {
    font-size: 14px;
    color: var(--gray-dark);
}

.exp360-checklist-item .contexto {
    margin-left: auto;
    font-size: 11px;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: var(--border-radius-sm);
    color: var(--gray-medium);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .exp360-panels-grid {
        grid-template-columns: 1fr;
    }
    
    .exp360-recovery-kanban {
        grid-template-columns: 1fr;
    }
    
    .exp360-rounding-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .exp360-main-tabs {
        flex-direction: column;
    }
    
    .exp360-tab-btn {
        width: 100%;
        justify-content: center;
    }
    
    .exp360-filters-bar {
        flex-direction: column;
    }
    
    .exp360-filter-group {
        width: 100%;
    }
    
    .exp360-filter-group select,
    .exp360-filter-group input {
        width: 100%;
    }
    
    .exp360-filter-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    
    .exp360-kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .exp360-journey-grid {
        grid-template-columns: 1fr;
    }
    
    .exp360-templates-grid {
        grid-template-columns: 1fr;
    }
    
    .exp360-rounding-stats {
        flex-direction: column;
    }
}

/* ========== MODALES EXP360 ========== */
.exp360-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.exp360-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.exp360-modal {
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.exp360-modal-overlay.active .exp360-modal {
    transform: scale(1) translateY(0);
}

.exp360-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, var(--exp360-bg) 0%, #e0f2fe 100%);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.exp360-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.exp360-modal-header h3 i {
    color: var(--exp360-primary);
}

.exp360-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: white;
    color: var(--gray-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.exp360-modal-close:hover {
    background: var(--exp360-danger);
    color: white;
}

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

.exp360-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

/* Form groups */
.exp360-form-group {
    margin-bottom: 20px;
}

.exp360-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-dark);
    margin-bottom: 8px;
}

.exp360-form-group label i {
    margin-right: 6px;
    color: var(--exp360-primary);
}

.exp360-form-group input[type="text"],
.exp360-form-group input[type="number"],
.exp360-form-group input[type="email"],
.exp360-form-group input[type="date"],
.exp360-form-group select,
.exp360-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    transition: var(--transition-fast);
}

.exp360-form-group input:focus,
.exp360-form-group select:focus,
.exp360-form-group textarea:focus {
    outline: none;
    border-color: var(--exp360-primary);
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
}

.exp360-form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.exp360-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Checkbox label */
.exp360-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px !important;
}

.exp360-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--exp360-primary);
    cursor: pointer;
}

/* Color picker */
.exp360-color-picker {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.exp360-color-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    transition: var(--transition-fast);
    border: 3px solid transparent;
}

.exp360-color-option:hover {
    transform: scale(1.1);
}

.exp360-color-option.selected {
    border-color: var(--gray-dark);
    box-shadow: var(--shadow-md);
}

/* Icon picker */
.exp360-icon-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.exp360-icon-option {
    width: 40px;
    height: 40px;
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-medium);
    font-size: 18px;
    transition: var(--transition-fast);
}

.exp360-icon-option:hover {
    border-color: var(--exp360-primary);
    color: var(--exp360-primary);
}

.exp360-icon-option.selected {
    background: var(--exp360-primary);
    border-color: var(--exp360-primary);
    color: white;
}

/* Button styles for modals */
.exp360-btn.secondary {
    background: white;
    color: var(--gray-dark);
    border: 1px solid #e2e8f0;
}

.exp360-btn.secondary:hover {
    background: #f1f5f9;
    border-color: var(--gray-medium);
}

/* ========== TIMELINE DE TOUCHPOINTS MEJORADO ========== */
.exp360-journey-timeline-container {
    background: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    margin-top: 24px;
    border-top: 4px solid var(--exp360-primary);
    overflow: hidden;
    animation: exp360SlideUp 0.4s ease-out;
}

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

.exp360-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.exp360-timeline-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.exp360-timeline-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.exp360-timeline-title h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-dark);
    margin: 0;
}

.exp360-timeline-subtitle {
    font-size: 13px;
    color: var(--gray-medium);
}

.exp360-timeline-actions {
    display: flex;
    gap: 10px;
}

.exp360-timeline-flow {
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.exp360-timeline-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--gray-medium);
}

.exp360-timeline-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--exp360-primary);
    opacity: 0.5;
}

.exp360-timeline-empty p {
    margin-bottom: 20px;
}

/* Timeline step */
.exp360-timeline-step {
    display: flex;
    gap: 20px;
    position: relative;
}

.exp360-timeline-step.inactive {
    opacity: 0.5;
}

/* Connector line */
.exp360-step-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    flex-shrink: 0;
}

.exp360-step-line {
    width: 3px;
    flex: 1;
    min-height: 20px;
    background: #e2e8f0;
}

.exp360-timeline-step:first-child .exp360-step-line:first-of-type {
    visibility: hidden;
}

.exp360-step-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 3px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-medium);
    z-index: 1;
    transition: var(--transition-fast);
}

.exp360-timeline-step:hover .exp360-step-dot {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.exp360-step-dot.hito {
    color: white;
    font-size: 12px;
}

/* Step card */
.exp360-step-card {
    flex: 1;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    transition: var(--transition-fast);
}

.exp360-timeline-step:hover .exp360-step-card {
    border-color: var(--exp360-primary);
    box-shadow: var(--shadow-md);
}

.exp360-timeline-step.hito .exp360-step-card {
    background: linear-gradient(135deg, #eff6ff 0%, white 100%);
    border-color: var(--exp360-primary);
}

.exp360-step-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.exp360-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

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

.exp360-step-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-dark);
    margin: 0 0 4px 0;
}

.exp360-step-promise {
    font-size: 14px;
    color: var(--gray-medium);
    margin: 0;
    line-height: 1.4;
}

.exp360-step-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: var(--transition-fast);
}

.exp360-timeline-step:hover .exp360-step-actions {
    opacity: 1;
}

.exp360-step-actions button {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: var(--border-radius-sm);
    color: var(--gray-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.exp360-step-actions button:hover {
    background: var(--exp360-primary);
    color: white;
    border-color: var(--exp360-primary);
}

.exp360-step-actions button.danger:hover {
    background: var(--exp360-danger);
    border-color: var(--exp360-danger);
}

/* Step details/badges */
.exp360-step-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.exp360-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--border-radius-full);
    font-size: 12px;
    font-weight: 500;
}

.exp360-step-badge.time {
    background: #dbeafe;
    color: #1e40af;
}

.exp360-step-badge.owner {
    background: #e6f4fb;
    color: #1F6BA7;
}

.exp360-step-badge.survey {
    background: #d1fae5;
    color: #047857;
}

.exp360-step-badge.hito {
    background: #e0f2fe;
    color: #082A5D;
}

.exp360-step-badge i {
    font-size: 11px;
}

/* Responsive timeline */
@media (max-width: 768px) {
    .exp360-timeline-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .exp360-timeline-step {
        flex-direction: column;
    }
    
    .exp360-step-connector {
        flex-direction: row;
        width: 100%;
        height: 40px;
    }
    
    .exp360-step-line {
        height: 3px;
        width: auto;
        flex: 1;
    }
    
    .exp360-step-card {
        margin-bottom: 12px;
    }
    
    .exp360-step-actions {
        opacity: 1;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .exp360-tab-content,
    .exp360-kpi-card,
    .exp360-panel,
    .exp360-journey-card,
    .exp360-template-card,
    .exp360-kanban-card,
    .exp360-session-card,
    .exp360-modal-overlay,
    .exp360-modal,
    .exp360-journey-timeline-container {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* ======================================================
   TELEMEDICINA - M�DULO DE CONSULTAS VIRTUALES
   Marco Normativo: Ley 1419/2010, Res 2654/2019
   ====================================================== */

/* Variables de Telemedicina */
:root {
    --tele-primary: #0891b2;
    --tele-primary-dark: #0e7490;
    --tele-primary-light: #22d3ee;
    --tele-secondary: #1F6BA7;
    --tele-bg: #ecfeff;
    --tele-success: #059669;
    --tele-warning: #f59e0b;
    --tele-danger: #dc2626;
    --tele-info: #3b82f6;
}

/* ========== TABS PRINCIPALES ========== */
.tele-main-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--tele-bg) 0%, #cffafe 100%);
    border-radius: var(--border-radius-md);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tele-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: white;
    border: 2px solid transparent;
    border-radius: var(--border-radius-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-dark);
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.tele-tab-btn:hover {
    background: var(--tele-primary-light);
    color: white;
    transform: translateY(-2px);
}

.tele-tab-btn.active {
    background: linear-gradient(135deg, var(--tele-primary) 0%, var(--tele-primary-dark) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.35);
}

.tele-tab-btn i {
    font-size: 14px;
}

.tele-tab-content {
    display: none;
    animation: teleFadeIn 0.3s ease;
}

.tele-tab-content.active {
    display: block;
}

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

/* ========== FILTROS ========== */
.tele-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: white;
    border-radius: var(--border-radius-md);
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.tele-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tele-filter-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-medium);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tele-filter-group select,
.tele-filter-group input {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    min-width: 180px;
}

.tele-filter-group select:focus,
.tele-filter-group input:focus {
    outline: none;
    border-color: var(--tele-primary);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

/* ========== BOTONES ========== */
.tele-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.tele-btn.primary {
    background: linear-gradient(135deg, var(--tele-primary), var(--tele-primary-dark));
    color: white;
}

.tele-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.35);
}

.tele-btn.secondary {
    background: #f1f5f9;
    color: var(--gray-dark);
}

.tele-btn.secondary:hover {
    background: #e2e8f0;
}

.tele-btn.success {
    background: linear-gradient(135deg, var(--tele-success), #047857);
    color: white;
}

.tele-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.tele-btn-sm.primary {
    background: var(--tele-primary);
    color: white;
}

.tele-btn-sm.success {
    background: var(--tele-success);
    color: white;
}

.tele-btn-sm.warning {
    background: var(--tele-warning);
    color: white;
}

.tele-btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--gray-medium);
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}

.tele-btn-icon:hover {
    background: #f1f5f9;
    color: var(--tele-primary);
}

/* ========== BADGES ========== */
.tele-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--border-radius-full);
    text-transform: uppercase;
}

.tele-badge.primary {
    background: #e0f2fe;
    color: #0369a1;
}

.tele-badge.secondary {
    background: #f1f5f9;
    color: #475569;
}

.tele-badge.success {
    background: #d1fae5;
    color: #047857;
}

/* Estados de cita */
.tele-badge.estado-programada {
    background: #e0f2fe;
    color: #0369a1;
}

.tele-badge.estado-confirmada {
    background: #dbeafe;
    color: #1d4ed8;
}

.tele-badge.estado-en_sala_espera {
    background: #fef3c7;
    color: #b45309;
}

.tele-badge.estado-en_consulta {
    background: #d1fae5;
    color: #047857;
}

.tele-badge.estado-completada {
    background: #dcfce7;
    color: #15803d;
}

.tele-badge.estado-cancelada {
    background: #fee2e2;
    color: #dc2626;
}

/* ========== DASHBOARD KPIs ========== */
.tele-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.tele-kpi-card {
    background: white;
    border-radius: var(--border-radius-md);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e2e8f0;
    transition: var(--transition-fast);
}

.tele-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.tele-kpi-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    flex-shrink: 0;
}

.tele-kpi-content {
    flex: 1;
}

.tele-kpi-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-dark);
    line-height: 1.1;
}

.tele-kpi-label {
    font-size: 13px;
    color: var(--gray-medium);
}

.tele-kpi-breakdown {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px;
}

.tele-kpi-breakdown span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tele-kpi-breakdown .success { color: var(--tele-success); }
.tele-kpi-breakdown .warning { color: var(--tele-warning); }
.tele-kpi-breakdown .info { color: var(--tele-info); }

/* ========== DASHBOARD GRID ========== */
.tele-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.tele-dashboard-panel {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.tele-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--tele-bg) 0%, white 100%);
    border-bottom: 1px solid #e2e8f0;
}

.tele-panel-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.tele-panel-header h3 i {
    color: var(--tele-primary);
}

.tele-panel-body {
    padding: 16px 20px;
    max-height: 300px;
    overflow-y: auto;
}

/* ========== LISTA DE CITAS ========== */
.tele-citas-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tele-cita-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.tele-cita-item:hover {
    background: #e0f2fe;
}

.tele-cita-time {
    font-size: 14px;
    font-weight: 700;
    color: var(--tele-primary);
    min-width: 50px;
}

.tele-cita-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tele-cita-paciente {
    font-weight: 600;
    color: var(--gray-dark);
}

.tele-cita-especialidad {
    font-size: 12px;
    color: var(--gray-medium);
}

.tele-cita-profesional {
    font-size: 12px;
    color: var(--gray-medium);
}

/* ========== CALIDAD DE SERVICIO ========== */
.tele-quality-meters {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.tele-quality-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tele-quality-label {
    min-width: 70px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-dark);
}

.tele-quality-bar {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.tele-quality-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.tele-quality-value {
    min-width: 45px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

.tele-quality-stats {
    display: flex;
    gap: 20px;
}

.tele-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-medium);
}

.tele-stat-item.warning {
    color: var(--tele-warning);
}

/* ========== ALERTAS ========== */
.tele-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tele-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: #fef2f2;
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--tele-danger);
}

.tele-alert-item i {
    color: var(--tele-danger);
    margin-top: 2px;
}

.tele-alert-content {
    flex: 1;
}

.tele-alert-message {
    display: block;
    font-size: 13px;
    color: var(--gray-dark);
}

.tele-alert-time {
    font-size: 11px;
    color: var(--gray-medium);
}

/* ========== ACCIONES R�PIDAS ========== */
.tele-quick-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.tele-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 28px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.tele-action-btn:hover {
    border-color: var(--tele-primary);
    background: var(--tele-bg);
    transform: translateY(-3px);
}

.tele-action-btn i {
    font-size: 24px;
    color: var(--tele-primary);
}

.tele-action-btn span {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-dark);
}

/* ========== EMPTY STATE / LOADING / ERROR ========== */
.tele-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-medium);
}

.tele-empty-state i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.tele-empty-state.success {
    color: var(--tele-success);
}

.tele-empty-state.success i {
    opacity: 1;
}

.tele-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--tele-primary);
}

.tele-loading i {
    margin-bottom: 12px;
}

.tele-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    color: var(--tele-danger);
}

.tele-error i {
    font-size: 40px;
    margin-bottom: 12px;
}

/* ========== AGENDA TIMELINE ========== */
.tele-agenda-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tele-agenda-header h3 {
    font-size: 18px;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.tele-agenda-header h3 i {
    color: var(--tele-primary);
}

.tele-agenda-timeline {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.tele-timeline-row {
    display: flex;
    border-bottom: 1px solid #f1f5f9;
}

.tele-timeline-row:last-child {
    border-bottom: none;
}

.tele-timeline-hour {
    width: 70px;
    padding: 16px;
    background: #f8fafc;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-dark);
    border-right: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.tele-timeline-slots {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    min-height: 80px;
    align-items: flex-start;
}

.tele-slot-empty {
    color: #94a3b8;
    font-size: 12px;
    padding: 8px 12px;
}

.tele-timeline-cita {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    padding: 10px 14px;
    min-width: 220px;
    cursor: pointer;
    transition: var(--transition-fast);
    border-left: 4px solid var(--tele-primary);
}

.tele-timeline-cita:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.tele-timeline-cita.estado-completada {
    border-left-color: var(--tele-success);
    background: #f0fdf4;
}

.tele-timeline-cita.estado-cancelada {
    border-left-color: var(--tele-danger);
    background: #fef2f2;
    opacity: 0.7;
}

.tele-timeline-cita.estado-en_consulta {
    border-left-color: var(--tele-success);
    background: linear-gradient(135deg, #d1fae5 0%, white 100%);
    animation: teleConsultaPulse 2s infinite;
}

@keyframes teleConsultaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(5, 150, 105, 0); }
}

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

.tele-cita-hora {
    font-size: 12px;
    font-weight: 700;
    color: var(--tele-primary);
}

.tele-cita-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.tele-cita-body span {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tele-cita-body .paciente {
    font-weight: 600;
    color: var(--gray-dark);
}

.tele-cita-body .especialidad,
.tele-cita-body .profesional {
    color: var(--gray-medium);
}

.tele-cita-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tele-cita-footer .modalidad {
    font-size: 11px;
    color: var(--gray-medium);
}

/* ========== TURNERO VIRTUAL ========== */
.tele-turnero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tele-turnero-header h3 {
    font-size: 18px;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.tele-turnero-stats {
    display: flex;
    gap: 20px;
}

.tele-turnero-stats .stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-dark);
}

.tele-turnero-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tele-turnero-column {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.tele-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.tele-column-header.espera {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.tele-column-header.llamado {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.tele-column-header.atencion {
    background: linear-gradient(135deg, var(--tele-success), #047857);
}

.tele-column-header .count {
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
}

.tele-turnero-list {
    padding: 12px;
    min-height: 300px;
    max-height: 500px;
    overflow-y: auto;
}

.tele-turno-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    padding: 14px;
    margin-bottom: 10px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.tele-turno-numero {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--tele-primary), var(--tele-primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.tele-turno-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tele-turno-info .paciente {
    font-weight: 600;
    color: var(--gray-dark);
}

.tele-turno-info .especialidad,
.tele-turno-info .tiempo {
    font-size: 12px;
    color: var(--gray-medium);
}

.tele-turno-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ========== TABLA DE CONSULTAS ========== */
.tele-consultas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tele-consultas-header h3 {
    font-size: 18px;
    color: var(--gray-dark);
    margin: 0;
}

.tele-consultas-table,
.tele-audit-table {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.tele-consultas-table table,
.tele-audit-table table {
    width: 100%;
    border-collapse: collapse;
}

.tele-consultas-table th,
.tele-audit-table th {
    background: #f8fafc;
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-dark);
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
}

.tele-consultas-table td,
.tele-audit-table td {
    padding: 12px 16px;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
}

.tele-consultas-table tbody tr:hover,
.tele-audit-table tbody tr:hover {
    background: #f8fafc;
}

.tele-consultas-table tbody tr.error {
    background: #fef2f2;
}

.tele-table-actions {
    display: flex;
    gap: 6px;
}

.tele-table-actions button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--gray-medium);
}

.tele-table-actions button:hover {
    background: var(--tele-primary);
    color: white;
    border-color: var(--tele-primary);
}

.tele-table-actions button.success:hover {
    background: var(--tele-success);
    border-color: var(--tele-success);
}

.tele-empty {
    text-align: center;
    padding: 40px !important;
    color: var(--gray-medium);
}

.text-success { color: var(--tele-success) !important; }
.text-danger { color: var(--tele-danger) !important; }

/* ========== GRIDS DE CARDS ========== */
.tele-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tele-section-header h3 {
    font-size: 18px;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.tele-section-header h3 i {
    color: var(--tele-primary);
}

.tele-profesionales-grid,
.tele-centros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Profesional Card */
.tele-profesional-card {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid #e2e8f0;
    padding: 20px;
    display: flex;
    gap: 16px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.tele-profesional-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: var(--tele-primary);
}

.tele-prof-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.tele-prof-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tele-prof-info {
    flex: 1;
}

.tele-prof-info h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    color: var(--gray-dark);
}

.tele-prof-info .especialidad {
    display: block;
    font-size: 13px;
    color: var(--tele-primary);
    font-weight: 500;
}

.tele-prof-info .registro,
.tele-prof-info .tipo {
    display: block;
    font-size: 12px;
    color: var(--gray-medium);
    margin-top: 4px;
}

.tele-prof-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.tele-prof-stats .stat {
    font-size: 12px;
    color: var(--gray-medium);
}

.tele-prof-stats .estado {
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
    font-size: 11px;
    font-weight: 600;
}

.tele-prof-stats .estado.activo {
    background: #d1fae5;
    color: #047857;
}

.tele-prof-stats .estado.inactivo {
    background: #fee2e2;
    color: #dc2626;
}

/* Centro Card */
.tele-centro-card {
    background: white;
    border-radius: var(--border-radius-md);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-fast);
}

.tele-centro-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: var(--tele-primary);
}

.tele-centro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, var(--tele-bg) 0%, white 100%);
    border-bottom: 1px solid #e2e8f0;
}

.tele-centro-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--tele-primary), var(--tele-primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
}

.tele-badge.tipo-referencia {
    background: #dbeafe;
    color: #1d4ed8;
}

.tele-badge.tipo-remisor {
    background: #fef3c7;
    color: #b45309;
}

.tele-badge.tipo-bidireccional {
    background: #d1fae5;
    color: #047857;
}

.tele-centro-body {
    padding: 16px;
}

.tele-centro-body h4 {
    margin: 0 0 8px 0;
    font-size: 15px;
    color: var(--gray-dark);
}

.tele-centro-body p {
    margin: 4px 0;
    font-size: 12px;
    color: var(--gray-medium);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tele-centro-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.tele-centro-capacidades {
    display: flex;
    gap: 8px;
}

.tele-centro-capacidades i {
    width: 28px;
    height: 28px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--tele-primary);
}

.tele-centro-footer .nivel {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-dark);
}

/* ========== MODALES ========== */
.tele-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tele-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.tele-modal {
    background: white;
    border-radius: var(--border-radius-lg);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.tele-modal-overlay.active .tele-modal {
    transform: scale(1);
}

.tele-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--tele-primary), var(--tele-primary-dark));
    color: white;
}

.tele-modal-header.profesional {
    background: linear-gradient(135deg, var(--tele-secondary), #082A5D);
}

.tele-modal-header.centro {
    background: linear-gradient(135deg, var(--tele-success), #047857);
}

.tele-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}

.tele-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: var(--transition-fast);
}

.tele-modal-close:hover {
    background: rgba(255,255,255,0.3);
}

.tele-modal-body {
    padding: 24px;
}

.tele-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    margin: 24px -24px -24px -24px;
}

/* Form Styles */
.tele-form-section {
    margin-bottom: 24px;
}

.tele-form-section h4 {
    font-size: 14px;
    color: var(--gray-dark);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tele-bg);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tele-form-section h4 i {
    color: var(--tele-primary);
}

.tele-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

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

.tele-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-dark);
}

.tele-form-group input,
.tele-form-group select,
.tele-form-group textarea {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    transition: var(--transition-fast);
}

.tele-form-group input:focus,
.tele-form-group select:focus,
.tele-form-group textarea:focus {
    outline: none;
    border-color: var(--tele-primary);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .tele-turnero-columns {
        grid-template-columns: 1fr;
    }
    
    .tele-form-row {
        grid-template-columns: 1fr;
    }
    
    .tele-dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .tele-timeline-row {
        flex-direction: column;
    }
    
    .tele-timeline-hour {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
}

/* ======================================================
   L&C360 - LEGAL Y CUMPLIMIENTO
   Gesti�n de Riesgos, Controles, Casos, Planes de Acci�n
   ====================================================== */

/* Variables de L&C */
:root {
    --lc-primary: #6f42c1;
    --lc-primary-dark: #5a32a3;
    --lc-primary-light: #9461fb;
    --lc-secondary: #17a2b8;
    --lc-bg: #f8f5ff;
    --lc-success: #28a745;
    --lc-warning: #ffc107;
    --lc-danger: #dc3545;
    --lc-info: #17a2b8;
}

/* ========== TABS PRINCIPALES L&C V2 - DISE�O MEJORADO ========== */
.lc-main-tabs-v2 {
    background: linear-gradient(135deg, #082A5D 0%, #1F6BA7 50%, #114070 100%);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 10px 40px rgba(79, 70, 229, 0.3);
    position: relative;
    overflow: hidden;
}

.lc-main-tabs-v2::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(31, 107, 167, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.lc-main-tabs-v2::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.lc-tabs-wrapper {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.lc-tab-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    min-width: 140px;
}

.lc-tab-v2:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.lc-tab-v2.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-color: transparent;
    box-shadow: 0 8px 32px rgba(111, 66, 193, 0.4);
}

.lc-tab-v2.active .lc-tab-title {
    color: #1e1b4b;
}

.lc-tab-v2.active .lc-tab-subtitle {
    color: #6b7280;
}

.lc-tab-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--lc-primary) 0%, var(--lc-primary-dark) 100%);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.lc-tab-v2:hover .lc-tab-icon {
    transform: scale(1.1);
}

.lc-tab-v2.active .lc-tab-icon {
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.4);
}

/* Colores espec�ficos por pesta�a */
.lc-tab-icon.riesgos {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.lc-tab-v2.active .lc-tab-icon.riesgos {
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.lc-tab-icon.controles {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.lc-tab-v2.active .lc-tab-icon.controles {
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.lc-tab-icon.casos {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.lc-tab-v2.active .lc-tab-icon.casos {
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.lc-tab-icon.acciones {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.lc-tab-v2.active .lc-tab-icon.acciones {
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.lc-tab-icon.reportes {
    background: linear-gradient(135deg, #2482B8 0%, #1F6BA7 100%);
}

.lc-tab-v2.active .lc-tab-icon.reportes {
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.4);
}

.lc-tab-icon.config {
    background: linear-gradient(135deg, #1C507B 0%, #082A5D 100%);
}

.lc-tab-v2.active .lc-tab-icon.config {
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.4);
}

.lc-tab-icon i {
    font-size: 18px;
    color: #fff;
}

.lc-tab-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.lc-tab-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.lc-tab-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.88);
    transition: color 0.3s ease;
    white-space: nowrap;
}

.lc-tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lc-primary) 0%, var(--lc-primary-light) 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: 3px 3px 0 0;
}

.lc-tab-v2.active .lc-tab-indicator {
    transform: scaleX(1);
    background: linear-gradient(90deg, #2482B8 0%, #2482B8 100%);
}

/* ========== TABS CL�SICOS L&C (respaldo) ========== */
.lc-main-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--lc-bg) 0%, #D7EBEA 100%);
    border-radius: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.lc-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: white;
    border: 2px solid transparent;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.lc-tab:hover {
    background: var(--lc-primary-light);
    color: white;
    transform: translateY(-2px);
}

.lc-tab.active {
    background: linear-gradient(135deg, var(--lc-primary) 0%, var(--lc-primary-dark) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.35);
}

.lc-tab i {
    font-size: 14px;
}

.lc-tab-content {
    animation: lcFadeIn 0.3s ease;
}

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

.lc-content-wrapper {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ============================================================= */
/* L&C: DASHBOARD V2 - DISE�O MEJORADO                          */
/* ============================================================= */

/* Dashboard Header */
.lc-dashboard-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #082A5D 0%, #1F6BA7 100%);
    border-radius: 16px;
    margin-bottom: 24px;
}

.lc-dashboard-welcome {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lc-welcome-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-welcome-icon i {
    font-size: 28px;
    color: #fff;
}

.lc-welcome-text h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.lc-welcome-text p {
    margin: 4px 0 0;
    font-size: 14px;
    color: rgba(255,255,255,0.92);
}

.lc-dashboard-date {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
}

/* M�tricas Grid V2 */
.lc-metrics-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.lc-metric-card-v2 {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.lc-metric-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.lc-metric-bg {
    position: absolute;
    top: -50%;
    right: -30%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    opacity: 0.08;
    transition: transform 0.3s ease;
}

.lc-metric-card-v2:hover .lc-metric-bg {
    transform: scale(1.2);
}

.lc-metric-card-v2.riesgos .lc-metric-bg { background: #ef4444; }
.lc-metric-card-v2.casos .lc-metric-bg { background: #f59e0b; }
.lc-metric-card-v2.controles .lc-metric-bg { background: #10b981; }
.lc-metric-card-v2.acciones .lc-metric-bg { background: #3b82f6; }

.lc-metric-content {
    position: relative;
    z-index: 1;
}

.lc-metric-icon-v2 {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.lc-metric-card-v2.riesgos .lc-metric-icon-v2 { background: linear-gradient(135deg, #ef4444, #dc2626); }
.lc-metric-card-v2.casos .lc-metric-icon-v2 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.lc-metric-card-v2.controles .lc-metric-icon-v2 { background: linear-gradient(135deg, #10b981, #059669); }
.lc-metric-card-v2.acciones .lc-metric-icon-v2 { background: linear-gradient(135deg, #3b82f6, #2563eb); }

.lc-metric-icon-v2 i {
    font-size: 22px;
    color: #fff;
}

.lc-metric-data {
    margin-bottom: 12px;
}

.lc-metric-number {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.lc-metric-title {
    display: block;
    font-size: 14px;
    color: #64748b;
    margin-top: 6px;
}

.lc-metric-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.lc-metric-indicator.success {
    background: #d1fae5;
    color: #059669;
}

.lc-metric-indicator.danger {
    background: #fee2e2;
    color: #dc2626;
}

.lc-metric-indicator.warning {
    background: #fef3c7;
    color: #d97706;
}

.lc-metric-hover-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.03), transparent);
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.lc-metric-card-v2:hover .lc-metric-hover-text {
    opacity: 1;
    transform: translateY(0);
}

/* Dashboard Row V2 */
.lc-dashboard-row-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.lc-dashboard-row-v2.full-row {
    grid-template-columns: 1fr;
}

/* Dashboard Card V2 */
.lc-dashboard-card-v2 {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.lc-dashboard-card-v2:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.lc-dashboard-card-v2.lc-full-card {
    grid-column: 1 / -1;
}

.lc-card-header-v2 {
    padding: 18px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lc-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.lc-card-title i {
    color: var(--lc-primary);
}

.lc-card-subtitle {
    font-size: 12px;
    color: #94a3b8;
}

.lc-card-badge {
    padding: 4px 12px;
    background: #e2e8f0;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.lc-card-badge.danger {
    background: #fee2e2;
    color: #dc2626;
}

.lc-card-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.lc-card-actions {
    display: flex;
    gap: 8px;
}

.lc-card-btn {
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lc-card-btn:hover {
    background: var(--lc-primary);
    color: #fff;
    border-color: var(--lc-primary);
}

.lc-card-body-v2 {
    padding: 24px;
}

/* Heatmap V2 */
.lc-heatmap-v2 {
    padding: 16px 0;
}

.lc-heatmap-wrapper {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.lc-heatmap-y-axis {
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.lc-axis-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
}

.lc-heatmap-grid {
    flex: 1;
}

.lc-heatmap-table-v2 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
}

.lc-heatmap-corner {
    width: 90px;
}

.lc-heatmap-header {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    padding: 8px 4px;
    text-align: center;
}

.lc-heatmap-row-header {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    padding: 8px;
    text-align: right;
}

.lc-heatmap-cell-v2 {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: var(--cell-bg);
    transition: all 0.2s ease;
    position: relative;
}

.lc-heatmap-cell-v2::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: var(--cell-bg);
    opacity: 0.3;
}

.lc-heatmap-cell-v2.has-data {
    cursor: pointer;
}

.lc-heatmap-cell-v2.has-data::before {
    opacity: 1;
}

.lc-heatmap-cell-v2.has-data:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.lc-cell-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-cell-count {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.lc-heatmap-x-axis {
    text-align: center;
    padding-top: 12px;
}

.lc-heatmap-legend-v2 {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.lc-legend-item-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
}

.lc-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

/* Distribution V2 */
.lc-distribution-v2 {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lc-distribution-row {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

.lc-distribution-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.lc-distribution-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lc-distribution-name {
    font-size: 13px;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-distribution-bar-wrapper {
    flex: 1;
    height: 10px;
    background: #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
}

.lc-distribution-bar-v2 {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.lc-distribution-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    justify-content: flex-end;
}

.lc-distribution-count {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.lc-distribution-pct {
    font-size: 11px;
    color: #94a3b8;
}

/* Top List V2 */
.lc-top-list-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lc-top-item-v2 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

.lc-top-item-v2:hover {
    background: #f1f5f9;
    transform: translateX(6px);
}

.lc-top-rank-v2 {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.lc-top-content {
    flex: 1;
    min-width: 0;
}

.lc-top-code {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
}

.lc-top-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-top-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    min-width: 60px;
}

.lc-top-score .lc-score-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.lc-top-score .lc-score-label {
    font-size: 10px;
    color: rgba(255,255,255,0.92);
}

.lc-top-score.lc-nivel-bajo { background: linear-gradient(135deg, #10b981, #059669); }
.lc-top-score.lc-nivel-moderado { background: linear-gradient(135deg, #f59e0b, #d97706); }
.lc-top-score.lc-nivel-alto { background: linear-gradient(135deg, #f97316, #ea580c); }
.lc-top-score.lc-nivel-extremo { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* Actions List V2 */
.lc-actions-list-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lc-action-item-v2 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 4px solid #e2e8f0;
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

.lc-action-item-v2.critico { border-left-color: #ef4444; background: #fef2f2; }
.lc-action-item-v2.alerta { border-left-color: #f59e0b; background: #fffbeb; }
.lc-action-item-v2.normal { border-left-color: #10b981; }

.lc-action-icon-v2 {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
}

.lc-action-item-v2.critico .lc-action-icon-v2 { background: #fee2e2; color: #ef4444; }
.lc-action-item-v2.alerta .lc-action-icon-v2 { background: #fef3c7; color: #f59e0b; }
.lc-action-item-v2.normal .lc-action-icon-v2 { background: #d1fae5; color: #10b981; }

.lc-action-content {
    flex: 1;
    min-width: 0;
}

.lc-action-code {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

.lc-action-title {
    display: block;
    font-size: 13px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-action-deadline {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    border-radius: 10px;
    background: #e2e8f0;
}

.lc-action-deadline.critico { background: #fee2e2; }
.lc-action-deadline.alerta { background: #fef3c7; }

.lc-deadline-days {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.lc-action-deadline.critico .lc-deadline-days { color: #ef4444; }
.lc-action-deadline.alerta .lc-deadline-days { color: #d97706; }

.lc-deadline-label {
    font-size: 10px;
    color: #64748b;
}

/* Casos Stats V2 */
.lc-casos-stats-v2 {
    display: flex;
    align-items: center;
    gap: 40px;
}

.lc-casos-total {
    text-align: center;
    padding: 20px;
}

.lc-total-number {
    display: block;
    font-size: 48px;
    font-weight: 800;
    color: var(--lc-primary);
}

.lc-total-label {
    display: block;
    font-size: 13px;
    color: #64748b;
}

.lc-casos-grid-v2 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.lc-caso-stat-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

.lc-caso-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.lc-caso-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--estado-color);
}

.lc-caso-stat-pct {
    font-size: 12px;
    color: #94a3b8;
}

.lc-caso-stat-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    margin-bottom: 8px;
    overflow: hidden;
}

.lc-caso-stat-fill {
    height: 100%;
    background: var(--estado-color);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.lc-caso-stat-label {
    font-size: 12px;
    color: #64748b;
}

/* Empty State Mini */
.lc-empty-mini {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.lc-empty-mini i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.lc-empty-mini span {
    display: block;
    font-size: 13px;
}

.lc-empty-mini.success {
    color: #10b981;
}

.lc-empty-mini.success i {
    opacity: 1;
}

/* Loading V2 */
.lc-loading-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.lc-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--lc-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== M�TRICAS DASHBOARD (Legacy) ========== */
.lc-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.lc-metric-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lc-metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.lc-metric-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.lc-metric-info {
    flex: 1;
}

.lc-metric-value {
    font-size: 28px;
    font-weight: 700;
    color: #1a202c;
}

.lc-metric-label {
    font-size: 13px;
    color: #718096;
    margin-top: 2px;
}

.lc-metric-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    margin-top: 6px;
}

/* ========== DASHBOARD CARDS ========== */
.lc-dashboard-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.lc-dashboard-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.lc-dashboard-card.full-width {
    grid-column: 1 / -1;
}

.lc-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.lc-card-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a202c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-card-header h3 i {
    color: var(--lc-primary);
}

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

/* ========== HEATMAP ========== */
.lc-heatmap-container {
    position: relative;
    padding: 20px 10px 10px 30px;
}

.lc-heatmap-y-label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: rotate(-90deg) translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: #718096;
}

.lc-heatmap-x-label {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #718096;
    margin-top: 8px;
}

.lc-heatmap-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
}

.lc-heatmap-table th {
    font-size: 10px;
    font-weight: 600;
    color: #4a5568;
    padding: 6px 4px;
    text-align: center;
}

.lc-heatmap-cell {
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
    font-weight: 700;
    font-size: 16px;
    color: white;
    cursor: default;
    transition: transform 0.2s ease;
}

.lc-heatmap-cell.has-data:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.lc-heatmap-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 16px;
}

.lc-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #4a5568;
}

.lc-legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

/* ========== DISTRIBUCI�N CATEGOR�AS ========== */
.lc-distribution-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lc-distribution-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lc-distribution-label {
    width: 120px;
    font-size: 12px;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-distribution-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.lc-distribution-bar-container {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.lc-distribution-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.lc-distribution-value {
    width: 80px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: #1a202c;
}

/* ========== TOP LIST ========== */
.lc-top-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lc-top-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lc-top-item:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

.lc-top-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lc-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.lc-top-info {
    flex: 1;
}

.lc-top-code {
    font-size: 11px;
    font-weight: 600;
    color: var(--lc-primary);
}

.lc-top-name {
    font-size: 13px;
    color: #1a202c;
    font-weight: 500;
}

.lc-top-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    color: white;
}

/* ========== NIVELES DE RIESGO ========== */
.lc-nivel-bajo { background: #28a745 !important; color: white !important; }
.lc-nivel-moderado { background: #ffc107 !important; color: #1a202c !important; }
.lc-nivel-alto { background: #fd7e14 !important; color: white !important; }
.lc-nivel-extremo { background: #dc3545 !important; color: white !important; }
.lc-nivel-sin-evaluar { background: #6c757d !important; color: white !important; }

/* ========== CLASIFICACI�N CONTROLES ========== */
.lc-clasificacion-fuerte { background: #28a745 !important; color: white !important; }
.lc-clasificacion-moderado { background: #ffc107 !important; color: #1a202c !important; }
.lc-clasificacion-debil { background: #dc3545 !important; color: white !important; }

/* ========== ACCIONES PR�XIMAS ========== */
.lc-actions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lc-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
    border-left: 4px solid #28a745;
}

.lc-action-item.lc-action-proximo {
    border-left-color: #ffc107;
}

.lc-action-item.lc-action-urgente {
    border-left-color: #dc3545;
    background: #fff5f5;
}

.lc-action-icon {
    width: 32px;
    text-align: center;
    color: #718096;
}

.lc-action-urgente .lc-action-icon {
    color: #dc3545;
}

.lc-action-info {
    flex: 1;
}

.lc-action-code {
    font-size: 11px;
    font-weight: 600;
    color: var(--lc-primary);
}

.lc-action-title {
    font-size: 13px;
    color: #1a202c;
}

.lc-action-date .lc-badge {
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

/* ========== ESTADOS CASOS ========== */
.lc-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.lc-status-card {
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    text-align: center;
}

.lc-status-value {
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
}

.lc-status-label {
    font-size: 12px;
    color: #718096;
    margin-top: 4px;
}

/* ========== SECCI�N TOOLBAR ========== */
.lc-section-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
}

.lc-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.lc-filters select,
.lc-filters input {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    background: white;
}

.lc-filters input {
    min-width: 200px;
}

.lc-view-toggle {
    display: flex;
    gap: 4px;
}

.lc-view-toggle .btn {
    padding: 6px 10px;
    background: white;
    border: 1px solid #e2e8f0;
}

.lc-view-toggle .btn.active {
    background: var(--lc-primary);
    color: white;
    border-color: var(--lc-primary);
}

/* ============================================================= */
/* L&C: RIESGOS GRID V2 - DISE�O MEJORADO                       */
/* ============================================================= */
.lc-riesgos-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
}

.lc-riesgo-card-v2 {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.lc-riesgo-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.lc-riesgo-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
}

.lc-riesgo-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 0;
}

.lc-riesgo-codigo-v2 {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lc-riesgo-nivel-v2 {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.lc-riesgo-nivel-v2.bajo { background: linear-gradient(135deg, #10b981, #059669); }
.lc-riesgo-nivel-v2.moderado { background: linear-gradient(135deg, #f59e0b, #d97706); }
.lc-riesgo-nivel-v2.alto { background: linear-gradient(135deg, #f97316, #ea580c); }
.lc-riesgo-nivel-v2.extremo { background: linear-gradient(135deg, #ef4444, #dc2626); }
.lc-riesgo-nivel-v2.sin-evaluar { background: #94a3b8; }

.lc-riesgo-title-v2 {
    padding: 14px 20px 12px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
    margin: 0;
}

.lc-riesgo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 16px;
}

.lc-riesgo-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 11px;
    color: #64748b;
}

.lc-riesgo-tag i {
    font-size: 10px;
}

.lc-riesgo-tag.categoria { background: #D7EBEA; color: #1F6BA7; }
.lc-riesgo-tag.proceso { background: #dbeafe; color: #2563eb; }

.lc-riesgo-metrics-v2 {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.lc-riesgo-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}

.lc-riesgo-stat i {
    font-size: 14px;
    opacity: 0.7;
}

.lc-riesgo-stat span {
    font-weight: 600;
    color: #475569;
}

.lc-riesgo-score-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 20px;
}

.lc-score-block {
    text-align: center;
    padding: 10px 20px;
    border-radius: 10px;
    background: #f1f5f9;
    min-width: 80px;
}

.lc-score-block .lc-score-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.lc-score-block .lc-score-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #475569;
}

.lc-score-block.residual { background: #f1f5f9; }
.lc-score-block.residual.bajo { background: #d1fae5; }
.lc-score-block.residual.bajo .lc-score-value { color: #059669; }
.lc-score-block.residual.moderado { background: #fef3c7; }
.lc-score-block.residual.moderado .lc-score-value { color: #d97706; }
.lc-score-block.residual.alto { background: #fed7aa; }
.lc-score-block.residual.alto .lc-score-value { color: #ea580c; }
.lc-score-block.residual.extremo { background: #fee2e2; }
.lc-score-block.residual.extremo .lc-score-value { color: #dc2626; }

.lc-score-arrow {
    color: #cbd5e1;
    font-size: 18px;
}

/* ============================================================= */
/* L&C: CONTROLES GRID V2 - DISE�O MEJORADO                     */
/* ============================================================= */
.lc-controles-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.lc-control-card-v2 {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.lc-control-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.lc-control-header-v2 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 0;
}

.lc-control-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-control-icon i {
    font-size: 20px;
    color: #fff;
}

.lc-control-id {
    flex: 1;
}

.lc-control-codigo {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lc-control-clasificacion {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
}

.lc-control-clasificacion.fuerte { background: #d1fae5; color: #059669; }
.lc-control-clasificacion.moderado { background: #fef3c7; color: #d97706; }
.lc-control-clasificacion.d�bil, .lc-control-clasificacion.debil { background: #fee2e2; color: #dc2626; }
.lc-control-clasificacion.sin-evaluar { background: #e2e8f0; color: #64748b; }

.lc-control-body-v2 {
    padding: 16px 20px;
}

.lc-control-nombre {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}

.lc-control-descripcion {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lc-control-meta-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 16px;
}

.lc-control-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 11px;
    color: #64748b;
}

.lc-control-tag i {
    font-size: 10px;
    opacity: 0.7;
}

.lc-control-footer-v2 {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.lc-control-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
}

.lc-control-btn.outline {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.lc-control-btn.outline:hover {
    background: #f1f5f9;
    color: #475569;
}

.lc-control-btn.primary {
    background: var(--lc-primary);
    color: #fff;
}

.lc-control-btn.primary:hover {
    background: var(--lc-primary-dark);
    transform: translateY(-1px);
}

/* Button Primary L&C */
.lc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--lc-primary), var(--lc-primary-dark));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(111, 66, 193, 0.3);
}

.lc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(111, 66, 193, 0.4);
}

/* Empty State V2 Variations */
.lc-empty-state-v2 .lc-empty-icon.controles {
    background: #d1fae5;
}

.lc-empty-state-v2 .lc-empty-icon.controles i {
    color: #10b981;
}

.lc-empty-state-v2 .lc-empty-icon.config {
    background: #eff6ff;
}

.lc-empty-state-v2 .lc-empty-icon.config i {
    color: var(--lc-primary);
}

/* ========== GRID DE RIESGOS (Legacy) ========== */
.lc-riesgos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.lc-riesgo-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lc-riesgo-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.lc-riesgo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.lc-riesgo-codigo {
    font-size: 12px;
    font-weight: 600;
    color: var(--lc-primary);
}

.lc-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.lc-riesgo-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 8px;
    line-height: 1.4;
}

.lc-riesgo-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #718096;
    margin-bottom: 12px;
}

.lc-riesgo-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lc-riesgo-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.lc-riesgo-stats {
    display: flex;
    gap: 12px;
}

.lc-riesgo-stats span {
    font-size: 12px;
    color: #718096;
    display: flex;
    align-items: center;
    gap: 4px;
}

.lc-riesgo-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

.lc-score-inherente {
    color: #718096;
}

.lc-score-residual {
    color: var(--lc-primary);
}

/* ========== DETALLE RIESGO ========== */
.lc-detalle-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.lc-detalle-title {
    flex: 1;
}

.lc-detalle-title .lc-codigo {
    font-size: 12px;
    font-weight: 600;
    color: var(--lc-primary);
    display: block;
    margin-bottom: 4px;
}

.lc-detalle-title h2 {
    margin: 0;
    font-size: 20px;
    color: #1a202c;
}

.lc-detalle-actions {
    display: flex;
    gap: 8px;
}

.lc-detalle-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.lc-detalle-card {
    background: #f8fafc;
    border-radius: 10px;
    padding: 20px;
}

.lc-detalle-card h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a202c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-detalle-card h4 i {
    color: var(--lc-primary);
}

.lc-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

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

.lc-info-item.full-width {
    grid-column: 1 / -1;
}

.lc-info-item label {
    font-size: 11px;
    font-weight: 600;
    color: #718096;
    text-transform: uppercase;
}

.lc-info-item span,
.lc-info-item p {
    font-size: 13px;
    color: #1a202c;
    margin: 0;
}

/* ========== EVALUACI�N GRID ========== */
.lc-evaluacion-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.lc-evaluacion-box {
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 10px;
    min-width: 140px;
}

.lc-evaluacion-box h5 {
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 600;
    color: #718096;
}

.lc-eval-valor {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto 8px;
}

.lc-eval-detalle {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 11px;
    color: #718096;
    margin-bottom: 6px;
}

.lc-eval-nivel {
    font-size: 13px;
    font-weight: 600;
    color: #1a202c;
}

.lc-evaluacion-arrow {
    text-align: center;
    color: #718096;
}

.lc-evaluacion-arrow i {
    font-size: 20px;
    display: block;
    margin-bottom: 4px;
}

.lc-evaluacion-arrow span {
    font-size: 11px;
}

/* ========== SECCIONES DETALLE ========== */
.lc-detalle-section {
    margin-bottom: 24px;
}

.lc-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.lc-section-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a202c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-section-header h4 i {
    color: var(--lc-primary);
}

/* ========== TABLAS ========== */
.lc-tabla-causas,
.lc-tabla-controles,
.lc-tabla-acciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lc-causa-item,
.lc-control-item,
.lc-accion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.lc-causa-codigo,
.lc-control-codigo,
.lc-accion-codigo {
    font-size: 11px;
    font-weight: 600;
    color: var(--lc-primary);
    min-width: 70px;
}

.lc-causa-descripcion,
.lc-control-info,
.lc-accion-info {
    flex: 1;
}

.lc-control-nombre,
.lc-accion-titulo {
    font-size: 13px;
    font-weight: 500;
    color: #1a202c;
}

.lc-causa-meta,
.lc-control-meta,
.lc-accion-responsable {
    font-size: 11px;
    color: #718096;
    margin-top: 2px;
}

.lc-causa-actions {
    display: flex;
    gap: 6px;
}

.lc-control-score {
    min-width: 100px;
    text-align: right;
}

.lc-accion-avance {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.lc-progress-bar {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.lc-progress-fill {
    height: 100%;
    background: var(--lc-primary);
    border-radius: 3px;
}

.lc-accion-avance span {
    font-size: 12px;
    font-weight: 600;
    color: #718096;
    min-width: 35px;
    text-align: right;
}

.lc-accion-fecha {
    min-width: 90px;
    font-size: 12px;
    color: #718096;
}

/* ========== MODALES ========== */
.lc-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.lc-modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.lc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.lc-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lc-modal-header h3 i {
    color: var(--lc-primary);
}

.lc-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: 20px;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-modal-close:hover {
    background: #e2e8f0;
    color: #1a202c;
}

.lc-modal-content form,
.lc-eval-form {
    padding: 24px;
}

.lc-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.lc-form-row:last-child {
    margin-bottom: 0;
}

.lc-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lc-form-group.full-width {
    grid-column: 1 / -1;
}

.lc-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
}

.lc-form-group input,
.lc-form-group select,
.lc-form-group textarea {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.lc-form-group input:focus,
.lc-form-group select:focus,
.lc-form-group textarea:focus {
    outline: none;
    border-color: var(--lc-primary);
    box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
}

.lc-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* ========== EVALUACI�N PREVIEW ========== */
.lc-eval-preview {
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin: 16px 0;
    color: white;
}

.lc-eval-preview-valor {
    font-size: 36px;
    font-weight: 700;
}

.lc-eval-preview-nivel {
    font-size: 16px;
    font-weight: 600;
    margin-top: 4px;
}

/* ========== REPORTES ========== */
.lc-reportes-intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.lc-report-card {
    padding: 40px 30px;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lc-report-card:hover {
    border-color: var(--lc-primary);
    background: var(--lc-bg);
    transform: translateY(-4px);
}

.lc-report-card h3 {
    margin: 16px 0 8px;
    font-size: 18px;
    color: #1a202c;
}

.lc-report-card p {
    margin: 0;
    font-size: 13px;
    color: #718096;
}

/* ========== CONFIGURACI�N ========== */
.lc-config-panels {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    min-height: 400px;
}

.lc-config-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lc-config-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #4a5568;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.lc-config-item:hover {
    background: #f1f5f9;
}

.lc-config-item.active {
    background: var(--lc-primary);
    color: white;
}

.lc-config-item i {
    width: 18px;
    text-align: center;
}

.lc-config-body {
    background: #f8fafc;
    border-radius: 10px;
    padding: 20px;
}

/* ========== EMPTY STATE ========== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state i {
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 15px;
    color: #718096;
    margin-bottom: 20px;
}

/* ========== LOADING ========== */
.lc-loading {
    text-align: center;
    padding: 60px 20px;
    color: #718096;
}

.lc-loading i {
    color: var(--lc-primary);
    margin-bottom: 12px;
}

.loading-spinner {
    text-align: center;
    padding: 40px;
    color: #718096;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
    .lc-dashboard-row {
        grid-template-columns: 1fr;
    }
    
    .lc-detalle-row {
        grid-template-columns: 1fr;
    }
    
    .lc-config-panels {
        grid-template-columns: 1fr;
    }
    
    .lc-config-menu {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .lc-evaluacion-grid {
        flex-direction: column;
    }
    
    .lc-evaluacion-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    /* Tabs V2 Responsive */
    .lc-main-tabs-v2 {
        padding: 16px;
        border-radius: 16px;
    }
    
    .lc-tabs-wrapper {
        gap: 8px;
    }
    
    .lc-tab-v2 {
        padding: 10px 14px;
        min-width: auto;
        flex: 1;
        justify-content: center;
    }
    
    .lc-tab-text {
        display: none;
    }
    
    .lc-tab-icon {
        width: 40px;
        height: 40px;
    }
    
    .lc-tab-icon i {
        font-size: 16px;
    }
    
    /* Tabs cl�sicos */
    .lc-main-tabs {
        gap: 6px;
    }
    
    .lc-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .lc-tab span {
        display: none;
    }
    
    .lc-section-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .lc-filters {
        flex-direction: column;
    }
    
    .lc-filters input,
    .lc-filters select {
        width: 100%;
    }
    
    .lc-riesgos-grid {
        grid-template-columns: 1fr;
    }
    
    .lc-form-row {
        grid-template-columns: 1fr;
    }
    
    .lc-info-grid {
        grid-template-columns: 1fr;
    }
    
    .lc-detalle-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .lc-detalle-actions {
        width: 100%;
    }
    
    .lc-detalle-actions .btn {
        flex: 1;
    }
}

/* ============================================================= */
/* L&C: CONTROLES GRID Y CARDS                                   */
/* ============================================================= */
.lc-controles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    padding: 20px;
}

.lc-control-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.lc-control-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.lc-control-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--lc-primary), var(--lc-primary-dark));
    color: #fff;
}

.lc-control-header h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
}

.lc-control-header .codigo {
    font-size: 12px;
    opacity: 0.85;
    font-family: monospace;
}

.lc-control-body {
    padding: 16px 20px;
}

.lc-control-body p {
    margin: 0 0 12px;
    font-size: 13px;
    color: #4a5568;
    line-height: 1.5;
}

.lc-control-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.lc-control-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 20px;
    background: #f0f4f8;
    color: #4a5568;
}

.lc-control-badge i {
    font-size: 10px;
    color: var(--lc-primary);
}

.lc-control-badge.tipo-preventivo {
    background: #e6f4ea;
    color: #1e7e34;
}

.lc-control-badge.tipo-detectivo {
    background: #fff3cd;
    color: #856404;
}

.lc-control-badge.tipo-correctivo {
    background: #f8d7da;
    color: #721c24;
}

.lc-control-footer {
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lc-control-footer .madurez {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #718096;
}

.lc-control-footer .madurez-bar {
    width: 60px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.lc-control-footer .madurez-fill {
    height: 100%;
    background: var(--lc-primary);
    border-radius: 3px;
}

/* ============================================================= */
/* L&C: ACCIONES GRID Y CARDS                                    */
/* ============================================================= */
.lc-acciones-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.lc-acciones-views {
    display: flex;
    gap: 8px;
}

.lc-acciones-views .btn-view {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: #4a5568;
    transition: all 0.2s;
}

.lc-acciones-views .btn-view.active,
.lc-acciones-views .btn-view:hover {
    background: var(--lc-primary);
    color: #fff;
    border-color: var(--lc-primary);
}

.lc-acciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    padding: 20px;
}

.lc-accion-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid #718096;
    padding: 16px;
    transition: all 0.2s;
    cursor: pointer;
}

.lc-accion-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.lc-accion-card.prioridad-critica {
    border-left-color: #dc3545;
}

.lc-accion-card.prioridad-alta {
    border-left-color: #fd7e14;
}

.lc-accion-card.prioridad-media {
    border-left-color: #ffc107;
}

.lc-accion-card.prioridad-baja {
    border-left-color: #28a745;
}

.lc-accion-card h4 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

.lc-accion-card p {
    margin: 0 0 12px;
    font-size: 13px;
    color: #718096;
    line-height: 1.4;
}

.lc-accion-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #a0aec0;
}

.lc-accion-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lc-accion-estado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 12px;
    font-weight: 500;
}

.lc-accion-estado.pendiente {
    background: #fef3c7;
    color: #92400e;
}

.lc-accion-estado.en-progreso {
    background: #dbeafe;
    color: #1e40af;
}

.lc-accion-estado.completada {
    background: #d1fae5;
    color: #065f46;
}

.lc-accion-estado.vencida {
    background: #fee2e2;
    color: #b91c1c;
}

/* ============================================================= */
/* L&C: KANBAN BOARD                                             */
/* ============================================================= */
.lc-kanban-board {
    display: flex;
    gap: 16px;
    padding: 20px;
    overflow-x: auto;
    min-height: 500px;
}

.lc-kanban-column {
    flex: 0 0 300px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: 600px;
}

.lc-kanban-header {
    padding: 14px 16px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}

.lc-kanban-header.pendiente {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.lc-kanban-header.en-progreso {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.lc-kanban-header.completada {
    background: linear-gradient(135deg, #10b981, #059669);
}

.lc-kanban-header.vencida {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.lc-kanban-count {
    background: rgba(255,255,255,0.25);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
}

.lc-kanban-cards {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lc-kanban-card {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.2s;
}

.lc-kanban-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.lc-kanban-card h5 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #2d3748;
}

.lc-kanban-card .fecha {
    font-size: 11px;
    color: #a0aec0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.lc-kanban-card .prioridad-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    margin-top: 8px;
}

.lc-kanban-card .prioridad-badge.critica {
    background: #fee2e2;
    color: #b91c1c;
}

.lc-kanban-card .prioridad-badge.alta {
    background: #fed7aa;
    color: #c2410c;
}

.lc-kanban-card .prioridad-badge.media {
    background: #fef3c7;
    color: #92400e;
}

.lc-kanban-card .prioridad-badge.baja {
    background: #d1fae5;
    color: #065f46;
}

/* ============================================================= */
/* L&C: MIS REPORTES                                             */
/* ============================================================= */
.lc-reportes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 12px;
    margin: 20px;
}

.lc-reportes-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.lc-reportes-header .btn-back {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.lc-reportes-header .btn-back:hover {
    background: rgba(255,255,255,0.3);
}

.lc-reportes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
    padding: 20px;
}

.lc-reporte-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.2s;
}

.lc-reporte-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.lc-reporte-card-header {
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lc-reporte-card-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

.lc-reporte-card-body {
    padding: 16px 18px;
}

.lc-reporte-card-body p {
    margin: 0 0 12px;
    font-size: 13px;
    color: #4a5568;
    line-height: 1.5;
}

.lc-reporte-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 12px;
    color: #718096;
}

.lc-reporte-info span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lc-reporte-info i {
    color: var(--lc-primary);
    width: 14px;
}

.lc-estado-reporte {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.lc-estado-reporte.pendiente {
    background: #fef3c7;
    color: #92400e;
}

.lc-estado-reporte.en-revision {
    background: #dbeafe;
    color: #1e40af;
}

.lc-estado-reporte.resuelto {
    background: #d1fae5;
    color: #065f46;
}

.lc-estado-reporte.cerrado {
    background: #e2e8f0;
    color: #4a5568;
}

/* ============================================================= */
/* L&C: MATRIZ DE SEVERIDAD                                      */
/* ============================================================= */
.lc-matriz-container {
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    margin: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.lc-matriz-container h3 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lc-matriz-container h3 i {
    color: var(--lc-primary);
}

.lc-matriz-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    margin-bottom: 20px;
}

.lc-matriz-table th,
.lc-matriz-table td {
    padding: 16px 12px;
    text-align: center;
    border-radius: 8px;
    font-size: 13px;
}

.lc-matriz-table th {
    background: #f1f5f9;
    color: #4a5568;
    font-weight: 600;
}

.lc-matriz-table td.label-row {
    background: #f1f5f9;
    color: #4a5568;
    font-weight: 600;
    text-align: right;
    padding-right: 16px;
}

.lc-matriz-cell {
    min-width: 80px;
    font-weight: 600;
    color: #fff;
    cursor: default;
    transition: transform 0.2s;
}

.lc-matriz-cell:hover {
    transform: scale(1.05);
}

.lc-matriz-cell.nivel-bajo {
    background: linear-gradient(135deg, #10b981, #059669);
}

.lc-matriz-cell.nivel-moderado {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.lc-matriz-cell.nivel-alto {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.lc-matriz-cell.nivel-critico {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.lc-matriz-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.lc-matriz-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4a5568;
}

.lc-matriz-legend-color {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.lc-matriz-legend-color.bajo {
    background: linear-gradient(135deg, #10b981, #059669);
}

.lc-matriz-legend-color.moderado {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.lc-matriz-legend-color.alto {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.lc-matriz-legend-color.critico {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* ============================================================= */
/* L&C: CONFIGURACI�N SECCIONES                                  */
/* ============================================================= */
.lc-config-section {
    background: #fff;
    border-radius: 12px;
    margin: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}

.lc-config-section-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--lc-primary), var(--lc-primary-dark));
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lc-config-section-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lc-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 20px;
}

.lc-config-card {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}

.lc-config-card:hover {
    border-color: var(--lc-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.lc-config-card h4 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

.lc-config-card p {
    margin: 0;
    font-size: 12px;
    color: #718096;
}

.lc-config-table {
    width: 100%;
    border-collapse: collapse;
}

.lc-config-table th,
.lc-config-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.lc-config-table th {
    background: #f1f5f9;
    font-weight: 600;
    font-size: 12px;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lc-config-table td {
    font-size: 13px;
    color: #2d3748;
}

.lc-config-table tr:hover td {
    background: #f8fafc;
}

.lc-sla-nivel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
}

.lc-sla-nivel.critico {
    background: #fee2e2;
    color: #b91c1c;
}

.lc-sla-nivel.alto {
    background: #fed7aa;
    color: #c2410c;
}

.lc-sla-nivel.moderado {
    background: #fef3c7;
    color: #92400e;
}

.lc-sla-nivel.bajo {
    background: #d1fae5;
    color: #065f46;
}

.lc-sla-dias {
    font-weight: 600;
}

/* ============================================================= */
/* L&C: MODAL GRANDE                                             */
/* ============================================================= */
.lc-modal-lg {
    max-width: 700px;
}

/* ============================================================= */
/* L&C: CONFIG LIST ITEMS                                        */
/* ============================================================= */
.lc-config-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    padding: 16px;
}

.lc-config-item-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s;
}

.lc-config-item-card:hover {
    border-color: var(--lc-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.lc-config-item-name {
    font-weight: 600;
    font-size: 14px;
    color: #2d3748;
}

.lc-config-item-desc {
    font-size: 12px;
    color: #718096;
}

.lc-config-header {
    padding: 14px 18px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.lc-config-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-config-header h4 i {
    color: var(--lc-primary);
}

/* ============================================================= */
/* L&C: MATRIZ DE SEVERIDAD V2 - DISE�O MEJORADO                */
/* ============================================================= */
.lc-matriz-container-v2 {
    background: #fff;
    border-radius: 16px;
    margin: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
}

.lc-matriz-header-v2 {
    padding: 24px 28px;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.lc-matriz-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lc-matriz-icon-wrapper {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.lc-matriz-icon-wrapper i {
    font-size: 24px;
    color: #fff;
}

.lc-matriz-header-v2 h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.lc-matriz-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,0.92);
}

.lc-matriz-stats-mini {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lc-matriz-stat-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.lc-matriz-stat-pill span {
    font-weight: 700;
}

.lc-matriz-stat-pill.bajo {
    background: rgba(16, 185, 129, 0.3);
    color: #ecfdf5;
}

.lc-matriz-stat-pill.moderado {
    background: rgba(245, 158, 11, 0.3);
    color: #fffbeb;
}

.lc-matriz-stat-pill.alto {
    background: rgba(249, 115, 22, 0.3);
    color: #fff7ed;
}

.lc-matriz-stat-pill.extremo {
    background: rgba(220, 38, 38, 0.3);
    color: #fef2f2;
}

.lc-matriz-body-v2 {
    padding: 32px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.lc-matriz-axis-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lc-matriz-axis-label.lc-axis-y {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    padding: 0 8px;
}

.lc-matriz-axis-label.lc-axis-x {
    justify-content: center;
    padding: 16px 0 0;
}

.lc-matriz-grid-wrapper {
    flex: 1;
}

.lc-matriz-table-v2 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px;
}

.lc-matriz-corner {
    width: 120px;
}

.lc-matriz-th-impact,
.lc-matriz-th-prob {
    padding: 12px 8px;
    background: #f1f5f9;
    border-radius: 10px;
}

.lc-matriz-th-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.lc-matriz-th-name {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.lc-matriz-th-score {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #64748b;
    padding: 2px 8px;
    border-radius: 10px;
}

.lc-matriz-cell-v2 {
    padding: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: 90px;
}

.lc-matriz-cell-v2::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cell-color);
    opacity: 1;
    transition: opacity 0.3s;
}

.lc-matriz-cell-v2:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 10;
}

.lc-matriz-cell-v2:hover::before {
    opacity: 0.9;
}

.lc-matriz-cell-content {
    position: relative;
    z-index: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.lc-matriz-cell-nivel {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.lc-matriz-cell-calif {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

.lc-matriz-legend-v2 {
    padding: 24px 28px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.lc-matriz-legend-title {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 16px;
}

.lc-matriz-legend-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.lc-matriz-legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.lc-legend-color {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.lc-legend-color.bajo {
    background: linear-gradient(135deg, #10b981, #059669);
}

.lc-legend-color.moderado {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.lc-legend-color.alto {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.lc-legend-color.extremo {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

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

.lc-legend-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.lc-legend-desc {
    font-size: 11px;
    color: #64748b;
}

/* ============================================================= */
/* L&C: CATEGOR�AS V2 - DISE�O MEJORADO                         */
/* ============================================================= */
.lc-categorias-container-v2 {
    background: #fff;
    border-radius: 16px;
    margin: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
}

.lc-categorias-header-v2 {
    padding: 24px 28px;
    background: linear-gradient(135deg, #1F6BA7 0%, #84CCD5 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.lc-categorias-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lc-categorias-icon-wrapper {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.lc-categorias-icon-wrapper i {
    font-size: 24px;
    color: #fff;
}

.lc-categorias-header-v2 h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.lc-categorias-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,0.92);
}

.lc-categorias-summary {
    display: flex;
    gap: 12px;
}

.lc-summary-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    backdrop-filter: blur(10px);
}

.lc-summary-badge.active {
    background: rgba(16, 185, 129, 0.3);
}

.lc-categorias-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 28px;
}

.lc-categoria-card-v2 {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

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

.lc-categoria-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    border-color: var(--cat-color);
}

.lc-categoria-icon-container {
    position: relative;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-categoria-icon-bg {
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--cat-color);
    opacity: 0.1;
    border-radius: 50%;
}

.lc-categoria-icon-container i {
    font-size: 32px;
    color: var(--cat-color);
    position: relative;
    z-index: 1;
}

.lc-categoria-content {
    padding: 0 24px 20px;
}

.lc-categoria-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.lc-categoria-nombre {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.lc-categoria-code {
    font-size: 10px;
    font-weight: 700;
    color: var(--cat-color);
    background: color-mix(in srgb, var(--cat-color) 15%, transparent);
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}

.lc-categoria-desc {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.lc-categoria-footer {
    padding: 14px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.lc-categoria-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
}

.lc-categoria-status.activo {
    color: #059669;
}

.lc-categoria-status.inactivo {
    color: #9ca3af;
}

.lc-categoria-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--cat-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.lc-categoria-card-v2:hover .lc-categoria-accent {
    transform: scaleX(1);
}

/* ============================================================= */
/* L&C: SLA V2 - DISE�O MEJORADO                                */
/* ============================================================= */
.lc-sla-container-v2 {
    background: #fff;
    border-radius: 16px;
    margin: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
}

.lc-sla-header-v2 {
    padding: 24px 28px;
    background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.lc-sla-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lc-sla-icon-wrapper {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.lc-sla-icon-wrapper i {
    font-size: 24px;
    color: #fff;
}

.lc-sla-header-v2 h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.lc-sla-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,0.92);
}

.lc-sla-metrics {
    display: flex;
    gap: 12px;
}

.lc-sla-metric-card {
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 12px 20px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.lc-sla-metric-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.lc-sla-metric-label {
    font-size: 11px;
    color: rgba(255,255,255,0.92);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lc-sla-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 28px;
}

.lc-sla-card-v2 {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.lc-sla-card-v2:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.lc-sla-card-header {
    padding: 16px 20px;
    background: var(--sla-gradient);
}

.lc-sla-severity-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.lc-sla-severity-badge i {
    font-size: 16px;
}

.lc-sla-card-body {
    padding: 16px 20px;
}

.lc-sla-item {
    padding: 14px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.lc-sla-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lc-sla-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.lc-sla-entity-type {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.lc-sla-notify-badge {
    width: 28px;
    height: 28px;
    background: #fef3c7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-sla-notify-badge i {
    font-size: 12px;
    color: #d97706;
}

.lc-sla-times {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lc-sla-time-block {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
}

.lc-sla-time-icon {
    width: 36px;
    height: 36px;
    background: #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-sla-time-icon i {
    font-size: 14px;
    color: #64748b;
}

.lc-sla-time-info {
    display: flex;
    flex-direction: column;
}

.lc-sla-time-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.lc-sla-time-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
}

.lc-sla-time-separator {
    color: #cbd5e1;
    flex-shrink: 0;
}

.lc-sla-timeline-legend {
    padding: 20px 28px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.lc-sla-legend-title {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-sla-legend-items {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.lc-sla-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
}

.lc-sla-legend-item i {
    color: #0891b2;
}

/* ============================================================= */
/* L&C: TIPOS DE CONTROL V2 - DISE�O MEJORADO                   */
/* ============================================================= */
.lc-tipos-container-v2 {
    background: #fff;
    border-radius: 16px;
    margin: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
}

.lc-tipos-header-v2 {
    padding: 24px 28px;
    background: linear-gradient(135deg, #059669 0%, #34d399 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.lc-tipos-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lc-tipos-icon-wrapper {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.lc-tipos-icon-wrapper i {
    font-size: 24px;
    color: #fff;
}

.lc-tipos-header-v2 h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.lc-tipos-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,0.92);
}

.lc-tipos-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 24px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.lc-tipos-count {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.lc-tipos-label {
    font-size: 11px;
    color: rgba(255,255,255,0.92);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lc-tipos-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    padding: 28px;
}

.lc-tipo-card-v2 {
    background: #fff;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    padding: 24px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
    position: relative;
    overflow: hidden;
}

.lc-tipo-card-v2:hover {
    transform: translateY(-6px);
    border-color: var(--tipo-color);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.lc-tipo-visual {
    position: relative;
    margin-bottom: 16px;
}

.lc-tipo-icon-ring {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border: 3px solid var(--tipo-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tipo-color) 10%, transparent);
    transition: all 0.3s ease;
}

.lc-tipo-card-v2:hover .lc-tipo-icon-ring {
    background: var(--tipo-color);
    transform: scale(1.1);
}

.lc-tipo-icon-ring i {
    font-size: 28px;
    color: var(--tipo-color);
    transition: color 0.3s ease;
}

.lc-tipo-card-v2:hover .lc-tipo-icon-ring i {
    color: #fff;
}

.lc-tipo-number {
    position: absolute;
    top: 0;
    right: calc(50% - 50px);
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 10px;
}

.lc-tipo-info {
    margin-bottom: 16px;
}

.lc-tipo-nombre {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.lc-tipo-desc {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.lc-tipo-footer {
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.lc-tipo-indicator {
    display: block;
    width: 40px;
    height: 4px;
    background: var(--tipo-color);
    border-radius: 2px;
    margin: 0 auto;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.lc-tipo-card-v2:hover .lc-tipo-indicator {
    width: 80px;
    opacity: 1;
}

.lc-tipos-legend-v2 {
    padding: 24px 28px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.lc-tipos-legend-title {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-tipos-legend-title i {
    color: #f59e0b;
}

.lc-tipos-legend-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.lc-tipos-legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    color: #475569;
}

.lc-tipos-legend-item i {
    font-size: 18px;
}

/* ============================================================= */
/* L&C: EMPTY STATE V2                                          */
/* ============================================================= */
.lc-empty-state-v2 {
    text-align: center;
    padding: 60px 40px;
    background: #f8fafc;
    margin: 20px;
    border-radius: 16px;
    border: 2px dashed #e2e8f0;
}

.lc-empty-state-v2 .lc-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-empty-state-v2 .lc-empty-icon i {
    font-size: 32px;
    color: #94a3b8;
}

.lc-empty-state-v2 h5 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #475569;
}

.lc-empty-state-v2 p {
    margin: 0;
    font-size: 14px;
    color: #94a3b8;
}

.lc-empty-state-v2.error .lc-empty-icon {
    background: #fee2e2;
}

.lc-empty-state-v2.error .lc-empty-icon i {
    color: #dc2626;
}

/* ============================================================= */
/* L&C: RESPONSIVE ADICIONAL                                     */
/* ============================================================= */

/* Tablet Breakpoint */
@media (max-width: 1024px) {
    .lc-dashboard-row-v2 {
        flex-direction: column;
    }
    
    .lc-dashboard-card-v2 {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    .lc-metrics-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lc-riesgos-grid-v2,
    .lc-controles-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lc-main-tabs-v2 {
        gap: 6px;
        padding: 12px 20px;
    }
    
    .lc-tab-v2 {
        padding: 10px 16px;
        min-width: 100px;
    }
    
    .lc-tab-subtitle {
        display: none;
    }
}

/* Mobile Breakpoint */
@media (max-width: 768px) {
    .lc-controles-grid,
    .lc-acciones-grid,
    .lc-reportes-grid,
    .lc-config-grid {
        grid-template-columns: 1fr;
    }
    
    .lc-kanban-board {
        padding: 12px;
    }
    
    .lc-kanban-column {
        flex: 0 0 280px;
    }
    
    .lc-matriz-legend {
        flex-direction: column;
        align-items: center;
    }
    
    .lc-acciones-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .lc-matriz-header-v2,
    .lc-categorias-header-v2,
    .lc-sla-header-v2,
    .lc-tipos-header-v2 {
        flex-direction: column;
        text-align: center;
    }
    
    .lc-matriz-title-section,
    .lc-categorias-title-section,
    .lc-sla-title-section,
    .lc-tipos-title-section {
        flex-direction: column;
        text-align: center;
    }
    
    .lc-matriz-body-v2 {
        flex-direction: column;
        padding: 16px;
    }
    
    .lc-matriz-axis-label.lc-axis-y {
        writing-mode: horizontal-tb;
        transform: none;
    }
    
    .lc-sla-times {
        flex-direction: column;
    }
    
    .lc-sla-time-separator {
        transform: rotate(90deg);
    }
    
    .lc-tipos-legend-content,
    .lc-matriz-legend-items {
        grid-template-columns: 1fr;
    }
    
    /* Dashboard V2 Mobile */
    .lc-dashboard-header-v2 {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .lc-metrics-grid-v2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .lc-metric-card-v2 {
        padding: 16px;
    }
    
    .lc-heatmap-v2 {
        overflow-x: auto;
    }
    
    .lc-heatmap-table {
        min-width: 400px;
    }
    
    .lc-heatmap-corner,
    .lc-heatmap-header-cell,
    .lc-heatmap-label,
    .lc-heatmap-cell {
        padding: 6px;
        font-size: 10px;
    }
    
    /* Riesgos Grid V2 Mobile */
    .lc-riesgos-grid-v2 {
        grid-template-columns: 1fr;
    }
    
    .lc-riesgo-card-v2 {
        padding: 14px 14px 14px 20px;
    }
    
    .lc-riesgo-metrics-row {
        flex-wrap: wrap;
    }
    
    .lc-riesgo-metric-v2 {
        flex: 0 0 calc(50% - 4px);
    }
    
    .lc-riesgo-scores {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .lc-score-arrow {
        transform: rotate(90deg);
    }
    
    /* Controles Grid V2 Mobile */
    .lc-controles-grid-v2 {
        grid-template-columns: 1fr;
    }
    
    .lc-control-card-v2 {
        padding: 16px;
    }
    
    .lc-control-meta-row {
        flex-wrap: wrap;
    }
    
    .lc-control-actions-v2 {
        flex-wrap: wrap;
    }
    
    /* Main Tabs V2 Mobile */
    .lc-main-tabs-v2 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 10px 12px;
    }
    
    .lc-tab-v2 {
        flex: 0 0 auto;
        padding: 8px 12px;
        min-width: 80px;
    }
    
    .lc-tab-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .lc-tab-title {
        font-size: 11px;
    }
    
    .lc-tab-indicator {
        display: none;
    }
    
    /* Empty State V2 Mobile */
    .lc-empty-state-v2 {
        padding: 40px 20px;
    }
    
    .lc-empty-state-v2 .lc-empty-icon {
        width: 60px;
        height: 60px;
    }
    
    .lc-empty-state-v2 .lc-empty-icon i {
        font-size: 24px;
    }
    
    /* Distribution V2 Mobile */
    .lc-distribution-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .lc-distribution-bar .lc-bar-label {
        min-width: 100%;
        margin-bottom: -4px;
    }
    
    .lc-distribution-bar .lc-bar-container {
        width: 100%;
    }
    
    /* Top List V2 Mobile */
    .lc-top-list-v2 {
        gap: 8px;
    }
    
    .lc-top-item {
        padding: 10px;
    }
    
    .lc-top-item .lc-top-rank {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    
    /* Actions List V2 Mobile */
    .lc-actions-list-v2 .lc-action-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .lc-action-item .lc-action-date {
        margin-left: 0;
    }
    
    /* Casos Stats V2 Mobile */
    .lc-casos-stats-v2 {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .lc-caso-stat-card {
        padding: 14px;
    }
}

/* Small Mobile Breakpoint */
@media (max-width: 480px) {
    .lc-dashboard-header-v2 .lc-header-title h2 {
        font-size: 20px;
    }
    
    .lc-metric-value {
        font-size: 28px;
    }
    
    .lc-riesgo-card-v2 .lc-riesgo-title-v2 {
        font-size: 14px;
    }
    
    .lc-control-card-v2 .lc-control-title-v2 {
        font-size: 14px;
    }
    
    .lc-tab-text {
        display: none;
    }
    
    .lc-tab-v2 {
        min-width: 50px;
        padding: 10px;
    }
    
    .lc-tab-icon {
        margin-right: 0;
    }
}

/* ============================================================= */
/* L&C: CASOS V2 - Dise�o Moderno                                */
/* ============================================================= */

.lc-casos-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
}

.lc-caso-card-v2 {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.4s ease-out both;
}

.lc-caso-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.lc-caso-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.lc-caso-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 16px 12px 20px;
    border-bottom: 1px solid #f1f5f9;
}

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

.lc-caso-codigo {
    font-size: 13px;
    font-weight: 700;
    color: var(--lc-primary);
    letter-spacing: 0.5px;
}

.lc-caso-fecha {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
}

.lc-caso-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lc-caso-estado,
.lc-caso-prioridad {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.lc-caso-body-v2 {
    padding: 12px 16px 12px 20px;
}

.lc-caso-titulo {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lc-caso-descripcion {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.lc-caso-meta-v2 {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px 20px;
    flex-wrap: wrap;
}

.lc-caso-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 11px;
    color: #475569;
}

.lc-caso-tag.riesgo {
    background: #fef2f2;
    color: #dc2626;
}

.lc-caso-tag.responsable {
    background: #eff6ff;
    color: #2563eb;
}

.lc-caso-footer-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

.lc-caso-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lc-progress-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

.lc-progress-bar-mini {
    width: 80px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.lc-progress-fill-mini {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.lc-progress-value {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    min-width: 32px;
}

.lc-caso-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--lc-primary);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.lc-caso-btn:hover {
    background: var(--lc-primary-dark);
    transform: scale(1.05);
}

/* Empty State for Casos */
.lc-empty-state-v2 .lc-empty-icon.casos {
    background: #eff6ff;
}

.lc-empty-state-v2 .lc-empty-icon.casos i {
    color: #3b82f6;
}

/* ============================================================= */
/* L&C: PLANES DE ACCI�N V2 - Dise�o Moderno                     */
/* ============================================================= */

.lc-acciones-container-v2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lc-acciones-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lc-summary-item {
    background: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 10px;
}

.lc-summary-count {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}

.lc-summary-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.lc-acciones-list-v2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lc-acciones-group {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}

.lc-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #f8fafc;
    font-weight: 600;
    font-size: 13px;
    color: #475569;
}

.lc-group-count {
    margin-left: auto;
    background: #e2e8f0;
    color: #475569;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.lc-group-items {
    display: flex;
    flex-direction: column;
}

.lc-accion-item-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: fadeInUp 0.3s ease-out both;
}

.lc-accion-item-v2:last-child {
    border-bottom: none;
}

.lc-accion-item-v2:hover {
    background: #f8fafc;
}

.lc-accion-item-v2.vencida {
    background: #fef2f2;
    border-left: 3px solid #ef4444;
}

.lc-accion-item-v2.urgente {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
}

.lc-accion-item-v2.pronto {
    border-left: 3px solid #3b82f6;
}

.lc-accion-priority {
    font-size: 18px;
    min-width: 28px;
    text-align: center;
}

.lc-accion-content {
    flex: 1;
    min-width: 0;
}

.lc-accion-titulo {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc-accion-details {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #64748b;
}

.lc-accion-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lc-dias-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: #e2e8f0;
    color: #475569;
}

.lc-dias-badge.vencida {
    background: #fef2f2;
    color: #dc2626;
}

.lc-dias-badge.urgente {
    background: #fffbeb;
    color: #d97706;
}

.lc-accion-progress-mini {
    display: flex;
    align-items: center;
}

.lc-progress-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: conic-gradient(var(--color) var(--progress), #e2e8f0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lc-progress-ring::before {
    content: '';
    position: absolute;
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 50%;
}

.lc-progress-ring span {
    position: relative;
    font-size: 10px;
    font-weight: 700;
    color: #475569;
}

.lc-accion-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.lc-accion-btn:hover {
    background: var(--lc-primary);
    border-color: var(--lc-primary);
    color: #fff;
}

/* Empty State for Acciones */
.lc-empty-state-v2 .lc-empty-icon.acciones {
    background: #fef3c7;
}

.lc-empty-state-v2 .lc-empty-icon.acciones i {
    color: #f59e0b;
}

/* ============================================================= */
/* L&C: REPORTES V2 - Dise�o Moderno                             */
/* ============================================================= */

.lc-reportes-container-v2 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lc-reportes-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--lc-primary), var(--lc-primary-dark));
    border-radius: 16px;
    color: #fff;
    flex-wrap: wrap;
    gap: 16px;
}

.lc-reportes-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lc-reportes-title i {
    font-size: 28px;
    opacity: 0.9;
}

.lc-reportes-title h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.lc-reportes-title p {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: 0.85;
}

.lc-reportes-filters {
    display: flex;
    gap: 12px;
}

.lc-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lc-filter-group label {
    font-size: 11px;
    opacity: 0.8;
    font-weight: 500;
}

.lc-filter-group select {
    padding: 8px 32px 8px 12px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.lc-filter-group select option {
    background: #1e293b;
    color: #fff;
}

.lc-reportes-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.lc-reporte-card-v2 {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all 0.3s ease;
    animation: fadeInUp 0.4s ease-out both;
}

.lc-reporte-card-v2:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.lc-reporte-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.lc-reporte-content h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.lc-reporte-content p {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}

.lc-reporte-formatos {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.lc-formato-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lc-formato-btn:hover {
    border-color: var(--lc-primary);
    color: var(--lc-primary);
    background: #eff6ff;
}

.lc-formato-btn.pdf:hover {
    border-color: #dc2626;
    color: #dc2626;
    background: #fef2f2;
}

.lc-formato-btn.excel:hover {
    border-color: #16a34a;
    color: #16a34a;
    background: #f0fdf4;
}

.lc-formato-btn.powerpoint:hover {
    border-color: #ea580c;
    color: #ea580c;
    background: #fff7ed;
}

/* Reporte Personalizado */
.lc-reportes-custom-v2 {
    background: linear-gradient(135deg, #eff6ff, #D7EBEA);
    border: 2px dashed #c4b5fd;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}

.lc-custom-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.lc-custom-header i {
    font-size: 24px;
    color: var(--lc-primary);
}

.lc-custom-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.lc-reportes-custom-v2 > p {
    margin: 0 0 16px;
    font-size: 13px;
    color: #64748b;
}

.lc-custom-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.lc-checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.lc-checkbox-item:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.lc-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--lc-primary);
}

/* ============================================================= */
/* L&C: RESPONSIVE CASOS, ACCIONES, REPORTES                     */
/* ============================================================= */

@media (max-width: 768px) {
    .lc-casos-grid-v2 {
        grid-template-columns: 1fr;
    }
    
    .lc-caso-header-v2 {
        flex-direction: column;
        gap: 10px;
    }
    
    .lc-caso-badges {
        justify-content: flex-start;
    }
    
    .lc-acciones-summary {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lc-accion-item-v2 {
        flex-wrap: wrap;
    }
    
    .lc-accion-content {
        order: 1;
        width: 100%;
        margin-top: 8px;
    }
    
    .lc-accion-progress-mini {
        order: -1;
    }
    
    .lc-reportes-header-v2 {
        flex-direction: column;
        text-align: center;
    }
    
    .lc-reportes-title {
        flex-direction: column;
    }
    
    .lc-reportes-grid-v2 {
        grid-template-columns: 1fr;
    }
    
    .lc-custom-options {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =====================================================
   MONITOREO DE USUARIOS V3 - DISE�O PREMIUM GLASSMORPHISM
   Centro de control y an�lisis de actividad con efectos avanzados
   ===================================================== */

/* Variables CSS para el m�dulo */
:root {
    --mon-primary: #1F6BA7;
    --mon-primary-light: #2482B8;
    --mon-accent: #06b6d4;
    --mon-accent-dark: #0891b2;
    --mon-success: #10b981;
    --mon-warning: #f59e0b;
    --mon-danger: #ef4444;
    --mon-info: #3b82f6;
    --mon-dark: #0f172a;
    --mon-glass: rgba(255, 255, 255, 0.1);
    --mon-glass-border: rgba(255, 255, 255, 0.2);
}

/* Hero Section - Redise�o Premium */
.monitoreo-hero {
    background: linear-gradient(135deg, #1F6BA7 0%, #1e3a5f 40%, #0891b2 100%);
    border-radius: 28px;
    padding: 40px 36px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(31, 107, 167, 0.3);
}

.monitoreo-hero::before {
    content: '';
    position: absolute;
    top: -100%;
    right: -30%;
    width: 80%;
    height: 300%;
    background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.2) 0%, transparent 60%);
    pointer-events: none;
    animation: float-bg 8s ease-in-out infinite;
}

.monitoreo-hero::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(152, 81, 181, 0.25) 0%, transparent 60%);
    pointer-events: none;
    animation: float-bg 10s ease-in-out infinite reverse;
}

@keyframes float-bg {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(10px, -10px) rotate(2deg); }
    66% { transform: translate(-5px, 5px) rotate(-1deg); }
}

/* Decoraci�n de part�culas */
.monitoreo-hero .hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.monitoreo-hero .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: float-particle 6s ease-in-out infinite;
}

@keyframes float-particle {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-20px) scale(1.2); opacity: 0.6; }
}

.monitoreo-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.monitoreo-hero-info {
    display: flex;
    align-items: center;
    gap: 24px;
}

.monitoreo-hero-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.1));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255,255,255,0.3);
    animation: icon-float 4s ease-in-out infinite;
}

@keyframes icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.monitoreo-title {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
    letter-spacing: -0.5px;
}

.monitoreo-subtitle {
    margin: 10px 0 0 0;
    color: rgba(255,255,255,0.92);
    font-size: 1rem;
    font-weight: 400;
}

.monitoreo-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.mon-btn {
    padding: 14px 24px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    position: relative;
    overflow: hidden;
}

.mon-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mon-btn:hover::before {
    opacity: 1;
}

.mon-btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.mon-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(16, 185, 129, 0.5);
}

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

.mon-btn-outline {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 2px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(15px);
}

.mon-btn-outline:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-2px);
}

.monitoreo-last-update {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.88);
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}

.mon-live-indicator {
    width: 12px;
    height: 12px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse-live 1.5s ease-in-out infinite;
    margin-left: 12px;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
}

@keyframes pulse-live {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 20px rgba(16, 185, 129, 0.6); }
    50% { transform: scale(1.4); opacity: 0.8; box-shadow: 0 0 30px rgba(16, 185, 129, 0.8); }
}

/* Stats Grid - Dise�o Premium con Glassmorphism */
.mon-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

@media (max-width: 1400px) {
    .mon-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .mon-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mon-stat-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0,0,0,0.05);
}

.mon-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mon-stat-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.mon-stat-card:hover::before {
    opacity: 0.3;
}

.mon-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    position: relative;
}

.mon-stat-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 20px;
    background: inherit;
    opacity: 0.2;
    filter: blur(8px);
}

.mon-stat-online .mon-stat-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35);
}

.mon-stat-online .mon-stat-icon i {
    animation: pulse-live 1.5s ease-in-out infinite;
}

.mon-stat-online { color: #10b981; }

.mon-stat-today .mon-stat-icon {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.35);
}

.mon-stat-today { color: #06b6d4; }

.mon-stat-week .mon-stat-icon {
    background: linear-gradient(135deg, #2482B8, #1F6BA7);
    color: white;
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.35);
}

.mon-stat-week { color: #2482B8; }

.mon-stat-time .mon-stat-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.35);
}

.mon-stat-time { color: #f59e0b; }

.mon-stat-total .mon-stat-icon {
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.35);
}

.mon-stat-total { color: #1F6BA7; }

.mon-stat-inactive .mon-stat-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.35);
}

.mon-stat-inactive { color: #ef4444; }

.mon-stat-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mon-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
    letter-spacing: -0.5px;
}

.mon-stat-value small {
    font-size: 0.55em;
    font-weight: 600;
    margin-left: 3px;
    color: #64748b;
}

.mon-stat-label {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 6px;
    font-weight: 500;
}

.mon-stat-mini {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-size: 0.7rem;
    color: white;
    background: linear-gradient(135deg, #2482B8, #1F6BA7);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.2);
}

.mon-stat-trend {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.mon-stat-trend.up { 
    color: #10b981; 
    background: rgba(16, 185, 129, 0.1);
}

.mon-stat-trend.down { 
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Tabs Navigation - Dise�o Premium */
.mon-tabs-container {
    background: white;
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 28px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
}

.mon-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.mon-tabs::-webkit-scrollbar {
    display: none;
}

.mon-tab {
    padding: 16px 28px;
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
    position: relative;
}

.mon-tab i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.mon-tab:hover {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    color: #1F6BA7;
}

.mon-tab:hover i {
    transform: scale(1.2);
}

.mon-tab.active {
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.35);
    transform: scale(1.02);
}

.mon-tab.active i {
    animation: tab-icon-pop 0.4s ease;
}

@keyframes tab-icon-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.mon-tab-badge {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 700;
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.mon-tab.active .mon-tab-badge {
    background: rgba(255,255,255,0.3);
    animation: none;
}

/* Vistas */
.mon-vista {
    display: none;
    animation: fadeInUp 0.5s ease;
}

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

.mon-vista.active {
    display: block;
}

/* Filtros Bar - Dise�o Premium */
.mon-filtros-bar {
    background: white;
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 28px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
}

.mon-search-box {
    flex: 1;
    min-width: 280px;
    position: relative;
}

.mon-search-box i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.mon-search-box input {
    width: 100%;
    padding: 14px 16px 14px 50px;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.mon-search-box input:hover {
    border-color: #cbd5e1;
    background: white;
}

.mon-search-box input:focus {
    outline: none;
    border-color: #1F6BA7;
    background: white;
    box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.1);
}

.mon-search-box:focus-within i {
    color: #1F6BA7;
    transform: translateY(-50%) scale(1.1);
}

.mon-filtros-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.mon-filtros-group select {
    padding: 14px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    font-size: 0.9rem;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #475569;
    min-width: 160px;
}

.mon-filtros-group select:hover {
    border-color: #cbd5e1;
    background: white;
}

.mon-filtros-group select:focus {
    outline: none;
    border-color: #1F6BA7;
    background: white;
    box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.1);
}

/* Main Grid */
.mon-main-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    margin-bottom: 28px;
}

@media (max-width: 1200px) {
    .mon-main-grid {
        grid-template-columns: 1fr;
    }
}

/* Table Section - Dise�o Premium */
.mon-table-section {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
}

.mon-table-header {
    padding: 24px 28px;
    background: linear-gradient(135deg, #fafbfc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mon-table-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

.mon-table-header h3 i {
    color: #1F6BA7;
    font-size: 1.2rem;
}

.mon-badge {
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.25);
}

.mon-table-wrapper {
    max-height: 550px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.mon-table-wrapper::-webkit-scrollbar {
    width: 8px;
}

.mon-table-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.mon-table-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.mon-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.mon-table {
    width: 100%;
    border-collapse: collapse;
}

.mon-table thead th {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: 16px 20px;
    text-align: left;
    font-weight: 700;
    color: #475569;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.mon-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mon-table tbody tr:hover {
    background: linear-gradient(90deg, #eff6ff, #f8fafc);
    transform: scale(1.005);
}

.mon-table tbody tr:hover td:first-child {
    border-left: 3px solid #1F6BA7;
}

.mon-table td {
    padding: 18px 20px;
    vertical-align: middle;
}

.mon-loading-cell {
    text-align: center;
    padding: 80px 20px !important;
    color: #64748b;
}

.mon-loader {
    width: 50px;
    height: 50px;
    border: 4px solid #e2e8f0;
    border-top-color: #1F6BA7;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 20px auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Sidebar Widgets - Dise�o Premium */
.mon-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mon-widget {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.mon-widget:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
}

.mon-widget-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #fafbfc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
}

.mon-widget-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

.mon-widget-header h4 i {
    color: #1F6BA7;
    font-size: 1.1rem;
}

/* Timeline - Dise�o Mejorado */
.mon-timeline {
    padding: 20px 24px;
    max-height: 320px;
    overflow-y: auto;
}

.mon-timeline-item {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.mon-timeline-item:hover {
    background: #fafafa;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
}

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

.mon-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
    position: relative;
}

.mon-timeline-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.3;
}

.mon-timeline-dot.green { background: #10b981; }
.mon-timeline-dot.blue { background: #1F6BA7; }
.mon-timeline-dot.yellow { background: #f59e0b; }
.mon-timeline-dot.red { background: #ef4444; }

.mon-timeline-content {
    flex: 1;
}

.mon-timeline-text {
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
}

.mon-timeline-time {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 6px;
    display: block;
}

/* Sede List - Dise�o Mejorado */
.mon-sede-list {
    padding: 20px 24px;
}

.mon-sede-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.mon-sede-item:hover {
    background: #fafafa;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
}

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

.mon-sede-name {
    font-size: 0.95rem;
    color: #475569;
    font-weight: 500;
}

.mon-sede-count {
    background: linear-gradient(135deg, #f0f4ff, #e8e0ff);
    color: #1F6BA7;
    padding: 6px 16px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Charts Grid - Dise�o Premium */
.mon-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 28px;
}

.mon-chart-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.mon-chart-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
}

.mon-chart-header {
    padding: 24px 28px;
    background: linear-gradient(135deg, #fafbfc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mon-chart-header h4 {
    margin: 0;
    font-size: 1.05rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

.mon-chart-header h4 i {
    color: #1F6BA7;
}

.mon-chart-header h4 i {
    color: #0891b2;
}

.mon-chart-period {
    font-size: 0.8rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 20px;
}

.mon-chart-body {
    padding: 24px;
    min-height: 250px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 12px;
}

/* Vista Usuarios Activos - Cards Grid */
.mon-active-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.mon-user-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mon-user-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.mon-user-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.mon-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    object-fit: cover;
}

.mon-user-info h5 {
    margin: 0;
    font-size: 1rem;
    color: #1e293b;
}

.mon-user-info span {
    font-size: 0.8rem;
    color: #64748b;
}

.mon-user-status {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mon-user-status.online { background: #10b981; }
.mon-user-status.offline { background: #94a3b8; }

.mon-user-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
}

.mon-user-stat {
    padding: 10px;
    background: #f8fafc;
    border-radius: 10px;
}

.mon-user-stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0891b2;
}

.mon-user-stat-label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
}

/* Vista Alertas */
.mon-alertas-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

.mon-alerta-section {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.mon-alerta-title {
    padding: 16px 20px;
    margin: 0;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #fcd34d;
}

.mon-alerta-section:nth-child(2) .mon-alerta-title {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border-bottom-color: #fca5a5;
}

.mon-alerta-section:nth-child(3) .mon-alerta-title {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border-bottom-color: #93c5fd;
}

.mon-alerta-list {
    padding: 16px 20px;
    max-height: 300px;
    overflow-y: auto;
}

.mon-alerta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    margin-bottom: 10px;
}

.mon-alerta-item:last-child {
    margin-bottom: 0;
}

.mon-empty {
    text-align: center;
    color: #94a3b8;
    padding: 20px;
    font-size: 0.9rem;
}

/* Vista Ranking */
.mon-ranking-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mon-top3-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    padding: 40px 20px;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    border-radius: 20px;
}

.mon-top-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mon-top-user.first {
    order: 2;
}

.mon-top-user.second {
    order: 1;
}

.mon-top-user.third {
    order: 3;
}

.mon-top-medal {
    font-size: 32px;
    margin-bottom: 10px;
}

.mon-top-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid;
    margin-bottom: 10px;
}

.mon-top-user.first .mon-top-avatar {
    width: 100px;
    height: 100px;
    border-color: #fbbf24;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
}

.mon-top-user.second .mon-top-avatar {
    border-color: #94a3b8;
}

.mon-top-user.third .mon-top-avatar {
    border-color: #cd7f32;
}

.mon-top-name {
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
}

.mon-top-score {
    color: #06b6d4;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 4px;
}

.mon-ranking-table-container {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.mon-ranking-table {
    width: 100%;
    border-collapse: collapse;
}

.mon-ranking-table thead th {
    background: #f8fafc;
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    font-size: 0.85rem;
    text-transform: uppercase;
    border-bottom: 2px solid #e2e8f0;
}

.mon-ranking-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
}

.mon-ranking-table tbody tr:hover {
    background: #f8fafc;
}

.mon-ranking-table td {
    padding: 16px;
}

.mon-ranking-pos {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
}

.mon-ranking-pos.gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: white; }
.mon-ranking-pos.silver { background: linear-gradient(135deg, #94a3b8, #64748b); color: white; }
.mon-ranking-pos.bronze { background: linear-gradient(135deg, #cd7f32, #b8860b); color: white; }

/* Vista Horarios - Heatmap */
.mon-horarios-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

@media (max-width: 1000px) {
    .mon-horarios-container {
        grid-template-columns: 1fr;
    }
}

.mon-heatmap-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.mon-heatmap-card h4 {
    margin: 0 0 8px 0;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mon-heatmap-card h4 i {
    color: #ef4444;
}

.mon-heatmap-desc {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.mon-heatmap {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 4px;
}

.mon-heat-cell {
    aspect-ratio: 1;
    border-radius: 4px;
    background: #f1f5f9;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.mon-heat-cell:hover {
    transform: scale(1.2);
    z-index: 10;
}

.mon-heat-cell.level-1 { background: #cffafe; }
.mon-heat-cell.level-2 { background: #67e8f9; }
.mon-heat-cell.level-3 { background: #22d3ee; }
.mon-heat-cell.level-4 { background: #06b6d4; }
.mon-heat-cell.level-5 { background: #0891b2; }

.mon-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    font-size: 0.8rem;
    color: #64748b;
}

.mon-legend-gradient {
    width: 150px;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, #f1f5f9, #cffafe, #67e8f9, #22d3ee, #06b6d4, #0891b2);
}

.mon-peak-hours {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.mon-peak-hours h4 {
    margin: 0 0 20px 0;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mon-peak-hours h4 i {
    color: #0891b2;
}

.mon-peak-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mon-peak-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
}

.mon-peak-hour {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0891b2, #0e7490);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.mon-peak-info {
    flex: 1;
}

.mon-peak-label {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
}

.mon-peak-users {
    font-size: 0.8rem;
    color: #64748b;
}

/* =====================================================
   PERFIL DE USUARIO V2 - DISE�O PROFESIONAL
   Sistema de gesti�n de perfil, contrase�a y foto
   ===================================================== */

/* Avatar con overlay hover en el header */
.user-avatar-container {
    position: relative;
    cursor: pointer;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.3s ease;
    border: 2px solid rgba(31, 107, 167, 0.3);
}

.user-avatar-container:hover {
    transform: scale(1.08);
    border-color: #1F6BA7;
}

.user-avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-hover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.85) 0%, rgba(31, 107, 167, 0.85) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.user-avatar-container:hover .avatar-hover-overlay {
    opacity: 1;
}

.avatar-hover-overlay i {
    color: white;
    font-size: 16px;
}

/* =====================================================
   MODAL V2 - LAYOUT SPLIT
   ===================================================== */
.perfil-modal-v2 {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.perfil-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    animation: perfilOverlayIn 0.3s ease;
}

@keyframes perfilOverlayIn {
    from { opacity: 0; backdrop-filter: blur(0); }
    to { opacity: 1; backdrop-filter: blur(12px); }
}

.perfil-modal-container {
    position: relative;
    display: flex;
    width: 95%;
    max-width: 1000px;
    max-height: 90vh;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 100px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,255,0.1);
    animation: perfilContainerIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes perfilContainerIn {
    from {
        transform: scale(0.95) translateY(20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* =====================================================
   SIDEBAR DEL PERFIL
   ===================================================== */
.perfil-sidebar {
    width: 300px;
    min-width: 300px;
    background: linear-gradient(180deg, #1F6BA7 0%, #1C507B 50%, #114070 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.perfil-sidebar::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%);
    pointer-events: none;
}

.perfil-sidebar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
    pointer-events: none;
}

.perfil-sidebar-header {
    display: flex;
    justify-content: flex-end;
    padding: 15px;
    position: relative;
    z-index: 2;
}

.perfil-close-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.perfil-close-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: rotate(90deg);
}

/* Avatar Section */
.perfil-avatar-section {
    padding: 10px 25px 30px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.perfil-avatar-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    cursor: pointer;
}

.perfil-avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}

.perfil-avatar-wrapper:hover img {
    border-color: rgba(255,255,255,0.6);
    transform: scale(1.05);
}

.perfil-avatar-ring {
    position: absolute;
    inset: -8px;
    border: 2px dashed rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: ringRotate 20s linear infinite;
}

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

.perfil-avatar-edit {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #2482B8 0%, #2482B8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.5);
    transition: all 0.3s ease;
}

.perfil-avatar-wrapper:hover .perfil-avatar-edit {
    transform: scale(1.15);
}

.perfil-avatar-section h2 {
    color: white;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 5px;
}

.perfil-cargo-text {
    color: rgba(255,255,255,0.92);
    font-size: 14px;
    margin: 0 0 15px;
}

.perfil-badge-container {
    display: flex;
    justify-content: center;
}

.perfil-rol-badge {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Navigation */
.perfil-nav {
    flex: 1;
    padding: 10px 15px;
    position: relative;
    z-index: 2;
}

.perfil-nav-item {
    width: 100%;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.88);
    padding: 14px 18px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-bottom: 5px;
    text-align: left;
}

.perfil-nav-item:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.perfil-nav-item.active {
    background: rgba(255,255,255,0.15);
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.perfil-nav-item i:first-child {
    width: 20px;
    text-align: center;
}

.perfil-nav-item span {
    flex: 1;
}

.perfil-nav-arrow {
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.3s ease;
    font-size: 12px;
}

.perfil-nav-item.active .perfil-nav-arrow,
.perfil-nav-item:hover .perfil-nav-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Sidebar Footer */
.perfil-sidebar-footer {
    padding: 20px;
    position: relative;
    z-index: 2;
}

.perfil-quick-stats {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: 1px solid rgba(255,255,255,0.1);
}

.perfil-stat-item {
    text-align: center;
}

.perfil-stat-item .stat-number {
    display: block;
    color: white;
    font-size: 20px;
    font-weight: 700;
}

.perfil-stat-item .stat-text {
    color: rgba(255,255,255,0.88);
    font-size: 11px;
}

.perfil-stat-divider {
    width: 1px;
    height: 30px;
    background: rgba(255,255,255,0.2);
}

/* =====================================================
   CONTENIDO PRINCIPAL
   ===================================================== */
.perfil-main-content {
    flex: 1;
    background: #f8fafc;
    overflow-y: auto;
    max-height: 90vh;
}

.perfil-tab-panel {
    display: none;
    animation: tabPanelIn 0.4s ease;
}

.perfil-tab-panel.active {
    display: block;
}

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

/* Panel Header */
.perfil-panel-header {
    background: white;
    padding: 25px 30px;
    border-bottom: 1px solid #e2e8f0;
}

.perfil-panel-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.perfil-title-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.3);
}

.perfil-title-icon.security {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
}

.perfil-title-icon.activity {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3);
}

.perfil-panel-title h3 {
    margin: 0;
    font-size: 20px;
    color: #1e293b;
    font-weight: 600;
}

.perfil-panel-title p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
}

/* Panel Body */
.perfil-panel-body {
    padding: 30px;
}

/* Form Sections */
.perfil-form-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.perfil-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f5f9;
}

.perfil-section-title i {
    color: #1F6BA7;
}

.perfil-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 15px;
}

.perfil-form-row:last-child {
    margin-bottom: 0;
}

.perfil-form-group {
    display: flex;
    flex-direction: column;
}

.perfil-form-group.full {
    grid-column: span 2;
}

.perfil-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}

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

.perfil-input-wrapper i {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 14px;
    transition: color 0.3s ease;
    z-index: 1;
}

.perfil-input-wrapper input {
    width: 100%;
    padding: 14px 14px 14px 44px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    color: #1e293b;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.perfil-input-wrapper input:focus {
    border-color: #1F6BA7;
    background: white;
    outline: none;
    box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.1);
}

.perfil-input-wrapper input:focus + i,
.perfil-input-wrapper:focus-within i {
    color: #1F6BA7;
}

.perfil-input-wrapper.readonly input {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

.perfil-input-tag {
    position: absolute;
    right: 12px;
    background: #e2e8f0;
    color: #64748b;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 500;
}

/* Password Input */
.perfil-input-wrapper.password input {
    padding-right: 50px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    z-index: 1;
}

.password-toggle:hover {
    color: #1F6BA7;
}

/* Textarea */
.perfil-textarea-wrapper {
    position: relative;
}

.perfil-textarea-wrapper textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    color: #1e293b;
    background: #f8fafc;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.perfil-textarea-wrapper textarea:focus {
    border-color: #1F6BA7;
    background: white;
    outline: none;
    box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.1);
}

.perfil-char-count {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 11px;
    color: #94a3b8;
}

/* Form Actions */
.perfil-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 25px;
    padding-top: 20px;
}

.perfil-btn-primary {
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.3);
}

.perfil-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.4);
}

.perfil-btn-primary.security {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
}

.perfil-btn-primary.security:hover {
    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.4);
}

.perfil-btn-secondary {
    background: white;
    color: #64748b;
    border: 2px solid #e2e8f0;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.perfil-btn-secondary:hover {
    border-color: #1F6BA7;
    color: #1F6BA7;
}

/* =====================================================
   SECURITY CARD
   ===================================================== */
.perfil-security-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.security-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #f1f5f9;
}

.security-icon-wrapper {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.3);
}

.security-card-info h4 {
    margin: 0 0 5px;
    font-size: 18px;
    color: #1e293b;
}

.security-card-info p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.security-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Password Strength Bar */
.password-strength-bar {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.strength-segments {
    display: flex;
    gap: 4px;
    flex: 1;
}

.segment {
    height: 4px;
    flex: 1;
    background: #e2e8f0;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.segment.active.weak { background: #ef4444; }
.segment.active.fair { background: #f59e0b; }
.segment.active.good { background: #10b981; }
.segment.active.strong { background: #059669; }

.strength-label {
    font-size: 12px;
    color: #64748b;
    min-width: 80px;
}

/* Password Match */
.password-match-indicator {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #ef4444;
}

.password-match-indicator.show {
    display: flex;
}

.password-match-indicator.success {
    color: #10b981;
}

.password-match-indicator.success i::before {
    content: "\f058";
}

/* Password Requirements */
.password-requirements {
    margin-top: 25px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.password-requirements h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px;
    font-size: 14px;
    color: #475569;
}

.password-requirements h5 i {
    color: #1F6BA7;
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.req-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
    transition: all 0.3s ease;
}

.req-item i {
    font-size: 8px;
    color: #cbd5e1;
    transition: all 0.3s ease;
}

.req-item.valid {
    color: #10b981;
}

.req-item.valid i {
    color: #10b981;
}

.req-item.valid i::before {
    content: "\f058";
    font-size: 14px;
}

/* =====================================================
   ACTIVITY SECTION
   ===================================================== */
.activity-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.activity-stat-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.activity-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.stat-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.stat-card-icon.blue {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
}

.stat-card-icon.green {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.stat-card-icon.purple {
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 100%);
}

.stat-card-icon.orange {
    background: linear-gradient(135deg, #ea580c 0%, #fb923c 100%);
}

.stat-card-content {
    flex: 1;
}

.stat-card-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.stat-card-label {
    font-size: 12px;
    color: #64748b;
}

/* Timeline */
.activity-timeline-section {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.activity-timeline-section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 16px;
    color: #1e293b;
}

.activity-timeline-section h4 i {
    color: #1F6BA7;
}

.activity-timeline {
    position: relative;
    padding-left: 25px;
}

.activity-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #1F6BA7, #e2e8f0);
}

.timeline-item {
    position: relative;
    padding-bottom: 20px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -22px;
    top: 3px;
    width: 14px;
    height: 14px;
    background: white;
    border: 3px solid #1F6BA7;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(31, 107, 167, 0.1);
}

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

.timeline-title {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
}

.timeline-time {
    font-size: 12px;
    color: #94a3b8;
}

/* Notificaciones */
.perfil-notificacion {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    font-size: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10001;
}

.perfil-notificacion.show {
    transform: translateY(0);
    opacity: 1;
}

.perfil-notificacion.success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
}

.perfil-notificacion.error {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: white;
}

.perfil-notificacion.info {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    color: white;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 900px) {
    .perfil-modal-container {
        flex-direction: column;
        max-height: 95vh;
    }
    
    .perfil-sidebar {
        width: 100%;
        min-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 15px;
    }
    
    .perfil-sidebar-header {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 0;
    }
    
    .perfil-avatar-section {
        width: 100%;
        padding: 15px;
    }
    
    .perfil-avatar-wrapper {
        width: 80px;
        height: 80px;
    }
    
    .perfil-nav {
        width: 100%;
        display: flex;
        gap: 5px;
        padding: 5px;
        overflow-x: auto;
    }
    
    .perfil-nav-item {
        flex: 1;
        padding: 10px;
        justify-content: center;
        margin: 0;
    }
    
    .perfil-nav-item span {
        display: none;
    }
    
    .perfil-nav-arrow {
        display: none;
    }
    
    .perfil-sidebar-footer {
        display: none;
    }
    
    .perfil-form-row {
        grid-template-columns: 1fr;
    }
    
    .perfil-form-group.full {
        grid-column: span 1;
    }
    
    .security-form-grid {
        grid-template-columns: 1fr;
    }
    
    .requirements-grid {
        grid-template-columns: 1fr;
    }
    
    .activity-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   MODAL PERFIL USUARIO - DISE�O PROFESIONAL COMPLETO
   ===================================================== */

.user-profile-modal {
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
    animation: modalZoomIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

@keyframes modalZoomIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ===== HEADER ===== */
.upm-header {
    position: relative;
    padding: 32px 32px 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
}

.upm-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 90%, rgba(255,255,255,0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 10%, rgba(255,255,255,0.1) 0%, transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 50%);
    pointer-events: none;
}

.upm-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.upm-close svg {
    width: 20px;
    height: 20px;
}

.upm-close:hover {
    background: rgba(255,255,255,0.25);
    transform: rotate(90deg) scale(1.1);
}

.upm-profile-section {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Avatar */
.upm-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 4px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.upm-iniciales {
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.upm-status {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 4px solid #667eea;
}

.upm-status.online { background: #10b981; animation: pulseOnline 2s infinite; }
.upm-status.offline { background: #94a3b8; }
.upm-status.nunca { background: #f59e0b; }

@keyframes pulseOnline {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

/* User info */
.upm-user-main {
    flex: 1;
    min-width: 200px;
}

.upm-nombre {
    color: white;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 15px rgba(0,0,0,0.2);
    line-height: 1.2;
}

.upm-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.upm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.upm-badge.role {
    background: rgba(255,255,255,0.25);
    color: white;
}

.upm-badge.role svg {
    width: 14px;
    height: 14px;
}

.upm-badge.cargo {
    background: rgba(0,0,0,0.15);
    color: rgba(255,255,255,0.9);
}

/* Estado badge */
.upm-estado {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 30px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

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

.upm-estado.online .upm-estado-dot { background: #10b981; box-shadow: 0 0 10px #10b981; }
.upm-estado.offline .upm-estado-dot { background: #94a3b8; }
.upm-estado.nunca .upm-estado-dot { background: #f59e0b; }

.upm-estado-texto {
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
}

.upm-estado-tiempo {
    color: rgba(255,255,255,0.92);
    font-size: 0.85rem;
}

/* ===== BODY ===== */
.upm-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
    background: #f8fafc;
}

/* Metrics */
.upm-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.upm-metric {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.upm-metric:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.upm-metric-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.upm-metric-icon svg {
    width: 28px;
    height: 28px;
}

.upm-metric-icon.blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #2563eb; }
.upm-metric-icon.green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #059669; }
.upm-metric-icon.purple { background: linear-gradient(135deg, #D7EBEA, #A9C5D0); color: #1F6BA7; }

.upm-metric-content {
    display: flex;
    flex-direction: column;
}

.upm-metric-value {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.upm-metric-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin-top: 4px;
}

.upm-metric-sub {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 2px;
}

/* Content Grid */
.upm-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* Cards */
.upm-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.upm-card.full-width {
    grid-column: span 2;
}

.upm-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
}

.upm-card-header svg {
    width: 20px;
    height: 20px;
    color: #667eea;
}

.upm-card-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.upm-card-body {
    padding: 16px 20px;
}

/* Info rows */
.upm-info-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}

.upm-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.upm-info-row:first-child {
    padding-top: 0;
}

.upm-info-row.highlight {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    margin: -14px -20px 0;
    padding: 16px 20px;
    border-bottom: 1px solid #bbf7d0;
}

.upm-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.upm-info-icon svg {
    width: 18px;
    height: 18px;
    color: #64748b;
}

.upm-info-icon.success { background: #d1fae5; }
.upm-info-icon.success svg { color: #059669; }
.upm-info-icon.danger { background: #fee2e2; }
.upm-info-icon.danger svg { color: #dc2626; }

.upm-info-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.upm-info-content label {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.upm-info-content span {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    word-break: break-word;
}

.upm-info-content span.email {
    color: #667eea;
}

.upm-info-content span.destacado {
    color: #059669;
    font-weight: 700;
}

.upm-info-content span.text-success { color: #059669; }
.upm-info-content span.text-danger { color: #dc2626; }

/* Chart */
.upm-chart-container {
    padding: 20px;
}

.upm-chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 120px;
    padding: 0 10px;
}

.upm-chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.upm-bar-fill {
    width: 100%;
    max-width: 50px;
    background: linear-gradient(180deg, #667eea, #764ba2);
    border-radius: 8px 8px 4px 4px;
    margin-top: auto;
    transition: all 0.5s ease;
    min-height: 8px;
    position: relative;
}

.upm-bar-fill:hover {
    filter: brightness(1.1);
    transform: scaleY(1.05);
}

.upm-bar-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    margin-top: 10px;
}

.upm-bar-value {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: #667eea;
    background: white;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    opacity: 0;
    transition: opacity 0.3s;
}

.upm-chart-bar:hover .upm-bar-value {
    opacity: 1;
}

.upm-chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.upm-chart-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #64748b;
}

.upm-chart-legend .dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: #e2e8f0;
}

.upm-chart-legend .dot.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* ===== FOOTER ===== */
.upm-footer {
    display: flex;
    gap: 16px;
    padding: 20px 28px 28px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

.upm-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.upm-btn svg {
    width: 20px;
    height: 20px;
}

.upm-btn.outline {
    background: #f1f5f9;
    color: #64748b;
    border: 2px solid #e2e8f0;
}

.upm-btn.outline:hover {
    background: #e2e8f0;
    color: #475569;
}

.upm-btn.primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35);
}

.upm-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.45);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 800px) {
    .user-profile-modal {
        max-width: 95%;
        margin: 10px;
        max-height: 95vh;
    }
    
    .upm-header {
        padding: 24px;
    }
    
    .upm-profile-section {
        flex-direction: column;
        text-align: center;
    }
    
    .upm-avatar {
        margin: 0 auto;
    }
    
    .upm-user-main {
        width: 100%;
        text-align: center;
    }
    
    .upm-badges {
        justify-content: center;
    }
    
    .upm-estado {
        margin: 0 auto;
    }
    
    .upm-nombre {
        font-size: 1.5rem;
    }
    
    .upm-metrics {
        grid-template-columns: 1fr;
    }
    
    .upm-content-grid {
        grid-template-columns: 1fr;
    }
    
    .upm-card.full-width {
        grid-column: span 1;
    }
    
    .upm-body {
        padding: 20px;
    }
    
    .upm-footer {
        flex-direction: column;
        padding: 16px 20px 24px;
    }
    
    .upm-chart {
        height: 100px;
    }
}

@media (max-width: 480px) {
    .upm-avatar {
        width: 80px;
        height: 80px;
    }
    
    .upm-iniciales {
        font-size: 1.8rem;
    }
    
    .upm-metric {
        padding: 16px;
    }
    
    .upm-metric-icon {
        width: 48px;
        height: 48px;
    }
    
    .upm-metric-value {
        font-size: 1.5rem;
    }
}

/* ============================================= */
/* LC360 - ESTILOS PREMIUM DEL DASHBOARD        */
/* Legal & Compliance Platform                   */
/* ============================================= */

/* KPI Grid - Tarjetas de m�tricas principales */
.lc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.lc-kpi-card {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid rgba(255,255,255,0.9);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lc-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6f42c1, #2482B8);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.lc-kpi-card:hover::before {
    transform: scaleX(1);
}

.lc-kpi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(111, 66, 193, 0.15);
}

.lc-kpi-card.warning {
    background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
    border-color: rgba(220, 38, 38, 0.2);
}

.lc-kpi-card.warning::before {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.lc-kpi-card .kpi-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.lc-kpi-card .kpi-icon i {
    font-size: 24px;
    color: #fff;
}

.lc-kpi-card .kpi-content {
    flex: 1;
    min-width: 0;
}

.lc-kpi-card .kpi-value {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #082A5D, #1F6BA7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.lc-kpi-card .kpi-label {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    margin-top: 4px;
}

/* Dashboard Grid - Grid de tarjetas */
.lc-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 28px;
}

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

/* Cards del Dashboard */
.lc-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.lc-card:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.lc-card-header {
    padding: 18px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.lc-card-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lc-card-header h4 i {
    color: #6f42c1;
    font-size: 16px;
}

.lc-card-body {
    padding: 24px;
}

/* Barras de gr�ficos */
.lc-chart-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lc-bar-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lc-bar-item .bar-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lc-bar-item .nivel-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lc-bar-item .bar-count {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.lc-bar-item .bar-track {
    height: 10px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.lc-bar-item .bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(90deg, var(--bar-color, #6f42c1), var(--bar-color-light, #2482B8));
}

/* Lista de estados */
.lc-status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lc-status-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.lc-status-item:hover {
    background: #f1f5f9;
    transform: translateX(6px);
}

.lc-status-item .status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lc-status-item .status-name {
    flex: 1;
    font-size: 14px;
    color: #475569;
    font-weight: 500;
}

.lc-status-item .status-count {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

/* Resumen de controles */
.lc-control-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
}

.control-type-card {
    padding: 20px;
    background: #f8fafc;
    border-radius: 14px;
    text-align: center;
    transition: all 0.3s ease;
}

.control-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.control-type-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6f42c1, #2482B8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.control-type-icon i {
    font-size: 18px;
    color: #fff;
}

.control-type-count {
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
}

.control-type-name {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    margin-top: 4px;
}

/* Resumen de planes */
.lc-planes-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.plan-status-card {
    padding: 20px;
    background: #f8fafc;
    border-radius: 14px;
    text-align: center;
    transition: all 0.3s ease;
}

.plan-status-card:hover {
    transform: scale(1.03);
}

.plan-status-card.alert {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    animation: pulse-alert 2s infinite;
}

@keyframes pulse-alert {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.3); }
    50% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
}

.plan-status-card i {
    font-size: 28px;
    margin-bottom: 10px;
}

.plan-status-card .plan-count {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 4px;
}

.plan-status-card .plan-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

/* Acciones r�pidas */
.lc-quick-actions {
    background: linear-gradient(135deg, #6f42c1 0%, #1F6BA7 100%);
    border-radius: 20px;
    padding: 24px;
    color: #fff;
}

.lc-quick-actions h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lc-quick-actions h4 i {
    color: #fbbf24;
}

.lc-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lc-action-buttons .btn {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lc-action-buttons .btn:hover {
    background: #fff;
    color: #6f42c1;
    transform: translateY(-2px);
}

/* Estados vac�os, carga y error */
.lc-loading {
    padding: 60px 24px;
    text-align: center;
    color: #6f42c1;
    font-size: 15px;
}

.lc-loading i {
    font-size: 28px;
    margin-bottom: 12px;
    display: block;
}

.lc-empty-state {
    padding: 48px 24px;
    text-align: center;
    color: #94a3b8;
}

.lc-empty-state i {
    font-size: 36px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.lc-empty-state p {
    margin: 0;
    font-size: 14px;
}

.lc-error-state {
    padding: 60px 24px;
    text-align: center;
    color: #dc2626;
}

.lc-error-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.7;
}

.lc-error-state h4 {
    margin: 0 0 12px 0;
    font-size: 20px;
}

.lc-error-state p {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #64748b;
}

/* Tablas LC */
.lc-table-container {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.lc-table {
    width: 100%;
    border-collapse: collapse;
}

.lc-table thead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.lc-table th {
    padding: 14px 18px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
}

.lc-table td {
    padding: 16px 18px;
    font-size: 14px;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
}

.lc-table tbody tr {
    transition: all 0.2s ease;
}

.lc-table tbody tr:hover {
    background: #f8fafc;
}

.lc-table tbody tr.vencido {
    background: #fef2f2;
}

.lc-table tbody tr.vencido:hover {
    background: #fee2e2;
}

.lc-table code {
    padding: 4px 10px;
    background: #dbeafe;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1F6BA7;
}

.nivel-badge, .estado-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.estado-badge {
    background: #dbeafe;
    color: #1F6BA7;
}

.progress-mini {
    display: inline-block;
    width: 60px;
    height: 8px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 8px;
}

.progress-mini .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 8px;
}

.text-danger {
    color: #dc2626 !important;
    font-weight: 600;
}

/* Grid de tarjetas de controles */
.lc-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.lc-control-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.lc-control-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

.lc-control-card .control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.lc-control-card .control-estado {
    padding: 4px 10px;
    background: #d1fae5;
    color: #059669;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.lc-control-card h5 {
    margin: 0 0 10px 0;
    font-size: 15px;
    color: #1e293b;
    font-weight: 600;
}

.lc-control-card p {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.lc-control-card .control-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #94a3b8;
}

.lc-control-card .control-meta i {
    margin-right: 4px;
    color: #6f42c1;
}

.btn-sm {
    padding: 8px 14px;
    font-size: 12px;
}

.btn-outline {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background: #6f42c1;
    border-color: #6f42c1;
    color: #fff;
}

/* ============================================= */
/* LC360 - ESTILOS PREMIUM ADICIONALES          */
/* ============================================= */

/* Header Premium del Dashboard */
.lc-dashboard-header-premium {
    background: linear-gradient(135deg, #6f42c1 0%, #1F6BA7 50%, #2482B8 100%);
    border-radius: 20px;
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(111, 66, 193, 0.3);
}

.lc-dashboard-header-premium .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.lc-dashboard-header-premium .header-title h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lc-dashboard-header-premium .header-title h2 i {
    font-size: 28px;
    color: rgba(255,255,255,0.9);
}

.lc-dashboard-header-premium .header-title p {
    margin: 6px 0 0 0;
    font-size: 14px;
    color: rgba(255,255,255,0.92);
}

.lc-dashboard-header-premium .header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lc-dashboard-header-premium .btn-refresh {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.lc-dashboard-header-premium .btn-refresh:hover {
    background: rgba(255,255,255,0.25);
    transform: rotate(180deg);
}

/* Alertas Container */
.lc-alertas-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.lc-alerta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 14px;
    animation: slideInLeft 0.5s ease;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.lc-alerta-danger {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
}

.lc-alerta-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
}

.lc-alerta-info {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #60a5fa;
}

.lc-alerta .alerta-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-alerta-danger .alerta-icon {
    background: #dc2626;
    color: #fff;
}

.lc-alerta-warning .alerta-icon {
    background: #f59e0b;
    color: #fff;
}

.lc-alerta-info .alerta-icon {
    background: #3b82f6;
    color: #fff;
}

.lc-alerta .alerta-content {
    flex: 1;
}

.lc-alerta .alerta-content span {
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

.lc-alerta .alerta-action {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lc-alerta-danger .alerta-action {
    background: #dc2626;
    color: #fff;
}

.lc-alerta-warning .alerta-action {
    background: #f59e0b;
    color: #fff;
}

.lc-alerta-info .alerta-action {
    background: #3b82f6;
    color: #fff;
}

.lc-alerta .alerta-action:hover {
    transform: translateX(4px);
    opacity: 0.9;
}

/* KPI Sublabel */
.kpi-sublabel {
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-block;
}

.kpi-sublabel.kpi-success {
    background: #d1fae5;
    color: #059669;
}

.kpi-sublabel.kpi-danger {
    background: #fee2e2;
    color: #dc2626;
}

.kpi-sublabel.kpi-warning {
    background: #fef3c7;
    color: #d97706;
}

.lc-kpi-card .kpi-arrow {
    color: #94a3b8;
    transition: all 0.3s ease;
}

.lc-kpi-card:hover .kpi-arrow {
    color: #6f42c1;
    transform: translateX(4px);
}

/* Status bar en lista de estados */
.lc-status-item .status-bar {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    max-width: 100px;
}

.lc-status-item .status-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.8s ease;
}

/* Percent badges */
.control-type-percent, .plan-percent {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 4px;
}

/* Loading Screen */
.lc-loading-screen {
    padding: 80px 40px;
    text-align: center;
}

.lc-loading-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 24px;
    position: relative;
}

.lc-loading-spinner .spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-top-color: #6f42c1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.lc-loading-spinner .spinner-ring:nth-child(2) {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    border-top-color: #2482B8;
    animation-duration: 0.8s;
    animation-direction: reverse;
}

.lc-loading-spinner .spinner-ring:nth-child(3) {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-top-color: #5bbad5;
    animation-duration: 0.6s;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.lc-loading-screen h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: #1e293b;
}

.lc-loading-screen p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
}

.lc-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: #6f42c1;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

/* Last Update */
.lc-last-update {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    font-size: 13px;
    color: #64748b;
    margin-top: 16px;
}

.lc-last-update i.fa-check-circle {
    color: #22c55e;
}

.auto-refresh-indicator {
    margin-left: 12px;
    padding: 4px 10px;
    background: #e0f2fe;
    color: #0284c7;
    border-radius: 12px;
    font-size: 11px;
}

.auto-refresh-indicator i {
    font-size: 10px;
}

/* Section Header */
.lc-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.lc-section-header h3 {
    margin: 0;
    font-size: 18px;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lc-section-header h3 i {
    color: #6f42c1;
}

.lc-section-header .header-stats {
    display: flex;
    gap: 16px;
}

.lc-section-header .stat {
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lc-section-header .stat.danger {
    color: #dc2626;
    background: #fee2e2;
    padding: 6px 12px;
    border-radius: 20px;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 6px;
}

/* Progress Container */
.progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-text {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    min-width: 35px;
}

/* Control Tipo Badge */
.control-tipo {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Control Footer */
.control-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

/* LC Card Badge variations */
.lc-card-badge.success {
    background: #d1fae5;
    color: #059669;
}

.lc-card-badge.danger {
    background: #fee2e2;
    color: #dc2626;
}

/* Empty State enhanced */
.lc-empty-state .empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.lc-empty-state .empty-icon i {
    font-size: 32px;
    color: #94a3b8;
}

.lc-empty-state h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #475569;
}

/* Error State enhanced */
.lc-error-state .error-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.lc-error-state .error-icon i {
    font-size: 36px;
    color: #dc2626;
}

/* Notifications Container */
.lc-notifications-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
}

.lc-notification {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease;
    border-left: 4px solid;
}

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

.lc-notification.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

.lc-notification-success {
    border-left-color: #22c55e;
}

.lc-notification-error {
    border-left-color: #dc2626;
}

.lc-notification-warning {
    border-left-color: #f59e0b;
}

.lc-notification-info {
    border-left-color: #3b82f6;
}

.lc-notification .notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lc-notification-success .notification-icon {
    background: #d1fae5;
    color: #22c55e;
}

.lc-notification-error .notification-icon {
    background: #fee2e2;
    color: #dc2626;
}

.lc-notification-warning .notification-icon {
    background: #fef3c7;
    color: #f59e0b;
}

.lc-notification-info .notification-icon {
    background: #dbeafe;
    color: #3b82f6;
}

.lc-notification .notification-content {
    flex: 1;
}

.lc-notification .notification-content strong {
    display: block;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 4px;
}

.lc-notification .notification-content p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.lc-notification .notification-close {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.lc-notification .notification-close:hover {
    color: #475569;
}

/* Responsive para mobile */
@media (max-width: 768px) {
    .lc-dashboard-header-premium {
        padding: 20px;
    }
    
    .lc-dashboard-header-premium .header-title h2 {
        font-size: 20px;
    }
    
    .lc-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lc-dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .lc-action-buttons {
        flex-direction: column;
    }
    
    .lc-alerta {
        flex-direction: column;
        text-align: center;
    }
    
    .lc-alerta .alerta-action {
        width: 100%;
        justify-content: center;
    }
    
    .lc-notifications-container {
        left: 10px;
        right: 10px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .lc-kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .lc-planes-summary {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   R&C360 - REFERENCIA Y CONTRARREFERENCIA - DISE�O ULTRA PREMIUM
   Gesti�n de Referencias, Traslados, Bloqueadores
   Sistema de Flujo de Pacientes Avanzado
   ====================================================== */

/* Variables de R&C Ultra Premium */
:root {
    --rc-primary: #1F6BA7;
    --rc-primary-dark: #4a2260;
    --rc-primary-light: #2482B8;
    --rc-primary-ultra-light: #5bbad5;
    --rc-secondary: #1e3a5f;
    --rc-accent: #0ea5e9;
    --rc-accent-dark: #0284c7;
    --rc-accent-light: #38bdf8;
    --rc-success: #10b981;
    --rc-success-light: #34d399;
    --rc-warning: #f59e0b;
    --rc-warning-light: #fbbf24;
    --rc-danger: #ef4444;
    --rc-danger-light: #f87171;
    --rc-info: #3b82f6;
    --rc-info-light: #60a5fa;
    --rc-emergency: #dc2626;
    --rc-urgency: #ea580c;
    --rc-priority: #d97706;
    --rc-deferred: #64748b;
    --rc-glass-bg: rgba(255, 255, 255, 0.85);
    --rc-glass-border: rgba(255, 255, 255, 0.4);
    --rc-shadow-soft: 0 10px 40px rgba(31, 107, 167, 0.12);
    --rc-shadow-medium: 0 20px 60px rgba(31, 107, 167, 0.18);
    --rc-shadow-strong: 0 30px 80px rgba(31, 107, 167, 0.25);
    --rc-transition-smooth: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --rc-transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========== CONTENEDOR PRINCIPAL R&C - ULTRA PREMIUM ========== */
#ref-counterref {
    padding: 28px;
    background: linear-gradient(135deg, #f8fafc 0%, #D7EBEA 30%, #f0f9ff 60%, #f1f5f9 100%);
    min-height: 100vh;
    position: relative;
}

#ref-counterref::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(31, 107, 167, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(14, 165, 233, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 50% 20%, rgba(152, 81, 181, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ========== HEADER MEGA PREMIUM ========== */
#ref-counterref .header {
    background: linear-gradient(135deg, #1F6BA7 0%, #4a2260 25%, #1e3a5f 50%, #0c4a6e 75%, #0ea5e9 100%);
    border-radius: 32px;
    padding: 40px 48px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 25px 80px rgba(31, 107, 167, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 10px 30px rgba(14, 165, 233, 0.2);
    z-index: 1;
}

#ref-counterref .header::before {
    content: '';
    position: absolute;
    top: -150%;
    right: -40%;
    width: 100%;
    height: 400%;
    background: 
        radial-gradient(ellipse at center, rgba(14, 165, 233, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
    pointer-events: none;
    animation: float-bg-rc-ultra 10s ease-in-out infinite;
}

#ref-counterref .header::after {
    content: '';
    position: absolute;
    bottom: -80%;
    left: -30%;
    width: 80%;
    height: 300%;
    background: 
        radial-gradient(ellipse at center, rgba(152, 81, 181, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 40%, rgba(192, 132, 252, 0.15) 0%, transparent 40%);
    pointer-events: none;
    animation: float-bg-rc-ultra 12s ease-in-out infinite reverse;
}

/* Part�culas decorativas del header */
#ref-counterref .header .header-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

@keyframes float-bg-rc-ultra {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(15px, -15px) rotate(2deg); }
    50% { transform: translate(10px, 10px) rotate(-1deg); }
    75% { transform: translate(-10px, 5px) rotate(1deg); }
}

@keyframes rc-shine-sweep {
    0% { left: -100%; opacity: 0; }
    50% { opacity: 0.3; }
    100% { left: 200%; opacity: 0; }
}

#ref-counterref .header h1 {
    color: white;
    font-size: 2.4rem;
    font-weight: 900;
    margin: 0;
    position: relative;
    z-index: 1;
    text-shadow: 0 6px 30px rgba(0,0,0,0.3);
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 16px;
}

#ref-counterref .header h1 i {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    animation: rc-icon-float 3s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

@keyframes rc-icon-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(5deg); }
}

#ref-counterref .header .user-info {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    padding: 14px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s var(--rc-transition-smooth);
}

#ref-counterref .header .user-info:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

#ref-counterref .header .user-info img {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    border: 3px solid rgba(255,255,255,0.4);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    transition: all 0.4s var(--rc-transition-smooth);
}

#ref-counterref .header .user-info:hover img {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.6);
}

#ref-counterref .header .user-details .name {
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#ref-counterref .header .user-details .role {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ========== TABS PRINCIPALES R&C - ULTRA PREMIUM ========== */
.rc-main-tabs {
    display: flex;
    gap: 14px;
    background: linear-gradient(135deg, #1F6BA7 0%, #4a2260 30%, #1e3a5f 60%, #0c4a6e 80%, #0ea5e9 100%);
    padding: 20px 28px;
    border-radius: 28px;
    margin-bottom: 32px;
    box-shadow: 
        0 20px 60px rgba(31, 107, 167, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 8px 30px rgba(14, 165, 233, 0.15);
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.rc-main-tabs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(ellipse at 20% 50%, rgba(192, 132, 252, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(14, 165, 233, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.rc-main-tabs::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: rc-tabs-shine 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes rc-tabs-shine {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

.rc-tab-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.5s var(--rc-transition-smooth);
    font-weight: 700;
    font-size: 0.95rem;
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 1;
    overflow: hidden;
    letter-spacing: 0.3px;
}

.rc-tab-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 50%);
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.rc-tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9, #5bbad5);
    border-radius: 3px;
    transition: all 0.4s var(--rc-transition-smooth);
    transform: translateX(-50%);
}

.rc-tab-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    transform: translateY(-5px) scale(1.03);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(192, 132, 252, 0.2);
}

.rc-tab-btn:hover::before {
    opacity: 1;
}

.rc-tab-btn:hover::after {
    width: 60%;
}

.rc-tab-btn:hover i {
    transform: scale(1.25) rotate(-5deg);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.rc-tab-btn.active {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    color: #1F6BA7;
    border-color: white;
    box-shadow: 
        0 15px 45px rgba(0, 0, 0, 0.25),
        0 0 0 4px rgba(255, 255, 255, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(-3px) scale(1.02);
}

.rc-tab-btn.active::after {
    width: 80%;
    background: linear-gradient(90deg, #1F6BA7, #0ea5e9);
}

.rc-tab-btn.active i {
    color: #0ea5e9;
    transform: scale(1.15);
    filter: drop-shadow(0 2px 8px rgba(14, 165, 233, 0.4));
}

.rc-tab-btn i {
    font-size: 1.25rem;
    transition: all 0.4s var(--rc-transition-smooth);
}

.rc-tab-badge {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    color: #fff;
    padding: 5px 14px;
    border-radius: 25px;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 
        0 6px 18px rgba(239, 68, 68, 0.45),
        0 0 0 2px rgba(255, 255, 255, 0.2);
    animation: badge-pulse-rc 2s infinite;
    letter-spacing: 0.5px;
}

@keyframes badge-pulse-rc {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45); }
    50% { transform: scale(1.12); box-shadow: 0 8px 25px rgba(239, 68, 68, 0.55); }
}

.rc-tab-btn.active .rc-tab-badge {
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    animation: none;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.4);
}

/* ========== CONTENIDO DE TABS - ULTRA PREMIUM ========== */
.rc-content-wrapper {
    min-height: 500px;
    position: relative;
    z-index: 1;
}

.rc-tab-content {
    display: none;
}

.rc-tab-content.active {
    display: block;
    animation: rcFadeInUltra 0.6s var(--rc-transition-smooth);
}

@keyframes rcFadeInUltra {
    from { 
        opacity: 0; 
        transform: translateY(30px) scale(0.97); 
        filter: blur(5px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
        filter: blur(0);
    }
}

/* Loading State Ultra Premium */
.rc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 50px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 32px;
    box-shadow: 
        0 20px 60px rgba(31, 107, 167, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.08);
    position: relative;
    overflow: hidden;
}

.rc-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(31, 107, 167, 0.05), transparent);
    animation: rc-loading-shine 2s ease-in-out infinite;
}

@keyframes rc-loading-shine {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(50%); }
}

.rc-loading i {
    font-size: 56px;
    background: linear-gradient(135deg, #1F6BA7, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 28px;
    animation: rc-spin-glow 1s linear infinite;
    filter: drop-shadow(0 4px 20px rgba(31, 107, 167, 0.3));
}

@keyframes rc-spin-glow {
    0% { transform: rotate(0deg); filter: drop-shadow(0 4px 20px rgba(31, 107, 167, 0.3)); }
    50% { filter: drop-shadow(0 4px 30px rgba(14, 165, 233, 0.4)); }
    100% { transform: rotate(360deg); filter: drop-shadow(0 4px 20px rgba(31, 107, 167, 0.3)); }
}

.rc-loading p {
    color: #64748b;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.3px;
}

/* ========== FILTROS - ULTRA PREMIUM ========== */
.rc-filters {
    background: linear-gradient(145deg, #ffffff 0%, #faf8fc 50%, #f0f9ff 100%);
    border-radius: 28px;
    padding: 28px 32px;
    margin-bottom: 28px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        0 0 0 1px rgba(31, 107, 167, 0.05),
        inset 0 2px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(31, 107, 167, 0.08);
    position: relative;
    overflow: hidden;
}

.rc-filters::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.rc-filters::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(31, 107, 167, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.rc-filters-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: flex-end;
    position: relative;
    z-index: 1;
    margin-bottom: 15px;
}

.rc-filters-row:last-child {
    margin-bottom: 0;
}

.rc-filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 150px;
    max-width: 200px;
}

.rc-filter-group label {
    font-size: 0.75rem;
    color: #1F6BA7;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rc-filter-group label::before {
    content: '';
    width: 4px;
    height: 4px;
    background: linear-gradient(135deg, #1F6BA7, #0ea5e9);
    border-radius: 50%;
}

.rc-filter-group input,
.rc-filter-group select {
    padding: 16px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-size: 0.95rem;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    transition: all 0.4s var(--rc-transition-smooth);
    font-weight: 600;
    color: #475569;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.rc-filter-group input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.rc-filter-group input:hover,
.rc-filter-group select:hover {
    border-color: #5bbad5;
    background: white;
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.08);
}

.rc-filter-group input:focus,
.rc-filter-group select:focus {
    border-color: #1F6BA7;
    outline: none;
    background: white;
    box-shadow: 
        0 0 0 4px rgba(31, 107, 167, 0.12),
        0 8px 25px rgba(31, 107, 167, 0.1);
    transform: translateY(-2px);
}

.rc-filters .btn {
    padding: 16px 24px;
    border-radius: 16px;
    font-weight: 700;
    transition: all 0.4s var(--rc-transition-smooth);
}

.rc-filters .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ========== BANDEJA DE SOLICITUDES - ULTRA PREMIUM ========== */
.rc-inbox-wrapper {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.rc-inbox-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rc-inbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 32px;
    background: linear-gradient(145deg, #ffffff 0%, #faf8fc 100%);
    border-radius: 28px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
    position: relative;
    overflow: hidden;
}

.rc-inbox-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.rc-inbox-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.rc-inbox-header h3 i {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.3);
}

.rc-inbox-header .btn-primary {
    padding: 14px 28px;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 14px;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35);
}

.rc-inbox-header .btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(16, 185, 129, 0.45);
}

.rc-requests-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ========== TARJETA DE SOLICITUD - ULTRA PREMIUM ========== */
.rc-request-card {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 24px;
    padding: 28px 32px;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    transition: all 0.5s var(--rc-transition-smooth);
    border-left: 6px solid #1F6BA7;
    position: relative;
    overflow: hidden;
}

.rc-request-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, #1F6BA7, #082A5D);
    transition: all 0.4s ease;
}

.rc-request-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(31, 107, 167, 0.03), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.rc-request-card:hover {
    transform: translateX(10px) translateY(-6px) scale(1.01);
    box-shadow: 
        0 25px 70px rgba(31, 107, 167, 0.15),
        0 0 0 1px rgba(31, 107, 167, 0.08);
}

.rc-request-card:hover::before {
    width: 10px;
    filter: brightness(1.1);
}

.rc-request-card:hover::after {
    left: 100%;
}

/* SLA Critical - Emergencia */
.rc-request-card.sla-critical {
    border-left-color: transparent;
    background: linear-gradient(145deg, #ffffff 0%, #fef8f8 100%);
}

.rc-request-card.sla-critical::before {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    box-shadow: 4px 0 20px rgba(239, 68, 68, 0.3);
    animation: rc-sla-pulse-critical 2s ease-in-out infinite;
}

@keyframes rc-sla-pulse-critical {
    0%, 100% { box-shadow: 4px 0 20px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 6px 0 30px rgba(239, 68, 68, 0.5); }
}

.rc-request-card.sla-critical .rc-sla-indicator {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #dc2626;
    animation: rc-indicator-shake 0.5s ease-in-out infinite;
}

@keyframes rc-indicator-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* SLA Warning - Urgente */
.rc-request-card.sla-warning {
    border-left-color: transparent;
    background: linear-gradient(145deg, #ffffff 0%, #fffbf0 100%);
}

.rc-request-card.sla-warning::before {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    box-shadow: 4px 0 20px rgba(245, 158, 11, 0.3);
}

.rc-request-card.sla-warning .rc-sla-indicator {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #b45309;
}

/* SLA Alert - Prioritario */
.rc-request-card.sla-alert {
    border-left-color: transparent;
    background: linear-gradient(145deg, #ffffff 0%, #fefce8 100%);
}

.rc-request-card.sla-alert::before {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    box-shadow: 4px 0 20px rgba(251, 191, 36, 0.3);
}

.rc-request-card.sla-alert .rc-sla-indicator {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    color: #a16207;
}

/* SLA OK - En tiempo */
.rc-request-card.sla-ok {
    border-left-color: transparent;
    background: linear-gradient(145deg, #ffffff 0%, #f0fdf8 100%);
}

.rc-request-card.sla-ok::before {
    background: linear-gradient(180deg, #10b981 0%, #059669 50%, #047857 100%);
    box-shadow: 4px 0 20px rgba(16, 185, 129, 0.3);
}

.rc-request-card.sla-ok .rc-sla-indicator {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #047857;
}

/* Header de tarjeta */
.rc-request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.rc-request-number {
    font-weight: 900;
    color: #1e293b;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 14px;
    letter-spacing: -0.3px;
}

.rc-request-number i {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.25);
}

.rc-request-priority {
    padding: 10px 20px;
    border-radius: 30px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.rc-request-priority.emergencia {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    animation: priority-glow-red 2s ease-in-out infinite;
}

@keyframes priority-glow-red {
    0%, 100% { box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35); }
    50% { box-shadow: 0 8px 30px rgba(239, 68, 68, 0.55); }
}

.rc-request-priority.urgente {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.rc-request-priority.prioritario {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
}

.rc-request-priority.electivo {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* ========== CUERPO DE TARJETA - ULTRA PREMIUM ========== */
.rc-request-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.rc-request-patient {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 18px 22px;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.rc-request-patient:hover {
    background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
}

.rc-request-patient i {
    color: #1F6BA7;
    font-size: 1.1rem;
}

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

.rc-patient-doc,
.rc-patient-age {
    color: #64748b;
    font-size: 0.85rem;
    padding: 4px 10px;
    background: white;
    border-radius: 6px;
    font-weight: 500;
}

.rc-request-route {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #475569;
    font-size: 0.95rem;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(31, 107, 167, 0.05), transparent);
    border-radius: 12px;
}

.rc-request-route i {
    color: #1F6BA7;
    font-size: 1.1rem;
}

.rc-request-route .fa-arrow-right {
    color: #10b981;
    animation: route-pulse 1.5s infinite;
}

@keyframes route-pulse {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(5px); opacity: 0.7; }
}

.rc-request-footer {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 2px solid #f1f5f9;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.rc-request-status {
    padding: 10px 18px;
    border-radius: 30px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    letter-spacing: 0.3px;
}

.rc-request-time {
    color: #1F6BA7;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 12px;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.rc-request-time i {
    color: #0ea5e9;
}

.rc-sla-indicator {
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rc-request-blockers {
    color: #dc2626;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    padding: 10px 18px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    animation: blocker-pulse-ultra 2s ease-in-out infinite;
}

@keyframes blocker-pulse-ultra {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
    50% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* ========== PAGINACI�N - ULTRA PREMIUM ========== */
.rc-pagination {
    padding: 28px 32px;
    display: flex;
    justify-content: center;
    background: linear-gradient(145deg, #ffffff 0%, #faf8fc 100%);
    border-radius: 24px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    margin-top: 28px;
    border: 1px solid rgba(31, 107, 167, 0.06);
}

.rc-pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rc-pagination-controls button {
    padding: 14px 22px;
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid #e2e8f0;
    color: #475569;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s var(--rc-transition-smooth);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.rc-pagination-controls button:hover:not(:disabled) {
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
    border-color: #1F6BA7;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(31, 107, 167, 0.35);
}

.rc-pagination-controls button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.rc-pagination-info {
    padding: 14px 24px;
    color: #1F6BA7;
    font-weight: 700;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid rgba(31, 107, 167, 0.1);
}

/* ========== ESTADOS VAC�OS Y ERROR - ULTRA PREMIUM ========== */
.rc-empty-state,
.rc-error-state {
    text-align: center;
    padding: 100px 50px;
    color: #64748b;
    background: linear-gradient(145deg, #ffffff 0%, #faf8fc 100%);
    border-radius: 28px;
    box-shadow: 
        0 20px 60px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
    position: relative;
    overflow: hidden;
}

.rc-empty-state::before,
.rc-error-state::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(31, 107, 167, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.rc-empty-state i,
.rc-error-state i {
    font-size: 80px;
    margin-bottom: 28px;
    opacity: 0.25;
    display: block;
    background: linear-gradient(135deg, #1F6BA7, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rc-empty-state h4,
.rc-error-state h4 {
    margin: 0 0 16px 0;
    color: #1e293b;
    font-size: 1.6rem;
    font-weight: 800;
}

.rc-empty-state p,
.rc-error-state p {
    color: #64748b;
    font-size: 1.1rem;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

.rc-error-state {
    background: linear-gradient(145deg, #ffffff 0%, #fef8f8 100%);
    border-color: rgba(239, 68, 68, 0.1);
}

.rc-error-state i {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== MODAL - ULTRA PREMIUM GLASSMORPHISM ========== */
.rc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 24px;
    animation: rcModalFadeInUltra 0.35s ease;
}

@keyframes rcModalFadeInUltra {
    from { opacity: 0; backdrop-filter: blur(0); }
    to { opacity: 1; backdrop-filter: blur(12px); }
}

.rc-modal {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 32px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 
        0 30px 100px rgba(31, 107, 167, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset,
        0 10px 40px rgba(0, 0, 0, 0.2);
    animation: rcModalSlideInUltra 0.5s var(--rc-transition-smooth);
}

@keyframes rcModalSlideInUltra {
    from { 
        opacity: 0; 
        transform: scale(0.85) translateY(50px); 
        filter: blur(10px);
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
        filter: blur(0);
    }
}

.rc-modal-lg {
    width: 100%;
    max-width: 900px;
}

.rc-modal-xl {
    width: 100%;
    max-width: 1300px;
}

.rc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 36px;
    background: linear-gradient(135deg, #1F6BA7 0%, #4a2260 30%, #1e3a5f 70%, #0ea5e9 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.rc-modal-header::before {
    content: '';
    position: absolute;
    top: -100%;
    right: -50%;
    width: 150%;
    height: 300%;
    background: 
        radial-gradient(ellipse at center, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(14, 165, 233, 0.2) 0%, transparent 40%);
    pointer-events: none;
    animation: rc-modal-shine 8s ease-in-out infinite;
}

@keyframes rc-modal-shine {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(3deg) translateX(10px); }
}

.rc-modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
}

.rc-modal-header h3 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.rc-modal-header h3 i {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.rc-modal-close {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.4rem;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s var(--rc-transition-smooth);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.rc-modal-body {
    padding: 36px;
    overflow-y: auto;
    flex: 1;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* ========== DETALLE DE SOLICITUD - ULTRA PREMIUM ========== */
.rc-detail-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.rc-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
    padding: 28px 32px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.rc-detail-title {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.rc-detail-title h2 {
    margin: 0;
    color: #1e293b;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.3px;
}

.rc-status-badge,
.rc-priority-badge {
    padding: 12px 22px;
    border-radius: 30px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    letter-spacing: 0.5px;
}

.rc-detail-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.rc-detail-actions .btn {
    padding: 14px 24px;
    font-size: 0.95rem;
    border-radius: 14px;
    font-weight: 700;
    transition: all 0.4s var(--rc-transition-smooth);
    border: none;
}

.rc-detail-actions .btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* ========== TABS DE DETALLE - ULTRA PREMIUM ========== */
.rc-detail-tabs {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    box-shadow: 
        0 8px 30px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    flex-wrap: wrap;
    border: 1px solid rgba(31, 107, 167, 0.06);
}

.rc-detail-tab {
    padding: 16px 28px;
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 14px;
    transition: all 0.4s var(--rc-transition-smooth);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.rc-detail-tab::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #1F6BA7, #0ea5e9);
    border-radius: 3px;
    transition: all 0.4s var(--rc-transition-smooth);
    transform: translateX(-50%);
}

.rc-detail-tab:hover {
    color: #1F6BA7;
    background: linear-gradient(145deg, rgba(31, 107, 167, 0.08) 0%, rgba(14, 165, 233, 0.05) 100%);
    transform: translateY(-2px);
}

.rc-detail-tab:hover::before {
    width: 50%;
}

.rc-detail-tab.active {
    color: white;
    background: linear-gradient(135deg, #1F6BA7 0%, #4a2260 50%, #1e3a5f 100%);
    box-shadow: 
        0 10px 30px rgba(31, 107, 167, 0.35),
        0 0 0 2px rgba(31, 107, 167, 0.1);
    transform: translateY(-2px);
}

.rc-detail-tab.active::before {
    display: none;
}

.rc-detail-tab i {
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.rc-detail-tab:hover i {
    transform: scale(1.15);
}

.rc-detail-pane {
    display: none;
    padding-top: 28px;
    animation: rcFadeInUltra 0.5s var(--rc-transition-smooth);
}

.rc-detail-pane.active {
    display: block;
}

/* ========== INFO GRID - ULTRA PREMIUM ========== */
.rc-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 28px;
}

/* ========== INFO SECTION - ULTRA PREMIUM ========== */
.rc-info-section {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
    transition: all 0.4s var(--rc-transition-smooth);
}

.rc-info-section:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 20px 60px rgba(31, 107, 167, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.rc-info-section.full-width {
    grid-column: 1 / -1;
}

.rc-info-section h4 {
    margin: 0 0 24px 0;
    color: #1e293b;
    font-size: 1.2rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 2px solid linear-gradient(90deg, #f1f5f9 0%, transparent 100%);
}

.rc-info-section h4 i {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.3);
}

.rc-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.rc-info-row:hover {
    background: #f8fafc;
    padding-left: 12px;
    padding-right: 12px;
    margin-left: -12px;
    margin-right: -12px;
    border-radius: 10px;
}

.rc-info-row:last-child {
    border-bottom: none;
}

.rc-info-row label {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 600;
}

.rc-info-row span {
    color: #1e293b;
    font-weight: 700;
    font-size: 0.95rem;
}

.rc-info-row span {
    color: #1e293b;
    font-weight: 700;
    font-size: 0.95rem;
}

/* ========== TIMELINE - ULTRA PREMIUM ========== */
.rc-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 50px;
}

.rc-timeline::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #1F6BA7 0%, #2482B8 40%, #0ea5e9 100%);
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(31, 107, 167, 0.2);
}

.rc-timeline-item {
    position: relative;
    padding-bottom: 32px;
}

.rc-timeline-item:last-child {
    padding-bottom: 0;
}

.rc-timeline-marker {
    position: absolute;
    left: -50px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 4px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #64748b;
    z-index: 1;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.4s var(--rc-transition-smooth);
}

.rc-timeline-item:hover .rc-timeline-marker {
    transform: scale(1.15);
}

.rc-timeline-item.completed .rc-timeline-marker {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    border-color: #10b981;
    color: #fff;
    box-shadow: 
        0 10px 30px rgba(16, 185, 129, 0.4),
        0 0 0 6px rgba(16, 185, 129, 0.15);
}

.rc-timeline-item.in-progress .rc-timeline-marker {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    border-color: #f59e0b;
    color: #fff;
    box-shadow: 
        0 10px 30px rgba(245, 158, 11, 0.4),
        0 0 0 6px rgba(245, 158, 11, 0.15);
    animation: rc-marker-pulse-ultra 2s ease-in-out infinite;
}

@keyframes rc-marker-pulse-ultra {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 10px 30px rgba(245, 158, 11, 0.4), 0 0 0 6px rgba(245, 158, 11, 0.15);
    }
    50% { 
        transform: scale(1.1); 
        box-shadow: 0 15px 40px rgba(245, 158, 11, 0.5), 0 0 0 10px rgba(245, 158, 11, 0.1);
    }
}

.rc-timeline-item.pending .rc-timeline-marker {
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border-color: #cbd5e1;
    color: #94a3b8;
}

.rc-timeline-content {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 20px;
    padding: 22px 28px;
    margin-left: 20px;
    box-shadow: 
        0 12px 40px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
    transition: all 0.4s var(--rc-transition-smooth);
    position: relative;
    overflow: hidden;
}

.rc-timeline-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #1F6BA7, #0ea5e9);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rc-timeline-content:hover {
    transform: translateX(10px);
    box-shadow: 
        0 18px 50px rgba(31, 107, 167, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.rc-timeline-content:hover::before {
    opacity: 1;
}

.rc-timeline-content h5 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: #1e293b;
    font-weight: 800;
}

.rc-timeline-content p {
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

.rc-timeline-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 14px;
    background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 10px;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

.rc-timeline-date i {
    color: #1F6BA7;
}

/* ========== TRACKING BOARD - ULTRA PREMIUM ========== */
.rc-tracking-wrapper {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.rc-tracking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(145deg, #ffffff 0%, #faf8fc 100%);
    padding: 28px 32px;
    border-radius: 24px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
    position: relative;
    overflow: hidden;
}

.rc-tracking-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.rc-tracking-header h3 {
    margin: 0;
    color: #1e293b;
    font-weight: 900;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.rc-tracking-header h3 i {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #1F6BA7, #0ea5e9);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.3);
}

.rc-tracking-boards {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 12px 8px;
    scroll-behavior: smooth;
}

.rc-tracking-boards::-webkit-scrollbar {
    height: 10px;
}

.rc-tracking-boards::-webkit-scrollbar-track {
    background: linear-gradient(90deg, #f1f5f9, #e2e8f0);
    border-radius: 10px;
}

.rc-tracking-boards::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #1F6BA7, #0ea5e9);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(31, 107, 167, 0.3);
}

.rc-tracking-boards::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #4a2260, #0284c7);
}

.rc-tracking-column {
    min-width: 320px;
    max-width: 360px;
    flex: 1;
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s var(--rc-transition-smooth);
}

.rc-tracking-column:hover {
    transform: translateY(-6px);
    box-shadow: 
        0 25px 70px rgba(31, 107, 167, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.rc-column-header {
    padding: 24px 26px;
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.05rem;
    position: relative;
    overflow: hidden;
}

.rc-column-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 100%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.rc-column-header i {
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.rc-tracking-column:hover .rc-column-header i {
    transform: scale(1.1) rotate(-5deg);
}

/* Colores de columnas de tracking */
.rc-column-header.pendiente {
    background: linear-gradient(135deg, #1C507B 0%, #1F6BA7 50%, #2482B8 100%);
}

.rc-column-header.en-proceso {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
}

.rc-column-header.completado {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
}

.rc-column-header.bloqueado {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
}

.rc-column-count {
    margin-left: auto;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.rc-column-content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 520px;
    overflow-y: auto;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.rc-column-content::-webkit-scrollbar {
    width: 6px;
}

.rc-column-content::-webkit-scrollbar-track {
    background: transparent;
}

.rc-column-content::-webkit-scrollbar-thumb {
    background: #5bbad5;
    border-radius: 6px;
}

.rc-tracking-card {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 18px;
    padding: 20px 22px;
    cursor: pointer;
    transition: all 0.5s var(--rc-transition-smooth);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.06),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.rc-tracking-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #1F6BA7, #0ea5e9);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rc-tracking-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 50px rgba(31, 107, 167, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.rc-tracking-card:hover::before {
    opacity: 1;
}

.rc-tracking-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.rc-tracking-ref {
    font-weight: 800;
    color: #1e293b;
    font-size: 1rem;
    letter-spacing: -0.3px;
}

.rc-tracking-time {
    font-size: 0.8rem;
    color: #1F6BA7;
    padding: 6px 12px;
    background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 10px;
    font-weight: 700;
    border: 1px solid rgba(31, 107, 167, 0.1);
}

.rc-tracking-card-body {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
}

.rc-tracking-patient {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.rc-tracking-patient i {
    color: #1F6BA7;
}

.rc-tracking-route {
    color: #64748b;
    font-size: 0.9rem;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
}

.rc-tracking-route i {
    color: #10b981;
}

.rc-tracking-blocker {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.35);
    animation: rc-blocker-pulse 2s ease-in-out infinite;
}

@keyframes rc-blocker-pulse {
    0%, 100% { box-shadow: 0 8px 25px rgba(239, 68, 68, 0.35); }
    50% { box-shadow: 0 10px 35px rgba(239, 68, 68, 0.5); }
}

.rc-board-empty {
    text-align: center;
    padding: 50px 30px;
    color: #94a3b8;
    font-style: italic;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    font-size: 0.95rem;
}

.rc-board-empty i {
    font-size: 2.5rem;
    opacity: 0.3;
    display: block;
    margin-bottom: 12px;
}

/* ========== BLOQUEADORES - ULTRA PREMIUM ========== */
.rc-blockers-wrapper {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.rc-blockers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(145deg, #ffffff 0%, #fef8f8 100%);
    padding: 28px 32px;
    border-radius: 24px;
    box-shadow: 
        0 15px 50px rgba(239, 68, 68, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(239, 68, 68, 0.1);
    position: relative;
    overflow: hidden;
}

.rc-blockers-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.rc-blockers-header h3 {
    margin: 0;
    font-weight: 900;
    font-size: 1.5rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.rc-blockers-header h3 i {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    box-shadow: 
        0 10px 30px rgba(239, 68, 68, 0.4),
        0 0 0 4px rgba(239, 68, 68, 0.15);
    animation: rc-blocker-icon-pulse 2s ease-in-out infinite;
}

@keyframes rc-blocker-icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.rc-blockers-stats {
    display: flex;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.rc-blocker-stat {
    padding: 10px 18px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rc-blocker-stat.resolved {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.rc-blockers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 28px;
}

.rc-blocker-group h4 {
    margin: 0 0 20px 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rc-blocker-group h4 i {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #ef4444, #f87171);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.95rem;
}

.rc-blocker-card {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: 18px;
    box-shadow: 
        0 12px 40px rgba(239, 68, 68, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border-left: 6px solid #ef4444;
    transition: all 0.4s var(--rc-transition-smooth);
    position: relative;
    overflow: hidden;
}

.rc-blocker-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.06) 0%, transparent 40%);
    pointer-events: none;
}

.rc-blocker-card:hover {
    transform: translateX(10px) translateY(-4px);
    box-shadow: 
        0 20px 55px rgba(239, 68, 68, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.rc-blocker-card.resolved {
    border-left-color: #10b981;
    opacity: 0.9;
    background: linear-gradient(145deg, #ffffff 0%, #f0fdf8 100%);
}

.rc-blocker-card.resolved::before {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, transparent 40%);
}

.rc-blocker-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.rc-blocker-ref {
    font-weight: 800;
    color: #1e293b;
    font-size: 1.1rem;
}

.rc-blocker-status {
    font-size: 0.85rem;
    padding: 10px 18px;
    border-radius: 30px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    font-weight: 800;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15);
}

.rc-blocker-card.resolved .rc-blocker-status {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #059669;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15);
}

.rc-blocker-card-body p {
    margin: 0 0 10px 0;
    font-size: 1rem;
    color: #475569;
    position: relative;
    z-index: 1;
    line-height: 1.5;
}

.rc-blocker-card-footer {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 2px solid #f1f5f9;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.rc-blocker-card-footer .btn {
    padding: 12px 22px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.4s var(--rc-transition-smooth);
    border: none;
}

.rc-blocker-card-footer .btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.rc-blocker-card-footer .btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.rc-blocker-card-footer .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
}

/* ========== DASHBOARD HEADER & FILTROS DE FECHA - ULTRA PREMIUM ========== */
.rc-dashboard-wrapper {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.rc-dashboard-header {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 24px;
    padding: 28px 32px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

.rc-dashboard-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
}

.rc-dashboard-header::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(14, 165, 233, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.rc-dashboard-title {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.rc-dashboard-title > i {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 10px 30px rgba(31, 107, 167, 0.35);
    animation: rc-icon-float 3s ease-in-out infinite;
}

.rc-dashboard-title h3 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 900;
    color: #1e293b;
    letter-spacing: -0.5px;
}

.rc-dashboard-title p {
    margin: 4px 0 0 0;
    font-size: 0.95rem;
    color: #64748b;
    font-weight: 500;
}

.rc-dashboard-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.rc-date-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rc-date-filter-group label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1F6BA7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rc-date-filter-group label i {
    font-size: 0.9rem;
    color: #2482B8;
}

.rc-date-input {
    padding: 14px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    transition: all 0.4s var(--rc-transition-smooth);
    min-width: 160px;
    cursor: pointer;
}

.rc-date-input:hover {
    border-color: #5bbad5;
    background: white;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.08);
}

.rc-date-input:focus {
    border-color: #1F6BA7;
    outline: none;
    background: white;
    box-shadow: 
        0 0 0 4px rgba(31, 107, 167, 0.12),
        0 6px 20px rgba(31, 107, 167, 0.1);
    transform: translateY(-2px);
}

/* Estilos espec�ficos para el calendario nativo */
.rc-date-input::-webkit-calendar-picker-indicator {
    background: linear-gradient(135deg, #1F6BA7, #0ea5e9);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: invert(1);
}

.rc-date-input::-webkit-calendar-picker-indicator:hover {
    transform: scale(1.15);
    background: linear-gradient(135deg, #2482B8, #0ea5e9);
}

.rc-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
    border-radius: 10px;
    color: #1F6BA7;
    font-size: 0.9rem;
    margin-top: 24px;
}

.rc-btn-filter-apply {
    padding: 14px 24px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s var(--rc-transition-smooth);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.3);
}

.rc-btn-filter-apply:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 35px rgba(31, 107, 167, 0.4);
}

.rc-btn-filter-clear {
    width: 46px;
    height: 46px;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.4s var(--rc-transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

.rc-btn-filter-clear:hover {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
    color: #dc2626;
    transform: translateY(-3px);
}

/* ========== CHARTS GRID ========== */
.rc-dashboard-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.rc-chart-card {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
    transition: all 0.5s var(--rc-transition-smooth);
    position: relative;
    overflow: hidden;
}

.rc-chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1F6BA7, #2482B8, #0ea5e9);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--rc-transition-smooth);
}

.rc-chart-card:hover {
    transform: translateY(-6px);
    box-shadow: 
        0 25px 70px rgba(31, 107, 167, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.rc-chart-card:hover::before {
    transform: scaleX(1);
}

.rc-chart-card h4 {
    margin: 0 0 24px 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f1f5f9;
}

.rc-chart-card h4::before {
    content: '';
    width: 5px;
    height: 24px;
    background: linear-gradient(180deg, #1F6BA7, #0ea5e9);
    border-radius: 3px;
}

.rc-chart-content {
    min-height: 150px;
}

/* ========== TABLES DASHBOARD ========== */
.rc-dashboard-tables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
}

.rc-table-card {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
}

.rc-table-card h4 {
    margin: 0 0 24px 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f1f5f9;
}

.rc-table-card h4::before {
    content: '';
    width: 5px;
    height: 24px;
    background: linear-gradient(180deg, #1F6BA7, #0ea5e9);
    border-radius: 3px;
}

/* ========== KPI CARDS - ULTRA PREMIUM ========== */
.rc-kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.rc-kpi-card {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    display: flex;
    gap: 22px;
    align-items: center;
    transition: all 0.5s var(--rc-transition-smooth);
    border: 1px solid rgba(31, 107, 167, 0.06);
    position: relative;
    overflow: hidden;
}

.rc-kpi-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(31, 107, 167, 0.06) 0%, transparent 60%);
    pointer-events: none;
    transition: all 0.4s ease;
}

.rc-kpi-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #1F6BA7, #0ea5e9);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--rc-transition-smooth);
}

.rc-kpi-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 25px 70px rgba(31, 107, 167, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.rc-kpi-card:hover::before {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 60%);
}

.rc-kpi-card:hover::after {
    transform: scaleX(1);
}

.rc-kpi-icon {
    font-size: 1.8rem;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    color: white;
    box-shadow: 
        0 12px 35px rgba(31, 107, 167, 0.35),
        0 0 0 4px rgba(31, 107, 167, 0.1);
    transition: all 0.4s var(--rc-transition-smooth);
}

.rc-kpi-card:hover .rc-kpi-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 
        0 15px 40px rgba(31, 107, 167, 0.4),
        0 0 0 6px rgba(31, 107, 167, 0.15);
}

.rc-kpi-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.rc-kpi-value {
    font-size: 2.4rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
    letter-spacing: -0.5px;
}

.rc-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
}

.rc-kpi-trend.up {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #059669;
}

.rc-kpi-trend.down {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #dc2626;
}

.rc-kpi-title {
    font-size: 0.95rem;
    color: #64748b;
    margin-top: 8px;
    font-weight: 600;
}

/* KPI Card variants */
.rc-kpi-card.success .rc-kpi-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    box-shadow: 0 12px 35px rgba(16, 185, 129, 0.35);
}

.rc-kpi-card.warning .rc-kpi-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    box-shadow: 0 12px 35px rgba(245, 158, 11, 0.35);
}

.rc-kpi-card.danger .rc-kpi-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    box-shadow: 0 12px 35px rgba(239, 68, 68, 0.35);
}

.rc-kpi-card.info .rc-kpi-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.35);
}

/* ========== CHARTS - ULTRA PREMIUM ========== */
.rc-dashboard-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 28px;
    margin-bottom: 32px;
}

.rc-chart-card {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
    transition: all 0.4s var(--rc-transition-smooth);
}

.rc-chart-card:hover {
    transform: translateY(-6px);
    box-shadow: 
        0 25px 70px rgba(31, 107, 167, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.rc-chart-card h4 {
    margin: 0 0 24px 0;
    color: #1e293b;
    font-size: 1.2rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 14px;
}

.rc-chart-card h4 i {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.3);
}

.rc-simple-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rc-bar-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rc-bar-label {
    font-size: 0.95rem;
    color: #475569;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rc-bar-container {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 32px;
    background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.rc-bar {
    height: 100%;
    border-radius: 16px;
    transition: width 1s var(--rc-transition-smooth);
    background: linear-gradient(90deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.25);
    position: relative;
}

.rc-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
    border-radius: 16px 16px 0 0;
}

.rc-bar-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1e293b;
    padding-right: 14px;
    min-width: 50px;
    text-align: right;
}

.rc-simple-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rc-simple-list li {
    padding: 16px 12px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.4s var(--rc-transition-smooth);
    border-radius: 12px;
    margin-bottom: 4px;
}

.rc-simple-list li:hover {
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    padding-left: 16px;
    transform: translateX(6px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.rc-list-rank {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 6px 18px rgba(31, 107, 167, 0.3);
}

.rc-list-rank.gold {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.3);
}

.rc-list-rank.silver {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    box-shadow: 0 6px 18px rgba(100, 116, 139, 0.3);
}

.rc-list-rank.bronze {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.3);
}

/* ========== FORMULARIOS - ULTRA PREMIUM ========== */
.rc-form-section {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 28px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
    position: relative;
    overflow: hidden;
}

.rc-form-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.rc-form-section h4 {
    margin: 0 0 28px 0;
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 2px solid #f1f5f9;
    position: relative;
    z-index: 1;
}

.rc-form-section h4 i {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.3);
}

.rc-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.rc-form-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rc-form-group label {
    font-size: 0.85rem;
    color: #1F6BA7;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rc-form-group label.required::after {
    content: '*';
    color: #ef4444;
    font-size: 1rem;
}

.rc-form-group input,
.rc-form-group select,
.rc-form-group textarea {
    padding: 16px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-size: 1rem;
    transition: all 0.4s var(--rc-transition-smooth);
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    color: #1e293b;
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.rc-form-group input::placeholder,
.rc-form-group textarea::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.rc-form-group input:hover,
.rc-form-group select:hover,
.rc-form-group textarea:hover {
    border-color: #5bbad5;
    background: white;
    box-shadow: 0 4px 15px rgba(31, 107, 167, 0.06);
}

.rc-form-group input:focus,
.rc-form-group select:focus,
.rc-form-group textarea:focus {
    border-color: #1F6BA7;
    outline: none;
    background: white;
    box-shadow: 
        0 0 0 4px rgba(31, 107, 167, 0.1),
        0 6px 20px rgba(31, 107, 167, 0.08);
    transform: translateY(-2px);
}

.rc-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 24px;
    border-top: 2px solid #f1f5f9;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.rc-form-actions .btn {
    padding: 16px 32px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 1rem;
    transition: all 0.5s var(--rc-transition-smooth);
    border: none;
}

.rc-form-actions .btn-primary {
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(31, 107, 167, 0.35);
}

.rc-form-actions .btn-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 45px rgba(31, 107, 167, 0.45);
}

.rc-form-actions .btn-secondary {
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    border: 2px solid #e2e8f0;
}

.rc-form-actions .btn-secondary:hover {
    background: linear-gradient(145deg, #f1f5f9 0%, #cbd5e1 100%);
    border-color: #cbd5e1;
    transform: translateY(-3px);
}

/* ========== TABLAS - ULTRA PREMIUM ========== */
.rc-table-wrapper {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 
        0 20px 60px rgba(31, 107, 167, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
    position: relative;
}

.rc-table-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    z-index: 2;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
}

.rc-table th,
.rc-table td {
    padding: 22px 26px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}

.rc-table th {
    background: linear-gradient(135deg, #1F6BA7 0%, #4a2260 50%, #2482B8 100%);
    font-weight: 800;
    color: white;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    position: relative;
}

.rc-table th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.rc-table th:first-child {
    border-radius: 0;
}

.rc-table th:last-child {
    border-radius: 0;
}

.rc-table td {
    font-size: 0.95rem;
    color: #475569;
    font-weight: 500;
    transition: all 0.3s var(--rc-transition-smooth);
}

.rc-table tbody tr {
    transition: all 0.4s var(--rc-transition-smooth);
    position: relative;
}

.rc-table tbody tr::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(135deg, #1F6BA7, #0ea5e9);
    transition: width 0.4s var(--rc-transition-smooth);
}

.rc-table tbody tr:hover {
    background: linear-gradient(145deg, rgba(31, 107, 167, 0.02) 0%, rgba(14, 165, 233, 0.02) 100%);
    transform: scale(1.005);
}

.rc-table tbody tr:hover::before {
    width: 5px;
}

.rc-table tbody tr:hover td {
    color: #1e293b;
}

.rc-table tbody tr:nth-child(even) {
    background: rgba(31, 107, 167, 0.01);
}

.rc-table tbody tr:nth-child(even):hover {
    background: linear-gradient(145deg, rgba(31, 107, 167, 0.04) 0%, rgba(14, 165, 233, 0.04) 100%);
}

/* Acciones de tabla */
.rc-table-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rc-table-actions .btn-action {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.4s var(--rc-transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.rc-table-actions .btn-action.view {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    color: white;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.rc-table-actions .btn-action.edit {
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.3);
}

.rc-table-actions .btn-action.delete {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.rc-table-actions .btn-action:hover {
    transform: translateY(-3px) scale(1.1);
}

/* Estado vac�o tabla */
.rc-table-empty {
    text-align: center;
    padding: 60px 30px !important;
    background: linear-gradient(145deg, rgba(31, 107, 167, 0.02) 0%, rgba(14, 165, 233, 0.02) 100%);
}

.rc-table-empty i {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 16px;
    display: block;
}

.rc-table-empty span {
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 600;
}

/* ========== CONFIGURACI�N - ULTRA PREMIUM ========== */
.rc-config-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.rc-config-header {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    padding: 30px 34px;
    border-radius: 24px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
    position: relative;
    overflow: hidden;
}

.rc-config-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.rc-config-header h3 {
    margin: 0;
    color: #1e293b;
    font-weight: 900;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.rc-config-header h3 i {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    box-shadow: 0 10px 30px rgba(31, 107, 167, 0.35);
    animation: rc-icon-float 3s ease-in-out infinite;
}

.rc-config-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 28px;
}

.rc-config-section {
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.06);
    transition: all 0.5s var(--rc-transition-smooth);
    position: relative;
    overflow: hidden;
}

.rc-config-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--rc-transition-smooth);
}

.rc-config-section:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 25px 70px rgba(31, 107, 167, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.rc-config-section:hover::before {
    transform: scaleX(1);
}

.rc-config-section h4 {
    margin: 0 0 24px 0;
    color: #1e293b;
    font-weight: 900;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f1f5f9;
    position: relative;
    z-index: 1;
}

.rc-config-section h4 i {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.3);
    transition: transform 0.4s var(--rc-transition-smooth);
}

.rc-config-section:hover h4 i {
    transform: rotate(10deg) scale(1.1);
}

/* ========== TAREAS - ULTRA PREMIUM ========== */
.rc-tasks-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rc-tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(31, 107, 167, 0.06);
}

.rc-task-item {
    display: flex;
    gap: 18px;
    padding: 22px;
    background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
    border-radius: 20px;
    align-items: flex-start;
    box-shadow: 
        0 8px 25px rgba(31, 107, 167, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.5s var(--rc-transition-smooth);
    border: 1px solid rgba(31, 107, 167, 0.05);
    position: relative;
    overflow: hidden;
}

.rc-task-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    border-radius: 0 4px 4px 0;
    transform: scaleY(0.6);
    transition: transform 0.4s var(--rc-transition-smooth);
}

.rc-task-item:hover {
    transform: translateX(10px);
    box-shadow: 
        0 15px 45px rgba(31, 107, 167, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.rc-task-item:hover::before {
    transform: scaleY(1);
}

.rc-task-item.completada {
    opacity: 0.6;
    background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: rgba(16, 185, 129, 0.15);
}

.rc-task-item.completada::before {
    background: linear-gradient(180deg, #10b981, #059669);
}

.rc-task-item.completada .rc-task-content {
    text-decoration: line-through;
    color: #64748b;
}

.rc-task-content {
    flex: 1;
}

.rc-task-content h5 {
    margin: 0 0 10px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
}

.rc-task-meta {
    display: flex;
    gap: 18px;
    margin-top: 14px;
    font-size: 0.85rem;
    color: #64748b;
    flex-wrap: wrap;
}

.rc-task-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rc-task-meta i {
    color: #1F6BA7;
}

.rc-task-status {
    padding: 8px 16px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rc-task-status.pendiente {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.rc-task-status.en-proceso {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.rc-task-status.completada {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.rc-task-checkbox {
    width: 26px;
    height: 26px;
    border-radius: 10px;
    border: 3px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s var(--rc-transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rc-task-checkbox:hover {
    border-color: #1F6BA7;
    background: rgba(31, 107, 167, 0.05);
}

.rc-task-checkbox.checked {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: white;
}

/* ========== UTILIDADES - ULTRA PREMIUM ========== */
.rc-empty {
    text-align: center;
    padding: 80px 40px;
    color: #64748b;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    box-shadow: 
        0 15px 50px rgba(31, 107, 167, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(31, 107, 167, 0.05);
}

.rc-empty i {
    font-size: 64px;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
    display: block;
}

.rc-empty p {
    font-size: 1.1rem;
    font-weight: 600;
    color: #94a3b8;
    margin: 0;
}

.rc-error {
    color: #dc2626;
    padding: 40px;
    text-align: center;
    background: linear-gradient(145deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 20px;
    font-weight: 700;
    border: 2px solid rgba(239, 68, 68, 0.15);
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.1);
}

.rc-error i {
    font-size: 2.5rem;
    margin-bottom: 16px;
    display: block;
    animation: rc-icon-float 2s ease-in-out infinite;
}

.loading-spinner {
    text-align: center;
    padding: 80px 40px;
    color: #1F6BA7;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    box-shadow: 0 15px 50px rgba(31, 107, 167, 0.08);
}

.loading-spinner i {
    font-size: 3rem;
    margin-right: 12px;
    animation: spin 1s linear infinite;
    background: linear-gradient(135deg, #1F6BA7, #2482B8, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.loading-spinner p {
    margin-top: 20px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F6BA7;
}

/* ========== BOTONES ADICIONALES - ULTRA PREMIUM ========== */
.rc-btn {
    padding: 14px 28px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.5s var(--rc-transition-smooth);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.rc-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.rc-btn:hover::before {
    left: 100%;
}

.rc-btn-primary {
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #0ea5e9 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(31, 107, 167, 0.4);
}

.rc-btn-primary:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 15px 45px rgba(31, 107, 167, 0.5);
}

.rc-btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
}

.rc-btn-success:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 15px 45px rgba(16, 185, 129, 0.5);
}

.rc-btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.4);
}

.rc-btn-warning:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 15px 45px rgba(245, 158, 11, 0.5);
}

.rc-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4);
}

.rc-btn-danger:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 15px 45px rgba(239, 68, 68, 0.5);
}

.rc-btn-info {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.4);
}

.rc-btn-info:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 15px 45px rgba(14, 165, 233, 0.5);
}

.rc-btn-outline {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    color: #1F6BA7;
    border: 3px solid #1F6BA7;
    box-shadow: 0 6px 20px rgba(31, 107, 167, 0.15);
}

.rc-btn-outline:hover {
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 100%);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(31, 107, 167, 0.35);
}

.rc-btn-ghost {
    background: transparent;
    color: #64748b;
}

.rc-btn-ghost:hover {
    background: rgba(31, 107, 167, 0.08);
    color: #1F6BA7;
    transform: translateY(-2px);
}

.rc-btn-sm {
    padding: 10px 20px;
    font-size: 0.9rem;
    border-radius: 12px;
}

.rc-btn-lg {
    padding: 18px 36px;
    font-size: 1.1rem;
    border-radius: 18px;
}

.rc-btn-icon {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 14px;
    justify-content: center;
}

.rc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Grupo de botones */
.rc-btn-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ========== BADGES / ETIQUETAS - ULTRA PREMIUM ========== */
.rc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rc-badge-primary {
    background: linear-gradient(135deg, rgba(31, 107, 167, 0.15), rgba(152, 81, 181, 0.15));
    color: #1F6BA7;
    border: 1px solid rgba(31, 107, 167, 0.2);
}

.rc-badge-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.rc-badge-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.15));
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.rc-badge-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15));
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.rc-badge-info {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(2, 132, 199, 0.15));
    color: #0284c7;
    border: 1px solid rgba(14, 165, 233, 0.2);
}

/* ========== TOOLTIPS - ULTRA PREMIUM ========== */
.rc-tooltip {
    position: relative;
}

.rc-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    padding: 10px 16px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--rc-transition-smooth);
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.rc-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border: 8px solid transparent;
    border-top-color: #1e293b;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--rc-transition-smooth);
    z-index: 1000;
}

.rc-tooltip:hover::after,
.rc-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ========== ALERTAS - ULTRA PREMIUM ========== */
.rc-alert {
    padding: 20px 28px;
    border-radius: 18px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.rc-alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
}

.rc-alert-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rc-alert-content {
    flex: 1;
}

.rc-alert-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.rc-alert-message {
    font-size: 0.95rem;
    opacity: 0.9;
}

.rc-alert-success {
    background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #166534;
}

.rc-alert-success::before {
    background: linear-gradient(180deg, #10b981, #059669);
}

.rc-alert-success .rc-alert-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.rc-alert-warning {
    background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #92400e;
}

.rc-alert-warning::before {
    background: linear-gradient(180deg, #f59e0b, #d97706);
}

.rc-alert-warning .rc-alert-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.rc-alert-danger {
    background: linear-gradient(145deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #991b1b;
}

.rc-alert-danger::before {
    background: linear-gradient(180deg, #ef4444, #dc2626);
}

.rc-alert-danger .rc-alert-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.rc-alert-info {
    background: linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    color: #075985;
}

.rc-alert-info::before {
    background: linear-gradient(180deg, #0ea5e9, #0284c7);
}

.rc-alert-info .rc-alert-icon {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
}

/* ========== RESPONSIVE - ULTRA PREMIUM ========== */
@media (max-width: 1200px) {
    .rc-kpis-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .rc-config-sections {
        grid-template-columns: 1fr;
    }
    
    .rc-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    #ref-counterref header {
        padding: 35px 25px;
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    #ref-counterref header .rc-icon {
        width: 70px;
        height: 70px;
    }
    
    .rc-header-user {
        margin-left: 0;
        margin-top: 10px;
    }
    
    .rc-tracking-boards {
        grid-template-columns: 1fr;
    }
    
    .rc-kpis-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .rc-charts-grid {
        grid-template-columns: 1fr;
    }
    
    .rc-dashboard-header {
        flex-direction: column;
        text-align: center;
    }
    
    .rc-dashboard-title {
        flex-direction: column;
    }
    
    .rc-dashboard-filters {
        justify-content: center;
    }
    
    .rc-dashboard-charts {
        grid-template-columns: 1fr;
    }
    
    .rc-dashboard-tables {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #ref-counterref header {
        padding: 25px 18px;
    }
    
    #ref-counterref header h1 {
        font-size: 1.5rem;
    }
    
    #ref-counterref header p {
        font-size: 0.9rem;
    }
    
    .rc-main-tabs {
        flex-direction: column;
        padding: 14px;
        gap: 10px;
    }
    
    .rc-tab-btn {
        width: 100%;
        justify-content: center;
        padding: 16px 20px;
    }
    
    .rc-filters {
        padding: 20px;
    }
    
    .rc-filters-row {
        flex-direction: column;
        gap: 16px;
    }
    
    .rc-filter-group {
        min-width: 100%;
    }
    
    .rc-filter-group input,
    .rc-filter-group select {
        width: 100%;
    }
    
    .rc-inbox-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .rc-dashboard-header {
        padding: 22px;
    }
    
    .rc-dashboard-title > i {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    
    .rc-dashboard-title h3 {
        font-size: 1.35rem;
    }
    
    .rc-dashboard-filters {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    
    .rc-date-filter-group {
        width: 100%;
    }
    
    .rc-date-input {
        width: 100%;
    }
    
    .rc-date-separator {
        display: none;
    }
    
    .rc-btn-filter-apply {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }
    
    .rc-btn-filter-clear {
        position: absolute;
        top: 16px;
        right: 16px;
        margin-top: 0;
        width: 40px;
        height: 40px;
    }
    
    .rc-tracking-column {
        max-width: none;
    }
    
    .rc-info-grid {
        grid-template-columns: 1fr;
    }
    
    .rc-detail-header {
        flex-direction: column;
        gap: 16px;
    }
    
    .rc-detail-actions {
        width: 100%;
        justify-content: center;
    }
    
    .rc-detail-actions .btn {
        flex: 1;
    }
    
    .rc-timeline-item {
        padding-left: 60px;
    }
    
    .rc-timeline-marker {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .rc-modal {
        max-height: 95vh;
        margin: 10px;
        border-radius: 20px;
    }
    
    .rc-modal-body {
        padding: 20px;
    }
    
    .rc-form-section {
        padding: 22px;
    }
    
    .rc-form-row {
        grid-template-columns: 1fr;
    }
    
    .rc-form-actions {
        flex-direction: column;
    }
    
    .rc-form-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .rc-table-wrapper {
        border-radius: 18px;
        overflow-x: auto;
    }
    
    .rc-table th,
    .rc-table td {
        padding: 16px 14px;
        font-size: 0.9rem;
    }
    
    .rc-task-item {
        padding: 18px;
    }
    
    .rc-task-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .rc-blocker-item {
        flex-direction: column;
        text-align: center;
    }
    
    .rc-btn-group {
        flex-direction: column;
    }
    
    .rc-btn-group .rc-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    #ref-counterref header {
        padding: 20px 15px;
    }
    
    #ref-counterref header h1 {
        font-size: 1.3rem;
    }
    
    #ref-counterref header .rc-icon {
        width: 56px;
        height: 56px;
    }
    
    .rc-kpis-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .rc-kpi-card {
        padding: 20px;
    }
    
    .rc-kpi-value {
        font-size: 2rem;
    }
    
    .rc-request-card {
        padding: 18px;
    }
    
    .rc-request-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .rc-request-tags {
        flex-wrap: wrap;
    }
    
    .rc-tab-btn {
        padding: 14px 16px;
        font-size: 0.9rem;
    }
    
    .rc-timeline-item {
        padding-left: 50px;
    }
    
    .rc-timeline-marker {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    
    .rc-tracking-card {
        padding: 16px;
    }
    
    .rc-form-section h4 {
        font-size: 1.1rem;
    }
    
    .rc-form-section h4 i {
        width: 38px;
        height: 38px;
    }
    
    .rc-config-header h3 {
        font-size: 1.25rem;
    }
    
    .rc-config-header h3 i {
        width: 46px;
        height: 46px;
    }
    
    .rc-empty {
        padding: 50px 25px;
    }
    
    .rc-empty i {
        font-size: 48px;
    }
    
    .loading-spinner {
        padding: 50px 25px;
    }
    
    .rc-alert {
        flex-direction: column;
        text-align: center;
    }
    
    .rc-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

/* ========== ANIMACIONES R&C - ULTRA PREMIUM ========== */
@keyframes rcCardSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

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

@keyframes rcScaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rcBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rcPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes rcShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Aplicar animaciones a elementos que aparecen */
.rc-request-card {
    animation: rcCardSlideIn 0.5s var(--rc-transition-smooth) forwards;
}

.rc-kpi-card {
    animation: rcFadeInUp 0.4s var(--rc-transition-smooth) forwards;
}

.rc-timeline-item {
    animation: rcSlideInRight 0.4s var(--rc-transition-smooth) forwards;
}

.rc-tracking-card {
    animation: rcCardSlideIn 0.3s var(--rc-transition-smooth) forwards;
}

.rc-form-section {
    animation: rcFadeInUp 0.4s var(--rc-transition-smooth) forwards;
}

/* Staggered animations */
.rc-request-card:nth-child(1) { animation-delay: 0.05s; }
.rc-request-card:nth-child(2) { animation-delay: 0.1s; }
.rc-request-card:nth-child(3) { animation-delay: 0.15s; }
.rc-request-card:nth-child(4) { animation-delay: 0.2s; }
.rc-request-card:nth-child(5) { animation-delay: 0.25s; }

.rc-kpi-card:nth-child(1) { animation-delay: 0s; }
.rc-kpi-card:nth-child(2) { animation-delay: 0.05s; }
.rc-kpi-card:nth-child(3) { animation-delay: 0.1s; }
.rc-kpi-card:nth-child(4) { animation-delay: 0.15s; }
.rc-kpi-card:nth-child(5) { animation-delay: 0.2s; }
.rc-kpi-card:nth-child(6) { animation-delay: 0.25s; }

/* ========== PRINT STYLES ========== */
@media print {
    #ref-counterref header {
        background: #1F6BA7 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .rc-main-tabs,
    .rc-filters,
    .rc-form-actions,
    .rc-btn,
    .rc-modal-close {
        display: none !important;
    }
    
    .rc-request-card,
    .rc-kpi-card,
    .rc-form-section {
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
    }
}

/* ================================================================ */
/* MODAL DE PERMISOS - ESTILOS ESPECIALES                          */
/* ================================================================ */
#modal-configurar-permisos .modal-content {
    padding: 0 !important;
    max-width: 1100px;
    width: 95%;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}

#modal-configurar-permisos .modal-header {
    margin: 0 !important;
    padding: 20px 28px !important;
    border-bottom: none !important;
    background: linear-gradient(135deg, #1F6BA7 0%, #2482B8 50%, #5bbad5 100%) !important;
    border-radius: 0 !important;
    flex-shrink: 0;
}

#modal-configurar-permisos .modal-title {
    color: white !important;
    font-size: 1.3rem !important;
}

#modal-configurar-permisos .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: #f8fafc;
}

#modal-configurar-permisos .modal-footer {
    flex-shrink: 0;
    padding: 18px 28px !important;
    background: white !important;
    border-top: 2px solid #e2e8f0 !important;
    margin: 0 !important;
}

/* Card de m�dulo de permisos */
.modulo-permisos-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.modulo-permisos-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}

/* Labels de permisos */
.permiso-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
}

.permiso-label:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.permiso-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* MODAL DE USUARIO - ESTILOS ESPECIALES */
#modal-usuario-sistema .modal-content {
    padding: 0 !important;
    max-width: 850px;
    width: 95%;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}

#modal-usuario-sistema .modal-header {
    margin: 0 !important;
    padding: 20px 28px !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    flex-shrink: 0;
}

#modal-usuario-sistema .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #f8fafc;
}

#modal-usuario-sistema .modal-footer {
    flex-shrink: 0;
    margin: 0 !important;
}

/* ============================================ */
/* HEADER TOOLS - Chat, Correo, Fullscreen, Config */
/* ============================================ */
.header-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
}

.header-tool-item {
    position: relative;
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.2s ease;
    background: #f1f5f9;
}

.header-tool-item:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.header-tool-item i {
    font-size: 1.05rem;
    color: #475569;
    transition: color 0.2s;
}

.header-tool-item:hover i {
    color: #1F6BA7;
}

.tool-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid white;
}

/* ============================================ */
/* TOOL PANELS (Chat, Correo, Config) */
/* ============================================ */
.tool-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    height: 100vh;
    background: white;
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
}

.tool-panel-config {
    width: 480px;
}

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

.tool-panel-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    flex-shrink: 0;
}

.tool-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
}

.tool-panel-actions {
    display: flex;
    gap: 8px;
}

.tool-panel-actions button {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.tool-panel-actions button:hover {
    background: rgba(255,255,255,0.35);
}

.tool-panel-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ============================================ */
/* CHAT STYLES */
/* ============================================ */
.chat-contactos {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-search {
    padding: 12px 16px;
    position: relative;
    border-bottom: 1px solid #e2e8f0;
}

.chat-search input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    background: #f8fafc;
}

.chat-search input:focus {
    border-color: #1F6BA7;
    background: white;
}

.chat-search i {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.85rem;
}

.chat-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 16px;
}

.chat-tab {
    background: none;
    border: none;
    padding: 10px 16px;
    font-size: 0.85rem;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.chat-tab.active {
    color: #1F6BA7;
    border-bottom-color: #1F6BA7;
    font-weight: 600;
}

.chat-lista {
    flex: 1;
    overflow-y: auto;
}

.chat-contacto-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f1f5f9;
}

.chat-contacto-item:hover {
    background: #f8fafc;
}

.chat-contacto-item.no-leido {
    background: #eff6ff;
}

.chat-contacto-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    position: relative;
}

.chat-contacto-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.chat-contacto-avatar-wrap .online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid white;
}

.chat-contacto-avatar-wrap .offline-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #94a3b8;
    border: 2px solid white;
}

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

.chat-contacto-nombre {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    display: block;
}

.chat-contacto-ultimo {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.chat-contacto-meta {
    text-align: right;
    flex-shrink: 0;
}

.chat-contacto-hora {
    font-size: 0.7rem;
    color: #94a3b8;
    display: block;
}

.chat-contacto-badge {
    background: #1F6BA7;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

/* Conversaci�n */
.chat-conversacion {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-conv-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #eff6ff;
}

.chat-back {
    background: none;
    border: none;
    color: #1F6BA7;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
}

.chat-conv-header img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-conv-info {
    flex: 1;
}

.chat-conv-info span {
    display: block;
}

.chat-conv-info span:first-child {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
}

.chat-estado-online {
    font-size: 0.75rem;
    color: #22c55e;
}

.chat-conv-actions {
    display: flex;
    gap: 8px;
}

.chat-conv-actions button {
    background: #f1f5f9;
    border: none;
    color: #475569;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-conv-actions button:hover {
    background: #1F6BA7;
    color: white;
}

.chat-mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8fafc;
}

.chat-msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.4;
    position: relative;
}

.chat-msg.recibido {
    align-self: flex-start;
    background: white;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
}

.chat-msg.enviado {
    align-self: flex-end;
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-msg-hora {
    font-size: 0.65rem;
    opacity: 0.7;
    margin-top: 4px;
    display: block;
    text-align: right;
}

.chat-fecha-separador {
    text-align: center;
    font-size: 0.75rem;
    color: #94a3b8;
    padding: 8px 0;
}

.chat-fecha-separador span {
    background: #e2e8f0;
    padding: 4px 12px;
    border-radius: 10px;
}

.chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    background: white;
}

.chat-input-area input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 0.9rem;
    outline: none;
    background: #f8fafc;
}

.chat-input-area input:focus {
    border-color: #1F6BA7;
}

.chat-input-area button {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px;
    transition: color 0.2s;
}

.chat-input-area button:hover {
    color: #1F6BA7;
}

.chat-send-btn {
    background: #1F6BA7 !important;
    color: white !important;
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-send-btn:hover {
    background: #082A5D !important;
}

/* ============================================ */
/* CORREO STYLES */
/* ============================================ */
.correo-toolbar {
    padding: 12px 16px;
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #e2e8f0;
    align-items: center;
}

.correo-btn-nuevo {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s;
    white-space: nowrap;
}

.correo-btn-nuevo:hover {
    transform: translateY(-1px);
}

.correo-search {
    flex: 1;
    position: relative;
}

.correo-search input {
    width: 100%;
    padding: 8px 14px 8px 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    outline: none;
    background: #f8fafc;
}

.correo-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.8rem;
}

.correo-carpetas {
    display: flex;
    gap: 2px;
    padding: 8px 16px;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
}

.correo-carpeta {
    background: none;
    border: none;
    padding: 6px 12px;
    font-size: 0.8rem;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s;
}

.correo-carpeta:hover {
    background: #f1f5f9;
}

.correo-carpeta.active {
    background: #0891b2;
    color: white;
}

.correo-count {
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
}

.correo-carpeta.active .correo-count {
    background: rgba(255,255,255,0.3);
}

.correo-lista {
    flex: 1;
    overflow-y: auto;
}

.correo-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s;
    align-items: flex-start;
}

.correo-item:hover {
    background: #f8fafc;
}

.correo-item.no-leido {
    background: #f0f9ff;
    border-left: 3px solid #0891b2;
}

.correo-item.no-leido .correo-remitente {
    font-weight: 700;
}

.correo-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.correo-contenido {
    flex: 1;
    min-width: 0;
}

.correo-remitente {
    font-size: 0.88rem;
    color: #1e293b;
    font-weight: 500;
    display: block;
}

.correo-asunto {
    font-size: 0.85rem;
    color: #334155;
    font-weight: 600;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.correo-preview {
    font-size: 0.8rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.correo-hora {
    font-size: 0.7rem;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

.correo-detalle {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.correo-detalle-header {
    display: flex;
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
}

.correo-detalle-header button {
    background: none;
    border: none;
    color: #0891b2;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.correo-detalle-actions {
    display: flex;
    gap: 6px;
}

.correo-detalle-actions button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
}

.correo-detalle-actions button:hover {
    background: #0891b2;
    color: white;
}

#correo-detalle-contenido {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.correo-detalle-asunto {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
}

.correo-detalle-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.correo-detalle-info img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.correo-detalle-body {
    font-size: 0.92rem;
    color: #334155;
    line-height: 1.7;
}

/* Componer correo */
.correo-componer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 2px solid #0891b2;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    max-height: 70%;
    z-index: 10;
}

.correo-componer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #0891b2;
    color: white;
    font-weight: 600;
}

.correo-componer-header button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.1rem;
}

.correo-componer-body {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.correo-campo {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 6px;
}

.correo-campo label {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
    min-width: 50px;
}

.correo-campo input {
    flex: 1;
    border: none;
    padding: 6px 0;
    font-size: 0.88rem;
    outline: none;
}

.correo-editor {
    flex: 1;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    line-height: 1.6;
    overflow-y: auto;
}

.correo-editor:focus {
    border-color: #0891b2;
}

.correo-editor:empty::before {
    content: attr(placeholder);
    color: #94a3b8;
}

.correo-componer-footer {
    display: flex;
    gap: 8px;
    padding-top: 8px;
}

.correo-btn-enviar {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.correo-componer-footer button:not(.correo-btn-enviar) {
    background: #f1f5f9;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================ */
/* CONFIG STYLES */
/* ============================================ */
.config-tabs {
    display: flex;
    padding: 0 16px;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
}

.config-tab {
    background: none;
    border: none;
    padding: 12px 14px;
    font-size: 0.82rem;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.config-tab.active {
    color: #374151;
    border-bottom-color: #374151;
    font-weight: 600;
}

.config-section {
    padding: 20px;
}

.config-section h4 {
    color: #1e293b;
    font-size: 1rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.config-group {
    margin-bottom: 20px;
}

.config-group > label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    display: block;
    margin-bottom: 10px;
}

.config-temas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tema-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.tema-btn.active {
    border-color: #1e293b;
    transform: scale(1.1);
}

.tema-btn:hover {
    transform: scale(1.1);
}

.config-slider {
    display: flex;
    align-items: center;
    gap: 10px;
}

.config-slider input[type="range"] {
    flex: 1;
    accent-color: #374151;
}

.config-slider span:last-child {
    font-size: 0.8rem;
    color: #64748b;
    min-width: 32px;
}

.config-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.config-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 4px;
}

.config-toggle-item span {
    font-size: 0.88rem;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbd5e1;
    border-radius: 12px;
    transition: 0.3s;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background: #22c55e;
}

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

.config-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    background: white;
}

.config-perfil-avatar {
    text-align: center;
    margin-bottom: 20px;
}

.config-perfil-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 3px solid #e2e8f0;
}

.config-perfil-avatar button {
    background: #f1f5f9;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.config-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.config-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.config-campo label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.config-campo input,
.config-campo select {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
}

.config-campo input:focus,
.config-campo select:focus {
    border-color: #1F6BA7;
}

.config-btn-guardar {
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    transition: transform 0.2s;
}

.config-btn-guardar:hover {
    transform: translateY(-1px);
}

.config-sesiones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sesion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 8px;
}

.sesion-item i {
    font-size: 1.3rem;
    color: #475569;
}

.sesion-item div {
    flex: 1;
}

.sesion-item strong {
    display: block;
    font-size: 0.88rem;
    color: #1e293b;
}

.sesion-item small {
    color: #94a3b8;
    font-size: 0.75rem;
}

.sesion-actual-badge {
    background: #22c55e;
    color: white;
    font-size: 0.7rem;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.btn-cerrar-sesion {
    background: #fee2e2 !important;
    border: none !important;
    color: #ef4444 !important;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overlay para paneles */
.tool-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 10000;
    animation: fadeIn 0.2s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive */
@media (max-width: 600px) {
    .tool-panel {
        width: 100%;
    }
    .header-tools {
        gap: 3px;
    }
    .header-tool-item {
        width: 32px;
        height: 32px;
    }
}

/* ============================================ */
/* PMO - OFICINA DE GESTI�N DE PROYECTOS       */
/* ============================================ */

/* Tabs PMO */
.pmo-tabs {
    display: flex;
    gap: 4px;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    flex-wrap: nowrap;
}
.pmo-tab {
    padding: 10px 18px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pmo-tab:hover { background: #e2e8f0; color: #1e293b; }
.pmo-tab.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}
.pmo-tab-content { display: none; }
.pmo-tab-content.active { display: block; }

/* KPI Grid */
.pmo-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.pmo-kpi-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}
.pmo-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.pmo-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}
.pmo-kpi-info {
    display: flex;
    flex-direction: column;
}
.pmo-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}
.pmo-kpi-label {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* Dashboard Grid */
.pmo-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.pmo-card-chart, .pmo-card-hitos {
    padding: 20px;
}
.pmo-card-chart h3, .pmo-card-hitos h3 {
    font-size: 15px;
    color: #1e293b;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hitos List */
.pmo-hitos-list { max-height: 300px; overflow-y: auto; }
.pmo-hito-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
    margin-bottom: 8px;
    background: #f8fafc;
    transition: background 0.2s;
}
.pmo-hito-item:hover { background: #eff6ff; }
.pmo-hito-item.critico { border-left-color: #ef4444; }
.pmo-hito-item.importante { border-left-color: #f59e0b; }
.pmo-hito-date {
    font-size: 11px;
    color: #64748b;
    min-width: 75px;
}
.pmo-hito-name { font-size: 13px; font-weight: 500; color: #1e293b; flex:1; }
.pmo-hito-project { font-size: 11px; color: #94a3b8; }
.pmo-hito-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.pmo-hito-badge.vencido { background: #fef2f2; color: #dc2626; }
.pmo-hito-badge.proximo { background: #fffbeb; color: #d97706; }

/* Proyecto Card (Lista) */
.pmo-proyecto-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 18px 20px;
    margin-bottom: 12px;
    transition: all 0.2s;
    cursor: pointer;
}
.pmo-proyecto-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(59,130,246,0.1);
}
.pmo-proyecto-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.pmo-proyecto-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pmo-proyecto-color-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pmo-proyecto-name { font-size: 15px; font-weight: 600; color: #1e293b; }
.pmo-proyecto-code { font-size: 11px; color: #94a3b8; margin-left: 8px; }
.pmo-proyecto-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}
.pmo-proyecto-meta-item {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pmo-proyecto-meta-item i { font-size: 11px; }

/* Progress Bar */
.pmo-progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pmo-progress-bar {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.pmo-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
    background: linear-gradient(90deg, #3b82f6, #22c55e);
}
.pmo-progress-fill.retrasado {
    background: linear-gradient(90deg, #ef4444, #f59e0b);
}
.pmo-progress-plan {
    position: absolute;
    top: 0;
    height: 100%;
    width: 2px;
    background: #1e293b;
    opacity: 0.5;
}
.pmo-progress-values {
    display: flex;
    gap: 8px;
    font-size: 12px;
    min-width: 120px;
    justify-content: flex-end;
}
.pmo-progress-real { font-weight: 700; color: #1e293b; }
.pmo-progress-expected { color: #94a3b8; }

/* Status Badges */
.pmo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.pmo-badge-planificacion { background: #eff6ff; color: #2563eb; }
.pmo-badge-en_progreso { background: #ecfdf5; color: #059669; }
.pmo-badge-pausado { background: #f1f5f9; color: #64748b; }
.pmo-badge-completado, .pmo-badge-completada { background: #f0fdf4; color: #16a34a; }
.pmo-badge-cancelado, .pmo-badge-cancelada { background: #fef2f2; color: #dc2626; }
.pmo-badge-retrasado, .pmo-badge-retrasada { background: #fef2f2; color: #dc2626; }
.pmo-badge-pendiente { background: #fffbeb; color: #d97706; }
.pmo-badge-bloqueada { background: #fef2f2; color: #991b1b; }
.pmo-badge-critica { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }
.pmo-badge-alta { background: #fff7ed; color: #ea580c; }
.pmo-badge-media { background: #eff6ff; color: #2563eb; }
.pmo-badge-baja { background: #f0fdf4; color: #16a34a; }

/* Penalty Alert */
.pmo-penalidad-alert {
    background: linear-gradient(135deg, #fef3c7, #fef2f2);
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #92400e;
    margin-top: 12px;
}
.pmo-penalidad-alert i { color: #f59e0b; font-size: 16px; }

/* Actions */
.pmo-proyecto-actions {
    display: flex;
    gap: 6px;
}
.pmo-btn-action {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s;
    background: #f1f5f9;
    color: #64748b;
}
.pmo-btn-action:hover { background: #e2e8f0; color: #1e293b; }
.pmo-btn-action.danger:hover { background: #fef2f2; color: #dc2626; }

/* ============================================ */
/* GANTT CHART — PROFESSIONAL REDESIGN          */
/* ============================================ */

/* Card container */
.pmo-gantt-card {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

/* Toolbar */
.pmo-gantt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #fff;
    flex-wrap: wrap;
    gap: 12px;
}
.pmo-gantt-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pmo-gantt-toolbar-left h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}
.pmo-gantt-toolbar-icon {
    font-size: 18px;
    color: #60a5fa;
}
.pmo-gantt-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Select de proyecto */
.pmo-gantt-select {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    min-width: 300px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}
.pmo-gantt-select:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.4);
}
.pmo-gantt-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96,165,250,0.3);
}
.pmo-gantt-select option,
.pmo-gantt-select optgroup {
    background: #1e293b;
    color: #f1f5f9;
}

/* Zoom controls */
.pmo-gantt-zoom {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.08);
    padding: 4px 8px;
    border-radius: 8px;
}
.pmo-gantt-zoom-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #f1f5f9;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s;
}
.pmo-gantt-zoom-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
}
.pmo-gantt-zoom-label {
    font-size: 12px;
    color: #94a3b8;
    min-width: 65px;
    text-align: center;
}

/* Legend bar */
.pmo-gantt-legend-bar {
    display: flex;
    gap: 16px;
    padding: 10px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}
.pmo-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}
.pmo-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pmo-legend-diamond {
    background: #1F6BA7 !important;
    transform: rotate(45deg);
    border-radius: 2px !important;
    width: 8px !important;
    height: 8px !important;
}

/* Main container */
.pmo-gantt-container {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 700px;
    background: #fff;
    position: relative;
}

/* Empty state */
.pmo-gantt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 12px;
    color: #94a3b8;
}
.pmo-gantt-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.pmo-gantt-empty-icon i {
    font-size: 32px;
    color: #3b82f6;
}
.pmo-gantt-empty h3 {
    font-size: 18px;
    color: #334155;
    margin: 0;
    font-weight: 600;
}
.pmo-gantt-empty p {
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
}
.pmo-gantt-empty-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    padding: 8px 16px;
    border-radius: 20px;
}
.pmo-gantt-empty-hint i { color: #f59e0b; }

/* Loading state */
.pmo-gantt-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 16px;
    color: #64748b;
}
.pmo-gantt-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: pmo-spin 0.8s linear infinite;
}
@keyframes pmo-spin { to { transform: rotate(360deg); } }

/* ============================================ */
/* PROJECT HEADER (KPIs + Progress)             */
/* ============================================ */
.pmo-gantt-project-header {
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border-bottom: 1px solid #e2e8f0;
}
.pmo-gantt-project-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
}
.pmo-gantt-project-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.pmo-gantt-project-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 4px;
}
.pmo-gantt-project-title h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
.pmo-gantt-project-meta {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.pmo-gantt-badge-estado {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pmo-gantt-badge-estado.en_progreso { background: #dbeafe; color: #1d4ed8; }
.pmo-gantt-badge-estado.planificacion { background: #e0e7ff; color: #4338ca; }
.pmo-gantt-badge-estado.completado { background: #dcfce7; color: #16a34a; }
.pmo-gantt-badge-estado.cancelado { background: #fee2e2; color: #dc2626; }
.pmo-gantt-badge-estado.pausado { background: #f1f5f9; color: #64748b; }

/* Progress ring */
.pmo-gantt-project-progress {
    flex-shrink: 0;
}
.pmo-gantt-progress-ring {
    width: 60px;
    height: 60px;
    position: relative;
}
.pmo-gantt-progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.pmo-gantt-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

/* KPIs row */
.pmo-gantt-kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.pmo-gantt-kpi {
    text-align: center;
    padding: 10px 8px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}
.pmo-gantt-kpi:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(59,130,246,0.1);
}
.pmo-gantt-kpi-value {
    font-size: 22px;
    font-weight: 800;
    color: #334155;
    line-height: 1;
}
.pmo-gantt-kpi-label {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pmo-gantt-kpi.completada .pmo-gantt-kpi-value { color: #16a34a; }
.pmo-gantt-kpi.en-progreso .pmo-gantt-kpi-value { color: #2563eb; }
.pmo-gantt-kpi.retrasada .pmo-gantt-kpi-value { color: #dc2626; }
.pmo-gantt-kpi.pendiente .pmo-gantt-kpi-value { color: #d97706; }
.pmo-gantt-kpi.dias .pmo-gantt-kpi-value { color: #7c3aed; }

@media (max-width: 768px) {
    .pmo-gantt-kpis { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================ */
/* GANTT TABLE V2                               */
/* ============================================ */
.pmo-gantt-chart-wrapper {
    position: relative;
}
.pmo-gantt-chart-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 550px;
}
.pmo-gantt-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px;
    table-layout: fixed;
}

/* Dual header: months + weeks/days */
.pmo-gantt-month-row th {
    background: #f1f5f9;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    padding: 6px 4px;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0.3px;
}
.pmo-gantt-month-header {
    background: #f1f5f9 !important;
}

.pmo-gantt-table thead tr:last-child th {
    background: #f8fafc;
    padding: 6px 4px;
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: center;
}
.pmo-gantt-table th.pmo-gantt-info-col {
    text-align: left;
    padding-left: 16px;
    min-width: 280px;
    width: 280px;
    position: sticky;
    left: 0;
    z-index: 4;
    background: #f8fafc !important;
    border-right: 2px solid #e2e8f0;
}
.pmo-gantt-info-col-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
.pmo-gantt-today-col {
    background: #fef3c7 !important;
    color: #92400e !important;
}

/* Row styles */
.pmo-gantt-row {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.pmo-gantt-row:hover { background: #f8fafc; }

/* Fase row */
.pmo-gantt-row.fase-row {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.pmo-gantt-row.fase-row:hover { background: #eff6ff; }
.pmo-gantt-fase-info {
    padding: 6px 8px !important;
    position: sticky;
    left: 0;
    z-index: 3;
    background: inherit;
    min-width: 280px;
    border-right: 2px solid #e2e8f0;
}
.pmo-gantt-fase-row-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s;
}
.pmo-gantt-fase-row-inner:hover { background: rgba(59,130,246,0.08); }
.pmo-gantt-fase-toggle {
    font-size: 9px;
    color: #64748b;
    width: 14px;
    text-align: center;
    transition: transform 0.2s;
}
.pmo-gantt-fase-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.pmo-gantt-fase-name {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pmo-gantt-fase-meta {
    font-size: 10px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.pmo-gantt-fase-progress-mini {
    width: 50px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}
.pmo-gantt-fase-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}
.pmo-gantt-fase-pct {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    min-width: 30px;
    text-align: right;
}

/* Fase bar in timeline */
.pmo-gantt-fase-bar {
    height: 8px;
    margin: 11px 0;
    border-radius: 0;
    min-width: 100%;
}

/* Task row */
.pmo-gantt-task-info {
    padding: 4px 8px 4px 20px !important;
    position: sticky;
    left: 0;
    z-index: 3;
    background: inherit;
    min-width: 280px;
    border-right: 2px solid #e2e8f0;
}
.pmo-gantt-task-row-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
}
.pmo-gantt-task-name-text {
    font-size: 11px;
    color: #334155;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pmo-gantt-task-responsible {
    font-size: 9px;
    color: #94a3b8;
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pmo-gantt-prio {
    font-size: 9px;
    font-weight: 800;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pmo-gantt-prio.critica { background: #fef2f2; color: #dc2626; }
.pmo-gantt-prio.alta { background: #fffbeb; color: #d97706; }

/* Row estado coloring */
.pmo-gantt-row.retrasada-row { background: #fff5f5; }
.pmo-gantt-row.retrasada-row:hover { background: #fef2f2; }

/* Cell */
.pmo-gantt-cell {
    padding: 2px 0;
    position: relative;
    min-width: 38px;
    border-left: 1px solid #f8fafc;
}

/* V2 Bar */
.pmo-gantt-bar-v2 {
    position: absolute;
    top: 4px;
    bottom: 4px;
    min-height: 22px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 1;
    display: flex;
    align-items: center;
}
.pmo-gantt-bar-v2:hover {
    filter: brightness(1.05);
    transform: scaleY(1.15);
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.pmo-gantt-bar-fill-v2 {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    opacity: 0.55;
    transition: width 0.3s;
}
.pmo-gantt-bar-label {
    font-size: 9px;
    font-weight: 700;
    color: #334155;
    position: relative;
    z-index: 1;
    padding-left: 6px;
    white-space: nowrap;
    text-shadow: 0 0 3px rgba(255,255,255,0.8);
}

/* Delay badge */
.pmo-gantt-delay-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 8px;
    font-weight: 800;
    color: #fff;
    background: #ef4444;
    padding: 1px 4px;
    border-radius: 6px;
    z-index: 3;
    line-height: 1.2;
}

/* Estado-specific bars */
.pmo-gantt-bar-v2.completada { border-left-color: #22c55e; }
.pmo-gantt-bar-v2.en_progreso { border-left-color: #3b82f6; }
.pmo-gantt-bar-v2.pendiente { border-left-color: #f59e0b; }
.pmo-gantt-bar-v2.retrasada { border-left-color: #ef4444; background: rgba(239,68,68,0.12) !important; }
.pmo-gantt-bar-v2.bloqueada { border-left-color: #991b1b; }

/* Milestone row */
.pmo-gantt-row.milestone-row {
    background: #fefce8;
    border-bottom: 1px solid #fef08a;
}
.pmo-gantt-row.milestone-row:hover { background: #fef9c3; }
.pmo-gantt-milestone-info {
    padding: 4px 8px 4px 12px !important;
    position: sticky;
    left: 0;
    z-index: 3;
    background: inherit;
    min-width: 280px;
    border-right: 2px solid #e2e8f0;
}
.pmo-gantt-milestone-row-inner {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pmo-gantt-milestone-name {
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    flex: 1;
}
.pmo-gantt-milestone-date {
    font-size: 10px;
    color: #a16207;
}

/* V2 Milestone marker */
.pmo-gantt-milestone-v2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.pmo-gantt-milestone-diamond {
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #1F6BA7, #3b82f6);
    transform: rotate(45deg);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(31,107,167,0.4);
    margin-left: -7px;
}
.pmo-gantt-milestone-v2.alcanzado .pmo-gantt-milestone-diamond {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow: 0 2px 6px rgba(34,197,94,0.4);
}
.pmo-gantt-milestone-v2.retrasado .pmo-gantt-milestone-diamond {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    box-shadow: 0 2px 6px rgba(239,68,68,0.4);
}

/* Today line (kept from original) */
.pmo-gantt-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ef4444;
    z-index: 5;
    opacity: 0.7;
}
.pmo-gantt-today::before {
    content: 'Hoy';
    position: absolute;
    top: -18px;
    left: -10px;
    font-size: 9px;
    color: #ef4444;
    font-weight: 700;
}

/* ============================================ */
/* GANTT MILESTONE TOOLTIP                      */
/* ============================================ */
.pmo-gantt-tooltip {
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 240px;
    max-width: 340px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.12);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.5;
    animation: pmoTooltipFadeIn 0.15s ease-out;
}
@keyframes pmoTooltipFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pmo-gantt-tooltip-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #334155;
}
.pmo-gantt-tooltip-header i {
    font-size: 12px;
}
.pmo-gantt-tooltip-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    word-break: break-word;
}
.pmo-gantt-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    gap: 10px;
}
.pmo-gantt-tooltip-label {
    color: #94a3b8;
    font-size: 11px;
    white-space: nowrap;
}
.pmo-gantt-tooltip-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}
.pmo-gantt-tooltip-badge.alcanzado {
    background: rgba(34,197,94,0.2);
    color: #4ade80;
}
.pmo-gantt-tooltip-badge.retrasado {
    background: rgba(239,68,68,0.2);
    color: #f87171;
}
.pmo-gantt-tooltip-badge.pendiente {
    background: rgba(59,130,246,0.2);
    color: #60a5fa;
}

/* Milestone diamond hover effect */
.pmo-gantt-milestone-v2:hover .pmo-gantt-milestone-diamond {
    transform: rotate(45deg) scale(1.3);
    transition: transform 0.2s ease;
    box-shadow: 0 3px 12px rgba(31,107,167,0.5);
}
.pmo-gantt-milestone-v2 .pmo-gantt-milestone-diamond {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

/* Info column text — full text on hover via tooltip */
.pmo-gantt-fase-name,
.pmo-gantt-task-name-text,
.pmo-gantt-milestone-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pmo-gantt-task-row-inner,
.pmo-gantt-fase-row-inner,
.pmo-gantt-milestone-row-inner {
    overflow: hidden;
}

/* ============================================ */
/* CRON�METROS                                  */
/* ============================================ */
.pmo-cronometros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
.pmo-cronometro-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    transition: all 0.2s;
}
.pmo-cronometro-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.pmo-cronometro-card.vencido {
    border-color: #fca5a5;
    background: linear-gradient(135deg, #fff, #fef2f2);
}
.pmo-cronometro-card.alerta {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fff, #fffbeb);
}
.pmo-cronometro-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.pmo-cronometro-nombre {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}
.pmo-cronometro-proyecto {
    font-size: 11px;
    color: #94a3b8;
}
.pmo-cronometro-display {
    text-align: center;
    padding: 16px 0;
}
.pmo-cronometro-timer {
    font-size: 36px;
    font-weight: 800;
    font-family: 'Roboto Mono', monospace, 'Roboto', sans-serif;
    letter-spacing: 2px;
}
.pmo-cronometro-timer.verde { color: #16a34a; }
.pmo-cronometro-timer.amarillo { color: #d97706; }
.pmo-cronometro-timer.rojo { color: #dc2626; }
.pmo-cronometro-label {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}
.pmo-cronometro-progress {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 12px;
}
.pmo-cronometro-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s;
}
.pmo-cronometro-fecha {
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    margin-top: 8px;
}

/* ============================================ */
/* MODALES PMO                                  */
/* ============================================ */
.pmo-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pmo-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: pmoModalIn 0.25s ease;
}
.pmo-modal-sm { max-width: 480px; }
.pmo-modal-lg { max-width: 780px; }
.pmo-modal-xl { max-width: 960px; }

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

.pmo-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #e2e8f0;
}
.pmo-modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pmo-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s;
}
.pmo-modal-close:hover { background: #fef2f2; color: #dc2626; }
.pmo-modal-body {
    padding: 20px 24px;
    max-height: 65vh;
    overflow-y: auto;
}
.pmo-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
}

/* Form Grid */
.pmo-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.pmo-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pmo-form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
.pmo-form-full { grid-column: 1 / -1; }

/* Plan Mejora Card */
.pmo-plan-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    margin-bottom: 12px;
    border-left: 4px solid #1F6BA7;
}
.pmo-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.pmo-plan-titulo {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}
.pmo-plan-codigo {
    font-size: 11px;
    color: #94a3b8;
}
.pmo-plan-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.pmo-plan-meta-item {
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}
.pmo-plan-meta-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}
.pmo-plan-meta-label {
    font-size: 11px;
    color: #94a3b8;
}

/* PDCA Steps */
.pmo-pdca-steps {
    display: flex;
    gap: 4px;
    margin-top: 12px;
}
.pmo-pdca-step {
    flex: 1;
    padding: 6px;
    border-radius: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #94a3b8;
}
.pmo-pdca-step.active {
    color: #fff;
}
.pmo-pdca-step.planificar.active { background: #3b82f6; }
.pmo-pdca-step.hacer.active { background: #22c55e; }
.pmo-pdca-step.verificar.active { background: #f59e0b; }
.pmo-pdca-step.actuar.active { background: #1F6BA7; }
.pmo-pdca-step.completado.active { background: #16a34a; }

/* Detalle Proyecto */
.pmo-detalle-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.pmo-detalle-kpi {
    background: #f8fafc;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.pmo-detalle-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}
.pmo-detalle-kpi-label {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}
.pmo-detalle-section {
    margin-bottom: 20px;
}
.pmo-detalle-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

/* Actividad en detalle */
.pmo-act-row {
    display: grid;
    grid-template-columns: 1fr 120px 100px 80px 120px 60px;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.pmo-act-row:hover { background: #f8fafc; }
.pmo-act-row-header {
    font-weight: 600;
    color: #64748b;
    font-size: 11px;
    background: #f8fafc;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid #e2e8f0;
}
.pmo-act-name { font-weight: 500; color: #1e293b; }
.pmo-act-responsable { font-size: 12px; color: #64748b; }
.pmo-mini-progress {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.pmo-mini-progress-fill {
    height: 100%;
    border-radius: 3px;
}

/* Tarjeta de tarea asignada */
.pmo-tarea-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
}
.pmo-tarea-card:hover {
    border-color: #93c5fd;
    background: #fafbff;
}
.pmo-tarea-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.pmo-tarea-info { flex: 1; }
.pmo-tarea-titulo { font-size: 14px; font-weight: 600; color: #1e293b; }
.pmo-tarea-proyecto-label { font-size: 11px; color: #94a3b8; }
.pmo-tarea-actions { display: flex; gap: 6px; }

/* =====================================================
   PMO - TAREAS V2 — Gestión Profesional de Equipos
   ===================================================== */
.pmo-tareas-empty {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}
.pmo-tareas-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    color: #3b82f6;
}
.pmo-tareas-empty h4 { color: #475569; font-size: 16px; margin-bottom: 6px; }
.pmo-tareas-empty p { font-size: 13px; }

.pmo-tareas-grupo {
    margin-bottom: 20px;
}
.pmo-tareas-grupo-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 10px 10px 0 0;
    border: 1px solid #e2e8f0;
    border-bottom: 2px solid #3b82f6;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}
.pmo-tareas-grupo-header i { color: #3b82f6; }
.pmo-tareas-grupo-count {
    background: #3b82f6;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

.pmo-tarea-card-v2 {
    display: flex;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: none;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.pmo-tarea-card-v2:last-child { border-radius: 0 0 10px 10px; }
.pmo-tarea-card-v2:hover {
    background: #fafbff;
    border-color: #93c5fd;
    z-index: 1;
}
.pmo-tarea-card-v2.urgente {
    border-left: 3px solid #ef4444 !important;
}
.pmo-tarea-status-bar {
    width: 4px;
    flex-shrink: 0;
}
.pmo-tarea-card-body {
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
}
.pmo-tarea-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.pmo-tarea-card-info { flex: 1; min-width: 0; }
.pmo-tarea-titulo-v2 {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pmo-tarea-meta-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
}
.pmo-tarea-badge-estado {
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pmo-tarea-rol {
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pmo-tarea-vence {
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pmo-tarea-vence.urgente {
    color: #ef4444;
    font-weight: 700;
}
.pmo-tarea-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.pmo-btn-icon {
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}
.pmo-btn-icon:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #3b82f6;
}
.pmo-tarea-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.pmo-tarea-progress-bar-v2 {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.pmo-tarea-progress-fill-v2 {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.pmo-tarea-progress-pct {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    min-width: 32px;
    text-align: right;
}

/* =====================================================
   PMO - MODAL ASIGNAR EQUIPO
   ===================================================== */
.pmo-asignar-resultados {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-top: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.pmo-asignar-no-result {
    text-align: center;
    padding: 20px;
    color: #94a3b8;
    font-size: 13px;
}
.pmo-asignar-usuario-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f1f5f9;
}
.pmo-asignar-usuario-item:last-child { border-bottom: none; }
.pmo-asignar-usuario-item:hover { background: #eff6ff; }
.pmo-asignar-usuario-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.pmo-asignar-usuario-info { flex: 1; min-width: 0; }
.pmo-asignar-usuario-nombre { font-size: 13px; font-weight: 600; color: #1e293b; }
.pmo-asignar-usuario-detalle { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pmo-asignar-count-badge {
    background: #3b82f6;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 10px;
}

.pmo-asignar-equipo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}
.pmo-asignar-equipo-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px;
    color: #94a3b8;
    font-size: 13px;
}
.pmo-equipo-member-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s;
}
.pmo-equipo-member-card:hover {
    border-color: #93c5fd;
    background: #fff;
}
.pmo-equipo-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}
.pmo-equipo-member-info { flex: 1; min-width: 0; }
.pmo-equipo-member-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pmo-equipo-member-rol {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pmo-btn-icon-sm {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 0.15s;
    color: #94a3b8;
}
.pmo-btn-icon-sm.pmo-btn-danger:hover {
    background: #fef2f2;
    color: #ef4444;
}

/* =====================================================
   PMO - MODAL EDITAR TAREA PROFESIONAL
   ===================================================== */
.pmo-editar-tarea-tabs {
    display: flex;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 16px;
}
.pmo-editar-tab {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}
.pmo-editar-tab:hover {
    color: #3b82f6;
    background: rgba(59,130,246,0.04);
}
.pmo-editar-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: rgba(59,130,246,0.06);
}
.pmo-editar-panel {
    display: none;
}
.pmo-editar-panel.active {
    display: block;
    animation: pmoFadeIn 0.2s ease;
}
@keyframes pmoFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Avance Dashboard */
.pmo-avance-dashboard {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.pmo-avance-ring-container {
    flex-shrink: 0;
}
.pmo-avance-ring {
    position: relative;
    width: 120px;
    height: 120px;
}
.pmo-avance-ring svg { width: 100%; height: 100%; }
.pmo-avance-ring circle:last-child {
    transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease;
}
.pmo-avance-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
}
.pmo-avance-controls {
    flex: 1;
    min-width: 0;
}

/* Historial Timeline */
.pmo-historial-timeline {
    position: relative;
    padding-left: 24px;
}
.pmo-historial-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}
.pmo-historial-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    position: relative;
}
.pmo-historial-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: -20px;
    z-index: 1;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #e2e8f0;
}
.pmo-historial-content { flex: 1; }
.pmo-historial-desc {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pmo-historial-fecha {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

@media (max-width: 640px) {
    .pmo-avance-dashboard { flex-direction: column; align-items: center; }
    .pmo-asignar-equipo-grid { grid-template-columns: 1fr; }
    .pmo-editar-tarea-tabs { overflow-x: auto; }
}

/* =====================================================
   PMO - OBJETIVOS ESTRATÉGICOS (BSC Map)
   ===================================================== */
.pmo-estrategico-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.pmo-estrategico-summary {
    display: flex;
    gap: 24px;
    align-items: center;
}
.pmo-estr-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pmo-estr-kpi-val {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}
.pmo-estr-kpi-lbl {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
    font-weight: 500;
}
.pmo-bsc-map {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pmo-bsc-perspectiva {
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}
.pmo-bsc-perspectiva:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.pmo-bsc-perspectiva-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.pmo-bsc-perspectiva-label {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    flex: 1;
}
.pmo-bsc-count {
    font-size: 11px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.pmo-bsc-objetivos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.pmo-bsc-objetivo-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
}
.pmo-bsc-objetivo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #93c5fd;
}
.pmo-bsc-obj-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.pmo-bsc-obj-code {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pmo-bsc-obj-semaforo {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.pmo-bsc-obj-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    margin-bottom: 8px;
}
.pmo-bsc-obj-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #64748b;
}
.pmo-bsc-obj-meta span { display: flex; align-items: center; gap: 4px; }

/* =====================================================
   PMO - INDICADORES DE GESTIÓN
   ===================================================== */
.pmo-ind-header, .pmo-risk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.pmo-ind-summary, .pmo-risk-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pmo-ind-sem-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}
.pmo-ind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.pmo-ind-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
}
.pmo-ind-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.pmo-ind-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.pmo-ind-card-code {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pmo-semaforo-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.pmo-semaforo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.pmo-ind-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
    line-height: 1.3;
}
.pmo-ind-card-badges {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.pmo-ind-tipo-badge {
    font-size: 10px;
    font-weight: 700;
    color: #3b82f6;
    background: #eff6ff;
    padding: 2px 8px;
    border-radius: 4px;
}
.pmo-ind-freq-badge {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
}
.pmo-ind-gauge { margin-bottom: 8px; }
.pmo-ind-gauge-bar {
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
.pmo-ind-gauge-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.pmo-ind-gauge-vals {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
.pmo-ind-card-footer {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}
.pmo-ind-mini-card {
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #fafbfc;
}
.pmo-ind-mini-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}
.pmo-ind-mini-vals {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}
.pmo-ind-detail-semaforo {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
}
.pmo-ind-detail-progress { margin-bottom: 16px; }
.pmo-ind-detail-bar {
    height: 12px;
    background: #f1f5f9;
    border-radius: 6px;
    overflow: visible;
    position: relative;
}
.pmo-ind-detail-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
}
.pmo-ind-detail-marker {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 20px;
    border-radius: 2px;
}
.pmo-ind-marker-min { background: #ef4444; }
.pmo-ind-marker-acc { background: #f59e0b; }
.pmo-mediciones-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.pmo-medicion-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fafbfc;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
}
.pmo-medicion-fecha {
    font-size: 11px;
    color: #64748b;
    flex: 1;
}
.pmo-medicion-valor {
    font-size: 14px;
    font-weight: 700;
}

/* =====================================================
   PMO - GESTIÓN DE RIESGOS
   ===================================================== */
.pmo-risk-matrix {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    margin-bottom: 20px;
}
.pmo-risk-matrix-header {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 14px;
    text-align: center;
}
.pmo-risk-heat-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.pmo-risk-heat-table th {
    padding: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
}
.pmo-risk-heat-table td {
    padding: 10px;
    border: 1px solid #f1f5f9;
    min-width: 60px;
    height: 50px;
    vertical-align: middle;
    transition: all 0.2s;
}
.pmo-risk-heat-table td:hover {
    opacity: 0.85;
}
.pmo-risk-cell {
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pmo-risk-cell-empty {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e2e8f0;
    margin: 0 auto;
}
.pmo-risk-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}
.pmo-risk-card {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}
.pmo-risk-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.pmo-risk-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.pmo-risk-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
    margin-right: 8px;
}
.pmo-risk-nivel {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.pmo-risk-card-body {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.pmo-risk-card-body span { display: flex; align-items: center; gap: 4px; }
.pmo-risk-card-mitig {
    font-size: 12px;
    color: #475569;
    padding: 8px 10px;
    background: #f8fafc;
    border-radius: 6px;
    margin-bottom: 8px;
    line-height: 1.4;
}
.pmo-risk-card-mitig i { color: #3b82f6; margin-right: 4px; }
.pmo-risk-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

/* Responsive PMO */
@media (max-width: 768px) {
    .pmo-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .pmo-dashboard-grid { grid-template-columns: 1fr; }
    .pmo-form-grid { grid-template-columns: 1fr; }
    .pmo-cronometros-grid { grid-template-columns: 1fr; }
    .pmo-tabs { flex-wrap: wrap; }
    .pmo-gantt-table { min-width: 800px; }
    .pmo-act-row { grid-template-columns: 1fr; gap: 4px; }
    .pmo-modal { margin: 10px; }
}

/* ============================================================
   CONFIGURACI�N - PLATAFORMA DIN�MICA
   ============================================================ */
.config-nav-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 6px;
    background: #f1f5f9;
    border-radius: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.config-nav-tabs::-webkit-scrollbar { display: none; }

.config-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.config-tab i {
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.config-tab:hover {
    color: #1e293b;
    background: rgba(255, 255, 255, 0.5);
}

.config-tab.active {
    background: #ffffff;
    color: #1F6BA7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.config-tab.active i {
    transform: scale(1.1);
    color: #1F6BA7;
}

/* Paneles de Configuraci�n */
.config-panel {
    animation: fadeIn 0.3s ease-in-out;
}

.config-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    height: 100%;
}

.config-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafbff;
}

.config-card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 12px;
}

.config-card-body {
    padding: 24px;
}

/* Grid de Permisos en Configuraci�n de Usuario */
.permissions-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.permission-module-card {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.permission-module-header {
    padding: 12px 16px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #475569;
}

.permission-list {
    padding: 12px;
}

.permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    border-bottom: 1px solid #f1f5f9;
}

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

.permission-info {
    display: flex;
    flex-direction: column;
}

.permission-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: #1e293b;
}

.permission-desc {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Switch estilo iOS para permisos */
.ios-switch {
    width: 42px;
    height: 22px;
    background: #cbd5e1;
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.ios-switch::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ios-switch.active {
    background: #10b981;
}

.ios-switch.active::after {
    left: 22px;
}

/* --- Loaders y Widgets --- */
.loader-ripple { display: inline-block; position: relative; width: 80px; height: 80px; }
.loader-ripple div { position: absolute; border: 4px solid #0891b2; opacity: 1; border-radius: 50%; animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
.loader-ripple div:nth-child(2) { animation-delay: -0.5s; }
@keyframes loader-ripple { 0% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; } 4.9% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; } 5% { top: 36px; left: 36px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 72px; height: 72px; opacity: 0; } }
.card-item-simple { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: white; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 12px; transition: all 0.2s; }
.card-item-simple:hover { transform: translateX(4px); border-color: #1F6BA7; box-shadow: 0 4px 12px rgba(31, 107, 167, 0.08); }
.item-info .item-title { font-weight: 700; color: #1e293b; font-size: 0.95rem; }
.item-info .item-subtitle { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #cbd5e1; }
.status-dot.active { background: #10b981; box-shadow: 0 0 8px #10b98180; }

/* ═══════════ DIRECCIÓN MÉDICA — IA & HERRAMIENTAS ═══════════ */
.dm-ia-chip {
    padding: 7px 16px;
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 20px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(8px);
}
.dm-ia-chip:hover {
    background: rgba(139,92,246,.35);
    border-color: rgba(139,92,246,.5);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139,92,246,.3);
}
.dm-tool-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: white;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
}
.dm-tool-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1F6BA7, #6366f1);
    opacity: 0;
    transition: opacity .3s ease;
}
.dm-tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(31,107,167,.15);
    border-color: #1F6BA7;
}
.dm-tool-card:hover::before { opacity: 1; }
.dm-tool-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.dm-tool-info { flex: 1; }
.dm-tool-info h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.dm-tool-info p {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}
.dm-tool-badge {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
/* Transición de gráficos al filtrar */
.dm-chart-updating {
    animation: dmChartPulse .4s ease;
}
@keyframes dmChartPulse {
    0% { opacity: 1; transform: scale(1); }
    30% { opacity: .4; transform: scale(.98); }
    100% { opacity: 1; transform: scale(1); }
}
.dm-esp-kpi {
    background: white;
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all .3s ease;
}
.dm-esp-kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.dm-esp-kpi-val { font-size: 20px; font-weight: 800; color: #1F6BA7; }
.dm-esp-kpi-lbl { font-size: 11px; color: #64748b; margin-top: 2px; }
/* IA typing animation */
.dm-ia-typing span {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #a78bfa;
    animation: dmTyping 1.2s infinite;
    margin: 0 2px;
}
.dm-ia-typing span:nth-child(2) { animation-delay: .2s; }
.dm-ia-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes dmTyping {
    0%,60%,100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* ═══ REGLA DEFENSIVA: Texto claro en paneles oscuros ═══ */
#dm-ia-panel,
#dm-ia-panel *:not(input):not(.meditel-ia-input),
#dm-ia-response-content,
#dm-ia-response-content * {
    color: #fff !important;
}
#dm-ia-response-content strong { color: #c4b5fd !important; }
#dm-ia-response-content em { color: #e0e7ff !important; }
#dm-ia-response-content em[style*="color:#4ade80"] { color: #4ade80 !important; }
#dm-ia-response-content em[style*="color:#fbbf24"] { color: #fbbf24 !important; }
#dm-ia-response-content em[style*="color:#f87171"] { color: #f87171 !important; }
#dm-ia-response-content td { color: #e2e8f0 !important; }
#dm-ia-response-content td[style*="color:#4ade80"] { color: #4ade80 !important; }
#dm-ia-response-content td[style*="color:#fbbf24"] { color: #fbbf24 !important; }
#dm-ia-response-content td[style*="color:#f87171"] { color: #f87171 !important; }
#dm-ia-response-content table { border-collapse: collapse; }
#dm-ia-response-content table tr { border-bottom: 1px solid rgba(255,255,255,.12); }
#dm-ia-response-content table td { padding: 6px 8px 6px 0; vertical-align: top; }
#dm-ia-response-content table tr:first-child td { font-weight: 700; color: #fff !important; padding-bottom: 8px; }
#dm-ia-panel p { color: rgba(255,255,255,.75) !important; }
#dm-ia-panel h3 { color: #fff !important; }

#dm-ia-panel input[type="text"],
#dm-ia-prompt,
.meditel-ia-input {
    color: #0f172a !important;
    background: #ffffff !important;
    font-weight: 700 !important;
    caret-color: #2563eb !important;
}
#dm-ia-panel input[type="text"]::placeholder,
#dm-ia-prompt::placeholder,
.meditel-ia-input::placeholder { color: #64748b !important; opacity: 1 !important; }
/* Status badges dentro del panel IA */
#dm-ia-panel .dm-ia-chip { color: rgba(255,255,255,.85) !important; }
#dm-ia-panel .dm-ia-chip:hover { color: #fff !important; }

/* Regla genérica: cualquier contenedor con fondo oscuro fuerza texto claro */
[style*="#0f172a"],
[style*="#0f172a"] *:not(input):not(button):not(.btn):not(.dm-tool-card):not(.dm-tool-card *):not(.dm-tool-info *):not(.dm-tool-badge):not(.dm-esp-kpi):not(.dm-esp-kpi *) {
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════
   BLOQUE FINANCIERO DMF — ESTILOS COMPLETOS
   ══════════════════════════════════════════════════════════════════ */

/* Header financiero */
.dmf-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1F6BA7 100%);
    border-radius: 16px;
    padding: 26px 30px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(15, 23, 42, .3);
}
.dmf-header-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    box-shadow: 0 6px 20px rgba(99, 102, 241, .4);
    flex-shrink: 0;
}

/* Resumen consolidado */
.dmf-resumen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.dmf-resumen-card {
    background: white;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1.5px solid #e2e8f0;
    transition: all .3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.dmf-resumen-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.dmf-resumen-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}
.dmf-resumen-data { flex: 1; }
.dmf-resumen-value {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}
.dmf-resumen-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 2px;
}

/* Tabs de áreas */
.dmf-tabs {
    display: flex;
    gap: 6px;
    background: #f1f5f9;
    border-radius: 14px;
    padding: 5px;
    flex-wrap: wrap;
}
.dmf-tab {
    flex: 1;
    min-width: 140px;
    padding: 11px 18px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
.dmf-tab:hover { background: rgba(31, 107, 167, .08); color: #1F6BA7; }
.dmf-tab.active {
    background: white;
    color: #1F6BA7;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    font-weight: 700;
}

/* Paneles de cada área */
.dmf-panel { display: none; margin-top: 20px; }
.dmf-panel.active { display: block; animation: fadeInSection 0.4s ease-out; }

.dmf-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    border-left: 4px solid #1F6BA7;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.dmf-panel-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dmf-panel-header span {
    font-size: 12px;
    color: #64748b;
    display: block;
    margin-top: 2px;
}
.dmf-btn-edit {
    padding: 8px 18px;
    border: 1.5px solid #1F6BA7;
    border-radius: 10px;
    background: transparent;
    color: #1F6BA7;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.dmf-btn-edit:hover {
    background: #1F6BA7;
    color: white;
}

/* KPI Grid */
.dmf-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}
.dmf-kpi {
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1.5px solid #e2e8f0;
    text-align: center;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}
.dmf-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    border-color: #cbd5e1;
}
.dmf-kpi-val {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}
.dmf-kpi-lbl {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.dmf-kpi-meta {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 3px;
}
.dmf-kpi-trend {
    font-size: 11px;
    font-weight: 700;
    margin-top: 4px;
    color: #059669;
}

/* KPIs financieros — fondo verde claro */
.dmf-kpi-financiero {
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border-color: #bbf7d0;
}
.dmf-kpi-financiero .dmf-kpi-val { color: #065f46; }
.dmf-kpi-financiero .dmf-kpi-lbl { color: #047857; }

/* ═══ CHART CONTAINERS — ESTRICTAMENTE ACOTADOS ═══ */
.dmf-chart-container {
    background: white;
    border-radius: 14px;
    padding: 16px 18px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
    height: 310px;
    max-height: 310px;
    min-height: 0;
    overflow: hidden;
    position: relative;
    transition: box-shadow .2s ease;
}
.dmf-chart-container:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.dmf-chart-container canvas {
    flex: 1;
    min-height: 0;
    max-height: 100%;
}
}
.dmf-chart-title {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* DMF Chart Header con botones */
.dmf-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.dmf-chart-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.dmf-chart-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}
.dmf-chart-btn:hover {
    background: #1F6BA7;
    color: white;
    border-color: #1F6BA7;
    box-shadow: 0 2px 8px rgba(31,107,167,.25);
}
.dmf-chart-btn i {
    font-size: 11px;
}
.dmf-chart-period-wrap {
    position: relative;
}
.dmf-chart-period-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    border: 1px solid #e2e8f0;
    z-index: 100;
    padding: 6px;
    min-width: 160px;
    animation: dmfDropIn .2s ease;
}
.dmf-chart-period-dropdown.open {
    display: flex;
    flex-direction: column;
}
@keyframes dmfDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.dmf-chart-period-dropdown button {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #334155;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
}
.dmf-chart-period-dropdown button:hover {
    background: #f0f7ff;
    color: #1F6BA7;
}
.dmf-chart-period-dropdown button.active {
    background: linear-gradient(135deg, #1F6BA7, #2482B8);
    color: white;
    font-weight: 700;
}

/* Modal header DMF */
.dmf-modal-header {
    padding: 20px 24px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px 20px 0 0;
}
.dmf-modal-header h3 { color: white !important; }
.dmf-modal-header span { color: rgba(255,255,255,.8) !important; }

/* ═══ REGLA GLOBAL PREVENTIVA CHART.JS — Todos los canvas acotados ═══ */
.chart-container canvas,
.cop-chart-container canvas,
.kpi-chart-container canvas,
.tendencia-chart-container canvas,
.upm-chart-container canvas,
.dmf-chart-container canvas,
[class*="-chart-container"] canvas {
    min-height: 0 !important;
    max-height: 100% !important;
    display: block;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  COP-CTRL — MEZCLA DE CLIENTES POR SEGMENTO (Sub-módulo)       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ---- Header ---- */
.cmix-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    background: linear-gradient(135deg, #faf5ff, #ede9fe);
    border-radius: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
    border: 1px solid #e9d5ff;
}
.cmix-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.cmix-header-icon {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 22px;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}
.cmix-header-title {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.3px;
}
.cmix-header-subtitle {
    font-size: 12px;
    color: #64748b;
    margin: 4px 0 0;
}
.cmix-header-badges {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.cmix-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; gap: 6px;
}
.cmix-badge-purple { background: #f5f3ff; color: #7c3aed; border: 1px solid #e9d5ff; }
.cmix-badge-green { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.cmix-badge-blue { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

/* ---- Sub-Nav ---- */
.cmix-subnav {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    padding: 6px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    flex-wrap: wrap;
}
.cmix-subnav-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cmix-subnav-btn:hover { background: #e2e8f0; color: #1e293b; }
.cmix-subnav-btn.active {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: white;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

/* ---- Views ---- */
.cmix-view.hidden { display: none; }

/* ---- KPIs Grid ---- */
.cmix-kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.cmix-kpi-card {
    background: white;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}
.cmix-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.cmix-kpi-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.cmix-kpi-body { flex: 1; }
.cmix-kpi-label { font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.cmix-kpi-value { font-size: 24px; font-weight: 800; color: #1e293b; margin: 4px 0 2px; letter-spacing: -0.5px; }
.cmix-kpi-sub { font-size: 11px; color: #94a3b8; }
.cmix-kpi-sub.positive { color: #059669; }
.cmix-kpi-sub.negative { color: #ef4444; }

/* ---- Two cols layout ---- */
.cmix-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 900px) {
    .cmix-two-cols { grid-template-columns: 1fr; }
}

/* ---- Panel ---- */
.cmix-panel {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    overflow: hidden;
}
.cmix-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 10px;
}
.cmix-panel-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cmix-panel-badge {
    font-size: 11px;
    font-weight: 700;
    background: #f5f3ff;
    color: #7c3aed;
    padding: 4px 12px;
    border-radius: 20px;
}
.cmix-panel-body { padding: 24px; }

/* ---- Donut ---- */
.cmix-donut-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.cmix-donut-svg {
    width: 200px;
    height: 200px;
}
.cmix-donut-svg path {
    transition: opacity 0.2s;
    cursor: pointer;
}
.cmix-donut-svg path:hover { opacity: 1 !important; filter: brightness(1.1); }
.cmix-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cmix-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s;
}
.cmix-legend-item:hover { background: #f8fafc; }
.cmix-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex-shrink: 0;
}
.cmix-legend-text {
    display: flex;
    flex-direction: column;
}
.cmix-legend-name { font-size: 12px; font-weight: 600; color: #1e293b; }
.cmix-legend-value { font-size: 11px; color: #94a3b8; }

/* ---- Horizontal Bars ---- */
.cmix-hbar-row {
    display: grid;
    grid-template-columns: 180px 1fr 56px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f8fafc;
}
.cmix-hbar-row:last-child { border-bottom: none; }
.cmix-hbar-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
.cmix-hbar-track {
    height: 12px;
    background: #f1f5f9;
    border-radius: 6px;
    position: relative;
    overflow: visible;
}
.cmix-hbar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.8s ease;
}
.cmix-hbar-target {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 18px;
    background: #475569;
    border-radius: 1px;
}
.cmix-hbar-value {
    font-size: 13px;
    text-align: right;
}
.cmix-hbar-amounts {
    grid-column: 2 / -1;
    display: flex;
    gap: 16px;
    font-size: 10px;
    margin-top: -4px;
}

/* ---- Segment Cards ---- */
.cmix-segments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
}
.cmix-segment-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cmix-segment-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.1);
}
.cmix-segment-header {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}
.cmix-segment-icon { font-size: 22px; opacity: 0.9; }
.cmix-segment-title { font-size: 14px; font-weight: 700; flex: 1; }
.cmix-segment-pct {
    font-size: 20px;
    font-weight: 800;
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 10px;
}
.cmix-segment-body { padding: 20px; }
.cmix-segment-desc { font-size: 11px; color: #94a3b8; margin-bottom: 16px; line-height: 1.4; }
.cmix-segment-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.cmix-seg-metric {
    background: #f8fafc;
    padding: 10px 12px;
    border-radius: 10px;
}
.cmix-seg-metric-label { font-size: 10px; color: #94a3b8; font-weight: 600; text-transform: uppercase; }
.cmix-seg-metric-value { font-size: 16px; font-weight: 800; color: #1e293b; margin-top: 2px; }
.cmix-segment-indicators {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.cmix-seg-ind {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #475569;
    background: #f8fafc;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
}
.cmix-segment-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    color: #475569;
    font-weight: 500;
}
.cmix-segment-services {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
.cmix-seg-svc {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 11px;
    color: #64748b;
    border-bottom: 1px dashed #f8fafc;
}

/* ---- Financial Report ---- */
.cmix-financial-report {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    overflow: hidden;
}
.cmix-fin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: linear-gradient(135deg, #faf5ff, #f5f3ff);
    border-bottom: 1px solid #e9d5ff;
    flex-wrap: wrap;
    gap: 12px;
}
.cmix-fin-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cmix-fin-btn {
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cmix-fin-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.cmix-fin-btn-primary {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: white;
    border-color: transparent;
}
.cmix-fin-btn-primary:hover { filter: brightness(1.1); background: linear-gradient(135deg, #7c3aed, #a78bfa); }

/* KPIs del informe */
.cmix-fin-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    padding: 20px 28px;
    border-bottom: 1px solid #f1f5f9;
}
.cmix-fin-kpi {
    text-align: center;
    padding: 14px 10px;
    background: #f8fafc;
    border-radius: 12px;
}
.cmix-fin-kpi-name { font-size: 10px; color: #94a3b8; font-weight: 600; text-transform: uppercase; }
.cmix-fin-kpi-value { font-size: 18px; font-weight: 800; color: #1e293b; margin: 4px 0; }
.cmix-fin-kpi-trend { font-size: 11px; font-weight: 600; }
.cmix-fin-kpi-trend.up { color: #059669; }
.cmix-fin-kpi-trend.down { color: #ef4444; }

/* Table */
.cmix-fin-table-container { padding: 0 28px 20px; overflow-x: auto; }
.cmix-fin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.cmix-fin-table th {
    background: #f8fafc;
    padding: 10px 12px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.cmix-fin-table td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid #f8fafc;
    color: #475569;
    white-space: nowrap;
}
.cmix-fin-row:hover { background: #faf5ff; }
.cmix-fin-total-row {
    background: #f8fafc;
}
.cmix-fin-total-row td {
    border-top: 2px solid #e2e8f0;
    border-bottom: none;
    color: #1e293b;
}

/* Stacked bar */
.cmix-fin-distrib { padding: 0 28px 24px; }
.cmix-stacked-bar {
    display: flex;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}
.cmix-stacked-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    font-weight: 700;
    transition: filter 0.2s;
    min-width: 2px;
}
.cmix-stacked-seg:hover { filter: brightness(1.15); }
.cmix-stacked-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.cmix-stacked-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #64748b;
}

/* ---- Forecast ---- */
.cmix-forecast-month { padding: 16px 0; }
.cmix-forecast-month-border { border-top: 1px solid #f1f5f9; }
.cmix-forecast-month-header { margin-bottom: 14px; }
.cmix-forecast-month-name {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cmix-forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.cmix-forecast-card {
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cmix-forecast-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    background: white;
}
.cmix-fc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 12px;
}
.cmix-fc-risk {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}
.cmix-fc-values {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}
.cmix-fc-values > div { display: flex; flex-direction: column; }
.cmix-fc-label { font-size: 10px; color: #94a3b8; }
.cmix-fc-val { font-size: 14px; font-weight: 700; color: #1e293b; }
.cmix-fc-bar { display: flex; align-items: center; gap: 8px; }
.cmix-fc-bar-track {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}
.cmix-fc-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
}

/* ---- Trends ---- */
.cmix-trend-filters {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}
.cmix-trend-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.cmix-trend-checkbox input {
    display: none;
}
.cmix-trend-checkbox span {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.cmix-trend-checkbox input:checked + span::after {
    content: '✓';
    color: white;
    font-size: 10px;
    font-weight: 700;
}
.cmix-trend-checkbox input:not(:checked) + span {
    opacity: 0.3;
}
.cmix-trends-chart {
    display: flex;
    gap: 0;
    height: 280px;
    margin-bottom: 20px;
}
.cmix-trends-y-axis {
    width: 64px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 6px 24px 0;
    border-right: 1px solid #e2e8f0;
}
.cmix-trends-y-label {
    font-size: 10px;
    color: #94a3b8;
    text-align: right;
    line-height: 1;
}
.cmix-trends-area {
    flex: 1;
    position: relative;
    padding-bottom: 24px;
}
.cmix-trends-grid {
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 24px;
}
.cmix-trends-grid > div {
    position: absolute;
    width: 100%;
    border-top: 1px dashed #f1f5f9;
}
.cmix-trends-bars {
    display: flex;
    gap: 0;
    height: calc(100% - 24px);
    position: relative;
    z-index: 2;
}
.cmix-trends-month-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.cmix-trends-month-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 0 3px;
    justify-content: center;
}
.cmix-trend-bar {
    flex: 1;
    max-width: 10px;
    border-radius: 3px 3px 0 0;
    transition: height 0.6s ease, opacity 0.3s;
    cursor: pointer;
    min-width: 3px;
}
.cmix-trend-bar:hover { filter: brightness(1.15); }
.cmix-trends-month-label {
    text-align: center;
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
    padding-top: 6px;
    height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmix-trends-summary { overflow-x: auto; }

/* ---- Modal ---- */
.cmix-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(4px);
}
.cmix-modal {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: cmixSlideUp 0.3s ease-out;
}
@keyframes cmixSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.cmix-modal-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px 20px 0 0;
}
.cmix-modal-body { padding: 24px; }
.cmix-modal-stat {
    background: #f8fafc;
    padding: 12px;
    border-radius: 10px;
    text-align: center;
}
.cmix-modal-stat span {
    display: block;
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.cmix-modal-stat strong {
    font-size: 18px;
    color: #1e293b;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .cmix-header { padding: 16px; }
    .cmix-kpis-grid { grid-template-columns: 1fr 1fr; }
    .cmix-segments-grid { grid-template-columns: 1fr; }
    .cmix-fin-kpis { grid-template-columns: repeat(2, 1fr); }
    .cmix-forecast-grid { grid-template-columns: 1fr; }
    .cmix-hbar-row { grid-template-columns: 1fr; gap: 6px; }
    .cmix-subnav { overflow-x: auto; flex-wrap: nowrap; }
    .cmix-subnav-btn { white-space: nowrap; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  DIRECCIÓN DE ENFERMERÍA — ESTILOS AVANZADOS                    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* IA Chips — Enfermería (teal theme) */
.nd-ia-chip {
    padding: 8px 16px;
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 20px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    backdrop-filter: blur(8px);
}
.nd-ia-chip:hover {
    background: rgba(20,184,166,.25);
    border-color: rgba(20,184,166,.5);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(20,184,166,.3);
}
.nd-ia-chip i { margin-right: 5px; }

/* IA Panel — texto blanco defensivo */
#nd-ia-panel,
#nd-ia-panel *:not(input):not(.meditel-ia-input),
#nd-ia-response-content,
#nd-ia-response-content * {
    color: #fff !important;
}
#nd-ia-response-content strong { color: #99f6e4 !important; }
#nd-ia-response-content em { color: #ccfbf1 !important; }
#nd-ia-response-content em[style*="color:#4ade80"] { color: #4ade80 !important; }
#nd-ia-response-content em[style*="color:#fbbf24"] { color: #fbbf24 !important; }
#nd-ia-response-content em[style*="color:#f87171"] { color: #f87171 !important; }
#nd-ia-response-content td { color: #e2e8f0 !important; }
#nd-ia-response-content td[style*="color:#4ade80"] { color: #4ade80 !important; }
#nd-ia-response-content td[style*="color:#fbbf24"] { color: #fbbf24 !important; }
#nd-ia-response-content table { border-collapse: collapse; }
#nd-ia-response-content table tr { border-bottom: 1px solid rgba(255,255,255,.12); }
#nd-ia-response-content table td { padding: 6px 8px 6px 0; vertical-align: top; }
#nd-ia-panel p { color: rgba(255,255,255,.75) !important; }
#nd-ia-panel h3 { color: #fff !important; }
#nd-ia-panel input[type="text"],
#nd-ia-prompt { color: #0f172a !important; background: #ffffff !important; font-weight: 700 !important; caret-color: #2563eb !important; }
#nd-ia-panel input[type="text"]::placeholder,
#nd-ia-prompt::placeholder { color: #64748b !important; opacity: 1 !important; }
#nd-ia-panel .nd-ia-chip { color: rgba(255,255,255,.85) !important; }
#nd-ia-panel .nd-ia-chip:hover { color: #fff !important; }

/* Regla: cualquier contenedor con fondo teal oscuro */
[style*="#0c4a3e"],
[style*="#0c4a3e"] *:not(input):not(button):not(.btn):not(.nd-tool-card):not(.nd-tool-card *):not(.nd-tool-info *):not(.nd-tool-badge) {
    color: #fff !important;
}

/* Tool Cards — Enfermería */
.nd-tool-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: white;
    border-radius: 14px;
    cursor: pointer;
    transition: all .3s ease;
    border: 1.5px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.nd-tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(13,148,136,.04), rgba(20,184,166,.08));
    opacity: 0;
    transition: opacity .3s ease;
}
.nd-tool-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(13,148,136,.15);
    border-color: #99f6e4;
}
.nd-tool-card:hover::before { opacity: 1; }
.nd-tool-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    flex-shrink: 0;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.nd-tool-info {
    flex: 1;
    z-index: 1;
}
.nd-tool-info h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}
.nd-tool-info p {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}
.nd-tool-badge {
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    z-index: 1;
}

/* Calidad KPIs — Cards adaptadas */
#nd-calidad-kpis .card {
    min-width: 170px;
}
#nd-calidad-kpis .card .card-value {
    font-size: 28px;
}

/* Responsive enfermería */
@media (max-width: 768px) {
    #nd-calidad-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
    .nd-tool-card {
        flex-direction: column;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════════════ */
/* CENTRO DE INTELIGENCIA CLÍNICA — DM CROSS-MODULE CARDS           */
/* REDISEÑO PROFESIONAL v2.0 — FONDO CLARO, TARJETAS LEGIBLES      */
/* ══════════════════════════════════════════════════════════════════ */

/* ── Contenedores principales: panel claro flotante ── */
#dm-inteligencia-bloque,
#ndi-inteligencia-bloque {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%) !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    margin-top: 28px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
#dm-scorecard-bloque {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%) !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    margin-top: 24px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ── Encabezados de inteligencia dentro del panel claro ── */
#dm-inteligencia-bloque h3,
#ndi-inteligencia-bloque h3 {
    color: #1e293b !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}
#dm-inteligencia-bloque p,
#ndi-inteligencia-bloque p {
    color: #64748b !important;
    font-size: 14px !important;
}

/* ── Grid de tarjetas: 3 columnas profesionales ── */
.dmi-cards-grid,
.ndi-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ── Tarjetas: fondo blanco sólido, legible ── */
.dmi-card,
.ndi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px 20px 18px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dmi-card::before,
.ndi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #7c3aed, #0ea5e9);
    opacity: 0;
    transition: opacity 0.3s;
}
.ndi-card::before {
    background: linear-gradient(90deg, #0d9488, #06b6d4);
}
.dmi-card:hover,
.ndi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    border-color: #cbd5e1;
}
.dmi-card:hover::before,
.ndi-card:hover::before { opacity: 1; }

/* ── Card Header ── */
.dmi-card-header,
.ndi-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.dmi-card-icon,
.ndi-card-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.dmi-card-icon i,
.ndi-card-icon i { color: white; font-size: 18px; }
.dmi-card-title,
.ndi-card-title {
    flex: 1;
    font-size: 15px !important;
    font-weight: 700;
    color: #1e293b !important;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* ── Badges con colores sólidos legibles ── */
.dmi-card-badge,
.ndi-card-badge {
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.dmi-badge-success, .ndi-badge-success { background: #dcfce7; color: #15803d; }
.dmi-badge-warning, .ndi-badge-warning { background: #fef3c7; color: #b45309; }
.dmi-badge-danger,  .ndi-badge-danger  { background: #fee2e2; color: #dc2626; }
.dmi-badge-info,    .ndi-badge-info    { background: #dbeafe; color: #1d4ed8; }

/* ── Métricas: grandes y legibles ── */
.dmi-card-metrics,
.ndi-card-metrics {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px 10px;
    border: 1px solid #f1f5f9;
}
.dmi-metric,
.ndi-metric {
    flex: 1;
    text-align: center;
    position: relative;
}
.dmi-metric + .dmi-metric,
.ndi-metric + .ndi-metric {
    border-left: 1px solid #e2e8f0;
}
.dmi-metric-val,
.ndi-metric-val {
    display: block;
    font-size: 22px !important;
    font-weight: 800;
    color: #0f172a !important;
    line-height: 1;
}
.dmi-metric-label,
.ndi-metric-label {
    display: block;
    font-size: 12px !important;
    color: #64748b !important;
    margin-top: 5px;
    line-height: 1.2;
    font-weight: 500;
}

/* ── Línea de tendencia ── */
.dmi-card-trend,
.ndi-card-trend {
    font-size: 13px !important;
    font-weight: 600;
    color: #d97706 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid #f1f5f9;
}
.dmi-card-trend i,
.ndi-card-trend i { font-size: 11px; }
.dmi-trend-up,   .ndi-trend-up   { color: #059669 !important; }
.dmi-trend-neutral, .ndi-trend-neutral { color: #64748b !important; }

/* ══════════════════════════════════════════════════════════════════ */
/* BALANCED SCORECARD (BSC) — PERSPECTIVAS REDISEÑADAS              */
/* ══════════════════════════════════════════════════════════════════ */
.bsc-perspectives-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.bsc-perspective {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.bsc-perspective:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.bsc-persp-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}
.bsc-persp-header i { font-size: 18px; }
.bsc-persp-body {
    padding: 16px 20px;
}
.bsc-kpi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.bsc-kpi:last-child { border-bottom: none; }
.bsc-kpi-label {
    font-size: 14px !important;
    color: #475569 !important;
    font-weight: 500;
}
.bsc-kpi-val {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a !important;
}
.bsc-persp-footer {
    padding: 12px 20px;
    background: #f8fafc;
    font-size: 13px;
    color: #64748b !important;
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid #f1f5f9;
}

/* ── Radar chart wrapper dentro del panel claro ── */
.dmi-radar-wrapper,
.ndi-radar-wrapper {
    margin-top: 24px;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dmi-radar-wrapper h4,
.ndi-radar-wrapper h4 {
    color: #1e293b !important;
}

/* ── BSC chart wrapper ── */
.bsc-chart-wrapper {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ── Botón actualizar dentro del panel claro ── */
.inteligencia-refresh-btn {
    padding: 10px 20px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.inteligencia-refresh-btn:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ── Responsive: Intelligence Cards ── */
@media (max-width: 1200px) {
    .dmi-cards-grid, .ndi-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .dmi-cards-grid, .ndi-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .bsc-perspectives-grid { grid-template-columns: 1fr; }
    .dmi-metric-val, .ndi-metric-val { font-size: 18px !important; }
}
@media (max-width: 600px) {
    .dmi-cards-grid, .ndi-cards-grid { grid-template-columns: 1fr; }
    #dm-inteligencia-bloque,
    #ndi-inteligencia-bloque,
    #dm-scorecard-bloque { padding: 18px 14px !important; }
}

/* ── Override: asegurar texto oscuro en paneles de inteligencia ── */
#dm-inteligencia-bloque .dmi-card *,
#ndi-inteligencia-bloque .ndi-card * {
    /* dark text already set by individual rules above */
}
#dm-scorecard-bloque .bsc-kpi-label { color: #475569 !important; }
#dm-scorecard-bloque .bsc-kpi-val { color: #0f172a !important; }
#dm-scorecard-bloque .bsc-persp-footer { color: #64748b !important; }

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  CUERPO MÉDICO — ESTILOS MÓDULO ROBUSTO CM                        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Score Bar ── */
.cm-score-bar {
    transition: box-shadow 0.3s ease;
}
.cm-score-bar:hover {
    box-shadow: 0 6px 24px rgba(30,136,229,0.12) !important;
}
.cm-score-ring {
    transition: background 0.8s ease;
    box-shadow: 0 0 0 4px rgba(30,136,229,0.08);
}
.cm-kpi-mini {
    padding: 10px 6px;
    border-radius: 10px;
    transition: all 0.25s ease;
    cursor: default;
}
.cm-kpi-mini:hover {
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30,136,229,0.1);
}

/* ── Tabs de navegación ── */
.cm-tabs {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-x: auto;
}
.cm-tabs::-webkit-scrollbar { display: none; }

.cm-tab {
    background: transparent;
    color: #555;
    white-space: nowrap;
    transition: all 0.25s ease;
}
.cm-tab:hover {
    background: rgba(30,136,229,0.08);
    color: #1e88e5;
}
.cm-tab.active {
    background: #1e88e5 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(30,136,229,0.3);
}
.cm-tab i {
    margin-right: 6px;
}

/* ── Tab content ── */
.cm-tab-content {
    animation: cmFadeIn 0.35s ease;
}
.cm-tab-content:not(.active) {
    display: none;
}
@keyframes cmFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── KPI cards (Permisos / Vigilancias / Formación) ── */
.cm-perm-card {
    transition: all 0.3s ease;
    cursor: default;
}
.cm-perm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ── Tables CM ── */
#medical-staff .projects-table {
    border-radius: 12px;
    overflow: hidden;
}
#medical-staff table th {
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 14px;
    border-bottom: 2px solid #e2e8f0;
}
#medical-staff table td {
    padding: 11px 14px;
    font-size: 0.88rem;
    color: #333;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
#medical-staff table tbody tr:hover {
    background: #f0f7ff;
}

/* ── Articulación DM link cards ── */
.cm-dm-link-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}
.cm-dm-link-card {
    transition: all 0.3s ease !important;
}

/* ── Alertas Intel panel ── */
.cm-alertas-intel > div {
    transition: all 0.25s ease;
}
.cm-alertas-intel > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
}

/* ── Role badge ── */
.cm-role-badge {
    animation: cmBadgePulse 3s ease-in-out infinite;
}
@keyframes cmBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30,136,229,0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(30,136,229,0); }
}

/* ── Charts CM ── */
#cm-inteligencia .chart-container,
#cm-evaluaciones .chart-container {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
#cm-inteligencia .chart-title,
#cm-evaluaciones .chart-title {
    color: #334155 !important;
    font-size: 0.95rem;
}

/* ── Responsive CM ── */
@media (max-width: 1200px) {
    .cm-score-bar { grid-template-columns: 1fr !important; }
    .cm-score-bar > div:first-child { border-right: none !important; border-bottom: 1px solid #e0e0e0; padding-bottom: 16px !important; padding-right: 0 !important; }
    .cm-score-bar > div:last-child { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 992px) {
    .cm-tabs { flex-wrap: wrap !important; }
    .cm-tab { flex: 0 0 auto !important; min-width: 140px; }
    #cm-permisos > div:first-child,
    #cm-vigilancias > div:first-child,
    #cm-formacion > div:first-child { grid-template-columns: repeat(2, 1fr) !important; }
    #cm-inteligencia .cm-alertas-intel { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
    .cm-score-bar > div:last-child { grid-template-columns: repeat(2, 1fr) !important; }
    .cm-tab { font-size: 0.78rem !important; padding: 8px 12px !important; }
    #cm-evaluaciones > div:first-child { grid-template-columns: 1fr !important; }
    #cm-inteligencia > div:first-child > div:last-child { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CUERPO DE ENFERMERÍA — ESTILOS PROFESIONALES
   Teal/Green scheme (#26a69a · #00897b · #00695c)
   ═══════════════════════════════════════════════════════════════════════ */
.ce-score-bar {
    background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
    border-radius: 18px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 18px;
    box-shadow: 0 4px 16px rgba(38, 166, 154, 0.13);
}
.ce-score-ring {
    width: 82px; height: 82px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: conic-gradient(#26a69a 0deg 270deg, #e0e0e0 270deg 360deg);
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(38, 166, 154, 0.25);
}
.ce-score-ring > span {
    width: 62px; height: 62px;
    background: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem; font-weight: 900; color: #26a69a;
}
.ce-kpi-mini {
    background: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.22s, box-shadow 0.22s;
    cursor: default;
}
.ce-kpi-mini:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(38, 166, 154, 0.18);
}
.ce-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2.5px solid #e0e0e0;
    margin-bottom: 22px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.ce-tab {
    padding: 11px 22px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #78909c;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.ce-tab:hover { color: #26a69a; }
.ce-tab.active {
    color: #26a69a;
    border-bottom-color: #26a69a;
}
.ce-tab-content {
    animation: ceFadeIn 0.35s ease;
}
@keyframes ceFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.ce-perm-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.22s, box-shadow 0.22s;
}
.ce-perm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(38, 166, 154, 0.15);
}
#nursing-staff table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
}
#nursing-staff table th {
    background: #f8fafc;
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    color: #334155;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
#nursing-staff table td {
    padding: 10px 14px;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
}
#nursing-staff table tr:hover {
    background: #f0faf9;
}
.ce-nd-link-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.ce-nd-link-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 30px rgba(38, 166, 154, 0.2) !important;
}
.ce-alertas-intel {
    transition: transform 0.2s;
}
.ce-alertas-intel:hover {
    transform: translateY(-2px);
}
.ce-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(38, 166, 154, 0.15);
    color: #00695c;
    padding: 4px 14px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    animation: ceBadgePulse 2s ease-in-out infinite;
}
@keyframes ceBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(38, 166, 154, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(38, 166, 154, 0); }
}
#ce-inteligencia canvas,
#ce-evaluaciones canvas {
    max-height: 300px;
}
@media (max-width: 1200px) {
    .ce-score-bar { flex-direction: column; text-align: center; }
    .ce-score-bar > div:last-child { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 992px) {
    .ce-tabs { flex-wrap: wrap !important; }
    .ce-tab { flex: 0 0 auto !important; min-width: 140px; }
    #ce-certificaciones > div:first-child,
    #ce-supervisiones > div:first-child,
    #ce-formacion > div:first-child { grid-template-columns: repeat(2, 1fr) !important; }
    #ce-inteligencia .ce-alertas-intel { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
    .ce-score-bar > div:last-child { grid-template-columns: repeat(2, 1fr) !important; }
    .ce-tab { font-size: 0.78rem !important; padding: 8px 12px !important; }
    #ce-evaluaciones > div:first-child { grid-template-columns: 1fr !important; }
    #ce-inteligencia > div:first-child > div:last-child { grid-template-columns: repeat(2, 1fr) !important; }
}

/* =====================================================
   SEGURIDAD DEL PACIENTE - MÓDULOS PROACTIVOS (AMFE, AHRQ, VÍCTIMAS)
   ===================================================== */

/* AMFE Table */
.sp-amfe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.sp-amfe-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid #e2e8f0;
}
.sp-amfe-table td {
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}
.sp-amfe-input-text {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px;
    font-size: 0.85rem;
    resize: vertical;
    min-height: 40px;
}
.sp-amfe-input-num {
    width: 50px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: bold;
}
.sp-amfe-npr {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 12px;
    font-weight: bold;
    color: white;
    text-align: center;
    min-width: 60px;
}
.sp-npr-low { background: #22c55e; }
.sp-npr-med { background: #eab308; }
.sp-npr-high { background: #ef4444; }

/* AHRQ Heatmap */
.sp-ahrq-heatmap {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
}
.sp-ahrq-heatmap th, .sp-ahrq-heatmap td {
    padding: 10px;
    text-align: center;
    font-size: 0.85rem;
}
.sp-ahrq-heatmap th:first-child, .sp-ahrq-heatmap td:first-child {
    text-align: left;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border-radius: 6px;
}
.sp-ahrq-cell {
    border-radius: 6px;
    color: white;
    font-weight: bold;
    cursor: help;
    transition: transform 0.2s;
}
.sp-ahrq-cell:hover {
    transform: scale(1.05);
}

/* Kanban Segundas Víctimas */
.sp-victimas-kanban {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
    min-height: 400px;
}
.sp-victimas-column {
    flex: 0 0 300px;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sp-victimas-column-header {
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}
.sp-victimas-card {
    background: white;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-left: 4px solid #3b82f6;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sp-victimas-card.urgente { border-left-color: #ef4444; }
.sp-victimas-card-title { font-weight: bold; font-size: 0.85rem; color: #1e293b; }
.sp-victimas-card-desc { font-size: 0.75rem; color: #64748b; }
.sp-victimas-card-footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; color: #94a3b8; }

/* Acciones en fila de chat */
.chat-contacto-item .row-actions {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    gap: 12px;
    z-index: 10;
}
.chat-contacto-item:hover .row-actions {
    display: flex;
}
.row-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: #64748b;
    transition: all 0.2s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row-actions button:hover {
    color: #1F6BA7;
    transform: scale(1.1);
}
.row-actions button.btn-eliminar:hover {
    color: #ef4444;
}

/* Mejora diseño de los botones superiores del panel de herramientas (minimizar/cerrar) */
.tool-panel-actions button {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: white !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
    margin-left: 6px !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.tool-panel-actions button:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}