/* ============================================================
   GESTOR DE TICKETS – VANILLA CSS
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ── V2 Brand Blue ── */
    --blue-50: #EFF6FF;
    --blue-75: #E8F1FF;
    --blue-100: #DBEAFE;
    --blue-200: #BFDBFE;
    --blue-300: #93C5FD;
    --blue-400: #60A5FA;
    --blue-500: #1E6BFF;
    --blue-600: #1565F7;
    --blue-700: #0B55D9;
    --blue-800: #0B3E9E;
    --blue-900: #082B63;

    /* ── Navy / Sidebar ── */
    --navy-950: #061D42;
    --navy-900: #082B63;
    --navy-850: #09285C;
    --navy-800: #0B2D68;

    /* ── Surfaces ── */
    --page-bg: #F4F7FB;
    --surface: #FFFFFF;
    --surface-soft: #F8FAFD;
    --surface-muted: #F2F5FA;

    /* ── Text ── */
    --text-main: #18253D;
    --text-strong: #0F1F3A;
    --text-muted: #7C8798;
    --text-soft: #A1ACBA;
    --text-white: #FFFFFF;

    /* ── Borders ── */
    --border-soft: #E8EDF5;
    --border-light: #EEF2F7;
    --border-input: #DCE4EF;

    /* ── Semantic ── */
    --success: #22C55E;
    --success-dark: #16A34A;
    --success-soft: #EAF8EF;

    --warning: #F4B63F;
    --warning-dark: #D99000;
    --warning-soft: #FFF6DD;

    --danger: #EF4444;
    --danger-dark: #DC2626;
    --danger-soft: #FDECEC;

    --purple: #8B5CF6;
    --purple-dark: #6D42D8;
    --purple-soft: #F1EBFF;

    --gray-status: #AEB7C5;
    --gray-status-soft: #F1F4F8;

    /* ── Legacy aliases (keep for backward compat) ── */
    --indigo-50: #EFF6FF;
    --indigo-100: #DBEAFE;
    --indigo-200: #BFDBFE;
    --indigo-300: #93C5FD;
    --indigo-400: #60A5FA;
    --indigo-500: #1E6BFF;
    --indigo-600: #1565F7;
    --indigo-700: #0B55D9;
    --indigo-800: #0B3E9E;
    --indigo-900: #082B63;

    --rose-50: #fff1f2;
    --rose-100: #ffe4e6;
    --rose-500: #EF4444;
    --rose-600: #DC2626;
    --rose-700: #b91c1c;

    --emerald-50: #EAF8EF;
    --emerald-100: #d1fae5;
    --emerald-500: #22C55E;
    --emerald-600: #16A34A;
    --emerald-700: #15803d;

    --sky-50: #EFF6FF;
    --sky-100: #DBEAFE;
    --sky-500: #1E6BFF;
    --sky-600: #1565F7;
    --sky-700: #0B55D9;

    --violet-50: #F1EBFF;
    --violet-100: #ede9fe;
    --violet-500: #8B5CF6;
    --violet-600: #7c3aed;
    --violet-700: #6D42D8;

    --orange-50: #FFF6DD;
    --orange-100: #ffedd5;
    --orange-500: #F4B63F;
    --orange-600: #D99000;
    --orange-700: #b45309;

    --gray-50: #F8FAFD;
    --gray-100: #F4F7FB;
    --gray-200: #E8EDF5;
    --gray-300: #DCE4EF;
    --gray-400: #A1ACBA;
    --gray-500: #7C8798;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #18253D;
    --gray-900: #0F1F3A;

    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* ── Shadows V2 ── */
    --shadow-screen: 0 18px 40px rgba(15,35,70,0.10);
    --shadow-card: 0 10px 24px rgba(15,35,70,0.075);
    --shadow-soft: 0 4px 16px rgba(15,23,42,0.055);
    --shadow-button: 0 6px 12px rgba(21,101,247,0.18);

    /* ── Legacy shadow aliases ── */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 16px rgba(15,23,42,0.055);
    --shadow-lg: 0 10px 24px rgba(15,35,70,0.075);
    --shadow-xl: 0 18px 40px rgba(15,35,70,0.10);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.20);

    /* ── Radius V2 ── */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 22px;
    --radius-pill: 999px;
    --radius: 8px;
    --radius-full: 999px;

    /* ── Typography ── */
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --fs-xxs: 9px;
    --fs-xs: 10px;
    --fs-sm: 11px;
    --fs-md: 12px;
    --fs-base: 13px;
    --fs-body: 14px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 22px;
    --fs-3xl: 28px;
    --fs-4xl: 36px;
    --fs-hero: 42px;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
}

html { font-size: 97%; }

body {
    font-family: var(--font-sans);
    background: var(--page-bg);
    color: var(--text-main);
    min-height: 100vh;
}

.hidden { display: none !important; }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ---- NOTIFICATION ---- */
.notification {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 99999;
    padding: 14px 24px;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toastSlideUp 0.35s cubic-bezier(.34,1.56,.64,1);
    min-width: 280px;
    max-width: 480px;
    text-align: center;
    justify-content: center;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.notification.success  { background: linear-gradient(135deg, #16a34a, #15803d); }
.notification.error    { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.notification.warning  { background: linear-gradient(135deg, #D97706, #B45309); }

@keyframes toastSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(0.94); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
}

/* ---- LOADING ---- */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
}
.loading-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- TOP BAR ---- */
.top-bar {
    background: var(--slate-900);
    color: var(--gray-400);
    font-size: 0.75rem;
    border-bottom: 1px solid var(--slate-700);
    position: sticky;
    top: 0;
    z-index: 30;
}
.top-bar-inner {
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sync-info {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--gray-500);
}
.sync-info .sync-time { color: var(--gray-300); font-weight: 700; font-family: monospace; }
.top-bar-actions { display: flex; align-items: center; gap: 1rem; }
.top-btn {
    background: none;
    border: none;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: color 0.15s;
    padding: 0;
}
.top-btn:hover { color: white; }
.top-btn.active { color: var(--indigo-400); font-weight: 700; }
.top-btn.client-active { color: #34d399; font-weight: 700; }
.top-divider { width: 1px; height: 0.75rem; background: var(--slate-700); }

/* ---- MAIN HEADER ---- */
.main-header {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 2rem;
    z-index: 29;
}
.header-inner {
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-brand { display: flex; align-items: center; gap: 0.5rem; }
.brand-icon {
    background: var(--indigo-600);
    padding: 0.375rem;
    border-radius: var(--radius);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-brand h1 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-800);
}
.brand-accent { color: var(--indigo-600); }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }

/* ---- BUTTONS ---- */
.btn-outline-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: white;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-outline-sm:hover { background: var(--gray-50); }

.btn-primary-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--indigo-600);
    border: none;
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-primary-sm:hover { background: var(--indigo-700); }
.btn-primary-sm:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--indigo-600);
    border: none;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-primary:hover { background: var(--indigo-700); }

.btn-ghost {
    background: none;
    border: none;
    color: var(--gray-600);
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-ghost:hover { background: var(--gray-50); }

.btn-emerald {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--emerald-600);
    border: none;
    color: white;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: var(--shadow-md);
}
.btn-emerald:hover { background: var(--emerald-700); }

.w-full { width: 100%; }

/* ---- BLINK ANIMATION ---- */
@keyframes flashAttention {
    0%, 100% { background: white; color: var(--indigo-600); border-color: var(--indigo-400); box-shadow: 0 0 0 0 rgba(99,102,241,0); }
    50% { background: var(--indigo-600); color: white; border-color: var(--indigo-700); transform: scale(1.05); box-shadow: 0 0 15px rgba(79,70,229,0.5); }
}
.btn-blink { animation: flashAttention 1.2s ease-in-out infinite; border: 2px solid var(--indigo-400); font-weight: 800; }
.btn-blink:hover { animation: none; background: var(--indigo-700); color: white; }

/* ---- MAIN ---- */
#main-content {
    max-width: 1536px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    position: relative;
}

/* ---- FILTER PANEL (floating right) ---- */
.filter-panel {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;      /* reduced - below header */
    display: flex;
    align-items: center;
    pointer-events: none;  /* collapsed: pass through clicks */
}
.filter-panel-expanded {
    pointer-events: all;
}
.filter-panel-collapsed {
    pointer-events: all;
}
.filter-panel-expanded {
    background: white;
    border: 1px solid var(--gray-200);
    border-right: none;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 0.875rem;
    min-width: 190px;
    max-width: 215px;
}
.filter-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0 0 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    transition: opacity 0.15s;
}
.filter-panel-header:hover { opacity: 0.7; }
.filter-panel-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-500);
}
.filter-panel-collapsed {
    background: white;
    border: 1px solid var(--gray-200);
    border-right: none;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem 0.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: background 0.15s;
}
.filter-panel-collapsed:hover { background: var(--gray-50); }
.filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--indigo-600);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
}
.filter-clear-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--gray-100);
    width: 100%;
    font-size: 0.5625rem;
    font-weight: 600;
    color: #ef4444;
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    cursor: pointer;
    transition: color 0.15s;
}
.filter-clear-all:hover { color: #b91c1c; }
.active-filter-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    border: 1px solid;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    text-align: left;
    margin-bottom: 0.25rem;
}
.active-filter-tag.cat-section-label {
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: none;
    border: none;
    cursor: default;
    padding: 0.125rem 0;
    margin-bottom: 0.25rem;
}

/* ---- CATEGORY CARDS ---- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }

.cat-card {
    position: relative;
    padding: 2.5rem 1.25rem 1.25rem;
    border-radius: var(--radius-xl);
    border: 1px solid;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
    background: white;
    user-select: none;
}
.cat-card:hover { box-shadow: var(--shadow-md); }
.cat-card.cat-inactive { filter: grayscale(1); opacity: 0.38; transform: scale(0.97); }
.cat-card.cat-active { transform: translateY(-8px) scale(1.04); box-shadow: 0 20px 40px -8px rgba(0,0,0,0.18); }

.cat-priority-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.375rem 0;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    z-index: 1;
}
.cat-inactive-label {
    position: absolute;
    bottom: 0.625rem;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}
.cat-inactive-badge {
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(255,255,255,0.8);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-200);
}
.cat-card-body { position: relative; z-index: 2; }
.cat-top-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; margin-top: 0.25rem; }
.cat-icon-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
.cat-card:hover .cat-icon { transform: scale(1.1); }
.cat-card.cat-active .cat-icon { box-shadow: var(--shadow-md); transform: scale(1.1); }
.cat-title { font-size: 1.125rem; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; }
.cat-subtitle { font-size: 0.75rem; font-weight: 600; opacity: 0.7; text-transform: uppercase; margin-top: 0.25rem; }
.cat-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.cat-active-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.5625rem;
    font-weight: 800;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-full);
    border: 1px solid;
    background: white;
}
.cat-new-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: linear-gradient(135deg, #c026d3, #ec4899);
    color: white;
    font-size: 0.6875rem;
    font-weight: 900;
    font-style: italic;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }
.cat-values { display: flex; align-items: baseline; gap: 0.5rem; }
.cat-total { font-size: 1.875rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.02em; }
.cat-pct { font-size: 0.875rem; font-weight: 500; color: var(--gray-500); white-space: nowrap; }

/* BG overlays */
.cat-bg-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.2;
}
.cat-card.cat-active .cat-bg-overlay { opacity: 0.4; }

/* ---- CHARTS ROW ---- */
.charts-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 1024px) { .charts-row { grid-template-columns: 2fr 1fr; } }

.chart-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
}
.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.chart-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.chart-controls { display: flex; align-items: center; gap: 0.75rem; }
.chart-mode-tabs {
    display: flex;
    background: var(--gray-100);
    padding: 0.125rem;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}
.mode-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.625rem;
    font-weight: 700;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--gray-500);
    transition: all 0.15s;
}
.mode-btn.active { background: white; color: var(--indigo-600); box-shadow: var(--shadow-sm); }
.mode-btn:hover:not(.active) { color: var(--gray-700); }
.total-badge {
    background: var(--indigo-100);
    color: var(--indigo-700);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: 700;
}
.project-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--indigo-100);
    color: var(--indigo-700);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.project-badge:hover { background: var(--indigo-200); }

.chart-body { overflow: hidden; }

/* Bar chart */
.bar-chart-container {
    display: flex;
    gap: 0.75rem;
    height: 13rem;
    overflow-x: auto;
    padding: 0 0.5rem;
    align-items: flex-end;
}
.bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 2.5rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.2s, filter 0.2s;
}
.bar-col.col-inactive { opacity: 0.4; filter: grayscale(1); }
.bar-col.col-selected .bar-wrap { box-shadow: var(--shadow-md); outline: 2px solid var(--indigo-300); outline-offset: 1px; }
.bar-top-area { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.bar-value-label { position: absolute; bottom: 100%; margin-bottom: 4px; font-size: 0.625rem; font-weight: 700; color: var(--indigo-600); white-space: nowrap; }
.bar-wrap { width: 100%; border-radius: 4px 4px 0 0; overflow: hidden; display: flex; flex-direction: column-reverse; transition: all 0.3s; }
.bar-seg { width: 100%; transition: height 0.5s; }
.bar-label-area { height: 2rem; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 0.5rem; }
.bar-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; text-align: center; truncate; max-width: 100%; overflow: hidden; white-space: nowrap; color: var(--gray-500); }
.bar-cat-count { font-size: 0.625rem; font-weight: 800; line-height: 1; margin-top: 2px; }

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-100);
    font-size: 0.7rem;
}
.legend-item { display: flex; align-items: center; gap: 0.375rem; font-weight: 500; color: var(--gray-600); }
.legend-dot { width: 0.75rem; height: 0.75rem; border-radius: 0.125rem; flex-shrink: 0; }

/* Donut chart */
.donut-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.donut-svg-wrap { position: relative; width: 220px; height: 220px; }
.donut-legend { width: 100%; display: flex; flex-direction: column; gap: 0.375rem; padding: 0 0.25rem; }
.donut-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    transition: background 0.15s;
    cursor: default;
}
.donut-legend-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex-shrink: 0; }
.donut-legend-name { font-size: 0.625rem; font-weight: 600; color: var(--gray-600); flex: 1; }
.donut-legend-count { font-size: 0.625rem; font-weight: 700; }
.donut-legend-pct { font-size: 0.5625rem; color: var(--gray-400); width: 2rem; text-align: right; }

/* ---- KPI GRID ---- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }

.kpi-card {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.kpi-clickable { cursor: pointer; transition: all 0.2s; }
.kpi-clickable:hover { box-shadow: var(--shadow-md); }
.kpi-clickable.active-filter { outline: 2px solid; outline-offset: -2px; }
.kpi-label { font-size: 0.875rem; color: var(--gray-500); font-weight: 500; margin-bottom: 0.25rem; }
.kpi-value { font-size: 1.875rem; font-weight: 700; }
.kpi-indigo { color: var(--indigo-600); }
.kpi-gray { color: var(--gray-600); }
.kpi-red { color: #ef4444; }
.kpi-orange { color: var(--orange-500); }
.kpi-icon { padding: 0.75rem; border-radius: 50%; }
.kpi-icon-indigo { background: var(--indigo-50); color: var(--indigo-600); }
.kpi-icon-gray { background: var(--gray-50); color: var(--gray-600); }
.kpi-icon-red { background: #fef2f2; color: #ef4444; }
.kpi-icon-orange { background: var(--orange-50); color: var(--orange-500); }

/* ---- TABLE ---- */
.table-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 500px;
}
.table-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: white;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
@media (min-width: 640px) {
    .table-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
}
.table-tabs { display: flex; }
.tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--gray-500);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--gray-700); }
.tab-btn.tab-active { color: var(--indigo-600); border-bottom-color: var(--indigo-600); }

.table-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 0;
    flex-wrap: wrap;
}
@media (max-width: 640px) { .hide-sm { display: none; } }

/* Import dropdown */
.import-menu-wrap { position: relative; }
.import-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 50;
    width: 15rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: fadeInUp 0.2s ease;
}
.import-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: none;
    border-bottom: 1px solid var(--gray-100);
    background: white;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
    text-align: left;
}
.import-option:hover { background: var(--gray-50); }
.import-option-icon { padding: 0.5rem; border-radius: var(--radius-sm); }
.icon-indigo { background: var(--indigo-50); color: var(--indigo-600); }
.icon-emerald { background: var(--emerald-50); color: var(--emerald-600); }
.import-option-title { display: block; font-size: 0.75rem; font-weight: 700; color: var(--gray-800); }
.import-option-desc { display: block; font-size: 0.625rem; color: var(--gray-500); }
.import-option-small {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.625rem;
    color: var(--gray-500);
    background: white;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.15s;
}
.import-option-small:hover { background: var(--gray-50); }

/* Search */
.search-wrap { position: relative; }
.search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; }
.search-input {
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    width: 14rem;
}
.search-input:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }

/* Table itself */
.table-scroll { overflow: auto; flex: 1; max-height: 70vh; }
#tickets-table { width: 100%; text-align: left; font-size: 0.875rem; color: var(--gray-600); border-collapse: collapse; }
#tickets-table thead { background: var(--gray-50); color: var(--gray-800); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
#tickets-table thead th {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    background: rgba(249,250,251,0.97);
    backdrop-filter: blur(4px);
    z-index: 10;
    box-shadow: 0 1px 0 var(--gray-200);
    white-space: nowrap;
}
#tickets-table thead th.th-filter { cursor: default; }
.th-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.filter-btn {
    padding: 0.25rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.15s;
    opacity: 0;
    color: var(--gray-400);
}
th:hover .filter-btn { opacity: 1; }
.filter-btn.active { opacity: 1; color: var(--indigo-600); background: var(--indigo-50); }

/* Filter dropdown */
.filter-dropdown-wrap { position: relative; }
.filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    width: 16rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 100;
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.15s ease;
}
.filter-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.filter-dropdown-title { font-size: 0.75rem; font-weight: 700; color: var(--gray-700); }
.filter-clear-btn { font-size: 0.75rem; color: var(--indigo-600); background: none; border: none; cursor: pointer; font-weight: 500; }
.filter-clear-btn:hover { color: var(--indigo-800); }
.filter-dropdown-list { max-height: 15rem; overflow-y: auto; padding: 0.5rem; }
.filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    padding: 0.375rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background 0.1s;
}
.filter-option:hover { background: var(--gray-50); }
.filter-option input { accent-color: var(--indigo-600); }
.filter-option span { color: var(--gray-700); }

/* Table body */
#tickets-table tbody tr {
    transition: background 0.1s;
    cursor: default;
}
#tickets-table tbody tr:hover { background: var(--gray-50); }
#tickets-table tbody td { padding: 0.5rem 1rem; border-bottom: 1px solid var(--gray-100); }
#tickets-table tbody td.locked { background: rgba(248,250,252,0.5); }

/* Editable inputs in table */
.cell-input {
    font-size: 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    background: var(--gray-50);
    transition: all 0.15s;
    font-family: inherit;
    color: var(--gray-800);
    outline: none;
}
.cell-input:focus { background: white; border-color: var(--indigo-500); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
.cell-input:disabled { opacity: 0.5; cursor: not-allowed; }
.cell-input.w-full { width: 100%; min-width: 140px; }
.cell-input.w-20 { width: 5rem; }
.cell-textarea {
    font-size: 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    background: var(--gray-50);
    transition: all 0.15s;
    font-family: inherit;
    resize: vertical;
    min-height: 1.875rem;
    min-width: 11rem;
    width: 100%;
    outline: none;
    color: var(--gray-800);
}
.cell-textarea:focus { background: white; border-color: var(--indigo-500); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
.cell-textarea:disabled { opacity: 0.5; cursor: not-allowed; }

.cat-select {
    font-size: 0.75rem;
    border: 1px solid;
    border-radius: var(--radius-sm);
    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
    cursor: pointer;
    outline: none;
    transition: all 0.15s;
    font-family: inherit;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}
.cat-select:disabled { opacity: 0.5; cursor: not-allowed; }

.cat-bug { background: #fff1f2; color: #be123c; border-color: #fecdd3; font-weight: 600; }
.cat-config { background: var(--sky-50); color: var(--sky-700); border-color: var(--sky-100); font-weight: 600; }
.cat-func { background: var(--violet-50); color: var(--violet-700); border-color: var(--violet-100); font-weight: 600; }
.cat-req { background: var(--emerald-50); color: var(--emerald-700); border-color: var(--emerald-100); font-weight: 600; }
.cat-none { background: var(--gray-50); color: var(--gray-600); border-color: var(--gray-200); }

.date-input-empty { border-color: #fca5a5; background: #fef2f2; color: var(--gray-600); font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid; font-family: inherit; outline: none; }
.date-input-filled { border-color: #a7f3d0; background: var(--emerald-50); color: var(--emerald-700); font-weight: 500; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid; box-shadow: var(--shadow-sm); font-family: inherit; outline: none; }
.date-input-empty:focus, .date-input-filled:focus { box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }

/* Doc button */
.doc-btn-on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius);
    background: var(--orange-100);
    border: 1px solid #fdba74;
    color: var(--orange-500);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background 0.15s;
}
.doc-btn-on:hover { background: #fed7aa; }
.doc-btn-off {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius);
    background: white;
    border: 1px solid var(--gray-200);
    color: var(--gray-300);
    cursor: pointer;
    transition: all 0.15s;
}
.doc-btn-off:hover { border-color: #fdba74; color: var(--orange-400); }
.doc-btn-on:disabled, .doc-btn-off:disabled { opacity: 0.5; cursor: not-allowed; }

/* Actions column */
.action-btn {
    padding: 0.25rem;
    border-radius: 0.25rem;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--gray-300);
}
.action-btn:hover { background: var(--gray-200); color: var(--gray-500); }
.action-btn.danger:hover { background: #fee2e2; color: #ef4444; }
.action-btn.locked { color: #ef4444; }

/* Solicitante cell */
.cell-solicitante { display: flex; flex-direction: column; gap: 0.125rem; }
.cell-name { font-weight: 500; color: var(--gray-900); font-size: 0.75rem; max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cell-email { font-size: 0.625rem; color: var(--gray-400); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 180px; }
.cell-timestamp {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.5625rem;
    font-weight: 500;
    background: var(--gray-100);
    color: var(--gray-500);
    border: 1px solid var(--gray-200);
    margin-top: 2px;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* ---- PREVIEW SECTION ---- */
.preview-card {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    margin-bottom: 2rem;
    animation: fadeInUp 0.3s ease;
}
.preview-header {
    background: var(--gray-50);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.preview-header h2 { font-size: 1.125rem; font-weight: 700; color: var(--gray-800); }
.preview-header p { font-size: 0.875rem; color: var(--gray-500); }
.preview-cols { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .preview-cols { grid-template-columns: repeat(3, 1fr); } }
.preview-col { padding: 1.5rem; border-bottom: 1px solid var(--gray-200); }
@media (min-width: 768px) { .preview-col { border-bottom: none; border-right: 1px solid var(--gray-200); } .preview-col:last-child { border-right: none; } }
.preview-col-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-weight: 700; }
.preview-col-desc { font-size: 0.75rem; color: var(--gray-500); margin-bottom: 0.75rem; }
.preview-list { max-height: 15rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.preview-item {
    background: white;
    border: 1px solid;
    border-radius: var(--radius);
    padding: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gray-800);
    box-shadow: var(--shadow-sm);
}

/* ---- BULK ACTION BAR ---- */
.bulk-bar {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--slate-800);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-2xl);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: fadeInUp 0.3s ease;
}
.bulk-count { font-weight: 500; font-size: 0.875rem; }
.bulk-divider { width: 1px; height: 1rem; background: var(--slate-700); }
.bulk-label { font-size: 0.75rem; color: var(--gray-400); }
.bulk-cats { display: flex; align-items: center; gap: 0.5rem; }
.bulk-cat-btn {
    padding: 0.25rem 0.75rem;
    background: var(--slate-700);
    border: 1px solid var(--slate-600);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}
.bulk-cat-btn:hover { background: var(--slate-600); }
.bulk-cancel { background: none; border: none; color: var(--gray-400); cursor: pointer; transition: color 0.15s; }
.bulk-cancel:hover { color: white; }

/* ---- TOOLTIP ---- */
.tooltip {
    position: fixed;
    z-index: 100;
    background: rgba(30,41,59,0.97);
    backdrop-filter: blur(4px);
    color: white;
    padding: 1rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid var(--slate-700);
    pointer-events: none;
    font-size: 0.75rem;
    max-width: 22rem;
    animation: fadeInUp 0.15s ease;
}
.tooltip-title { font-weight: 700; color: var(--indigo-400); margin-bottom: 0.5rem; border-bottom: 1px solid var(--slate-600); padding-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.tooltip-row { display: grid; grid-template-columns: 6.25rem 1fr; gap: 0.75rem; margin-bottom: 0.5rem; }
.tooltip-label { color: var(--gray-400); text-align: right; font-weight: 500; }
.tooltip-value { color: #e2e8f0; word-break: break-word; }
.tooltip-meta {
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, rgba(88,28,135,0.6), rgba(49,46,129,0.6));
    border: 1px solid rgba(167,139,250,0.3);
    border-radius: var(--radius);
    padding: 0.625rem;
}
.tooltip-meta-label { font-size: 0.625rem; color: #c4b5fd; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; display: flex; justify-content: space-between; }
.tooltip-meta-date { color: rgba(196,181,253,0.8); font-family: monospace; background: rgba(88,28,135,0.5); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.625rem; }
.tooltip-meta-value { font-size: 0.875rem; font-weight: 700; color: white; }
.tooltip-empty { color: var(--gray-500); font-style: italic; }

/* Chart tooltip */
.tooltip-chart-title { font-weight: 700; color: var(--indigo-300); border-bottom: 1px solid var(--slate-600); padding-bottom: 0.25rem; margin-bottom: 0.5rem; text-align: center; }
.tooltip-chart-row { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.25rem; font-size: 0.625rem; }
.tooltip-chart-label { color: var(--gray-400); }
.tooltip-chart-val { font-weight: 700; }
.tooltip-dates-section { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--slate-600); }
.tooltip-dates-title { font-size: 0.625rem; color: var(--gray-500); font-weight: 600; margin-bottom: 0.25rem; }
.tooltip-date-row { display: flex; justify-content: space-between; font-size: 0.625rem; padding-left: 0.25rem; margin-bottom: 0.125rem; }
.tooltip-date-label { color: #cbd5e1; }
.tooltip-date-count { color: #e2e8f0; font-family: monospace; }

/* ---- MODALS ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    padding: 1rem;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.25s ease;
    max-height: 90vh;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.modal-sm { max-width: 28rem; }
.modal-lg { max-width: 48rem; }
.modal-xl { max-width: 64rem; }
.modal-border-emerald { border-top: 4px solid var(--emerald-500); }
.modal-border-indigo { border-top: 4px solid var(--indigo-500); }

.modal-header-indigo { background: var(--indigo-600); padding: 1rem; text-align: center; }
.modal-header-indigo h3 { color: white; font-size: 1.125rem; font-weight: 700; }
.modal-icon-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 0.5rem;
}
.modal-form { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.25rem; }
.form-group label { font-size: 0.75rem; font-weight: 700; color: var(--gray-700); }
.form-input {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.form-input:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.form-actions { display: flex; gap: 0.75rem; padding-top: 0.5rem; }
.form-actions > * { flex: 1; }

.modal-body-center { padding: 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.modal-body-center h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-800); }
.modal-body-center p { color: var(--gray-600); font-size: 0.875rem; line-height: 1.5; }
.modal-icon-lg {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-icon-emerald { background: var(--emerald-100); color: var(--emerald-600); }
.modal-icon-indigo { background: var(--indigo-100); color: var(--indigo-600); }
.modal-icon-red { background: #fee2e2; color: #dc2626; }
.modal-icon-orange { background: var(--orange-100); color: var(--orange-600); }

.freshness-value { font-size: 1.5rem; font-weight: 700; }
.freshness-emerald { color: var(--emerald-600); }
.freshness-orange { color: var(--orange-600); }
.freshness-red { color: #dc2626; }
.freshness-tip { background: var(--gray-50); padding: 0.75rem; border-radius: var(--radius); border: 1px solid var(--gray-200); font-size: 0.75rem; color: var(--gray-500); text-align: left; }
.freshness-tip-title { font-weight: 600; margin-bottom: 0.25rem; }
.freshness-tip strong { color: var(--indigo-600); }

/* Slideover */
.slideover-backdrop { position: absolute; inset: 0; background: rgba(107,114,128,0.75); transition: opacity 0.3s; }
.slideover-panel {
    position: fixed;
    inset-y: 0;
    right: 0;
    width: min(56rem, 100vw);
    background: white;
    box-shadow: var(--shadow-2xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideInRight 0.3s ease;
}
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.slideover-header {
    background: var(--indigo-700);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: white;
}
.slideover-header h2 { font-size: 1.125rem; font-weight: 600; }
.slideover-header p { font-size: 0.875rem; color: var(--indigo-300); margin-top: 0.25rem; }
.slideover-close { background: none; border: none; color: var(--indigo-200); cursor: pointer; transition: color 0.15s; }
.slideover-close:hover { color: white; }
.slideover-add-projection { background: rgba(67,56,202,0.5); margin: 1rem 1.5rem; padding: 0.75rem; border-radius: var(--radius); border: 1px solid var(--indigo-600); }
.btn-proj-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    font-size: 0.875rem;
    color: var(--indigo-100);
    background: none;
    border: 1px dashed var(--indigo-400);
    border-radius: var(--radius);
    padding: 0.25rem;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-proj-add:hover { color: white; background: rgba(79,70,229,0.3); }
.proj-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.75rem; }
.proj-input { font-size: 0.75rem; border-radius: var(--radius-sm); padding: 0.375rem 0.5rem; border: none; color: var(--gray-800); outline: none; font-family: inherit; }
.proj-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.btn-ghost-light { background: none; border: none; color: var(--indigo-300); font-size: 0.75rem; cursor: pointer; padding: 0.25rem 0.5rem; }
.btn-ghost-light:hover { color: white; }
.btn-white-indigo { background: white; color: var(--indigo-700); font-size: 0.75rem; font-weight: 700; border: none; border-radius: var(--radius-sm); padding: 0.25rem 0.75rem; cursor: pointer; }
.btn-white-indigo:hover { background: var(--indigo-50); }

.slideover-search-wrap { position: relative; margin: 0 1.5rem 1rem; }
.search-icon-white { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--indigo-300); pointer-events: none; }
.proj-search-input {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    background: var(--indigo-800);
    border: none;
    border-radius: var(--radius);
    color: white;
    font-size: 0.875rem;
    outline: none;
    font-family: inherit;
}
.proj-search-input::placeholder { color: var(--indigo-300); }
.proj-search-input:focus { box-shadow: 0 0 0 2px white; }

.slideover-body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; background: var(--gray-50); }
.proj-dates-list { display: flex; flex-direction: column; gap: 2rem; }
.proj-date-group { position: relative; }
.proj-date-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
    background: rgba(249,250,251,0.97);
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}
.proj-date-header:hover { background: var(--gray-50); }
.proj-date-header.match { background: #fefce8; border-left: 4px solid #ca8a04; padding-left: 0.5rem; }
.proj-date-left { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--gray-800); text-transform: capitalize; }
.proj-date-tag-wrap { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.5rem; }
.proj-date-tag {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    border: 1px solid;
    cursor: pointer;
    transition: all 0.15s;
}
.proj-date-tag.has-tag { background: var(--violet-100); color: var(--violet-700); border-color: var(--violet-200); font-weight: 600; }
.proj-date-tag.no-tag { background: var(--gray-50); color: var(--gray-400); border-color: var(--gray-200); border-style: dashed; }
.proj-date-tag:hover { opacity: 0.7; }
.proj-date-tag-input {
    font-size: 0.625rem;
    border: 1px solid var(--indigo-300);
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
    color: var(--gray-700);
    outline: none;
    width: 6rem;
    font-family: inherit;
}
.proj-date-count { background: var(--indigo-100); color: var(--indigo-700); font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: var(--radius-full); font-weight: 700; }
.proj-solutions { display: flex; flex-direction: column; gap: 0.75rem; padding-left: 0.75rem; border-left: 2px solid var(--indigo-100); margin-left: 0.5rem; }
.proj-sol-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 0.75rem; }
.proj-sol-header { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--gray-200); padding-bottom: 0.5rem; cursor: pointer; border-radius: 0.25rem; transition: background 0.15s; }
.proj-sol-header:hover { background: var(--gray-100); }
.proj-sol-header.match { background: rgba(254,252,232,0.5); }
.proj-sol-title { font-size: 0.875rem; font-weight: 700; color: var(--gray-700); flex: 1; word-break: break-word; }
.proj-sol-count { background: var(--emerald-100); color: var(--emerald-700); font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: var(--radius-full); flex-shrink: 0; }
.proj-projects { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
@media (min-width: 768px) { .proj-projects { grid-template-columns: 1fr 1fr; } }
.proj-project-card { background: white; border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 0.5rem; box-shadow: var(--shadow-sm); }
.proj-project-card.match { border-color: #ca8a04; box-shadow: 0 0 0 1px #ca8a04; }
.proj-project-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.proj-project-name { font-size: 0.75rem; font-weight: 600; color: var(--gray-600); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-project-count { font-size: 0.625rem; background: var(--indigo-50); color: var(--indigo-600); padding: 0.125rem 0.375rem; border-radius: var(--radius-full); font-weight: 500; }
.proj-folios { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.proj-folio {
    font-size: 0.625rem;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    border: 1px solid;
    cursor: help;
    transition: all 0.15s;
    color: var(--gray-500);
    background: var(--gray-50);
    border-color: var(--gray-100);
}
.proj-folio:hover { background: var(--indigo-50); border-color: var(--indigo-200); color: var(--indigo-700); }
.proj-folio.highlight { background: #fde047; color: #713f12; border-color: #ca8a04; font-weight: 700; }
.proj-planned-only { font-size: 0.75rem; color: var(--gray-400); font-style: italic; padding: 0.5rem; border: 1px dashed var(--gray-200); border-radius: var(--radius); background: rgba(249,250,251,0.5); text-align: center; grid-column: 1/-1; }

/* Snapshot modal */
.modal-header-dark { background: var(--gray-900); color: white; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.modal-header-indigo-dark { background: var(--indigo-900); color: white; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.modal-header-left { display: flex; align-items: center; gap: 0.5rem; }
.modal-icon-sm { background: var(--indigo-500); padding: 0.5rem; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: white; }
.modal-header-dark h3 { font-size: 1.125rem; font-weight: 700; }
.modal-header-indigo-dark h3 { font-size: 1.125rem; font-weight: 700; }
.modal-subtitle { font-size: 0.75rem; color: var(--gray-400); }
.modal-close { background: none; border: none; color: var(--gray-400); cursor: pointer; transition: color 0.15s; }
.modal-close:hover { color: white; }
.modal-close-light { background: none; border: none; color: var(--indigo-200); cursor: pointer; transition: color 0.15s; }
.modal-close-light:hover { color: white; }
.modal-subbar {
    padding: 1rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.snap-count-label { font-size: 0.875rem; color: var(--gray-600); }
.snap-count-label strong { color: var(--gray-800); }
.snap-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.snap-info-bar {
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    padding: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #1e40af;
}
.snap-info-bar svg { flex-shrink: 0; margin-top: 0.125rem; }
.snap-info-bar ul { list-style: disc; padding-left: 1rem; margin-top: 0.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.modal-table-scroll { overflow: auto; flex: 1; }
.modal-body-scroll { overflow-y: auto; flex: 1; padding: 1.5rem; background: var(--gray-50); }

.snap-table { width: 100%; font-size: 0.875rem; text-align: left; border-collapse: collapse; }
.snap-table thead { background: var(--gray-100); }
.snap-table thead th { padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--gray-500); letter-spacing: 0.05em; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.snap-table tbody tr { transition: background 0.1s; }
.snap-table tbody tr:hover { background: var(--gray-50); }
.snap-table tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-100); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.snap-diff { display: flex; align-items: center; justify-content: center; gap: 0.125rem; font-size: 0.625rem; }
.diff-up { color: var(--emerald-600); }
.diff-down { color: #ef4444; }
.snap-compare-footer {
    padding: 1rem;
    background: var(--indigo-50);
    border-top: 1px solid var(--indigo-100);
    display: flex;
    justify-content: center;
}
.btn-indigo-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--indigo-600);
    color: white;
    border: none;
    padding: 0.5rem 2rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: all 0.15s;
}
.btn-indigo-pill:hover { background: var(--indigo-700); transform: scale(1.05); }

/* Snapshot Report */
.snap-report-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .snap-report-summary { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .snap-report-summary { grid-template-columns: repeat(5, 1fr); } }
.trend-card { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 1rem; box-shadow: var(--shadow-sm); }
.trend-card-title { font-size: 0.625rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.25rem; }
.trend-card-value { font-size: 1.5rem; font-weight: 700; color: var(--gray-800); margin-bottom: 0.75rem; }
.trend-card-diffs { border-top: 1px solid var(--gray-100); padding-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.trend-card-diff-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; }
.trend-card-diff-label { color: var(--gray-400); }
.trend-diff-badge { display: flex; align-items: center; gap: 0.25rem; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.625rem; }
.diff-good { background: var(--emerald-50); color: var(--emerald-600); }
.diff-bad { background: #fef2f2; color: #ef4444; }
.diff-neutral { color: var(--gray-400); font-weight: 500; font-size: 0.625rem; }

/* Trend Chart */
.trend-chart-card { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-sm); margin-bottom: 2rem; }
.trend-chart-title { font-size: 0.875rem; font-weight: 700; color: var(--gray-700); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--gray-100); padding-bottom: 0.5rem; }
.trend-chart-no-data { height: 12rem; display: flex; align-items: center; justify-content: center; color: var(--gray-400); font-size: 0.875rem; font-style: italic; background: var(--gray-50); border-radius: var(--radius); border: 1px solid var(--gray-200); }
.trend-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 0.75rem; }
.trend-legend-item { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 500; color: var(--gray-600); }
.trend-legend-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; }

/* Compare result */
.compare-box { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.compare-header { display: grid; grid-template-columns: 5fr 2fr 2fr 3fr; gap: 1rem; background: var(--gray-100); padding: 0.75rem; font-size: 0.75rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--gray-200); }
.compare-section-header { background: var(--indigo-50); border: 1px solid var(--indigo-100); border-radius: var(--radius-xl); padding: 0.75rem; margin: 0.75rem; }
.compare-section-label { font-size: 0.625rem; font-weight: 700; color: var(--indigo-400); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.compare-row {
    display: grid;
    grid-template-columns: 5fr 2fr 2fr 3fr;
    gap: 1rem;
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid var(--gray-200);
    align-items: center;
    transition: background 0.1s;
}
.compare-row:hover { background: white; }
.compare-row.highlighted { background: rgba(238,242,255,0.6); border-bottom-color: var(--indigo-100); }
.compare-row-label { font-size: 0.875rem; font-weight: 500; color: var(--gray-700); }
.compare-row-label.highlight { font-weight: 700; color: var(--indigo-900); }
.compare-row-v1 { text-align: center; font-family: monospace; font-size: 0.875rem; color: var(--gray-500); }
.compare-row-v1.highlight { color: var(--indigo-400); font-weight: 600; }
.compare-row-v2 { text-align: center; font-family: monospace; font-size: 0.875rem; font-weight: 700; color: var(--gray-800); }
.compare-row-v2.highlight { color: var(--indigo-900); font-size: 1rem; font-weight: 800; }
.compare-row-diff { text-align: right; display: flex; align-items: center; justify-content: flex-end; }
.compare-diff-badge { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; }
.compare-subheading { font-size: 0.625rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5rem 0.75rem 0.25rem; }

/* ---- MISC ---- */
.no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--gray-400);
    gap: 0.75rem;
    font-style: italic;
    font-size: 0.875rem;
}
.no-data svg { opacity: 0.2; }

input[type=checkbox] { accent-color: var(--indigo-600); cursor: pointer; }

/* ============================================================
   NEW LAYOUT SYSTEM (SIDEBAR & PANELS), LOGIN & HOMOLOGATION
   ============================================================ */
.app-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: var(--page-bg);
}

/* ─── SIDEBAR V2 ─── */
.sidebar {
    width: 220px;
    background: linear-gradient(180deg, var(--navy-950), var(--navy-900));
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 18px 12px 14px;
    border-right: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
    overflow-y: auto;
}

.sidebar-header {
    margin-bottom: 18px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.brand-logo {
    width: 23px;
    height: 23px;
    border-radius: 6px;
    background: #fff;
    position: relative;
    transform: rotate(-38deg);
    flex-shrink: 0;
}

.brand-logo::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 3px;
    border-radius: 999px;
    background: var(--blue-600);
    left: 6px;
    top: 10px;
}

.brand-logo svg { display: none; }

.brand-title {
    font-size: 13px;
    font-weight: 800;
    color: white;
    white-space: nowrap;
    letter-spacing: -0.01em;
    line-height: 1.3;
    display: block;
}
.brand-client-line {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 1px;
}
/* keep old nested selector as fallback */
.brand-title .brand-client {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.02em;
}

.brand-subtitle {
    font-size: 9px;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
    display: block;
    margin-top: 1px;
}

/* ---- Sidebar Quick Search ---- */
.sidebar-qs-section {
    padding: 4px 12px 8px;
}
.sidebar-qs-label {
    padding: 6px 0 4px !important;
}
.sidebar-qs-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 0 8px;
    height: 34px;
    transition: border-color 0.15s, background 0.15s;
}
.sidebar-qs-wrap:focus-within {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.28);
}
.sidebar-qs-icon {
    flex-shrink: 0;
    opacity: 0.5;
    color: white;
}
.sidebar-qs-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: white;
    font-size: 12px;
    font-family: inherit;
    placeholder-color: rgba(255,255,255,0.35);
}
.sidebar-qs-input::placeholder {
    color: rgba(255,255,255,0.35);
}
.sidebar-qs-btn {
    flex-shrink: 0;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 5px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.sidebar-qs-btn:hover {
    background: rgba(255,255,255,0.22);
    color: white;
}

/* ---- Resumen standalone button (entre qs y nav) ---- */
.sidebar-resumen-wrap {
    padding: 6px 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 2px;
}
.sidebar-resumen-wrap .side-menu-btn {
    width: 100%;
}


.sidebar-logout-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
    margin-bottom: 2px;
}
.sidebar-logout-link:hover {
    background: rgba(239,68,68,0.12);
    color: #FCA5A5;
}

.sidebar-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
}

/* Etiqueta de sección principal */
/* Etiqueta de sección principal */
.nav-section-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    padding: 10px 12px 4px;
    user-select: none;
}

/* Toggle colapsable de sección */
.nav-section-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 12px 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    user-select: none;
    transition: color 0.15s;
}
.nav-section-toggle:hover {
    color: rgba(255,255,255,0.55);
}
.nav-section-toggle-label {
    flex: 1;
    text-align: left;
}
.nav-toggle-chevron {
    flex-shrink: 0;
    transition: transform 0.22s ease;
    opacity: 0.6;
}
.nav-section-toggle[aria-expanded="true"] .nav-toggle-chevron {
    transform: rotate(180deg);
}

/* Grupo de ítems bajo sección colapsable */
.nav-section-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.28s ease, opacity 0.2s ease;
    opacity: 1;
    padding-left: 10px;
    border-left: 2px solid rgba(255,255,255,0.06);
    margin-left: 12px;
    margin-right: 4px;
}
.nav-section-collapsed {
    max-height: 0 !important;
    opacity: 0;
    pointer-events: none;
}


/* Sub-etiqueta tipo "Tickets" dentro de Gestión */
.nav-subsection-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
    padding: 8px 12px 2px 28px;
    user-select: none;
}

/* Línea divisora entre secciones */
.nav-section-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 10px 12px;
}

/* Botones deshabilitados (Reportes, Configuración) */
.nav-btn-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Badge "Pronto" en ítems no disponibles */
.nav-badge-soon {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.45);
    border-radius: 4px;
    padding: 2px 5px;
}


.side-menu-btn {
    min-height: 40px;
    height: auto;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.78);
    font-size: 13.5px;
    font-weight: 600;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.side-menu-btn svg {
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.15s;
    width: 17px;
    height: 17px;
}

.side-menu-btn:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
}

.side-menu-btn:hover svg { opacity: 1; }

.side-menu-btn.active {
    background: rgba(99, 153, 255, 0.15);
    color: white;
    border-left: 3px solid rgba(99, 153, 255, 0.85);
    padding-left: 13px; /* compensate for the 3px border */
    box-shadow: none;
}

.side-menu-btn.active svg { opacity: 1; color: rgba(147, 186, 255, 1); }

.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 10px;
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #F7C8A7 0 28%, transparent 29%),
                radial-gradient(circle at 50% 43%, #2F1F1E 0 36%, transparent 37%),
                linear-gradient(135deg, #F7D1B5, #D99A6C);
    border: 2px solid rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar svg { display: none; }

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

.user-name {
    font-size: 10px;
    font-weight: 700;
    color: white;
    line-height: 1.1;
}

.user-role {
    font-size: 8px;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
    margin-top: 2px;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 10px;
    margin-top: auto;
}

.logout-btn {
    color: rgba(239,68,68,0.85) !important;
    font-size: 10px !important;
}
.logout-btn svg { color: rgba(239,68,68,0.85) !important; }
.logout-btn:hover { background: rgba(239,68,68,0.10) !important; }

.sidebar-version {
    font-size: 9px;
    color: rgba(255,255,255,0.25);
    font-family: monospace;
    text-align: center;
    margin-top: 6px;
}

/* ─── MAIN PANEL & UNIFIED HEADER V2 ─── */
.main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface-soft);
}

.unified-header {
    background: var(--surface);
    width: 85vw;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    border-bottom: 1px solid rgba(232,237,245,0.65);
    position: sticky;
    top: 0;
    z-index: 90;
    box-shadow: 0 1px 4px rgba(15,35,70,0.04);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.rs-sync-header-btn {
    flex-shrink: 0;
}

.module-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-strong);
    letter-spacing: -0.2px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.header-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #6366F1;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: 20px;
    padding: 2px 10px;
    letter-spacing: 0;
    line-height: 1.4;
    min-width: 28px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}


.profile-header-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 40px;
    padding: 0.3rem 0.75rem 0.3rem 0.4rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.profile-header-card:hover {
    background: rgba(99,102,241,0.14);
    border-color: rgba(99,102,241,0.35);
    box-shadow: 0 2px 10px rgba(99,102,241,0.15);
}

.profile-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(99,102,241,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-700);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- SYNC BELL WRAP ---- */
.sync-bell-wrap {
    position: relative;
}

.notifications-bell {
    position: relative;
    cursor: pointer;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}

.notifications-bell:hover {
    color: var(--indigo-600);
    background: rgba(99,102,241,0.08);
}

.bell-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #EF4444;
    color: #fff;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    padding: 0 3px;
    border: 1.5px solid #fff;
    letter-spacing: -0.3px;
    transition: background 0.3s;
}

.bell-badge.warn  { background: #F59E0B; }
.bell-badge.ok    { background: #10B981; }
.bell-badge.ai-pulse {
    background: #6366F1 !important;
    animation: aiBellPulse 0.6s ease 3;
}
@keyframes aiBellPulse {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.35); }
}

/* ---- SYNC BELL TOOLTIP ---- */
.sync-bell-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: #fff;
    border: 1px solid #E0E5EF;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(7,27,61,0.16), 0 4px 14px rgba(7,27,61,0.08);
    z-index: 9999;
    overflow: hidden;
    animation: sbtSlideIn 0.18s cubic-bezier(.34,1.56,.64,1);
}

.sync-bell-tooltip.open { display: block; }

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

.sbt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px 11px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #374151;
    border-bottom: 1px solid #F0F2F7;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sbt-header svg { color: var(--indigo-600); flex-shrink: 0; }

.sbt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 16px;
    gap: 10px;
}

.sbt-label {
    font-size: 0.78rem;
    color: #6B7280;
    white-space: nowrap;
}

.sbt-val {
    font-size: 0.78rem;
    font-weight: 600;
    color: #111827;
    text-align: right;
    white-space: nowrap;
}

.sbt-elapsed {
    font-size: 0.82rem;
    font-weight: 700;
}

.sbt-elapsed.ok   { color: #10B981; }
.sbt-elapsed.warn { color: #F59E0B; }
.sbt-elapsed.crit { color: #EF4444; }

.sbt-footer {
    margin: 6px 12px 12px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #F0FDF4;
    color: #059669;
    text-align: center;
}

.sbt-footer.warn {
    background: #FFFBEB;
    color: #D97706;
}

.sbt-footer.crit {
    background: #FEF2F2;
    color: #DC2626;
}

.sbt-divider {
    height: 1px;
    background: #F0F2F7;
    margin: 6px 0;
}

.ai-bell-log {
    padding: 6px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
}

.ai-bell-log .ai-bell-empty {
    font-size: 0.73rem;
    color: #9CA3AF;
    text-align: center;
    padding: 4px 0;
}

.ai-bell-event {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.74rem;
    color: #374151;
    line-height: 1.45;
}

.ai-bell-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}

.ai-bell-dot.start  { background: #6366F1; }
.ai-bell-dot.done   { background: #10B981; }
.ai-bell-dot.error  { background: #EF4444; }

.ai-bell-time {
    color: #9CA3AF;
    font-size: 0.68rem;
    white-space: nowrap;
}

.header-divider {
    width: 1px;
    height: 1.25rem;
    background: var(--border-soft);
}

.header-actions-group {
    display: flex;
    gap: 6px;
}

.header-action-icon {
    background: white;
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

.header-action-icon:hover {
    border-color: var(--border-input);
    color: var(--text-main);
    background: var(--surface-muted);
}

/* ─── KPI CARDS V2 ─── */
.kpi-grid-sm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

.kpi-card {
    min-height: 82px;
    border-radius: var(--radius-lg);
    background: transparent;
    border: none;
    box-shadow: none;
    display: grid;
    grid-template-columns: 1fr 46px;
    gap: 12px;
    align-items: center;
    padding: 15px;
    transition: none;
}

.kpi-card:hover {
    box-shadow: none;
}

.kpi-card-content {
    display: flex;
    flex-direction: column;
}

.kpi-label {
    font-size: var(--fs-sm);
    color: var(--text-main);
    font-weight: 700;
    margin-bottom: 3px;
}

.kpi-value {
    font-size: 30px;
    line-height: 1;
    color: var(--text-strong);
    font-weight: 800;
    letter-spacing: -0.8px;
}

.kpi-trend {
    font-size: var(--fs-xxs);
    font-weight: 700;
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 3px;
}

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

.kpi-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-kpi-blue  { background: var(--blue-50); color: var(--blue-600); }
.bg-kpi-orange { background: var(--warning-soft); color: var(--warning); }
.bg-kpi-green { background: var(--success-soft); color: var(--success); }
.bg-kpi-red   { background: var(--danger-soft); color: var(--danger); }

/* ─── DASHBOARD LAYOUT V2 ─── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.78fr 1.1fr;
    gap: 14px;
    margin-bottom: 2rem;
}

@media (max-width: 1200px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Module view: always fills main-panel width */
.module-view-section {
    padding: 20px 10px 18px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* Table card: always 100% width, no shrink */
.table-card {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

/* Table: always fills its container */
#tickets-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Column widths: Folio | Fecha | Descripción | Contacto/Área | Categoría | Acciones */
#tickets-table th:nth-child(1) { width: 76px;  min-width: 76px; }   /* #Folio */
#tickets-table th:nth-child(2) { width: 120px; min-width: 115px; } /* Fecha — full '23 Jun 2026' */
#tickets-table th:nth-child(3) { width: auto; }                     /* Descripción */
#tickets-table th:nth-child(4) { width: 19%; }                      /* Contacto/Área */
#tickets-table th:nth-child(5) { width: 13%; }                      /* Categoría */
#tickets-table th:nth-child(6) { width: 110px; min-width: 100px; } /* Acciones */


/* Description th: header padding matches td content */
#table-head th:nth-child(3) {
    overflow: hidden;
    white-space: normal;
    padding: 0 14px;   /* match td left/right so header aligns with content */
}
/* Description td: padding:0 — inner .desc-clamp owns it */
#table-body td:nth-child(3) {
    overflow: hidden;
    white-space: normal;
    padding: 0;
}

/* Fecha creación td */
#table-head th:nth-child(2),
#table-body td:nth-child(2) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 2-line clamp — NO padding here, padding lives on the td */
.desc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: 1.5;
    max-height: 3em;
    padding: 0;
    width: 100%;
    font-size: var(--fs-body);
    color: var(--text-main);
}

/* td-title: full column width, 2-line clamp */
.td-title {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    font-weight: 500;
    color: var(--text-main);
    max-width: none;
    pointer-events: none;
}

/* Stacked contact cell */
.td-contact-name {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.td-contact-area {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* ─── CHART CARDS V2 ─── */
.chart-card {
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-soft);
    padding: 15px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
}

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

.chart-title {
    font-size: var(--fs-base);
    font-weight: 800;
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: 6px;
}

.chart-controls select,
.chart-select {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--fs-xxs);
    font-weight: 600;
    outline: none;
}

.chart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Donut layout side-by-side */
.donut-content-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: 1;
}

.donut-chart-container-mini {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.donut-legend-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.donut-legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    transition: background 0.1s;
}

.donut-legend-row:hover {
    background: #f8fafc;
}

.donut-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.donut-name {
    font-weight: 500;
    color: #475569;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.donut-percentage {
    font-weight: 700;
    color: #0f172a;
}

.donut-count {
    color: #94a3b8;
    font-size: 0.7rem;
    width: 1.5rem;
    text-align: right;
}

/* Recent updates style */
.recent-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.recent-ticket-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    background: #f8fafc;
    border-radius: var(--radius-lg);
    border: 1px solid #f1f5f9;
    transition: all 0.15s;
    cursor: pointer;
}

.recent-ticket-item:hover {
    background: #edf2f7;
    border-color: #e2e8f0;
}

.recent-ticket-left {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
}

.recent-ticket-meta {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
}

.recent-ticket-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-ticket-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.recent-ticket-time {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
}

/* --- BADGES HOMOLOGADOS --- */
.prioridad-alta {
    background: #fef2f2;
    color: #ef4444;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.prioridad-media {
    background: #fff7ed;
    color: #f97316;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.prioridad-baja {
    background: #f0fdf4;
    color: #16a34a;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.estado-abierto {
    background: #e0f2fe;
    color: #0284c7;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.estado-pendiente {
    background: #fef3c7;
    color: #d97706;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.estado-progreso {
    background: #e0e7ff;
    color: #4f46e5;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.estado-cerrado {
    background: #d1fae5;
    color: #059669;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.estado-resuelto {
    background: #ecfdf5;
    color: #10b981;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.estado-documentacion {
    background: #f3e8ff;
    color: #7e22ce;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* --- TICKET DETAIL MODAL / DRAWER --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.modal-box {
    background: white;
    border-radius: var(--radius-xl);
    width: 100%;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-md {
    max-width: 600px;
}

.modal-header-indigo {
    background: #0b1329;
    padding: 1.25rem 1.5rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-icon-circle {
    background: rgba(255, 255, 255, 0.1);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-header-indigo h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-close-light:hover {
    opacity: 0.8;
}

.modal-form {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
}

.form-input {
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    padding: 0.625rem 0.75rem;
    font-size: 0.85rem;
    color: #0f172a;
    outline: none;
    background: #f8fafc;
    transition: border-color 0.15s, background 0.15s;
    width: 100%;
}

.form-input:focus {
    border-color: #0066ff;
    background: white;
}

.form-input:disabled {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.btn-ghost {
    background: transparent;
    border: 1px solid #e2e8f0;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-ghost:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.btn-primary {
    background: #0066ff;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 102, 255, 0.2);
    transition: all 0.15s;
}

.btn-primary:hover {
    background: #0052cc;
    box-shadow: 0 6px 14px rgba(0, 102, 255, 0.3);
}
/* ═══════════════════════════════════════════════════════════════════
   LOGIN SCREEN — Gestión de Tickets SAIMONTECH MA
   Premium SaaS 2-column layout
═══════════════════════════════════════════════════════════════════ */

/* ── Root ── */
.ls-root {
    position: fixed;
    inset: 0;
    display: flex;
    min-height: 100vh;
    width: 100%;
    z-index: 99999;
    font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
    overflow: hidden;
}

/* ══════════════════════════════════════
   LEFT PANEL
══════════════════════════════════════ */
.ls-left {
    width: 60%;
    flex-shrink: 0;
    background: #071228;
    position: relative;
    overflow: hidden;
    perspective: 1200px;
    perspective-origin: 50% 50%;
}
.ls-left::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/static/img/login-img.png") no-repeat center center / 100% 100%;
    animation: ls-img-zoom 18s ease-in-out infinite alternate;
    will-change: transform;
    transform-origin: center center;
}
@keyframes ls-img-zoom {
    from { transform: scale(1)    rotateY(0deg)  rotateX(0deg); }
    to   { transform: scale(1.08) rotateY(-6deg) rotateX(3deg); }
}


/* ── Brand ── */
.ls-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
}

.ls-brand-logo {
    width: 46px; height: 46px;
    border-radius: 11px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(29,99,255,0.5);
}

.ls-brand-text {
    display: flex;
    align-items: baseline;
}

.ls-brand-main {
    font-size: 21px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.5px;
}

.ls-brand-ma {
    font-size: 21px;
    font-weight: 800;
    color: #4EA1FF;
    letter-spacing: 0.5px;
}

/* Decorative lines */
.ls-deco-lines {
    display: flex;
    gap: 18px;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.ls-deco-w, .ls-deco-b {
    display: block;
    height: 2px;
    width: 56px;
    border-radius: 2px;
}

.ls-deco-w { background: rgba(255,255,255,0.65); }
.ls-deco-b { background: #1D63FF; }

/* ── Headline ── */
.ls-headline {
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.ls-h-main {
    font-size: 52px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: -1.2px;
    margin: 0 0 14px;
}

.ls-h-sub {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255,255,255,0.78);
    line-height: 1.6;
    max-width: 400px;
    margin: 0;
}

/* ══════════════════════════════════════
   DASHBOARD MOCKUP
══════════════════════════════════════ */
.ls-mockup {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    margin-bottom: 24px;
}

/* Shared card style */
.ls-mock-card {
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    padding: 14px 16px;
}

/* Resumen general section title */
.ls-mock-section-title {
    font-size: 10px;
    font-weight: 600;
    color: #6D7B99;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* KPI row */
.ls-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ls-kpi {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #FAFBFD;
    border: 1px solid #EEF2F8;
    border-radius: 12px;
    padding: 8px 10px;
}

.ls-kpi-icon-wrap {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ls-kpi-red    .ls-kpi-icon-wrap { background: rgba(243,91,91,0.12);  color: #F35B5B; }
.ls-kpi-yellow .ls-kpi-icon-wrap { background: rgba(244,182,63,0.12); color: #F4B63F; }
.ls-kpi-green  .ls-kpi-icon-wrap { background: rgba(39,194,106,0.12); color: #27C26A; }

.ls-kpi-lbl {
    font-size: 8.5px;
    color: #9CA3AF;
    font-weight: 500;
    line-height: 1.2;
}

.ls-kpi-num {
    font-size: 20px;
    font-weight: 800;
    color: #0F1F4A;
    line-height: 1;
}

/* Bottom cards row */
.ls-mock-bottom {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

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

.ls-mock-card-title {
    font-size: 9.5px;
    font-weight: 700;
    color: #0F1F4A;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}

/* Donut chart */
.ls-chart-area {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.ls-donut-wrap { flex-shrink: 0; }

.ls-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ls-leg {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 8.5px;
    color: #6D7B99;
}

.ls-leg span {
    width: 7px; height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ls-leg b { color: #0F1F4A; margin-left: 2px; }

/* Ticket list */
.ls-tkt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid #F3F4F6;
}
.ls-tkt:last-child { border-bottom: none; }

.ls-tkt-f {
    font-size: 8.5px;
    font-weight: 700;
    color: #9CA3AF;
    width: 40px;
    flex-shrink: 0;
}

.ls-tkt-d {
    font-size: 8.5px;
    color: #374151;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ls-badge {
    font-size: 7.5px;
    font-weight: 700;
    border-radius: 5px;
    padding: 2px 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

.ls-b-bug  { background: rgba(243,91,91,0.12);  color: #D63B3B; }
.ls-b-req  { background: rgba(244,182,63,0.12); color: #B07000; }
.ls-b-cfg  { background: rgba(29,99,255,0.10);  color: #1D63FF; }

/* ══════════════════════════════════════
   BENEFITS
══════════════════════════════════════ */
.ls-benefits {
    display: flex;
    gap: 0;
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 18px;
}

.ls-benefit {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-right: 14px;
}

.ls-ben-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(29,99,255,0.22);
    border: 1px solid rgba(78,161,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ls-ben-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 3px;
}

.ls-ben-desc {
    font-size: 10px;
    color: rgba(255,255,255,0.62);
    line-height: 1.5;
}

/* ══════════════════════════════════════
   RIGHT PANEL
══════════════════════════════════════ */
.ls-right {
    width: 40%;
    flex-shrink: 0;
    background: #F7F9FC;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 40px 40px;
    position: relative;
}

/* ── Auth card ── */
.ls-auth-card {
    width: 100%;
    max-width: 500px;
    background: #FFFFFF;
    border: 1px solid #E7ECF4;
    border-radius: 30px;
    padding: 52px 52px 44px;
    box-shadow: 0 12px 48px rgba(14,43,102,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ── Logo circle ── */
.ls-auth-logo {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EAF1FF 0%, #D4E5FF 100%);
    border: 1.5px solid #B8D0F8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(29,99,255,0.12);
}

/* ── Titles ── */
.ls-auth-title {
    font-size: 44px;
    font-weight: 800;
    color: #0F1F4A;
    letter-spacing: -1px;
    line-height: 1.05;
    margin: 0 0 8px;
}

.ls-auth-sub {
    font-size: 18px;
    font-weight: 600;
    color: #0F1F4A;
    line-height: 1.4;
    margin: 0 0 10px;
}

.ls-auth-sub span {
    color: #1D63FF;
    font-weight: 700;
}

.ls-auth-hint {
    font-size: 15px;
    font-weight: 400;
    color: #6D7B99;
    margin: 0 0 30px;
}

/* ── Alerts ── */
.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 14px;
    width: 100%;
    text-align: left;
}

.login-alert svg { flex-shrink: 0; margin-top: 1px; }
.login-alert-error  { background: #FEF2F2; border: 1px solid #FECACA; color: #DC2626; }
.login-alert-warning { background: #FFFBEB; border: 1px solid #FDE68A; color: #D97706; }

/* ── Google button ── */
.btn-google-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 58px;
    background: #FFFFFF;
    color: #12213F;
    border: 1.5px solid #DCE5F3;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: -0.1px;
    box-shadow: 0 2px 8px rgba(14,43,102,0.07);
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}

.btn-google-signin:hover {
    background: #F7F9FC;
    box-shadow: 0 6px 20px rgba(14,43,102,0.13);
    transform: translateY(-2px);
}

.btn-google-signin:active {
    transform: translateY(0) scale(0.99);
    background: #EEF3FB;
}

/* ── Microcopy ── */
.ls-auth-micro {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    color: #7A88A8;
    line-height: 1.5;
}

/* ── Footer ── */
.ls-auth-footer {
    position: absolute;
    bottom: 24px;
    left: 0; right: 0;
    text-align: center;
    font-size: 13px;
    color: #8A95AE;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1280px) {
    .ls-left  { padding: 36px 40px 28px; }
    .ls-h-main { font-size: 42px; }
    .ls-right { width: 40%; }
    .ls-auth-card { padding: 44px 40px; }
    .ls-auth-title { font-size: 38px; }
}

@media (max-width: 1024px) {
    .ls-h-main { font-size: 34px; }
    .ls-h-sub  { font-size: 14px; }
    .ls-right  { width: 420px; flex-shrink: 0; }
    .ls-auth-title { font-size: 32px; }
    .ls-auth-sub   { font-size: 16px; }
}

@media (max-width: 768px) {
    .ls-root { flex-direction: column; overflow-y: auto; height: auto; }
    .ls-left { flex: none; padding: 28px 24px 20px; }
    .ls-h-main { font-size: 30px; }
    .ls-mockup { display: none; }
    .ls-benefits { display: none; }
    .ls-right { width: 100%; padding: 36px 20px 56px; min-height: 0; }
    .ls-auth-card { padding: 36px 24px; border-radius: 22px; }
    .ls-auth-title { font-size: 32px; }
}

/* --- RESPONSIVE APP OVERRIDES --- */
@media (max-width: 768px) {
    .app-layout {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        padding: 1rem;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .sidebar-menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem;
        margin: 1rem 0;
    }
    .side-menu-btn {
        width: auto;
        padding: 0.5rem 0.75rem;
        font-size: 13px;
    }
    .sidebar-brand {
        justify-content: center;
    }
    .sidebar-footer {
        display: none;
    }
}

/* ============================================================
   V2 BAR CHART (CSS puro)
   ============================================================ */
.bar-chart-container {
    display: grid;
    grid-template-columns: 26px 1fr;
    height: 160px;
    gap: 0;
}

.y-axis-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 8px;
    color: var(--text-soft);
    font-size: 9px;
    padding-bottom: 18px;
    padding-top: 2px;
}

.bars-area {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: flex-end;
    gap: 12px;
    border-left: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 8px 8px 18px;
    position: relative;
}

.bars-area::before {
    content: "";
    position: absolute;
    inset: 8px 8px 18px 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 30px,
        rgba(232,237,245,0.65) 31px
    );
    pointer-events: none;
}

.bar-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bar-fill {
    width: 28px;
    display: block;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(180deg, #6FA5FF, var(--blue-600));
    position: relative;
    z-index: 2;
    transition: opacity 0.15s;
}

.bar-fill:hover { opacity: 0.85; }

.bar-label-top {
    position: absolute;
    bottom: 100%;
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}

.bar-label-bottom {
    position: absolute;
    bottom: -16px;
    white-space: nowrap;
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 600;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}

/* ============================================================
   V2 DONUT CHART
   ============================================================ */
.donut-content-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 13px;
    align-items: center;
    flex: 1;
}

.donut-chart-container-mini {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.donut-inner-text {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.donut-inner-text small {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 700;
}

.donut-inner-text strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-strong);
    line-height: 1;
}

.donut-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.donut-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 9px;
    color: var(--text-main);
    line-height: 1.2;
    font-weight: 600;
}

.donut-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: 2px;
}

.donut-dot.blue   { background: var(--blue-600); }
.donut-dot.yellow { background: var(--warning); }
.donut-dot.purple { background: var(--purple); }
.donut-dot.gray   { background: #B8C2D4; }
.donut-dot.green  { background: var(--success); }
.donut-dot.red    { background: var(--danger); }

.donut-legend-pct {
    display: block;
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 2px;
}

/* ============================================================
   V2 ACTIVITY / RECENT TICKETS
   ============================================================ */
.recent-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.activity-row {
    display: grid;
    grid-template-columns: 60px 1fr 54px 68px;
    gap: 8px;
    align-items: center;
    font-size: 10px;
    min-height: 22px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-light);
}
.activity-row:last-child { border-bottom: none; }

.activity-row strong {
    color: var(--text-main);
    font-weight: 800;
    font-size: 10px;
}

.activity-row span {
    color: #36455B;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
}

.activity-row time {
    color: var(--text-soft);
    font-weight: 600;
    white-space: nowrap;
    font-size: 9px;
}

.activity-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--blue-600);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}
.activity-link:hover { text-decoration: underline; }

/* ============================================================
   V2 BADGES / STATUS CHIPS
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

/* Priority badges */
.badge-prioridad-alta,
.prioridad-alta    { background: var(--danger-soft); color: var(--danger-dark); }
.badge-prioridad-media,
.prioridad-media   { background: var(--warning-soft); color: var(--warning-dark); }
.badge-prioridad-baja,
.prioridad-baja    { background: var(--success-soft); color: var(--success-dark); }

/* Status badges */
.badge-abierto,
.estado-abierto        { background: var(--blue-50); color: var(--blue-600); }
.badge-progreso,
.estado-progreso       { background: var(--warning-soft); color: var(--warning-dark); }
.badge-documentacion,
.estado-documentacion  { background: var(--purple-soft); color: var(--purple-dark); }
.badge-cerrado,
.estado-cerrado        { background: var(--gray-status-soft); color: var(--text-muted); }
.badge-resuelto,
.estado-resuelto       { background: var(--success-soft); color: var(--success-dark); }

/* Generic semantic badges */
.badge-danger      { background: var(--danger-soft); color: var(--danger); }
.badge-warning     { background: var(--warning-soft); color: var(--warning-dark); }
.badge-success     { background: var(--success-soft); color: var(--success-dark); }
.badge-info, .badge-blue-soft { background: var(--blue-50); color: var(--blue-600); }
.badge-purple      { background: var(--purple-soft); color: var(--purple-dark); }

/* ── Category badges: each category gets a unique, distinct color ── */
.cat-badge-bug     { background: #FEE2E2; color: #B91C1C; }  /* red — Bug */
.cat-badge-req     { background: #FEF3C7; color: #B45309; }  /* amber — Requerimiento */
.cat-badge-config  { background: #CCFBF1; color: #0F766E; }  /* teal — Conf/Capacitación */
.cat-badge-func    { background: #EDE9FE; color: #6D28D9; }  /* violet — Funcionalidad */
.cat-badge-other   { background: #F1F4F8; color: #7C8798; }

/* ── Categoría inline picker ── */
.cat-badge-clickable {
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.12s;
    user-select: none;
}
.cat-badge-clickable:hover {
    box-shadow: 0 0 0 2px currentColor;
    transform: scale(1.05);
}
.cat-chevron {
    font-size: 0.6em;
    opacity: 0.6;
    margin-left: 2px;
    vertical-align: middle;
}
.cat-inline-popover {
    z-index: 99999;
    background: var(--surface, #fff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.08);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 170px;
    animation: catPopIn 0.18s cubic-bezier(.34,1.56,.64,1);
}
.cat-pop-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #94a3b8);
    padding: 0 2px 4px;
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    margin-bottom: 2px;
}
@keyframes catPopIn {
    from { opacity: 0; transform: scale(0.92) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.cat-pop-option {
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: transform 0.1s, box-shadow 0.1s;
    border-radius: 6px;
    display: block;
}
.cat-pop-option:hover {
    transform: scale(1.03);
    box-shadow: 0 0 0 2px currentColor;
}
.cat-pop-active {
    box-shadow: 0 0 0 2px currentColor;
    font-weight: 700;
}
/* FILTER BAR - definitive single row */
.table-filter-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* search wrap */
.search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* counter */
.filter-bar-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Each filter select inside filter bar */
.table-filter-bar .filter-dropdown {
    display: block;
    visibility: visible;
    height: 34px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C8798' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    min-width: 100px;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.kpi-card {
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.kpi-clickable { cursor: pointer; transition: all 0.2s; }
.kpi-card:hover, .kpi-clickable:hover { background: transparent; border: none; box-shadow: none; }
.table-filter-bar .filter-dropdown:focus  { outline: none; border-color: var(--blue-600); }
.table-filter-bar .filter-dropdown.has-value { border-color: var(--blue-600); background-color: var(--blue-50); color: var(--blue-700); }
.filter-area-main { min-width: 150px !important; border-color: var(--blue-200); }

/* Rows - flatten into single line */
.filter-bar-row1, .filter-bar-row2 { display: contents; }
.filter-bar-label, .btn-clear-filters { display: none !important; }
.filter-dropdowns { display: contents; }
/* ── SORTABLE TH ── */
.th-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.th-sortable { cursor: pointer; }
.th-sort-active { color: var(--text-muted); } /* mismo color que el resto — sólo el flechita lo distingue */
#table-head th.th-filter:hover { background: var(--blue-50); }


/* ============================================================
   V2 TABLE STYLES
   ============================================================ */
.table-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.table-scroll {
    overflow-x: auto;
}

.table-scroll table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: var(--fs-body);
}

.table-scroll th {
    text-align: left;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
    background: var(--surface-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.table-scroll td {
    color: var(--text-main);
    font-size: var(--fs-body);
    font-weight: 500;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.table-scroll tbody tr:last-child td { border-bottom: 0; }

.table-scroll tbody tr:hover td { background: #F8FAFF; }

.table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid var(--border-light);
    background: var(--surface-soft);
}

.table-footer span {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* ============================================================
   V2 TABLE TOOLBAR
   ============================================================ */
.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    flex-wrap: wrap;
}

.table-tabs { display: flex; gap: 6px; }

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.tab-btn:hover { background: var(--surface-muted); color: var(--text-main); }

.tab-btn.tab-active, .tab-btn.active {
    background: var(--blue-600);
    border-color: var(--blue-600);
    color: white;
    box-shadow: 0 4px 10px rgba(21,101,247,0.18);
}

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

.search-wrap { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 10px; color: var(--text-soft); pointer-events: none; }
.search-input {
    height: 32px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    color: var(--text-main);
    outline: none;
    background: var(--surface);
    transition: border-color 0.15s;
    width: 200px;
}
.search-input:focus { border-color: var(--blue-600); }

/* ============================================================
   V2 HISTORICOS MINI KPI (history-stats)
   ============================================================ */
.history-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.history-stat {
    min-height: 64px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface);
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px;
    box-shadow: var(--shadow-soft);
}

.stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
}

.stat-icon.success { background: var(--success-soft); color: var(--success); }
.stat-icon.blue    { background: var(--blue-50); color: var(--blue-600); }

.history-stat small {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-main);
    font-weight: 700;
    margin-bottom: 2px;
}

.history-stat strong {
    display: block;
    font-size: 20px;
    line-height: 1;
    color: var(--text-strong);
    font-weight: 800;
}

.history-stat em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: var(--fs-xxs);
    color: var(--success-dark);
    font-weight: 700;
}

/* ============================================================
   V2 PROGRESS BAR (for documentation module)
   ============================================================ */
.progress-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.progress-bar-wrap {
    width: 60px;
    height: 5px;
    border-radius: 999px;
    background: #EAF0FA;
    overflow: hidden;
    flex-shrink: 0;
}

.progress-bar-fill {
    height: 100%;
    background: var(--blue-600);
    border-radius: inherit;
}

.progress-pct {
    font-style: normal;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
}

/* ============================================================
   V2 SYNC INFO BAR
   ============================================================ */
.sync-info-indicator {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sync-info-indicator .sync-time {
    color: var(--text-main);
    font-weight: 700;
    font-family: monospace;
}

/* client view toggle */
.client-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.client-view-toggle:hover { background: var(--surface-muted); color: var(--text-main); }
.client-view-toggle.client-active { background: var(--success-soft); color: var(--success-dark); border-color: var(--success); }

/* Microinteractions V2 */
.side-menu-btn:focus-visible,
.tab-btn:focus-visible,
.btn-primary-sm:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }

tbody tr:hover td { cursor: pointer; }

.primary-btn-v2, .btn-primary-sm {
    background: var(--blue-600);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: var(--shadow-button);
}
.primary-btn-v2:hover, .btn-primary-sm:hover { background: var(--blue-700); }

/* ============================================================
   V2 TABLE FILTER BAR
   ============================================================ */
.table-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    flex-wrap: nowrap;          /* never wrap — keep on one line */
}

/* Search + count block */
.search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;             /* search doesn't shrink */
}

.filter-bar-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Dropdowns in the middle — visible, flex 1 */
.filter-dropdowns {
    display: flex;
    gap: 8px;
    flex: 1;                    /* fills available space between search and actions */
    min-width: 0;
}

.filter-dropdown {
    height: 34px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C8798' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    transition: border-color 0.15s;
    min-width: 90px;
    max-width: 160px;
    flex: 1;                    /* share space equally */
}

.filter-dropdown:focus { outline: none; border-color: var(--blue-600); }
.filter-dropdown:hover { border-color: var(--blue-300); }
.filter-dropdown.has-value {
    border-color: var(--blue-600);
    background-color: var(--blue-50);
    color: var(--blue-700);
}

/* Right: actions — no shrink */
.table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* "Nuevo ticket" button */
.btn-nuevo-ticket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    background: var(--blue-600);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow-button);
    transition: background 0.15s, transform 0.1s;
}
.btn-nuevo-ticket:hover { background: var(--blue-700); transform: translateY(-1px); }
.btn-nuevo-ticket:active { transform: translateY(0); }

/* ============================================================
   V2 CATEGORY SUMMARY MINI-CARDS ROW  (redesigned)
   ============================================================ */
.cat-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 60px;
    margin-bottom: 14px;
}

/* New cat-kpi-card — matches mockup exactly */
.cat-kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1.5px solid var(--border-light);
    border-left: 3px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
    box-shadow: var(--shadow-soft);
    min-width: 0;
    position: relative;
}
.cat-kpi-card:hover {
    box-shadow: var(--shadow-card);
    border-left-color: var(--blue-400);
    transform: translateY(-1px);
}
.cat-kpi-card.cat-kpi-active {
    border-color: var(--blue-600);
    border-left-color: var(--blue-600);
    border-left-width: 4px;
    background: var(--blue-50);
    box-shadow: 0 0 0 2px rgba(21,101,247,0.12);
}
.cat-kpi-card.cat-kpi-active .cat-kpi-count {
    color: var(--blue-600);
}
.cat-kpi-card.cat-kpi-active::after {
    content: '✕';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 9px;
    color: var(--blue-600);
    font-weight: 900;
    opacity: 0.7;
}

.cat-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cat-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cat-kpi-top {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.cat-kpi-count {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-strong);
    line-height: 1;
    flex-shrink: 0;
}

.cat-kpi-name {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-kpi-prio {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

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

/* Keep old cat-summary-card as alias for backwards compat */
.cat-summary-card { display: none; }

/* ============================================================
   V2 TABLE CELL HELPERS
   ============================================================ */

/* Date cell — prominent, human-readable */
.td-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap !important;
    letter-spacing: -0.01em;
}
/* Fecha td: no overflow — always show full date */
#table-head th:nth-child(2),
#table-body td:nth-child(2) { overflow: visible; white-space: nowrap; text-overflow: clip; }
.td-folio {
    font-weight: 700;
    color: var(--text-strong);
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    letter-spacing: -0.3px;
}

.td-title {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    font-weight: 500;
    color: var(--text-main);
}

.td-date {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

/* ============================================================
   V2 TABLE PAGINATION
   ============================================================ */
.table-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-main);
    font-size: var(--fs-body);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.page-btn:hover:not(:disabled) { background: var(--blue-50); border-color: var(--blue-300); color: var(--blue-600); }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.page-btn.page-active {
    background: var(--blue-600);
    border-color: var(--blue-600);
    color: white;
    box-shadow: 0 4px 10px rgba(21,101,247,0.22);
}

.page-btn.page-nav {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

/* Update table-footer for pagination layout */
.table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    background: var(--surface-soft);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.table-footer > span {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* Badge size fix for table */
.table-scroll .badge {
    font-size: 11px;
    padding: 3px 9px;
    font-weight: 700;
    border-radius: 99px;
}

/* Prevent the search-input from being too wide in filter bar */
.table-filter-bar .search-input {
    width: 280px;
    height: 34px;
}

.table-filter-bar .search-wrap { flex-shrink: 0; }

/* Th style update for V2 table */
#table-head th {
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}

#table-body td {
    padding: 14px 14px;
    vertical-align: top;
    border-bottom: 2px solid #E8ECF2;
    font-size: var(--fs-body);
    color: var(--text-main);
}

#table-body tr:last-child td { border-bottom: 0; }

#table-body tr:hover td {
    background: #F4F7FF;
}

/* Subtle row divider reinforcement on description col td */
#table-body td:nth-child(3) {
    overflow: hidden;
    white-space: normal;
    padding: 14px 14px;   /* padding ON THE TD, not on .desc-clamp */
    border-bottom: 2px solid #E8ECF2;
    vertical-align: top;
}

/* page-size selector in table footer */
.page-size-select {
    height: 30px;
    padding: 0 24px 0 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C8798' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 6px center;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    margin-right: 12px;
}
.table-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* === FILTER-SELECT: bar selects (renamed from filter-dropdown to avoid conflict) === */
.filter-select {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    animation: none !important;
    height: 34px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C8798' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-width: 100px;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.filter-select:focus  { outline: none; border-color: var(--blue-600); }
.filter-select:hover  { border-color: var(--blue-300); }
.filter-select.has-value { border-color: var(--blue-600); background-color: var(--blue-50); color: var(--blue-700); }
.filter-area-main { min-width: 150px; border-color: var(--blue-300); color: var(--blue-600); font-weight: 700; }

/* Filter panel: pointer-events fix for collapse */
.filter-panel { pointer-events: none; }
.filter-panel-expanded { pointer-events: all; }
.filter-panel-collapsed { pointer-events: all; }

/* ═══════════════════════════════════════════════
   AREA CUSTOM SELECT — premium dropdown
═══════════════════════════════════════════════ */
.area-custom-select {
    position: relative;
    flex-shrink: 0;
}

.area-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px 0 10px;
    background: linear-gradient(135deg, #EFF6FF 0%, #F0F9FF 100%);
    border: 1.5px solid #BFDBFE;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #1E40AF;
    white-space: nowrap;
    transition: all 0.18s ease;
    box-shadow: 0 1px 3px rgba(59,130,246,0.08);
    min-width: 130px;
    max-width: 230px;
}
.area-trigger:hover {
    background: linear-gradient(135deg, #DBEAFE 0%, #E0F2FE 100%);
    border-color: #93C5FD;
    box-shadow: 0 2px 8px rgba(59,130,246,0.15);
    transform: translateY(-1px);
}
.area-trigger.is-open {
    background: linear-gradient(135deg, #DBEAFE 0%, #E0F2FE 100%);
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.area-trigger.has-value {
    background: linear-gradient(135deg, #EDE9FE 0%, #E0F2FE 100%);
    border-color: #8B5CF6;
    color: #5B21B6;
}
.area-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
    opacity: 0.6;
    flex-shrink: 0;
}
.area-trigger.is-open .area-chevron { transform: rotate(180deg); opacity: 1; }

/* Panel */
.area-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 500;
    min-width: 280px;
    max-height: 380px;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: areaDropIn 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes areaDropIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Search within panel */
.area-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid #F1F5F9;
    background: #FAFBFC;
    color: #94A3B8;
}
.area-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12px;
    font-family: inherit;
    background: transparent;
    color: #1E293B;
}
.area-search-input::placeholder { color: #CBD5E1; }

/* Options list */
.area-options-list {
    overflow-y: auto;
    padding: 6px 0;
    max-height: 310px;
}
.area-options-list::-webkit-scrollbar { width: 4px; }
.area-options-list::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 2px; }

/* Each option row */
.area-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: #374151;
    transition: background 0.1s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.area-option:hover { background: #F0F9FF; color: #1D4ED8; }
.area-option.is-selected {
    background: linear-gradient(90deg, #EFF6FF, #F0F9FF);
    color: #1E40AF;
    font-weight: 700;
}
.area-option.is-all {
    font-weight: 700;
    color: #6B7280;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 4px;
    padding-bottom: 10px;
}
.area-option.is-all:hover { color: #374151; background: #F8FAFC; }
.area-option.is-all.is-selected { color: #1E40AF; }

/* Count badge */
.area-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
    background: #F1F5F9;
    color: #64748B;
    flex-shrink: 0;
    letter-spacing: 0;
    transition: all 0.1s;
}
.area-option:hover .area-count-badge { background: #DBEAFE; color: #1D4ED8; }
.area-option.is-selected .area-count-badge { background: #DBEAFE; color: #1E40AF; }
.area-count-badge.count-high { background: #FEE2E2; color: #B91C1C; }
.area-count-badge.count-med  { background: #FEF3C7; color: #92400E; }

/* ═══════ AREA DROPDOWN TABLE LAYOUT ═══════ */

/* Panel wider than trigger - min 460px */
.area-panel {
    min-width: 460px !important;
}

/* Table-style header */
.area-table-header {
    display: grid;
    grid-template-columns: 1fr 52px 52px 52px 52px;
    align-items: center;
    padding: 8px 12px 7px;
    background: #F8FAFC;
    border-bottom: 2px solid #E2E8F0;
    position: sticky;
    top: 0;
    z-index: 2;
}
.area-table-header .area-col-name {
    font-size: 11px;
    font-weight: 800;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.area-table-header .area-col-cat {
    font-size: 10.5px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.02em;
}

/* Data rows */
.area-table-row {
    display: grid;
    grid-template-columns: 1fr 52px 52px 52px 52px;
    align-items: center;
    padding: 6px 12px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background 0.1s;
    gap: 0;
}
.area-table-row:hover { background: #F0F9FF; }
.area-table-row.is-selected { background: linear-gradient(90deg,#EFF6FF,#F0F9FF); }
.area-table-row .area-col-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: #1E293B;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 8px;
}
.area-table-row:hover .area-col-name { color: #1D4ED8; font-weight: 600; }
.area-table-row.is-selected .area-col-name { color: #1E40AF; font-weight: 700; }
.area-table-row .area-col-cat {
    display: flex;
    justify-content: center;
    align-items: center;
}
.area-cat-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* Footer */
.area-table-footer {
    border-top: 1px solid #F1F5F9;
    padding: 4px 6px;
    background: #FAFBFC;
}
.area-footer-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 8px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    transition: all 0.12s;
}
.area-footer-btn:hover { background: #F1F5F9; color: #374151; }
.area-footer-btn.is-selected,
.area-table-row.is-selected {
    background: linear-gradient(90deg, #DBEAFE 0%, #EFF6FF 100%) !important;
    border-left: 4px solid #1D4ED8 !important;
}

/* === PERMANENTLY HIDDEN: Prioridad, Estado selects + Filtros Activos panel === */
#filter-prioridad,
#filter-estado { display: none !important; }

.filter-panel { display: none !important; }

/* ═══════════════════════════════════════════
   SIDEBAR NAV BADGES  — 60/30/10 palette
   60% = dark navy sidebar
   30% = slate-blue secondary (text/border)
   10% = single warm accent (badge number)
═══════════════════════════════════════════ */
.side-menu-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden; /* belt-and-suspenders: clip if needed */
}
/* The text label shrinks before the badge — badge always visible */
.side-menu-btn .btn-label {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-menu-btn svg {
    flex-shrink: 0;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 17px;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0;
    margin-left: auto;
    flex-shrink: 0; /* never compress — always stay visible */
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    transform: scale(0.6);
    /* Glass feel on dark sidebar */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}
.nav-badge:not(:empty) {
    opacity: 1;
    transform: scale(1);
}

/* Por hacer — rosa/fucsia */
.nav-badge-active {
    background: rgba(236, 72, 153, 0.14);
    border: 1px solid rgba(236, 72, 153, 0.22);
    color: #F472B6;
}

/* Documentacion — azul */
.nav-badge-doc {
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.22);
    color: #93C5FD;
}

/* Historico — verde */
.nav-badge-hist {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.18);
    color: #6EE7B7;
}

/* Active nav item: badge pops just a little more */
.side-menu-btn.active .nav-badge-active {
    background: rgba(236, 72, 153, 0.22);
    border-color: rgba(236, 72, 153, 0.35);
    color: #F9A8D4;
}
.side-menu-btn.active .nav-badge-doc {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(59, 130, 246, 0.35);
    color: #BFDBFE;
}
.side-menu-btn.active .nav-badge-hist {
    background: rgba(16, 185, 129, 0.22);
    border-color: rgba(16, 185, 129, 0.30);
    color: #A7F3D0;
}

/* === AREA DROPDOWN: selected row prominent + deselect chip === */
.area-table-row.is-selected {
    background: linear-gradient(90deg, #DBEAFE 0%, #EFF6FF 100%) !important;
    border-left: 4px solid #1D4ED8 !important;
    padding-left: 8px !important;
    box-shadow: inset 0 0 0 1px rgba(29,78,216,0.10);
}
.area-table-row.is-selected .area-col-name {
    color: #1E3A8A !important;
    font-weight: 800 !important;
}
.area-table-row.is-selected:hover {
    background: linear-gradient(90deg, #BFDBFE 0%, #DBEAFE 100%) !important;
}
.area-table-row.is-selected .area-cat-num {
    font-weight: 900 !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

/* Deselect × chip */
.area-deselect-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #DBEAFE;
    color: #1D4ED8;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    transition: background 0.12s;
    flex-shrink: 0;
}
.area-table-row.is-selected:hover .area-deselect-chip {
    background: #BFDBFE;
}

/* === BOTON MARCAR POR DOCUMENTAR === */
.btn-mark-doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    width: 96px;
    border-radius: 12px;
    border: 2px solid #D97706;
    background: #FFFBEB;
    color: #92400E;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 2px 8px rgba(217,119,6,0.15);
}
.btn-mark-doc:hover {
    background: #FEF3C7;
    border-color: #B45309;
    box-shadow: 0 4px 14px rgba(217,119,6,0.25);
    transform: translateY(-1px);
}
.btn-mark-doc.is-marked {
    background: #D97706;
    border-color: #B45309;
    color: white;
    box-shadow: 0 4px 14px rgba(217,119,6,0.35);
}
.btn-mark-doc.is-marked:hover {
    background: #B45309;
    border-color: #92400E;
}
.doc-btn-hint {
    font-size: 9.5px;
    color: #9CA3AF;
    text-align: center;
    line-height: 1.35;
    max-width: 96px;
    transition: color 0.18s;
}
.btn-mark-doc.is-marked + * + .doc-btn-hint,
.btn-mark-doc.is-marked ~ .doc-btn-hint {
    color: #D97706;
    font-weight: 600;
}

/* === VER MAS CAMPOS === */
.btn-ver-mas {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background: transparent;
    color: #6B7280;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 2px;
}
.btn-ver-mas:hover {
    background: #F9FAFB;
    color: #374151;
    border-color: #D1D5DB;
}
.btn-ver-mas.open #icon-extra-arrow,
.btn-ver-mas.open svg {
    transform: rotate(180deg);
}

/* === BTN SEND TO DOC (actions bar) === */
.btn-send-doc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    height: 38px;
    border-radius: 8px;
    border: 1.5px solid #D97706;
    background: #FFFBEB;
    color: #92400E;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-send-doc:hover {
    background: #FEF3C7;
    border-color: #B45309;
    color: #78350F;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(217,119,6,0.2);
}
.btn-send-doc.is-marked {
    background: #D97706;
    border-color: #B45309;
    color: white;
}
.btn-send-doc.is-marked:hover {
    background: #B45309;
}

/* ============================================================
   ACTION BUTTONS — table ACCIONES column
   60% navy bg | 30% slate-blue (doc) | 10% accent red (del)
   ============================================================ */

.td-actions {
    text-align: center;
    white-space: nowrap;
    padding: 0 4px !important;  /* CRITICAL: overrides 14px padding to prevent truncation */
    vertical-align: middle;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Base icon pill button */
.act-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    position: relative;
    color: #94A3B8;
    margin: 0 2px;
}
.act-icon-btn:hover { transform: translateY(-1px); }
.act-icon-btn:active { transform: scale(0.95); }

/* Doc button — slate-blue (30% palette) */
.act-doc {
    color: #475569;
}
.act-doc:hover {
    background: #EEF2FF;
    border-color: #C7D2FE;
    color: #4338CA;
}
/* Already-documented state — amber accent */
.act-doc--done {
    color: #D97706;
    cursor: default;
}
.act-doc--done:hover {
    background: #FEF3C7;
    border-color: #FDE68A;
    color: #B45309;
    transform: none;
}

/* Devolver a pendientes — indigo/return accent */
.act-undo-doc {
    color: #475569;
}
.act-undo-doc:hover {
    background: #EDE9FE;
    border-color: #C4B5FD;
    color: #7C3AED;
}

/* Delete button — red accent (10% palette) */
.act-del {
    color: #475569;   /* visible dark slate in resting state */
}
.act-del:hover {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #DC2626;
}

/* === CSS TOOLTIP via data-tooltip === */
.act-icon-btn[data-tooltip] {
    position: relative;
}
.act-icon-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1E293B;
    color: #F1F5F9;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.act-icon-btn[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===================================================================
   MÓDULO RESUMEN — SPEC 99% PRECISION
   =================================================================== */

.resumen-module {
    padding: 0;
}

/* Grid principal: columna izquierda + panel derecho colapsable */
.rs-main-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 14px;
    align-items: start;
    transition: grid-template-columns 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-main-layout.recent-collapsed {
    grid-template-columns: 1fr 42px;
}

/* Columna izquierda: KPIs + tabla categorías */
.rs-left-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Card base */
.rs-card {
    background: #FFFFFF;
    border: 1px solid #E8EEF6;
    border-radius: 13px;
    box-shadow: 0 10px 24px rgba(20, 40, 80, .06);
}

.rs-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #071B3D;
}

.rs-card-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: #71819A;
}

/* ── NUEVO LAYOUT RESUMEN ── */

/* ── KPI header bar (sync btn arriba-derecha) ── */
.rs-kpi-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* Fila 1: 4 KPIs en línea horizontal */
.rs-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 8px;
}
.rs-kpi-cell {
    min-height: 90px;
    min-width: 0;
}

/* Barra subtítulo + sync */
.rs-sync-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.rs-sync-subtitle {
    font-size: 13px;
    color: var(--text-muted, #94A3B8);
}

/* Fila 2: tabla cat×área (izq) + recientes (der) */
.rs-main-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 14px;
    align-items: stretch;
    transition: grid-template-columns 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado colapsado: panel recientes se reduce a tab estrecho */
.rs-main-layout.recent-collapsed {
    grid-template-columns: 1fr 42px;
}

/* Panel recientes */
#rs-recent-panel {
    position: relative;
    overflow: hidden;
    transition: all 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 42px;
    padding: 0;
    cursor: pointer;
    border-radius: 14px;
}

/* Estado colapsado: fondo premium con gradiente sutil */
.rs-main-layout.recent-collapsed #rs-recent-panel {
    background: linear-gradient(
        180deg,
        rgba(99, 102, 241, 0.12) 0%,
        rgba(139, 92, 246, 0.08) 50%,
        rgba(99, 102, 241, 0.05) 100%
    );
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-left: 3px solid rgba(99, 102, 241, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 2px 12px rgba(99,102,241,0.08);
}

/* Tab vertical (visible en colapsado) */
.rs-recent-collapsed-tab {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 20px 0;
    cursor: pointer;
    user-select: none;
}

/* Ícono arriba del tab */
.rs-recent-collapsed-tab svg {
    color: rgba(139, 92, 246, 0.6);
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
}

/* Texto vertical rotado */
.rs-recent-tab-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #a78bfa 0%, #818cf8 60%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.85;
    transition: opacity 0.2s, letter-spacing 0.2s;
}

/* Punto decorativo inferior */
.rs-recent-collapsed-tab::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 6px rgba(99,102,241,0.6);
    flex-shrink: 0;
    transition: transform 0.2s, background 0.2s;
}

/* Hover */
.rs-main-layout.recent-collapsed #rs-recent-panel:hover {
    background: linear-gradient(
        180deg,
        rgba(99, 102, 241, 0.2) 0%,
        rgba(139, 92, 246, 0.15) 50%,
        rgba(99, 102, 241, 0.1) 100%
    );
    border-color: rgba(99, 102, 241, 0.55);
    border-left-color: #818cf8;
    box-shadow:
        0 0 0 1px rgba(99,102,241,0.2),
        0 4px 24px rgba(99,102,241,0.2),
        inset 0 1px 0 rgba(255,255,255,0.08);
}
.rs-main-layout.recent-collapsed #rs-recent-panel:hover .rs-recent-tab-label {
    opacity: 1;
    letter-spacing: 0.18em;
}
.rs-main-layout.recent-collapsed #rs-recent-panel:hover svg {
    color: #a78bfa;
    transform: translateY(-2px);
}
.rs-main-layout.recent-collapsed #rs-recent-panel:hover::after {
    background: #818cf8;
    box-shadow: 0 0 10px rgba(99,102,241,0.8);
    transform: scale(1.3);
}

.rs-main-layout.recent-collapsed #rs-recent-panel .rs-recent-collapsed-tab {
    display: flex;
}
.rs-main-layout.recent-collapsed #rs-recent-panel .rs-recent-inner {
    display: none;
}


/* Contenido interno del panel (estado expandido) */
.rs-recent-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
}

/* Header del panel recientes */
.rs-recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.rs-recent-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Botón pin */
.rs-pin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}
.rs-pin-btn:hover {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.4);
    color: #818cf8;
}
.rs-pin-btn.pinned {
    background: rgba(99,102,241,0.2);
    border-color: #6366f1;
    color: #818cf8;
}

.rs-main-layout > .rs-recent-card .rs-recent-list {
    flex: 1;
    overflow-y: auto;
}


/* TOP GRID (legado — por si CSS antiguo lo referencia) */
.rs-top-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 16px;
}

/* FLOW CARD */
.rs-flow-card {
    padding: 14px 18px 16px;
}


.rs-flow-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.rs-period-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #DDE6F2;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #53647D;
    cursor: pointer;
    white-space: nowrap;
}
.rs-period-btn:hover { background: #F5F7FB; }

/* FLOW ROW */
.rs-flow-row {
    display: grid;
    grid-template-columns: 1fr 36px 1fr 36px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* FLOW BOXES */
.rs-flow-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    min-height: 80px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}
.rs-flow-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.rs-flow-pending {
    background: #FFFFFF;
    border: 1px solid #E8EEF6;
    border-radius: 13px;
    box-shadow: 0 2px 8px rgba(20,40,80,.06);
    border-bottom: 3px solid #EC4899;
    transition: opacity 0.2s, box-shadow 0.2s, transform 0.15s;
}
.rs-flow-doc {
    background: #FFFFFF;
    border: 1px solid #E8EEF6;
    border-radius: 13px;
    box-shadow: 0 2px 8px rgba(20,40,80,.06);
    border-bottom: 3px solid #3B82F6;
    transition: opacity 0.2s, box-shadow 0.2s, transform 0.15s;
}
.rs-flow-hist {
    background: #FFFFFF;
    border: 1px solid #E8EEF6;
    border-radius: 13px;
    box-shadow: 0 2px 8px rgba(20,40,80,.06);
    border-bottom: 3px solid #10B981;
    transition: opacity 0.2s, box-shadow 0.2s, transform 0.15s;
}

/* Tab states */
.rs-flow-tab-active {
    border-bottom-width: 4px !important;
    box-shadow: 0 6px 20px rgba(20,40,80,0.12) !important;
    transform: translateY(-2px);
}
.rs-flow-tab-active.rs-flow-pending { background: #FFF0F8; }
.rs-flow-tab-active.rs-flow-doc     { background: #EFF6FF; }
.rs-flow-tab-active.rs-flow-hist    { background: #F0FDF4; }

.rs-flow-tab-inactive {
    opacity: 0.58;
    box-shadow: none !important;
    transform: translateY(0);
}
.rs-flow-tab-inactive:hover {
    opacity: 0.82;
    transform: translateY(-1px);
}

/* Flow icon wrapper */
.rs-flow-icon-wrap {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rs-icon-pending { background: #FCE7F3; }
.rs-icon-doc     { background: #DBEAFE; }
.rs-icon-hist    { background: #D1FAE5; }

.rs-flow-icon-inner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rs-icon-pending .rs-flow-icon-inner { background: #EC4899; }
.rs-icon-doc .rs-flow-icon-inner     { background: #3B82F6; }
.rs-icon-hist .rs-flow-icon-inner    { background: #15B86A; }

/* Flow text */
.rs-flow-text { flex: 1; min-width: 0; }

.rs-flow-num {
    font-size: 24px;
    font-weight: 800;
    color: #071B3D;
    line-height: 1.1;
}

.rs-flow-label {
    font-size: 13px;
    font-weight: 800;
    margin-top: 2px;
}
.rs-label-pending { color: #DB2777; }
.rs-label-doc     { color: #2563EB; }
.rs-label-hist    { color: #15B86A; }

.rs-flow-desc {
    font-size: 11px;
    color: #71819A;
    margin-top: 2px;
}

/* Flow Arrows */
.rs-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rs-arrow-danger  { color: #EF4444; }
.rs-arrow-success { color: #15B86A; }

/* METRICS ROW */
.rs-metrics-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rs-metric-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    min-height: 72px;
}

.rs-metric-blue {
    background: #FFFFFF;
    border: 1px solid #E8EEF6;
    border-radius: 13px;
    box-shadow: 0 2px 8px rgba(20,40,80,.06);
    border-bottom: 3px solid #94A3B8;
}
.rs-metric-amber {
    background: #FFFFFF;
    border: 1px solid #E8EEF6;
    border-radius: 13px;
    box-shadow: 0 2px 8px rgba(20,40,80,.06);
    border-bottom: 3px solid #7C3AED;
}

.rs-metric-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rs-metric-icon-blue  { background: #EEF2F7; border: 1px solid #DDE4EF; }
.rs-metric-icon-amber { background: #EEF2F7; border: 1px solid #DDE4EF; }

.rs-metric-body { flex: 1; min-width: 0; }

.rs-metric-title {
    font-size: 11px;
    font-weight: 700;
    color: #71819A;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rs-metric-value {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.rs-metric-num {
    font-size: 20px;
    font-weight: 800;
    color: #071B3D;
    line-height: 1;
}
.rs-metric-value-amber .rs-metric-num { color: #475569; }
.rs-metric-value-amber .rs-metric-unit { color: #94A3B8; }

.rs-metric-unit {
    font-size: 13px;
    font-weight: 600;
    color: #71819A;
}

.rs-metric-sub {
    font-size: 11px;
    color: #97A4B8;
    margin-top: 3px;
}

.rs-metric-folio {
    font-size: 11px;
    font-weight: 600;
    color: #53647D;
    margin-top: 3px;
}

.rs-folio-pill {
    background: #FEF9C3;
    color: #92400E;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 700;
}

.rs-metric-note {
    display: none;
}

/* RECENT CARD */
.rs-recent-card {
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    overflow: hidden;
}

.rs-recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.rs-ver-todos-btn {
    padding: 5px 12px;
    background: #EAF2FF;
    color: #1E6BFF;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.rs-ver-todos-btn:hover { background: #D6E8FF; }

.rs-recent-list { flex: 1; overflow: hidden; }

.rs-recent-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 10px 0;
    border-bottom: 1px solid #E9EEF5;
    transition: background 0.1s;
}
.rs-recent-row:last-child { border-bottom: none; }
.rs-recent-row:hover { background: #F9FAFC; border-radius: 8px; }

.rs-recent-folio {
    font-size: 13px;
    font-weight: 800;
    color: #1E6BFF;
    white-space: nowrap;
}

.rs-recent-body { min-width: 0; }

.rs-recent-desc {
    font-size: 13px;
    font-weight: 500;
    color: #071B3D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-recent-area {
    font-size: 11px;
    color: #71819A;
    margin-top: 2px;
}

.rs-recent-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.rs-recent-time {
    font-size: 11px;
    color: #97A4B8;
    white-space: nowrap;
}

/* RS Badges */
.rs-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.rs-badge-bug    { background: #FFE8E8; color: #EF4444; }
.rs-badge-req    { background: #FFF2D8; color: #D97706; }
.rs-badge-config { background: #E4F8EF; color: #059669; }
.rs-badge-func   { background: #EEE7FF; color: #7C3AED; }
.rs-badge-other  { background: #F3F4F6; color: #6B7280; }

/* CATEGORY TABLE CARD */
.rs-cat-table-card {
    overflow: hidden;
}

.rs-cat-table-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-bottom: 1px solid #E9EEF5;
    flex-wrap: wrap;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    border-radius: 13px 13px 0 0;
}



.rs-cat-table-header .rs-card-title {
    flex: 0 0 auto;
    min-width: 0;
}

/* Titulo coloreado segun tab activo */
.rs-cat-title-pending { color: #DB2777; }
.rs-cat-title-doc     { color: #2563EB; }
.rs-cat-title-hist    { color: #059669; }

/* Barra de busqueda ocupa el espacio restante */
.rs-cat-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
}

.rs-cat-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #53647D;
    font-weight: 600;
    flex-wrap: wrap;
}

.rs-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rs-legend-name {
    color: #71819A;
    font-size: 12px;
    font-weight: 500;
}

.rs-legend-count {
    font-size: 12px;
    font-weight: 800;
    background: transparent;
    opacity: 0.85;
}

.rs-legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rs-export-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #F5F7FB;
    border: 1px solid #DDE6F2;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #53647D;
    cursor: pointer;
}
.rs-export-btn:hover { background: #EEF2FF; border-color: #C7D2FE; color: #4338CA; }

.rs-cat-table-wrap {
    overflow-x: auto;
}

.rs-cat-table {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
}

.rs-cat-table thead tr {
    background: #F8FAFD;
    border-top: none;
    border-bottom: 1px solid #E9EEF5;
}

.rs-cat-table th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 800;
    color: #53647D;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
}

.rs-th-area { text-align: left; width: 220px; }
.rs-th-bug    { color: #EF4444; }
.rs-th-req    { color: #D97706; }
.rs-th-config { color: #059669; }
.rs-th-func   { color: #7C3AED; }
.rs-th-total  { color: #071B3D; }

.rs-th-cat {
    display: table-cell;
}
.rs-th-cat svg { vertical-align: middle; margin-right: 3px; }

.rs-cat-row td {
    border-bottom: 1px solid #E9EEF5;
    padding: 0 16px;
    height: 48px;
}
.rs-cat-row:last-child td { border-bottom: none; }
.rs-cat-row:hover td { background: #F9FAFC; }

.rs-td-area {
    font-size: 13px;
    font-weight: 600;
    color: #071B3D;
    text-align: left;
}

.rs-td-count { text-align: center; }

.rs-td-total {
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #071B3D;
}

/* Total row */
.rs-cat-total-row td {
    border-top: 2px solid #E9EEF5;
    background: #F8FAFD;
}
.rs-cat-total-row .rs-td-area {
    font-size: 13px;
    font-weight: 800;
    color: #071B3D;
}
.rs-cat-total-row .rs-td-total {
    font-size: 14px;
    font-weight: 900;
}

/* Count Pills */
.rs-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 28px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    padding: 0 10px;
    letter-spacing: 0.01em;
}
.rs-pill-bug {
    background: #FEE2E2;
    color: #B91C1C;
    box-shadow: 0 1px 4px rgba(239,68,68,0.18);
}
.rs-pill-bug-pulse {
    background: #FEE2E2;
    color: #B91C1C;
    animation: bug-blink 1.6s ease-in-out infinite;
}
@keyframes bug-blink {
    0%, 100% { background: #FEE2E2; color: #B91C1C; box-shadow: none; }
    50%       { background: #FECACA; color: #991B1B; box-shadow: 0 0 0 3px rgba(239,68,68,0.22); }
}
.rs-pill-req {
    background: #FEF3C7;
    color: #B45309;
    box-shadow: 0 1px 4px rgba(217,119,6,0.16);
}
.rs-pill-config {
    background: #D1FAE5;
    color: #065F46;
    box-shadow: 0 1px 4px rgba(5,150,105,0.16);
}
.rs-pill-func {
    background: #EDE9FE;
    color: #5B21B6;
    box-shadow: 0 1px 4px rgba(124,58,237,0.16);
}
.rs-pill-other {
    background: #F3F4F6;
    color: #374151;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.rs-pill-zero {
    background: transparent;
    color: #D1D5DB;
    border: none;
    box-shadow: none;
    font-weight: 500;
}

/* Buscador de área en tabla pendientes */
.rs-cat-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F8FAFD;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 5px 10px;
    flex: 1;
    max-width: 340px;
    min-width: 120px;
    transition: border-color 0.15s;
}
.rs-cat-search-wrap:focus-within {
    border-color: #94A3B8;
    background: #fff;
}
.rs-cat-search-input {
    border: none;
    background: transparent;
    font-size: 12px;
    color: #334155;
    width: 100%;
    outline: none;
    font-family: inherit;
}
.rs-cat-search-input::placeholder { color: #CBD5E1; }


/* Responsive: apila el top-grid en pantallas medianas */
@media (max-width: 1100px) {
    .rs-top-grid {
        grid-template-columns: 1fr;
    }
    .rs-flow-row {
        grid-template-columns: 1fr 28px 1fr 28px 1fr;
    }
}
/* ================================================================
   MODULE: SINCRONIZAR CGO
   ================================================================ */

.sync-module {
    padding: 0 28px 32px;
    max-width: 1100px;
}

/* Page header */
.sync-page-header {
    padding: 24px 0 18px;
    border-bottom: 1px solid #EDF0F5;
    margin-bottom: 24px;
}
.sync-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: #0F1E3C;
    margin: 0 0 4px;
}
.sync-page-subtitle {
    font-size: 13px;
    color: #71819A;
    margin: 0;
}

/* Phase container */
.sync-phase { width: 100%; }

/* Grid: drop zone left, info panel right */
.sync-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
}

/* Drop zone card */
.sync-drop-card {
    border: 2px dashed #C7D4E8;
    border-radius: 14px;
    background: #FAFCFF;
    transition: border-color 0.2s, background 0.2s;
    cursor: default;
}
.sync-drop-card.sync-drop-active,
.sync-drop-card:hover {
    border-color: #3B82F6;
    background: #EEF5FF;
}
.sync-drop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px;
    gap: 10px;
}
.sync-drop-icon {
    width: 64px;
    height: 64px;
    background: #EEF5FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.sync-drop-title {
    font-size: 14px;
    font-weight: 700;
    color: #0F1E3C;
    margin: 0;
}
.sync-drop-or {
    font-size: 12px;
    color: #94A3B8;
    margin: 0;
}
.sync-drop-hint {
    font-size: 11px;
    color: #94A3B8;
    margin: 6px 0 0;
}
.sync-select-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #2563EB;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.15s;
}
.sync-select-btn:hover { background: #1D4ED8; }

/* Info panel */
.sync-info-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sync-status-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.sync-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F8FAFD;
    border: 1px solid #E6EBF3;
    border-radius: 10px;
    padding: 14px 16px;
}
.sync-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}
.sync-stat-value {
    font-size: 16px;
    font-weight: 800;
    color: #0F1E3C;
}
.sync-cols-card {
    background: #F0F6FF;
    border: 1px solid #BFDBFE;
    border-radius: 10px;
    padding: 14px 16px;
}
.sync-cols-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1D4ED8;
    margin-bottom: 10px;
}
.sync-cols-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sync-col-pill {
    background: #fff;
    border: 1px solid #BFDBFE;
    color: #1D4ED8;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    padding: 3px 10px;
    font-family: 'JetBrains Mono', monospace, sans-serif;
}
.sync-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12px;
    color: #64748B;
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    border-radius: 8px;
    padding: 11px 14px;
    line-height: 1.5;
}

/* Preview (phase 2) */
.sync-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.sync-preview-title {
    font-size: 17px;
    font-weight: 800;
    color: #0F1E3C;
    margin: 0 0 4px;
}
.sync-preview-sub {
    font-size: 12px;
    color: #71819A;
    margin: 0;
}
.sync-btn-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #2563EB;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.15s;
}
.sync-btn-primary:hover { background: #1D4ED8; }
.sync-btn-ghost {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: 1px solid #DDE4EF;
    border-radius: 8px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.sync-btn-ghost:hover { background: #F1F5F9; }

/* Diff grid */
.sync-diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.sync-diff-col {
    border-radius: 12px;
    padding: 16px;
    min-height: 200px;
}
.sync-col-new   { background: #F0FDF4; border: 1px solid #BBF7D0; }
.sync-col-match { background: #EFF6FF; border: 1px solid #BFDBFE; }
.sync-col-close { background: #FEF2F2; border: 1px solid #FECACA; }

.sync-diff-col-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 800;
    color: #0F1E3C;
    margin-bottom: 4px;
}
.sync-diff-badge {
    font-size: 11px;
    font-weight: 800;
    border-radius: 99px;
    padding: 2px 8px;
    margin-left: 2px;
}
.sync-badge-new   { background: #DCFCE7; color: #15803D; }
.sync-badge-match { background: #DBEAFE; color: #1D4ED8; }
.sync-badge-close { background: #FEE2E2; color: #DC2626; }

.sync-diff-desc {
    font-size: 11px;
    color: #64748B;
    margin: 0 0 10px;
}
.sync-diff-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 360px;
    overflow-y: auto;
}
.sync-diff-item {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    background: rgba(255,255,255,0.7);
    border-radius: 6px;
    padding: 4px 10px;
    border-left: 3px solid #86EFAC;
}
.sync-item-match { border-left-color: #93C5FD; }
.sync-item-close { border-left-color: #FCA5A5; color: #7F1D1D; }
.sync-diff-more {
    font-size: 11px;
    color: #94A3B8;
    text-align: center;
    padding: 4px;
}

/* ---- Acceso rapido sync CGO en resumen ---- */
.rs-topbar-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.rs-sync-shortcut-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    color: #2563EB;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.rs-sync-shortcut-btn:hover {
    background: #EFF6FF;
    border-color: #93C5FD;
    box-shadow: 0 2px 8px rgba(59,130,246,0.12);
}

/* ---- Boton-link azul inline (modal freshness) ---- */
.btn-link-blue {
    background: none;
    border: none;
    padding: 0;
    color: #2563EB;
    font-weight: 700;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
}
.btn-link-blue:hover {
    color: #1d4ed8;
}

/* ============================================================
   SYNC VIEW � Homologacion spec v2 (sv-* namespace)
   ============================================================ */

/* Encabezado de vista */
.sv-intro { margin-bottom: 20px; }
.sv-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.sv-title-icon { color: #0f6bff; flex-shrink: 0; }
.sv-title {
    font-size: 24px;
    font-weight: 850;
    color: #071a3a;
    letter-spacing: -0.02em;
    margin: 0;
}
.sv-subtitle { font-size: 14px; color: #6b7890; margin: 0; }

/* KPI Grid */
.sv-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}
.sv-kpi-card {
    height: 108px;
    background: #ffffff;
    border: 1px solid #e4ebf5;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(7,26,58,0.055);
    display: flex;
    align-items: center;
    padding: 0 22px;
    gap: 16px;
}
.sv-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sv-kpi-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #9aa6ba;
    text-transform: uppercase;
}
.sv-kpi-value {
    margin-top: 3px;
    font-size: 19px;
    font-weight: 800;
    color: #071a3a;
}
.sv-kpi-caption {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7890;
}

/* Stepper */
.sv-stepper {
    display: flex;
    align-items: center;
    height: 62px;
    background: #ffffff;
    border: 1px solid #e4ebf5;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(7,26,58,0.05);
    padding: 0 28px;
    margin-bottom: 28px;
    gap: 0;
}
.sv-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px;
    height: 100%;
    border-bottom: 3px solid transparent;
    flex: 1;
}
.sv-step-active { border-bottom-color: #0f6bff; }
.sv-step-num {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d9e2f0;
    color: #31415c;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}
.sv-step-active .sv-step-num {
    background: #0f6bff;
    color: #fff;
    box-shadow: 0 6px 14px rgba(15,107,255,0.25);
}
.sv-step-label { font-size: 13px; font-weight: 600; color: #75839a; }
.sv-step-active .sv-step-label { color: #0f6bff; font-weight: 800; }
.sv-step-sep {
    flex: 0 0 32px;
    height: 1px;
    background: repeating-linear-gradient(90deg,#cbd5e1 0,#cbd5e1 4px,transparent 4px,transparent 8px);
    margin: 0 4px;
}

/* Upload section 2-col */
.sv-upload-section {
    display: grid;
    grid-template-columns: 0.42fr 0.58fr;
    gap: 24px;
    margin-bottom: 18px;
}

/* Dropzone */
.sv-dropzone {
    min-height: 300px;
    background: #ffffff;
    border: 2px dashed #8db7ff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 24px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.sv-dropzone:hover, .sv-dropzone.drag-over {
    background: #f0f6ff;
    border-color: #0f6bff;
}
.sv-dropzone.loaded {
    background: #f2fcf7;
    border: 2px solid #9ee3bd;
}
.sv-drop-icon-wrap {
    width: 78px;
    height: 78px;
    border-radius: 999px;
    background: #eaf2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.sv-drop-title {
    font-size: 17px;
    font-weight: 800;
    color: #071a3a;
    margin: 0 0 8px;
}
.sv-drop-sub { font-size: 13px; color: #8794a8; margin: 0 0 16px; }
.sv-select-btn {
    height: 42px;
    min-width: 200px;
    border-radius: 7px;
    background: linear-gradient(180deg, #217cff 0%, #0f6bff 100%);
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(15,107,255,0.24);
    transition: opacity 0.15s, transform 0.12s;
}
.sv-select-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.sv-drop-format {
    margin-top: 18px;
    font-size: 12.5px;
    color: #8390a5;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Instructions panel */
.sv-instructions-col { display: flex; flex-direction: column; gap: 14px; }

.sv-req-card {
    background: #ffffff;
    border: 1px solid #cfe1ff;
    border-radius: 12px;
    padding: 20px 22px;
}
.sv-req-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 800;
    color: #0f58dc;
    margin-bottom: 14px;
}
.sv-chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid #a9c8ff;
    background: #f5f9ff;
    color: #0f58dc;
    font-size: 12px;
    font-family: "Consolas","SFMono-Regular",monospace;
    font-weight: 700;
}

.sv-info-card {
    background: #f8f7ff;
    border: 1px solid #d9d2ff;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #68758c;
    font-size: 13.5px;
    line-height: 1.5;
}

/* Preview table card */
.sv-preview-card {
    background: #ffffff;
    border: 1px solid #e4ebf5;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(7,26,58,0.05);
    overflow: hidden;
    margin-bottom: 18px;
}
.sv-preview-header {
    height: 50px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid #e6edf7;
    font-size: 15px;
    font-weight: 800;
    color: #071a3a;
}
.sv-preview-example { font-size: 13px; font-weight: 500; color: #9aa6ba; margin-left: 4px; }

.sv-preview-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sv-preview-table thead th {
    height: 34px;
    background: #f8fafd;
    color: #66758d;
    font-size: 11.5px;
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid #e5ecf6;
    padding: 0 14px;
    white-space: nowrap;
}
.sv-preview-table tbody td {
    height: 42px;
    color: #1d2d4d;
    font-size: 12.5px;
    font-weight: 500;
    border-bottom: 1px solid #edf2f8;
    padding: 0 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sv-preview-table tbody tr:last-child td { border-bottom: none; }
.sv-col-idx { width: 40px; }
.sv-col-folio { width: 90px; }
.sv-col-date { width: 140px; }
.sv-col-desc { width: 260px; }
.sv-col-contact { width: 140px; }
.sv-col-area { width: 140px; }
.sv-col-cat { width: 120px; }
.sv-col-status { width: 100px; }
.sv-col-val { width: 120px; }

/* Aliases para nombres exactos del HTML nuevo */
.sv-col-index { width: 44px; }
.sv-col-description { width: 280px; }
.sv-col-category { width: 120px; }
.sv-col-validation { width: 130px; }

.sv-preview-table-wrap { overflow-x: auto; }
.sv-td-ellipsis { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-preview-header-icon { color: #0f6bff; flex-shrink: 0; }

/* Filas de ejemplo en tabla preview (se ocultan cuando hay datos reales) */
.sv-preview-example-row td { color: #9aa6ba !important; font-style: italic; }

/* Dropzone full-width variant */
.sv-upload-full { display: block; }
.sv-dropzone-full { min-height: 220px; position: relative; }

/* Badges */
.sv-badge-valid, .sv-badge-warn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}
.sv-badge-valid { background: #e8f8ef; color: #16a65e; }
.sv-badge-warn { background: #fff1d8; color: #d97706; }

/* Footer actions */
.sv-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding-top: 6px;
}
.sv-btn-cancel {
    height: 44px;
    min-width: 140px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #dce5f2;
    color: #071a3a;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.sv-btn-cancel:hover { background: #f5f7fb; }
.sv-btn-validate {
    height: 44px;
    min-width: 200px;
    border-radius: 8px;
    background: #dbe5f5;
    border: 1px solid #d2ddec;
    color: #91a0b6;
    font-size: 13.5px;
    font-weight: 800;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: not-allowed;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.sv-btn-validate:not([disabled]) {
    background: linear-gradient(180deg, #217cff 0%, #0f6bff 100%);
    border-color: #0f6bff;
    color: #fff;
    box-shadow: 0 8px 16px rgba(15,107,255,0.22);
    cursor: pointer;
}

/* Responsive */
@media (max-width: 1366px) {
    .sv-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .sv-upload-section { grid-template-columns: 1fr; }
}

/* Transicion suave en numero de step para feedback de paso activo */
.sv-step-num {
    transition: transform 0.2s ease, background 0.25s ease, box-shadow 0.25s ease;
}

/* Columna Otro en tabla de pendientes por area */
.rs-th-other { color: #9CA3AF !important; }

/* ============================================================
   CONFIGURACION MODULE v2 (cfg2-* namespace)
   ============================================================ */
.config-module { max-width: 820px; }

.cfg2-page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.cfg2-page-icon {
    width: 56px;
    height: 56px;
    background: #EFF6FF;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cfg2-page-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}
.cfg2-page-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* Card */
.cfg2-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(15,23,42,0.06);
    overflow: hidden;
}
.cfg2-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 28px;
}
.cfg2-card-icon {
    width: 44px;
    height: 44px;
    background: #EFF6FF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cfg2-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}
.cfg2-card-desc {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.55;
}
.cfg2-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 0;
}

/* Field block */
.cfg2-field-block {
    padding: 24px 28px;
}
.cfg2-field-label-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}
.cfg2-field-label {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
.cfg2-field-info-icon { cursor: help; display: flex; align-items: center; }
.cfg2-field-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 14px;
}

/* Input */
.cfg2-input-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid #3B82F6;
    border-radius: 9px;
    background: #fff;
    padding: 0 14px;
    height: 48px;
    gap: 10px;
    transition: box-shadow 0.15s;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
    margin-bottom: 14px;
}
.cfg2-input-wrap:focus-within {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}
.cfg2-input-icon { flex-shrink: 0; display: flex; }
.cfg2-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #1e293b;
    background: transparent;
    font-family: inherit;
}
.cfg2-input::placeholder { color: #94a3b8; }
.cfg2-input-check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Info box */
.cfg2-info-box {
    display: flex;
    gap: 10px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 9px;
    padding: 14px 16px;
    color: #1e40af;
    font-size: 13.5px;
    line-height: 1.55;
}
.cfg2-info-box p { margin: 0; }
.cfg2-info-box strong { color: #1d4ed8; }

/* Footer */
.cfg2-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    gap: 16px;
    flex-wrap: wrap;
}
.cfg2-footer-status {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cfg2-footer-status-icon {
    width: 40px;
    height: 40px;
    background: #EFF6FF;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cfg2-footer-status-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}
.cfg2-footer-status-sub {
    font-size: 12.5px;
    color: #64748b;
    margin-top: 2px;
}

/* Footer action buttons */
.cfg2-footer-actions { display: flex; gap: 12px; align-items: center; }
.cfg2-btn-cancel {
    height: 42px;
    min-width: 110px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.cfg2-btn-cancel:hover { background: #f8fafc; }
.cfg2-btn-save {
    height: 42px;
    min-width: 148px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(37,99,235,0.25);
    transition: opacity 0.15s, transform 0.12s;
}
.cfg2-btn-save:hover { opacity: 0.9; transform: translateY(-1px); }

/* ============================================================
   CONFIG TABS (cfg-tabs-nav, cfg-tab-btn, cfg-tab-panel)
   ============================================================ */
.cfg-tabs-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 22px;
    background: #F1F5F9;
    border-radius: 12px;
    padding: 5px;
}
.cfg-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: none;
    background: transparent;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.cfg-tab-btn.active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(15,23,42,0.10);
}
.cfg-tab-btn:not(.active):hover { background: rgba(255,255,255,0.6); color: #374151; }
.cfg-tab-panel { display: block; }
.cfg-tab-panel.hidden { display: none; }

/* ============================================================
   ITIL GENIUS PANEL (cfg-itil-*)
   ============================================================ */
.cfg-itil-card { border: 1px solid #C7D2FE; }
.cfg-itil-fields {
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cfg-itil-field { display: flex; align-items: baseline; gap: 10px; }
.cfg-itil-field-label {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    min-width: 160px;
    flex-shrink: 0;
}
.cfg-itil-field-value { font-size: 13.5px; color: #1e293b; font-weight: 600; word-break: break-all; }
.cfg-itil-pwd { font-family: 'Courier New',monospace; letter-spacing: 3px; color: #64748b; font-size: 15px; }
.itil-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.itil-badge-checking { background: #FFF8E6; color: #D97706; border: 1px solid #FDE68A; }
.itil-badge-ok       { background: #ECFDF5; color: #059669; border: 1px solid #6EE7B7; }
.itil-badge-error    { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
.itil-badge-unconfigured { background: #F1F5F9; color: #64748b; border: 1px solid #CBD5E1; }
.itil-agent-chip {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg,#EEF2FF,#E0E7FF);
    color: #4338CA;
    border: 1px solid #C7D2FE;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
}
.cfg-itil-test-row { padding: 14px 28px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cfg-itil-test-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 9px;
    border: 1.5px solid #6366F1;
    background: #fff;
    color: #4338CA;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s;
}
.cfg-itil-test-btn:hover { background: #EEF2FF; transform: translateY(-1px); }
.cfg-itil-test-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.cfg-itil-test-result { font-size: 13px; font-weight: 600; min-height: 20px; transition: color 0.2s; }
.cfg-itil-test-result.ok  { color: #059669; }
.cfg-itil-test-result.err { color: #DC2626; }
.cfg-itil-how { padding: 20px 28px; }
.cfg-itil-how-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 800;
    color: #4338CA;
    margin-bottom: 14px;
}
.cfg-itil-how-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cfg-itil-how-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    color: #374151;
    line-height: 1.55;
    padding: 10px 14px;
    background: #F8FAFC;
    border-radius: 9px;
    border: 1px solid #E2E8F0;
}
.cfg-itil-how-list .how-icon { font-size: 18px; flex-shrink: 0; line-height: 1.3; }
.cfg-itil-how-list strong { color: #1e293b; }
.cfg-itil-how-list code { background: #EEF2FF; color: #4338CA; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-family: 'Courier New',monospace; }
.cfg-itil-how-list em { color: #6366F1; font-style: normal; font-weight: 700; }
/* ── ITIL: Toggle llamadas al traductor ──────────────────────────────────── */
.cfg-itil-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    gap: 16px;
}
.cfg-itil-toggle-label-wrap { display: flex; flex-direction: column; gap: 4px; }
.cfg-itil-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
}
.cfg-itil-toggle-hint {
    font-size: 12px;
    color: #64748b;
    font-weight: 400;
    padding-left: 23px;
}
/* Switch button wrapper */
.itil-api-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.itil-api-toggle:hover { opacity: 0.85; }
/* Track */
.itil-toggle-track {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: #CBD5E1;
    transition: background 0.25s ease;
    display: block;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}
.itil-api-toggle-on .itil-toggle-track  { background: linear-gradient(135deg, #6366F1, #4F46E5); }
.itil-api-toggle-off .itil-toggle-track { background: #CBD5E1; }
/* Thumb */
.itil-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.itil-api-toggle-on .itil-toggle-thumb  { transform: translateX(24px); }
.itil-api-toggle-off .itil-toggle-thumb { transform: translateX(0); }
/* State label */
.itil-toggle-state-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    min-width: 28px;
    text-align: left;
    transition: color 0.2s;
}
.itil-api-toggle-on  .itil-toggle-state-label { color: #4F46E5; }
.itil-api-toggle-off .itil-toggle-state-label { color: #94A3B8; }

/* Paused banner */
.itil-paused-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 28px 0 28px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #FFF7ED, #FFFBEB);
    border: 1.5px solid #FCD34D;
    border-radius: 10px;
    color: #92400E;
    font-size: 13px;
    font-weight: 600;
    animation: banner-in 0.25s ease;
}
.itil-paused-banner.hidden { display: none !important; }
@keyframes banner-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.itil-paused-banner svg { color: #D97706; flex-shrink: 0; margin-top: 1px; }

/* Badge extra: pausado */
.itil-badge-paused { background: #FFF7ED; color: #D97706; border: 1px solid #FCD34D; }

/* Table cell extra: pausado */
.td-ai-paused {
    color: #D97706 !important;
    background: #FFF7ED;
    border: 1px solid #FCD34D;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}


/* ── ITIL: Cuota diaria de traducciones ──────────────────────────────────── */
.cfg-itil-quota-section {
    margin: 0 28px 0 28px;
    padding: 18px 0 14px 0;
    border-top: 1px solid #E2E8F0;
}
.cfg-itil-quota-header { margin-bottom: 14px; }
.cfg-itil-quota-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 4px;
}
.cfg-itil-quota-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    padding-left: 22px;
}
/* Input row */
.cfg-itil-quota-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.cfg-itil-quota-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid #C7D2FE;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s;
}
.cfg-itil-quota-input-wrap:focus-within { border-color: #6366F1; }
.cfg-itil-quota-input {
    border: none;
    outline: none;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    width: 120px;
    background: transparent;
    font-family: inherit;
}
.cfg-itil-quota-input-suffix {
    padding: 9px 12px 9px 4px;
    font-size: 12px;
    color: #6366F1;
    font-weight: 700;
    white-space: nowrap;
    background: #F5F3FF;
    border-left: 1px solid #C7D2FE;
}
.cfg-itil-quota-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 9px;
    border: 1.5px solid #6366F1;
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
}
.cfg-itil-quota-save-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.cfg-itil-quota-save-btn:active { transform: translateY(0); }
.cfg-itil-quota-save-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Meter */
.cfg-itil-quota-meter {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 18px;
}
.cfg-itil-quota-meter-labels {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.cfg-itil-quota-meter-used {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
}
.cfg-itil-quota-meter-max {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}
.cfg-itil-quota-bar-track {
    height: 8px;
    background: #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}
.cfg-itil-quota-bar-fill {
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, #6366F1, #8B5CF6);
    transition: width 0.6s cubic-bezier(.4,0,.2,1), background 0.4s;
}
/* Colores por nivel de uso */
.cfg-itil-quota-bar-fill.quota-warn { background: linear-gradient(90deg, #F59E0B, #D97706); }
.cfg-itil-quota-bar-fill.quota-full { background: linear-gradient(90deg, #EF4444, #DC2626); }

.cfg-itil-quota-meter-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.cfg-itil-quota-status-text {
    font-size: 12px;
    font-weight: 600;
    color: #059669;
}
.cfg-itil-quota-status-text.quota-warn { color: #D97706; }
.cfg-itil-quota-status-text.quota-full { color: #DC2626; }
.cfg-itil-quota-status-text.quota-unlimited { color: #6366F1; }
.cfg-itil-quota-date-label {
    font-size: 11px;
    color: #94A3B8;
    font-weight: 500;
}

/* ============================================================
   ITIL GENIUS — PANEL DE TRADUCCIÓN POR CATEGORÍA
   ============================================================ */
.cfg-itil-cat-section {
    margin-top: 22px;
    border-top: 1px solid rgba(99, 102, 241, 0.15);
    padding-top: 18px;
}

.cfg-itil-cat-header {
    margin-bottom: 14px;
}

.cfg-itil-cat-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #C7D2FE;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.cfg-itil-cat-desc {
    font-size: 12px;
    color: #64748B;
    line-height: 1.5;
}

/* ─── Tarjeta de categoría ─── */
.cfg-itil-cat-card {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 10px;
    padding: 12px 14px 10px;
    margin-bottom: 10px;
    transition: border-color 0.2s, background 0.2s;
}
.cfg-itil-cat-card:hover {
    border-color: rgba(99, 102, 241, 0.32);
    background: rgba(15, 23, 42, 0.72);
}
.cfg-itil-cat-card.cat-disabled {
    opacity: 0.6;
}

.cfg-itil-cat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.cfg-itil-cat-card-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cfg-itil-cat-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.cfg-itil-cat-name {
    font-size: 13px;
    font-weight: 600;
    color: #E2E8F0;
    white-space: nowrap;
}

.cfg-itil-cat-kpi {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 1px;
    white-space: nowrap;
}

/* Toggle de categoría (reutiliza las clases del toggle global) */
.cfg-itil-cat-toggle {
    flex-shrink: 0;
}

.cfg-itil-cat-toggle-lbl {
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}

/* ─── Barra de progreso por categoría ─── */
.cfg-itil-cat-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cfg-itil-cat-bar-track {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 99px;
    overflow: hidden;
}

.cfg-itil-cat-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #6366F1, #818CF8);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Colores de barra por categoría */
#itil-cat-bar-abiertos   { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
#itil-cat-bar-documentar { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
#itil-cat-bar-historicos { background: linear-gradient(90deg, #059669, #34D399); }
#itil-cat-bar-rechazados { background: linear-gradient(90deg, #DC2626, #F87171); }

.cfg-itil-cat-bar-pct {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    min-width: 34px;
    text-align: right;
    flex-shrink: 0;
}

/* ─── Íconos de color por categoría ─── */
.cfg-itil-cat-icon-abiertos   { filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.6)); }
.cfg-itil-cat-icon-documentar { filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.6)); }
.cfg-itil-cat-icon-historicos { filter: drop-shadow(0 0 5px rgba(5, 150, 105, 0.6)); }
.cfg-itil-cat-icon-rechazados { filter: drop-shadow(0 0 5px rgba(220, 38, 38, 0.6)); }

/* ─── Spinner de carga ─── */
.cfg-itil-cat-loading {
    text-align: center;
    font-size: 12px;
    color: #64748B;
    padding: 12px 0;
    animation: pulse-text 1.5s ease-in-out infinite;
}
@keyframes pulse-text {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

/* ============================================================
   SYNC UPLOAD: full-width dropzone + info popover
   ============================================================ */
.sv-upload-full { display: block !important; }

.sv-dropzone-full {
    width: 100%;
    min-height: 220px;
    position: relative;
}

/* Bot�n info en esquina superior derecha del dropzone */
.sv-info-btn-wrap {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
}
.sv-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #BFDBFE;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.sv-info-btn:hover { background: #DBEAFE; }

/* Popover */
.sv-info-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    background: #fff;
    border: 1.5px solid #BFDBFE;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(15,23,42,0.13);
    padding: 18px 20px;
    z-index: 100;
    animation: popover-in 0.15s ease;
}
@keyframes popover-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sv-pop-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
}
.sv-pop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}
.sv-pop-note {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.55;
    background: #F8FAFC;
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
}

/* ============================================================
   RECHAZADOS MODULE
   ============================================================ */
.nav-badge-rechazados {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FCD34D;
}

/* Bot\u00f3n rechazar (rojo suave) */
.act-rechazar {
    color: #DC2626 !important;
    border-color: transparent !important;
    background: #fff !important;
}
.act-rechazar:hover {
    background: #FEE2E2 !important;
    color: #B91C1C !important;
    border-color: transparent !important;
}

/* Bot\u00f3n restaurar (verde) */
.act-restore {
    color: #16A34A !important;
    border-color: #DCFCE7 !important;
    background: #fff !important;
}
.act-restore:hover {
    background: #DCFCE7 !important;
    color: #15803D !important;
}
/* ============================================================
   MÓDULO USUARIOS & PERMISOS
   ============================================================ */

/* Login status banners */
.login-alert-info {
    background: #EFF8FF;
    border: 1px solid #B8E3FF;
    color: #0369A1;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    display: flex;
    margin-bottom: 0.75rem;
}
.login-alert-danger {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: #DC2626;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    display: flex;
    margin-bottom: 0.75rem;
}
.login-alert.login-alert-info,
.login-alert.login-alert-danger {
    flex-direction: row;
}
.login-alert-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}
.login-alert-body strong {
    font-size: 0.9rem;
    font-weight: 700;
}
.login-alert-body span {
    font-size: 0.82rem;
    line-height: 1.4;
}
.login-alert-action {
    margin-top: 0.5rem;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    border: 1.5px solid currentColor;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    align-self: flex-start;
    transition: background 0.18s, color 0.18s;
}
.login-alert-action:hover {
    background: rgba(0,0,0,0.06);
}
.login-alert-action-primary {
    background: #1D63FF !important;
    border-color: #1D63FF !important;
    color: #fff !important;
}
.login-alert-action-primary:hover {
    background: #1555e0 !important;
}

/* Sidebar nav badge usuarios */
.nav-badge-usuarios {
    background: #FEE2E2;
    color: #DC2626;
    border: 1px solid #FCA5A5;
}

/* Módulo usuarios wrapper */
.module-usuarios {
    padding: 1.25rem 1.5rem 2rem;
    min-height: 100%;
}

.usuarios-loading {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.usuarios-panel {
    max-width: 880px;
    margin: 0 auto;
}

.usuarios-header {
    margin-bottom: 1.5rem;
}

.usuarios-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #071B3D;
    margin: 0 0 0.25rem;
}

.usuarios-subtitle {
    font-size: 0.875rem;
    color: #71819A;
    margin: 0;
}

/* Tabs */
.usuarios-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid #E8EDF5;
    margin-bottom: 1.25rem;
}

.utab {
    padding: 0.65rem 1.1rem;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    color: #71819A;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.18s, border-color 0.18s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.utab:hover { color: #1D63FF; }
.utab.active {
    color: #1D63FF;
    border-bottom-color: #1D63FF;
}

.utab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #E8EDF5;
    color: #53647D;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 0.35rem;
}
.utab-badge-green { background: #D1FAE5; color: #065F46; }
.utab-badge-red   { background: #FEE2E2; color: #991B1B; }

/* Usuario card */
.usuario-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #E8EDF5;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(20,40,80,0.04);
    transition: box-shadow 0.18s;
    gap: 1rem;
}
.usuario-card:hover { box-shadow: 0 4px 16px rgba(20,40,80,0.08); }
.usuario-card-rejected { opacity: 0.7; }

.usuario-card-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex: 1;
    min-width: 0;
}

.usuario-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.usuario-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #071B3D;
}
.usuario-card-email {
    font-size: 0.8rem;
    color: #71819A;
}
.usuario-card-meta {
    font-size: 0.75rem;
    color: #97A4B8;
}
.usuario-card-msg {
    font-size: 0.78rem;
    color: #5B6B86;
    font-style: italic;
    margin-top: 0.2rem;
    background: #F8FAFD;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border-left: 2px solid #1D63FF;
}

.usuario-card-perms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.usuario-card-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
    align-items: center;
}

/* Perm tags */
.perm-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.perm-tag-read { background: #EAF4FF; color: #1D63FF; }
.perm-tag-edit { background: #D1FAE5; color: #065F46; }
.perm-badge-none { font-size: 0.75rem; color: #97A4B8; }

/* Usuarios empty state */
.usuarios-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #97A4B8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.usuarios-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Perm grid in modals */
.perm-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.perm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background: #F8FAFD;
    border-radius: 8px;
    border: 1px solid #E8EDF5;
    gap: 0.75rem;
}

.perm-module-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #071B3D;
    min-width: 120px;
}

.perm-radios {
    display: flex;
    gap: 0.4rem;
}

.perm-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.perm-radio-label input[type="radio"] {
    display: none;
}

.perm-radio-pill {
    display: inline-block;
    padding: 0.28rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.perm-none { background: #F0F2F5; color: #71819A; border-color: #E0E5EE; }
.perm-read { background: #EAF4FF; color: #1D63FF; border-color: #B8DAFF; }
.perm-edit { background: #D1FAE5; color: #065F46; border-color: #6EE7A8; }

.perm-radio-label input[type="radio"]:checked + .perm-none { background: #DDE3EE; color: #3D4F6A; border-color: #9AAABF; }
.perm-radio-label input[type="radio"]:checked + .perm-read { background: #1D63FF; color: #fff; border-color: #1D63FF; }
.perm-radio-label input[type="radio"]:checked + .perm-edit { background: #15B86A; color: #fff; border-color: #15B86A; }

/* btn-outline */
.btn-outline {
    padding: 0.45rem 0.9rem;
    border: 1.5px solid #1D63FF;
    background: transparent;
    color: #1D63FF;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-outline:hover {
    background: #1D63FF;
    color: #fff;
}

/* utab-content */
.utab-content { }

/* Confirmacion inline rechazar */
.reject-confirm-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.65rem 0.9rem;
    background: #FEF2F2;
    border: 1.5px solid #FCA5A5;
    border-radius: 10px;
    animation: slideInDown 0.18s ease;
}

.reject-confirm-text {
    font-size: 0.845rem;
    color: #7F1D1D;
    flex: 1;
}

.reject-confirm-text strong {
    color: #DC2626;
}

.reject-confirm-btns {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-danger-sm {
    padding: 0.35rem 0.85rem;
    background: #DC2626;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-danger-sm:hover { background: #B91C1C; }
.btn-danger-sm:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============================================================
   PERMISSION MODAL V2 — Premium redesign
   ============================================================ */

/* Modal overlay (reuse existing .modal-overlay) */
.perm-modal-box {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(7,27,61,0.18), 0 4px 16px rgba(7,27,61,0.08);
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: modalSlideUp 0.22s cubic-bezier(.34,1.56,.64,1);
}

/* Header */
.perm-mhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.4rem 1.6rem 0;
    gap: 1rem;
}
.perm-mhead-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #071B3D;
    margin: 0 0 0.2rem;
    line-height: 1.3;
}
.perm-mhead-sub {
    font-size: 0.82rem;
    color: #71819A;
    margin: 0;
    line-height: 1.5;
}
.perm-mclose {
    width: 30px;
    height: 30px;
    border: none;
    background: #F1F4F8;
    border-radius: 50%;
    font-size: 1.15rem;
    color: #71819A;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: -2px;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.perm-mclose:hover { background: #E0E5EF; color: #071B3D; }

/* User info strip */
.perm-user-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 1.6rem;
    padding: 0.9rem 1rem;
    background: #F8FAFD;
    border-radius: 12px;
    border: 1px solid #E8EDF5;
}
.perm-user-strip-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.perm-user-av-wrap {
    flex-shrink: 0;
}
.perm-user-av-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}
.perm-user-av-fb {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1D63FF, #5B8CFF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.perm-user-strip-info { min-width: 0; }
.perm-user-strip-name {
    font-size: 0.925rem;
    font-weight: 700;
    color: #071B3D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.perm-user-strip-email {
    font-size: 0.78rem;
    color: #71819A;
    margin-top: 0.1rem;
}
.perm-user-hint {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.73rem;
    color: #97A4B8;
    margin-top: 0.3rem;
}

/* Status badges */
.perm-pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #6EE7B7;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.perm-approved-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: #EAF1FF;
    color: #1D63FF;
    border: 1px solid #B8D5FF;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Permissions block */
.perm-block {
    padding: 0 1.6rem;
    flex: 1;
}
.perm-block-top {
    display: flex;
    align-items: center;
    margin-bottom: 0.65rem;
}
.perm-block-label {
    font-size: 0.775rem;
    font-weight: 700;
    color: #53647D;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Bulk apply strip */
.perm-bulk-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8FAFD;
    border: 1px solid #E8EDF5;
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.65rem;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.perm-bulk-count {
    font-size: 0.78rem;
    color: #71819A;
    font-weight: 600;
    white-space: nowrap;
}
.perm-bulk-right {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.perm-bulk-text {
    font-size: 0.75rem;
    color: #97A4B8;
    white-space: nowrap;
}
.perm-qpills {
    display: flex;
    gap: 0.3rem;
}
.perm-qpill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    border: 1.5px solid #E0E5EF;
    background: #fff;
    border-radius: 20px;
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    color: #53647D;
}
.perm-qpill:hover { border-color: #1D63FF; color: #1D63FF; }
.perm-qdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.perm-qdot-none { background: #B0BBCC; }
.perm-qdot-read { background: #1D63FF; }
.perm-qdot-edit { background: #15B86A; }

/* Module rows */
.perm-grid-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 2px;
}
.perm-grid-v2::-webkit-scrollbar { width: 4px; }
.perm-grid-v2::-webkit-scrollbar-track { background: transparent; }
.perm-grid-v2::-webkit-scrollbar-thumb { background: #D1D8E5; border-radius: 4px; }

.perm-row-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #EDF0F5;
    background: #FAFBFD;
    transition: border-color 0.15s, background 0.15s;
}
.perm-row-v2:hover { border-color: #D1D8E5; background: #fff; }

.perm-row-v2-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}
.perm-row-v2-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.perm-row-v2-info { min-width: 0; }
.perm-row-v2-name {
    font-size: 0.845rem;
    font-weight: 700;
    color: #071B3D;
    line-height: 1.2;
}
.perm-row-v2-desc {
    font-size: 0.72rem;
    color: #97A4B8;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* Permission button group */
.perm-btngroup {
    display: flex;
    border: 1px solid #E0E5EF;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.perm-btn-v2 {
    padding: 0.38rem 0.75rem;
    border: none;
    border-right: 1px solid #E0E5EF;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    color: #71819A;
    cursor: pointer;
    transition: all 0.14s;
    white-space: nowrap;
}
.perm-btn-v2:last-child { border-right: none; }
.perm-btn-v2:hover { background: #F8FAFD; }

.perm-btn-v2.perm-btn-none.is-active  { background: #E8EDF5; color: #3D4F6A; border-right-color: #D1D8E5; }
.perm-btn-v2.perm-btn-read.is-active  { background: #1D63FF; color: #fff; border-right-color: #1D63FF; }
.perm-btn-v2.perm-btn-edit.is-active  { background: #15B86A; color: #fff; }

/* Summary strip */
.perm-summary-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.75rem 1.6rem;
    padding: 0.75rem 1rem;
    background: #F8FAFD;
    border: 1px solid #E8EDF5;
    border-radius: 10px;
    flex-wrap: wrap;
}
.perm-summary-left {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #71819A;
    flex: 1;
    line-height: 1.5;
}
.perm-summary-left svg { flex-shrink: 0; margin-top: 1px; }
.perm-summary-counts {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.perm-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.73rem;
    font-weight: 600;
    padding: 0.22rem 0.6rem;
    border-radius: 20px;
}
.perm-count-chip strong { font-size: 0.82rem; }
.perm-count-chip-edit { background: #D1FAE5; color: #065F46; }
.perm-count-chip-read { background: #EAF1FF; color: #1D63FF; }
.perm-count-chip-none { background: #E8EDF5; color: #53647D; }

/* Action footer */
.perm-mfooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.6rem 1.4rem;
    border-top: 1px solid #EDF0F5;
    gap: 0.75rem;
}
.perm-mfooter-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.perm-approve-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
}

/* ============================================================
   GESTIÓN DE USUARIOS — Premium Table Layout v2
   ============================================================ */

.um-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
}

.um-wrapper {
    padding: 0.25rem 0 2rem;
    max-width: 1100px;
}

/* Page header */
.um-page-head {
    text-align: center;
    margin-bottom: 1.75rem;
}
.um-page-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #071B3D;
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}
.um-page-sub {
    font-size: 0.875rem;
    color: #71819A;
    margin: 0;
}

/* ---- KPI CARDS ---- */
.um-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.um-kpi-card {
    background: #fff;
    border: 1px solid #E8EDF5;
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
    position: relative;
    overflow: hidden;
}
.um-kpi-card:hover {
    border-color: #1D63FF;
    box-shadow: 0 4px 16px rgba(29,99,255,0.09);
    transform: translateY(-1px);
}
.um-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.um-kpi-body { flex: 1; min-width: 0; }
.um-kpi-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #71819A;
    margin-bottom: 0.18rem;
}
.um-kpi-val {
    font-size: 1.65rem;
    font-weight: 800;
    color: #071B3D;
    line-height: 1;
    margin-bottom: 0.18rem;
}
.um-kpi-sub {
    font-size: 0.72rem;
    color: #97A4B8;
}
.um-kpi-arrow {
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s, transform 0.15s;
}
.um-kpi-card:hover .um-kpi-arrow { opacity: 1; transform: translateX(2px); }

/* ---- FILTER BAR ---- */
.um-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.um-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #E0E5EF;
    border-radius: 9px;
    padding: 0.5rem 0.85rem;
    flex: 1;
    min-width: 200px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.um-search-wrap:focus-within {
    border-color: #1D63FF;
    box-shadow: 0 0 0 3px rgba(29,99,255,0.1);
}
.um-search {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    color: #071B3D;
    flex: 1;
    font-family: inherit;
}
.um-search::placeholder { color: #97A4B8; }
.um-select {
    background: #fff;
    border: 1px solid #E0E5EF;
    border-radius: 9px;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    color: #3D4F6A;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2397A4B8' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    transition: border-color 0.15s;
}
.um-select:focus { border-color: #1D63FF; }
.um-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #E0E5EF;
    border-radius: 9px;
    padding: 0.5rem 1rem;
    font-size: 0.845rem;
    font-weight: 600;
    color: #3D4F6A;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.um-btn-outline:hover {
    border-color: #1D63FF;
    background: #F4F8FF;
    color: #1D63FF;
}

/* ---- TABS ---- */
.um-tabs-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #E8EDF5;
    margin-bottom: 0;
}
.um-tab {
    background: none;
    border: none;
    padding: 0.65rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #71819A;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: inherit;
    white-space: nowrap;
}
.um-tab:hover { color: #1D63FF; }
.um-tab.active {
    color: #1D63FF;
    border-bottom-color: #1D63FF;
}
.um-tab-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 0.4rem;
    background: #E8EDF5;
    color: #53647D;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    transition: background 0.15s, color 0.15s;
}
.um-tab.active .um-tab-n { background: #1D63FF; color: #fff; }
.um-tab-n-green { background: #D1FAE5 !important; color: #059669 !important; }
.um-tab.active .um-tab-n-green { background: #059669 !important; color: #fff !important; }
.um-tab-n-red   { background: #FEE2E2 !important; color: #DC2626 !important; }
.um-tab.active .um-tab-n-red   { background: #DC2626 !important; color: #fff !important; }

/* ---- TABLE ---- */
.um-table-card {
    background: #fff;
    border: 1px solid #E8EDF5;
    border-top: none;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}
.um-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.um-table thead tr {
    background: #F8FAFD;
    border-bottom: 1px solid #E8EDF5;
}
.um-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: #71819A;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.um-table th:last-child { width: 1%; }
.um-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #F0F4FA;
    vertical-align: middle;
}
.um-row:last-child td { border-bottom: none; }
.um-row {
    transition: background 0.12s;
}
.um-row:hover { background: #FAFBFF; }

/* User cell */
.um-user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.um-av-img {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.um-av-fb {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.um-user-info { min-width: 0; }
.um-user-name {
    font-weight: 700;
    color: #071B3D;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.um-user-email {
    font-size: 0.75rem;
    color: #71819A;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Date cell */
.um-date-main {
    font-size: 0.83rem;
    color: #3D4F6A;
    font-weight: 600;
}
.um-date-rel {
    font-size: 0.72rem;
    color: #97A4B8;
    margin-top: 0.12rem;
}

/* Tags cell */
.um-tags-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-bottom: 0.18rem;
}
.um-role-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: #EAF1FF;
    color: #1D63FF;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.um-role-more {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background: #E8EDF5;
    color: #53647D;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}
.um-tags-sub {
    font-size: 0.72rem;
    color: #97A4B8;
}

/* Status badges */
.um-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
.um-status-pending  { background: #FFF8E6; color: #B45309; border: 1px solid #FDE68A; }
.um-status-approved { background: #ECFDF5; color: #065F46; border: 1px solid #6EE7B7; }
.um-status-rejected { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* Actions cell */
.um-actions-cell {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.um-btn-primary {
    background: #1D63FF;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.42rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
}
.um-btn-primary:hover { background: #1550D9; box-shadow: 0 3px 10px rgba(29,99,255,0.3); }
.um-btn-ghost {
    background: #fff;
    color: #53647D;
    border: 1px solid #DDE3EF;
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.um-btn-ghost:hover { border-color: #97A4B8; color: #071B3D; }
.um-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: 1px solid #DDE3EF;
    border-radius: 7px;
    padding: 0.38rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #53647D;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.um-action-link:hover { border-color: #97A4B8; background: #F8FAFD; }
.um-action-link-blue { color: #1D63FF; border-color: #B8D5FF; }
.um-action-link-blue:hover { background: #EAF1FF; border-color: #1D63FF; }
.um-more-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #E0E5EF;
    border-radius: 7px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #97A4B8;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.um-more-btn:hover { border-color: #97A4B8; color: #3D4F6A; background: #F8FAFD; }

/* Empty state */
.um-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #97A4B8;
    gap: 0.75rem;
}
.um-empty-state p {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

/* Table footer */
.um-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid #E8EDF5;
    background: #FAFBFD;
}
.um-foot-count {
    font-size: 0.8rem;
    color: #71819A;
    font-weight: 500;
}

@media (max-width: 900px) {
    .um-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .um-kpi-row { grid-template-columns: 1fr 1fr; }
    .um-filter-bar { gap: 0.5rem; }
    .um-table { font-size: 0.78rem; }
    .um-table th, .um-table td { padding: 0.65rem 0.6rem; }
}

/* ============================================================
   PROFILE HEADER DROPDOWN — Premium redesign
   ============================================================ */

.profile-header-wrapper {
    position: relative;
}

.profile-header-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 40px;
    padding: 0.3rem 0.75rem 0.3rem 0.4rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    color: var(--gray-700);
    font-family: inherit;
}
.profile-header-card:hover {
    background: rgba(99,102,241,0.14);
    border-color: rgba(99,102,241,0.35);
    box-shadow: 0 2px 10px rgba(99,102,241,0.15);
}
.profile-header-card:focus-visible {
    outline: 2px solid rgba(99,102,241,0.4);
    outline-offset: 2px;
}

.profile-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(99,102,241,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-700);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-chevron {
    color: var(--gray-500);
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}

/* Dropdown */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid #E0E5EF;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(7,27,61,0.16), 0 4px 12px rgba(7,27,61,0.08);
    z-index: 9999;
    overflow: hidden;
    animation: dropdownSlideIn 0.18s cubic-bezier(.34,1.56,.64,1);
}

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

/* User info strip */
.profile-dropdown-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem 0.9rem;
    background: #FAFBFD;
}
.pd-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1D63FF, #5B8CFF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    overflow: hidden;
}
#pd-avatar-initials {
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-user-info { min-width: 0; }
.pd-user-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #071B3D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.pd-user-email {
    font-size: 0.75rem;
    color: #71819A;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.pd-user-role {
    font-size: 0.7rem;
    font-weight: 600;
    color: #1D63FF;
    margin-top: 0.15rem;
    text-transform: capitalize;
}

/* Divider */
.profile-dropdown-divider {
    height: 1px;
    background: #E8EDF5;
    margin: 0;
}

/* Menu items */
.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.1rem;
    color: #3D4F6A;
    text-decoration: none;
    transition: background 0.12s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.profile-dropdown-item:hover { background: #F4F7FF; }
.profile-dropdown-item svg { flex-shrink: 0; color: #71819A; }
.profile-dropdown-item:hover svg { color: #1D63FF; }
.pd-item-label {
    font-size: 0.845rem;
    font-weight: 600;
    color: #071B3D;
}
.pd-item-sub {
    font-size: 0.72rem;
    color: #97A4B8;
    margin-top: 0.08rem;
}

/* Danger item (Cerrar sesión) */
.profile-dropdown-item-danger .pd-item-label { color: #DC2626; }
.profile-dropdown-item-danger svg { color: #DC2626; }
.profile-dropdown-item-danger:hover { background: #FEF2F2; }
.profile-dropdown-item-danger:hover svg { color: #B91C1C; }

/* ============================================================
   FIX: Profile dropdown positioning overrides
   ============================================================ */
.profile-header-wrapper {
    position: relative !important;
}
.profile-dropdown {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 270px !important;
    background: #ffffff !important;
    border: 1px solid #E0E5EF !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(7,27,61,0.18), 0 4px 16px rgba(7,27,61,0.1) !important;
    z-index: 99999 !important;
    overflow: hidden !important;
    animation: dropdownSlideIn 0.18s cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   FIX FINAL: Profile dropdown con position:fixed para salir del overflow
   ============================================================ */
.profile-dropdown {
    position: fixed !important;
    top: 58px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    min-width: 270px !important;
    background: #ffffff !important;
    border: 1px solid #E0E5EF !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(7,27,61,0.2), 0 4px 16px rgba(7,27,61,0.1) !important;
    z-index: 99999 !important;
    overflow: hidden !important;
    animation: dropdownSlideIn 0.18s cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   AUTH CHECK OVERLAY - muestra mientras /auth/me responde
   ============================================================ */
#auth-check-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: linear-gradient(135deg, #071B3D 0%, #0D2D6B 50%, #1a4a9e 100%);
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

#auth-check-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.auth-check-spinner {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(255,255,255,0.15);
    border-top-color: #4A9BFF;
    border-radius: 50%;
    animation: authSpin 0.9s linear infinite;
}

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

.auth-check-text {
    color: rgba(255,255,255,0.75);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0;
}

/* ============================================================
   AUTH CHECK OVERLAY v2 - animated blocks grid
   ============================================================ */
.auth-brand-logo {
    opacity: 0.9;
    animation: authLogoPulse 2.4s ease-in-out infinite;
}
@keyframes authLogoPulse {
    0%, 100% { transform: scale(1);    opacity: 0.75; }
    50%       { transform: scale(1.08); opacity: 1;    }
}
.auth-blocks-grid {
    display: grid;
    grid-template-columns: repeat(3, 22px);
    grid-template-rows:    repeat(3, 22px);
    gap: 8px;
}
.auth-block {
    border-radius: 5px;
    animation: blockPop 1.8s ease-in-out infinite both;
}
.auth-block.b1 { background: #4A9BFF; animation-delay: 0.00s; }
.auth-block.b2 { background: #F97316; animation-delay: 0.18s; }
.auth-block.b3 { background: #22C55E; animation-delay: 0.36s; }
.auth-block.b4 { background: #A78BFA; animation-delay: 0.54s; }
.auth-block.b5 { background: #38BDF8; animation-delay: 0.72s; }
.auth-block.b6 { background: #F43F5E; animation-delay: 0.90s; }
.auth-block.b7 { background: #22C55E; animation-delay: 1.08s; }
.auth-block.b8 { background: #4A9BFF; animation-delay: 1.26s; }
.auth-block.b9 { background: #F97316; animation-delay: 1.44s; }
@keyframes blockPop {
    0%   { transform: scale(0.1) rotate(-15deg); opacity: 0;   border-radius: 50%; }
    30%  { transform: scale(1.2) rotate(5deg);   opacity: 1;   border-radius: 5px; }
    55%  { transform: scale(1)   rotate(0deg);   opacity: 1;   border-radius: 5px; }
    85%  { transform: scale(1)   rotate(0deg);   opacity: 0.5; border-radius: 5px; }
    100% { transform: scale(0.1) rotate(10deg);  opacity: 0;   border-radius: 50%; }
}
#auth-check-overlay {
    gap: 22px;
    background: linear-gradient(145deg, #050F24 0%, #0B1F4A 55%, #0D2D6B 100%);
}
.auth-check-text {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.82rem;
    animation: authTextFade 1.8s ease-in-out infinite;
}
@keyframes authTextFade {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.85; }
}

/* ============================================================
   COLUMNA TITULO IA
   ============================================================ */
.td-ai-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.4;
    cursor: default;
}

.td-ai-loading {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    animation: aiLoadingPulse 1.4s ease-in-out infinite;
}
@keyframes aiLoadingPulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1;   }
}

.td-ai-na {
    color: var(--text-muted);
    font-size: 13px;
}

/* ============================================================
   MODAL - CARD TITULO IA
   ============================================================ */
.detail-ai-card {
    background: linear-gradient(135deg, #EEF2FF 0%, #F0FFFE 100%);
    border: 1px solid #C7D2FE;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 0.25rem;
    transition: all 0.3s ease;
}
.detail-ai-card.ai-loading {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-color: #E2E8F0;
}
.detail-ai-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #4338CA;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.detail-ai-badge {
    margin-left: auto;
    background: #E0E7FF;
    color: #4338CA;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.04em;
}
.detail-ai-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1E3A5F;
    line-height: 1.45;
    margin: 0;
    min-height: 1.5em;
}
.detail-ai-text.is-loading {
    color: #94A3B8;
    font-weight: 400;
    font-style: italic;
    font-size: 0.9rem;
    animation: aiLoadingPulse 1.4s ease-in-out infinite;
}

/* ============================================================
   HEADER ESPECIAL � COLUMNA TITULO IA
   ============================================================ */
.th-ai-col {
    /* igual que cualquier otro th — sin overrides */
}

.th-ai-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #4338CA;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.th-ai-badge {
    background: #4338CA;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

/* ============================================================
   COLUMNA SHORT-TITLE IA
   ============================================================ */
.th-short-title-col {
    /* sin background propio — hereda el de #table-head th */
}

.td-short-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #4338CA;
    font-size: 13px;
    font-weight: 500;
    cursor: default;
    letter-spacing: 0;
    line-height: 1.4;
}

/* ── Badge: folio superó el límite de intentos IA ─────────────────── */
.td-ai-max-try {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #431407;
    color: #fb923c;
    border: 1px solid #c2410c;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: default;
    vertical-align: middle;
    white-space: nowrap;
}

.btn-ai-retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1e3a5f;
    color: #60a5fa;
    border: 1px solid #2563eb;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s ease, transform 0.2s ease, box-shadow 0.15s ease;
    margin-left: 5px;
    vertical-align: middle;
    padding: 0;
    flex-shrink: 0;
}

.btn-ai-retry:hover:not(:disabled) {
    background: #1d4ed8;
    transform: rotate(30deg) scale(1.1);
    box-shadow: 0 0 6px #3b82f6aa;
}

.btn-ai-retry:active:not(:disabled) {
    transform: rotate(180deg) scale(0.95);
}

.btn-ai-retry:disabled {
    opacity: 0.45;
    cursor: wait;
    transform: none;
}

/* ============================================================
   COLUMNA DESCRIPCION IA
   ============================================================ */
.th-desc-ia-col {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%) !important;
    border-bottom: 2px solid #8B5CF6 !important;
}

.td-desc-ia {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 400;
    color: #374151;
    line-height: 1.4;
    cursor: default;
}

/* ============================================================
   QUICK SEARCH MODAL
   ============================================================ */
.qs-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    width: 520px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: qs-in 0.18s ease;
}
@keyframes qs-in {
    from { opacity:0; transform: scale(0.96) translateY(-8px); }
    to   { opacity:1; transform: scale(1)    translateY(0); }
}
.qs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #F1F5F9;
    background: #F8FAFC;
}
.qs-header-left { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#334155; }
.qs-close-btn { background:none; border:none; cursor:pointer; color:#94A3B8; padding:4px; border-radius:6px; display:flex; align-items:center; transition:background .12s,color .12s; }
.qs-close-btn:hover { background:#F1F5F9; color:#475569; }
.qs-body { padding:20px; overflow-y:auto; flex:1; }
.qs-folio-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.qs-folio-pill { font-size:18px; font-weight:800; color:#1E3A5F; letter-spacing:-.5px; }
.qs-status-badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; }
.qs-status-pendiente  { background:#FEF3C7; color:#92400E; }
.qs-status-doc        { background:#DBEAFE; color:#1D4ED8; }
.qs-status-historico  { background:#D1FAE5; color:#065F46; }
.qs-status-rechazado  { background:#FEE2E2; color:#991B1B; }
.qs-short-title { font-size:15px; font-weight:700; color:#1E293B; margin-bottom:14px; line-height:1.4; }
.qs-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.qs-meta-item { display:flex; flex-direction:column; gap:3px; }
.qs-meta-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#94A3B8; }
.qs-meta-value { font-size:13px; font-weight:500; color:#334155; }
.qs-cat-badge { display:inline-block; font-size:12px; font-weight:700; padding:2px 10px; border-radius:12px; }
.qs-cat-bug    { background:#FEE2E2; color:#991B1B; }
.qs-cat-req    { background:#FEF3C7; color:#92400E; }
.qs-cat-config { background:#D1FAE5; color:#065F46; }
.qs-cat-func   { background:#EDE9FE; color:#5B21B6; }
.qs-cat-other  { background:#F1F5F9; color:#475569; }
.qs-section-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#94A3B8; margin:14px 0 6px; }
.qs-desc-box { font-size:13px; color:#334155; line-height:1.6; background:#F8FAFC; border:1px solid #E8EEF6; border-radius:8px; padding:10px 12px; white-space:pre-wrap; word-break:break-word; max-height:140px; overflow-y:auto; }
.qs-sol-box { background:#F0FDF4; border-color:#BBF7D0; color:#166534; }
.qs-not-found { text-align:center; padding:32px 16px; color:#94A3B8; }
.qs-not-found p { font-size:15px; font-weight:600; color:#475569; margin:12px 0 4px; }
.qs-not-found span { font-size:12px; }
.qs-not-found strong { color:#1E293B; }

/* ============================================================
   TICKET DETAIL MODAL � Nuevo dise�o limpio (dtl-*)
   ============================================================ */
.dtl-modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.2);
    width: 680px;
    max-width: 96vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: dtl-in 0.2s ease;
}
@keyframes dtl-in {
    from { opacity:0; transform: scale(0.96) translateY(-10px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
}
/* Header */
.dtl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 18px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
}
.dtl-header-left { display:flex; align-items:center; gap:12px; }
.dtl-icon-wrap {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: #EEF2FF;
    color: #4F46E5;
    display: flex; align-items:center; justify-content:center;
    flex-shrink: 0;
}
.dtl-title { font-size:17px; font-weight:800; color:#0F172A; margin:0; }
.dtl-close-btn {
    background:none; border:none; cursor:pointer;
    color:#94A3B8; padding:6px; border-radius:8px;
    display:flex; align-items:center;
    transition: background .12s, color .12s;
}
.dtl-close-btn:hover { background:#F1F5F9; color:#475569; }

/* Body */
.dtl-body { padding:20px 24px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:0; }

/* Top info row */
.dtl-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #F1F5F9;
}
.dtl-top-item { display:flex; flex-direction:column; gap:6px; }
.dtl-field-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Status badges */
.dtl-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    width: fit-content;
}
.dtl-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: .7;
}
.dtl-status-pendiente  { background:#FEF3C7; color:#B45309; }
.dtl-status-doc        { background:#DBEAFE; color:#1D4ED8; }
.dtl-status-historico  { background:#D1FAE5; color:#065F46; }
.dtl-status-rechazado  { background:#FEE2E2; color:#991B1B; }
/* Date row */
.dtl-date-row { display:flex; align-items:center; gap:6px; color:#475569; }
.dtl-date-input { background:none; border:none; outline:none; font-size:13px; font-weight:500; color:#334155; font-family:inherit; padding:0; width:100%; }
/* Folio row */
.dtl-folio-row { display:flex; align-items:center; gap:8px; }
.dtl-folio-pill {
    font-size:14px; font-weight:700; color:#4F46E5;
    background:#EEF2FF; padding:3px 10px; border-radius:8px;
    letter-spacing:-.3px;
}
.dtl-copy-btn {
    background:none; border:1px solid #E2E8F0; color:#94A3B8;
    padding:4px 6px; border-radius:6px; cursor:pointer;
    display:flex; align-items:center; transition:all .12s;
}
.dtl-copy-btn:hover { background:#F8FAFC; color:#475569; border-color:#CBD5E1; }

/* IA section */
.dtl-ai-section { margin-bottom: 16px; }
.dtl-ai-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.dtl-ai-header-left { display:flex; align-items:center; gap:6px; color:#4338CA; }
.dtl-ai-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.dtl-ai-badge { /* inherits from detail-ai-badge */ }

/* Fields row */
.dtl-fields-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.4fr;
    gap: 12px;
    margin-bottom: 14px;
}
.dtl-field-group { display:flex; flex-direction:column; gap:5px; }
.dtl-field-label-icon { display:flex; align-items:center; gap:5px; }

/* Inputs & Select */
.dtl-input, .dtl-select, .dtl-textarea {
    font-family: inherit;
    font-size: 13px;
    color: #334155;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px 12px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}
.dtl-input:focus, .dtl-select:focus, .dtl-textarea:focus {
    border-color: #818CF8;
    box-shadow: 0 0 0 3px rgba(129,140,248,.15);
    background: #fff;
}
.dtl-input:disabled { background:#F1F5F9; color:#94A3B8; cursor:default; }
.dtl-textarea:disabled { background:#F1F5F9; color:#64748B; cursor:default; resize:vertical; }
.dtl-textarea { resize: vertical; line-height:1.6; }
.dtl-select { appearance:auto; cursor:pointer; }

/* Input with icon */
.dtl-input-icon-wrap { position:relative; display:flex; align-items:center; }
.dtl-input-icon-wrap svg { position:absolute; left:10px; color:#94A3B8; pointer-events:none; flex-shrink:0; }
.dtl-input-icon { padding-left:30px !important; }

/* Ver m�s campos */
.dtl-ver-mas {
    background: none; border: none; cursor: pointer;
    font-size: 12px; font-weight: 600; color: #64748B;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 0;
    transition: color .15s;
}
.dtl-ver-mas:hover { color: #334155; }

/* Footer */
.dtl-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 0 0;
    margin-top: 8px;
    border-top: 1px solid #F1F5F9;
    flex-shrink: 0;
}
.dtl-btn-cancel {
    background: #fff; border: 1px solid #E2E8F0;
    color: #475569; font-size: 13px; font-weight: 600;
    padding: 9px 22px; border-radius: 9px; cursor: pointer;
    font-family: inherit; transition: all .15s;
}
.dtl-btn-cancel:hover { background: #F8FAFC; border-color: #CBD5E1; }
.dtl-btn-save {
    background: #4F46E5; border: 1px solid #4F46E5;
    color: #fff; font-size: 13px; font-weight: 700;
    padding: 9px 22px; border-radius: 9px; cursor: pointer;
    font-family: inherit; display:inline-flex; align-items:center; gap:7px;
    transition: background .15s, box-shadow .15s;
}
.dtl-btn-save:hover { background: #4338CA; box-shadow: 0 4px 12px rgba(79,70,229,.35); }
/* ============================================================
   RIGHT PANEL — Nuevo diseño mockup
   ============================================================ */

/* Panel derecho: fondo azul-gris claro con patrón de puntos */
.ls-right {
    width: 40%;
    flex-shrink: 0;
    background: #EEF3FB;
    background-image: radial-gradient(rgba(29,99,255,0.10) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 36px;
    position: relative;
    gap: 20px;
}

/* Pill badge */
.ls-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(29,99,255,0.15);
    border-radius: 99px;
    padding: 7px 18px;
    font-size: 12px;
    font-weight: 600;
    color: #1D4ED8;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(29,99,255,0.08);
}

/* Auth card */
.ls-auth-card {
    background: #fff;
    border-radius: 24px;
    padding: 40px 36px 36px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 40px rgba(29,99,255,0.10), 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Icon wrap */
.ls-auth-logo {
    width: 72px; height: 72px;
    background: #EEF3FB;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}

/* Welcome subtitle */
.ls-auth-welcome {
    font-size: 14px;
    font-weight: 600;
    color: #1D63FF;
    margin: 0 0 6px;
    text-align: center;
}

/* Title */
.ls-auth-title {
    font-size: 26px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 12px;
    text-align: center;
    letter-spacing: -0.5px;
}

/* Brand row with lines */
.ls-auth-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
}
.ls-auth-line {
    flex: 1;
    height: 1.5px;
    background: linear-gradient(to right, transparent, #BFDBFE, transparent);
    border-radius: 2px;
}
.ls-auth-brand {
    font-size: 12px;
    font-weight: 800;
    color: #1D63FF;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

/* Hint */
.ls-auth-hint {
    font-size: 13px;
    color: #64748B;
    margin: 0 0 24px;
    text-align: center;
}

/* Google button */
.btn-google-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 13px 20px;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: box-shadow .18s, border-color .18s, transform .12s;
    margin-bottom: 14px;
}
.btn-google-signin:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

/* Lock micro text */
.ls-auth-micro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11.5px;
    color: #94A3B8;
    font-weight: 500;
}

/* Footer */
.ls-auth-footer {
    font-size: 11px;
    color: #94A3B8;
    position: absolute;
    bottom: 18px;
    text-align: center;
}

/* Pill badge text fade transition */
.ls-pill-badge span {
    transition: opacity 0.5s ease;
}
.ls-pill-badge span.fading {
    opacity: 0;
}

/* ═══════════════════════════════════════════════════════
   UM ICON BUTTONS (Editar / Eliminar mejorados)
═══════════════════════════════════════════════════════ */
.um-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.38rem 0.75rem;
    min-width: 90px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.um-icon-btn-blue {
    background: #EAF1FF;
    color: #1D63FF;
    border-color: #B8D5FF;
}
.um-icon-btn-blue:hover {
    background: #1D63FF;
    color: #fff;
    border-color: #1D63FF;
    box-shadow: 0 3px 10px rgba(29,99,255,0.25);
}
.um-icon-btn-red {
    background: #FEF2F2;
    color: #DC2626;
    border-color: #FECACA;
}
.um-icon-btn-red:hover {
    background: #DC2626;
    color: #fff;
    border-color: #DC2626;
    box-shadow: 0 3px 10px rgba(220,38,38,0.25);
}
.um-icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Clickable rows */
.um-row-clickable {
    cursor: pointer;
    transition: background 0.12s;
}
.um-row-clickable:hover {
    background: #F4F7FF !important;
}
.um-td-actions {
    white-space: nowrap;
    width: 110px;
}

/* ═══════════════════════════════════════════════════════
   MODAL DETALLE DE USUARIO
═══════════════════════════════════════════════════════ */
.ud-modal-box {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(7,27,61,0.18);
    width: 480px;
    max-width: 95vw;
    max-height: 88vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

/* Header */
.ud-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid #EEF1F8;
}
.ud-header-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.ud-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.ud-avatar-img,
.ud-avatar-fb {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}
.ud-avatar-fb {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.ud-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.ud-name {
    font-size: 1rem;
    font-weight: 700;
    color: #071B3D;
    line-height: 1.2;
}
.ud-email {
    font-size: 0.8rem;
    color: #97A4B8;
}
.ud-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    margin-top: 0.2rem;
    width: fit-content;
}
.ud-badge-pending  { background: #EAF1FF; color: #1D63FF; }
.ud-badge-approved { background: #ECFDF5; color: #059669; }
.ud-badge-rejected { background: #FEF2F2; color: #DC2626; }
.ud-badge-deleted  { background: #FFF7ED; color: #EA580C; }

/* Body */
.ud-body {
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.ud-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.ud-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #97A4B8;
}

/* Dates grid */
.ud-dates-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.ud-date-item {
    background: #F8FAFD;
    border: 1px solid #EEF1F8;
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    min-width: 120px;
}
.ud-date-label {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #B0BBCC;
    margin-bottom: 0.18rem;
}
.ud-date-val {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2C3E5D;
}
.ud-date-rel {
    font-size: 0.72rem;
    color: #97A4B8;
}
.ud-empty-hint {
    font-size: 0.8rem;
    color: #B0BBCC;
    font-style: italic;
}

/* Permissions chips */
.ud-perms-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.ud-perm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #F8FAFD;
    border: 1.5px solid color-mix(in srgb, var(--chip-color) 20%, #EEF1F8);
    border-radius: 20px;
    padding: 0.28rem 0.65rem 0.28rem 0.45rem;
    font-size: 0.76rem;
}
.ud-perm-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ud-perm-mod {
    font-weight: 600;
    color: #2C3E5D;
}
.ud-perm-level {
    font-weight: 500;
    color: #97A4B8;
    font-size: 0.72rem;
}

/* Message box */
.ud-msg-box {
    background: #F8FAFD;
    border: 1px solid #EEF1F8;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    color: #53647D;
    font-style: italic;
    line-height: 1.5;
}

/* Footer */
.ud-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid #EEF1F8;
}
.ud-footer:empty {
    display: none;
}

/* ================================================================
   MÓDULO SESIONES — Gestión de Sesiones de Usuario
   ================================================================ */

/* Container */
.module-sesiones {
    padding: 0;
    min-height: 100%;
}

/* Page scaffold */
.ses-page {
    padding: 24px 28px 40px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 1300px;
    margin: 0 auto;
}

/* ── Page header ── */
.ses-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ses-page-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.12) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ses-page-title {
    font-size: 17px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 2px 0;
    letter-spacing: -0.01em;
}
.ses-page-subtitle {
    font-size: 12.5px;
    color: #64748B;
    margin: 0;
}
.ses-page-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Buttons ── */
.ses-btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ses-btn-refresh:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #1E293B;
}
.ses-btn-revoke-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #DC2626;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ses-btn-revoke-all:hover:not(:disabled) {
    background: #FEE2E2;
    border-color: #FCA5A5;
}
.ses-btn-revoke-all:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── KPI Row ── */
.ses-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.ses-kpi-card {
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #E8ECF4;
    box-shadow: 0 1px 4px rgba(15,23,42,0.04);
    transition: box-shadow 0.2s, transform 0.15s;
}
.ses-kpi-card:hover {
    box-shadow: 0 4px 16px rgba(15,23,42,0.08);
    transform: translateY(-1px);
}
.ses-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ses-kpi-total  .ses-kpi-icon { background: linear-gradient(135deg, #6366F1, #818CF8); }
.ses-kpi-active .ses-kpi-icon { background: linear-gradient(135deg, #10B981, #34D399); }
.ses-kpi-no-session .ses-kpi-icon { background: linear-gradient(135deg, #94A3B8, #CBD5E1); }
.ses-kpi-today  .ses-kpi-icon { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.ses-kpi-num {
    font-size: 26px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1;
    letter-spacing: -0.02em;
}
.ses-kpi-label {
    font-size: 11.5px;
    font-weight: 500;
    color: #64748B;
    margin-top: 3px;
}

/* ── Table Card ── */
.ses-table-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #E8ECF4;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}
.ses-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #F1F5F9;
    background: #FAFBFE;
}
.ses-table-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ses-table-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #1E293B;
}
.ses-table-count {
    background: #EEF2FF;
    color: #6366F1;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}
.ses-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #64748B;
}
.ses-table-scroll {
    overflow-x: auto;
}
.ses-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ses-table thead th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #FAFBFE;
    border-bottom: 1px solid #F1F5F9;
    white-space: nowrap;
}
.ses-row {
    transition: background 0.12s;
}
.ses-row:hover {
    background: #F8FAFC;
}
.ses-row-live {
    background: #F0FDF4;
}
.ses-row-live:hover {
    background: #ECFDF5;
}
.ses-row-admin {
    background: #EEF2FF;
}
.ses-row-admin:hover {
    background: #E0E7FF;
}
.ses-table td {
    padding: 11px 16px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}
.ses-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── User cell ── */
.ses-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ses-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ses-avatar-fb {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: white;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ses-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
}
.ses-user-email {
    font-size: 11.5px;
    color: #94A3B8;
    margin-top: 1px;
}

/* ── Active dot ── */
.ses-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.ses-dot-active {
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
    animation: ses-pulse 2s ease-in-out infinite;
}
.ses-dot-inactive {
    background: #CBD5E1;
}
@keyframes ses-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
    50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0.08); }
}

/* ── Status label ── */
.ses-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.ses-status-active {
    background: #DCFCE7;
    color: #15803D;
}
.ses-status-inactive {
    background: #F1F5F9;
    color: #94A3B8;
}

/* ── Module pills ── */
.ses-mod-pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    background: #EEF2FF;
    color: #6366F1;
    font-size: 10.5px;
    font-weight: 600;
    margin: 2px 2px;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

/* ── Revoke button ── */
.ses-revoke-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #DC2626;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    white-space: nowrap;
}
.ses-revoke-btn:hover:not(:disabled) {
    background: #FEE2E2;
    border-color: #FCA5A5;
    transform: scale(1.02);
}
.ses-revoke-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ses-admin-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: white;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.ses-revoke-na {
    color: #CBD5E1;
    font-size: 12px;
}
.ses-null {
    color: #CBD5E1;
    font-size: 12px;
}
.ses-empty-cell {
    text-align: center;
    padding: 40px;
    color: #94A3B8;
    font-size: 13px;
}

/* ── Confirm toast ── */
.ses-confirm-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    animation: ses-toast-in 0.2s ease;
}
.ses-confirm-toast.hidden {
    display: none;
}
@keyframes ses-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.ses-confirm-body {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1E293B;
    color: #F1F5F9;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(15,23,42,0.3);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.ses-confirm-btn {
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s;
}
.ses-confirm-yes {
    background: #DC2626;
    color: white;
}
.ses-confirm-yes:hover { opacity: 0.88; }
.ses-confirm-no {
    background: rgba(255,255,255,0.12);
    color: #CBD5E1;
}
.ses-confirm-no:hover { background: rgba(255,255,255,0.18); }

/* ── Skeleton loader ── */
.ses-skeleton {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ses-skel-row {
    height: 18px;
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: skel-wave 1.4s linear infinite;
}
.ses-skel-short { width: 55%; }
@keyframes skel-wave {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ── Empty state ── */
.ses-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    color: #94A3B8;
    font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .ses-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .ses-page { padding: 16px; }
}
@media (max-width: 600px) {
    .ses-kpi-row { grid-template-columns: 1fr 1fr; }
    .ses-table thead th:nth-child(4),
    .ses-table td.ses-td-session { display: none; }
}

/* ==========================================================================
   WORK STATUS SELECTOR & MODAL STYLING
   ========================================================================== */
/* ═══════════════════════════════════════════════
   WORK-STATUS PREMIUM DROPDOWN
   ═══════════════════════════════════════════════ */

/* Wrapper for the cell */
.ws-cell-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* ── Por hacer pill ── */
.ws-pill-todo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    background: #f8fafc;
    color: #64748b;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    user-select: none;
}
.ws-pill-todo:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.ws-pill-todo .ws-icon {
    width: 13px;
    height: 13px;
    opacity: 0.55;
    flex-shrink: 0;
}
.ws-pill-todo .ws-chevron {
    width: 9px;
    height: 9px;
    opacity: 0.4;
    flex-shrink: 0;
    margin-left: 1px;
}

/* ── En progreso pill ── */
.ws-pill-progress {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
    box-shadow: 0 2px 8px rgba(99,102,241,0.35);
    overflow: hidden;
}
.ws-pill-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: inherit;
}
.ws-pill-progress:hover::before { opacity: 1; }

/* Animated ripple rings inside the pill */
.ws-progress-anim {
    position: relative;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.ws-progress-anim .ws-dot-core {
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    z-index: 2;
}
.ws-progress-anim .ws-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.7);
    animation: ws-ring-expand 1.8s ease-out infinite;
}
.ws-progress-anim .ws-ring:nth-child(2) { animation-delay: 0.6s; }
.ws-progress-anim .ws-ring:nth-child(3) { animation-delay: 1.2s; }

@keyframes ws-ring-expand {
    0%   { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

.ws-pill-progress .ws-chevron {
    width: 9px;
    height: 9px;
    opacity: 0.7;
    flex-shrink: 0;
    margin-left: 1px;
    position: relative;
    z-index: 1;
}
.ws-pill-progress .ws-progress-label {
    position: relative;
    z-index: 1;
}

/* Dates sub-label under the pill */
.ws-dates-label {
    font-size: 9.5px;
    color: #7c3aed;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* ── Inline dropdown popover ── */
.ws-popover {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06);
    padding: 6px;
    min-width: 180px;
    animation: ws-pop-in 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ws-pop-in {
    from { opacity: 0; transform: scale(0.92) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ws-pop-title {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 8px 6px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px;
}

.ws-pop-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.13s ease;
    text-align: left;
}
.ws-pop-option:hover { background: #f8fafc; }
.ws-pop-option.ws-pop-active { background: #f5f3ff; }

.ws-pop-option-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ws-pop-option-icon.todo-icon {
    background: #f1f5f9;
    color: #64748b;
}
.ws-pop-option-icon.progress-icon {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

.ws-pop-option-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ws-pop-option-label {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
}
.ws-pop-option-desc {
    font-size: 10px;
    color: #94a3b8;
}

/* ── Modal redesign ── */
.ws-modal-header {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    padding: 22px 24px 18px;
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ws-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ws-modal-header h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}
.ws-modal-header .ws-modal-sub {
    color: rgba(255,255,255,0.75);
    font-size: 11px;
    margin-top: 2px;
}
.ws-modal-body {
    padding: 22px 24px;
}
.ws-modal-folio-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    color: #6d28d9;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-family: monospace;
}
.ws-modal-date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.ws-modal-date-row.single {
    grid-template-columns: 1fr;
}
.ws-modal-date-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ws-modal-date-group .form-input {
    width: 100%;
    box-sizing: border-box;
}
.ws-preview-pill {
    display: none;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border: 1px solid #ddd6fe;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 18px;
    margin-top: 4px;
}
.ws-preview-pill.visible { display: flex; }
.ws-preview-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    flex-shrink: 0;
    animation: ws-ring-expand 1.8s ease-out infinite;
}
.ws-preview-pill-text {
    font-size: 12px;
    font-weight: 600;
    color: #5b21b6;
}

/* legacy compat */
.chevron-icon, .pencil-icon {
    opacity: 0.6;
    margin-left: 2px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   PLANNING FILTER CUSTOM CSS
   ═══════════════════════════════════════════════ */
.date-range-fields {
    padding: 2px;
}
.btn-clear-plan-dates, .btn-apply-plan-dates {
    transition: all 0.18s ease;
}
.btn-clear-plan-dates:hover {
    background-color: #F1F5F9 !important;
    border-color: #94A3B8 !important;
    color: #475569 !important;
}
.btn-apply-plan-dates:hover {
    background-color: #1565F7 !important;
    box-shadow: 0 4px 12px rgba(30, 107, 255, 0.25);
}




/* -----------------------------------------------------------
   PLANNING TODO MODULE
   ----------------------------------------------------------- */

.planning-module {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
}

/* Header */
.ptd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px 16px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.ptd-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ptd-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ptd-header-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}
.ptd-header-sub {
    font-size: 12px;
    color: #94a3b8;
    margin: 2px 0 0;
}
.ptd-week-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 4px 6px;
}
.ptd-nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: background 0.15s ease, color 0.15s ease;
}
.ptd-nav-btn:hover { background: #e0e7ff; color: #4338ca; }
.ptd-today-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #4f46e5;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ptd-today-btn:hover { background: #e0e7ff; border-color: #a5b4fc; }

.ptd-calendar-wrap {
    flex: 1;
    overflow: auto;
    padding: 0;
    background: #f8fafc;
}
.ptd-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 800px;
}
.ptd-th-client {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #fff;
    width: 200px;
    min-width: 180px;
    padding: 12px 16px;
    border-bottom: 2px solid #e2e8f0;
    border-right: 2px solid #e2e8f0;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ptd-th-sub {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #94a3b8;
    margin-top: 2px;
    text-transform: none;
    letter-spacing: 0;
}
.ptd-th-week {
    padding: 12px 16px;
    border-bottom: 2px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    vertical-align: bottom;
}
.ptd-th-current {
    background: linear-gradient(180deg, #f0f4ff 0%, #eef2ff 100%);
    border-bottom-color: #818cf8;
    border-left: 2px solid #c7d2fe;
    border-right: 2px solid #c7d2fe;
    color: #4338ca;
}
.ptd-current-badge {
    display: inline-block;
    background: #6366f1;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.ptd-week-range { display: block; font-size: 11px; }
.ptd-row { border-bottom: 1px solid #f1f5f9; transition: background 0.1s; }
.ptd-row:hover { background: #fafbff; }
.ptd-row-nodates { opacity: 0.6; }
.ptd-row-nodates:hover { opacity: 1; }
.ptd-td-client {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 5;
    width: 200px;
    min-width: 180px;
    padding: 12px 16px;
    border-right: 2px solid #e2e8f0;
    vertical-align: top;
}
.ptd-row:hover .ptd-td-client { background: #fafbff; }
.ptd-client-name {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 168px;
}
.ptd-client-counts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ptd-count-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 99px; }
.ptd-count-pending { background: #fee2e2; color: #b91c1c; }
.ptd-count-doc     { background: #fef3c7; color: #92400e; }
.ptd-count-zero    { background: #f1f5f9; color: #94a3b8; }
.ptd-td-week { padding: 10px 12px; vertical-align: top; border-right: 1px solid #f1f5f9; min-height: 60px; }
.ptd-td-current { background: #f8f9ff; border-left: 2px solid #e0e7ff; border-right: 2px solid #e0e7ff; }
.ptd-empty-cell { min-height: 40px; border-radius: 6px; }
.ptd-chips-wrap { display: flex; flex-direction: column; gap: 5px; }
.ptd-chip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.ptd-chip:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.1); transform: translateY(-1px); }
/* Fila 1: dot + folio + fecha */
.ptd-chip-top {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
}
.ptd-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ptd-dot-pending { background: #f97316; }
.ptd-dot-doc     { background: #eab308; }
.ptd-dot-hist    { background: #94a3b8; }
.ptd-chip-folio  { font-size: 10px; font-weight: 700; opacity: 0.8; white-space: nowrap; flex-shrink: 0; }
/* Fecha empujada a la derecha */
.ptd-chip-date   { font-size: 9px; opacity: 0.6; font-weight: 600; margin-left: auto; white-space: nowrap; flex-shrink: 0; }
/* Fila 2: título / alias ocupa todo el ancho */
.ptd-chip-title  { font-size: 11px; font-weight: 500; line-height: 1.35; width: 100%; padding-left: 12px; word-break: break-word; }
.ptd-empty { text-align: center; padding: 48px 24px; color: #94a3b8; font-size: 13px; }
.ptd-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 28px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.ptd-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #64748b; font-weight: 500; }
.ptd-legend-dot  { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.ptd-legend-sep  { width: 1px; height: 16px; background: #e2e8f0; flex-shrink: 0; }

/* --- Planning ToDo: Mode toggle, Day view, Chip actions, Alias popover --- */

/* Segmented mode toggle */
.ptd-mode-toggle {
    display: flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.ptd-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ptd-mode-btn:hover { background: #e2e8f0; color: #334155; }
.ptd-mode-btn.ptd-mode-active {
    background: #fff;
    color: #4f46e5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ptd-nav-sep {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    margin: 0 4px;
    align-self: center;
}

/* Today column (day mode) */
.ptd-th-today {
    background: linear-gradient(180deg, #fff7ed, #ffedd5) !important;
    border-bottom-color: #fb923c !important;
    color: #c2410c !important;
}
.ptd-td-today {
    background: #fffbf5 !important;
    border-left: 2px solid #fed7aa;
    border-right: 2px solid #fed7aa;
}
.ptd-badge-today {
    background: #f97316 !important;
}
.ptd-day-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.75;
    margin-top: 2px;
}

/* Chip actions overlay */
.ptd-chip {
    position: relative;
}
.ptd-chip-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    gap: 3px;
    flex-direction: row;
}
.ptd-chip:hover .ptd-chip-actions { display: flex; }
.ptd-chip-action-btn {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: background 0.12s ease, color 0.12s ease;
    backdrop-filter: blur(4px);
}
.ptd-chip-action-btn:hover { background: #fff; color: #4f46e5; }
.ptd-chip-btn-alias:hover  { color: #7c3aed; }

/* Alias badge on chip (lives in top row now) */
.ptd-chip-alias-badge {
    font-size: 8.5px;
    opacity: 0.5;
    flex-shrink: 0;
    line-height: 1;
}
.ptd-chip-aliased .ptd-chip-title {
    font-style: normal;
    font-weight: 700;
    padding-left: 12px;
    border-left: 2px solid currentColor;
    opacity: 0.9;
}

/* Alias popover */
.ptd-alias-pop {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
    padding: 12px 14px;
    min-width: 260px;
    animation: ws-pop-in 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.ptd-alias-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 10px;
}
.ptd-alias-folio {
    margin-left: auto;
    font-size: 10px;
    font-family: monospace;
    color: #6366f1;
    background: #eef2ff;
    padding: 1px 6px;
    border-radius: 4px;
}
.ptd-alias-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.15s ease;
    margin-bottom: 10px;
}
.ptd-alias-input:focus { border-color: #818cf8; background: #fff; }
.ptd-alias-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.ptd-alias-btn-clear {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.13s ease;
}
.ptd-alias-btn-clear:hover { color: #ef4444; border-color: #fca5a5; background: #fef2f2; }
.ptd-alias-btn-save {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: opacity 0.13s ease;
}
.ptd-alias-btn-save:hover { opacity: 0.88; }

/* ── Planning ToDo: Chip Hover Tooltip ──────────────────────────────────── */
#ptd-chip-tooltip {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34,1.4,0.64,1);
    will-change: transform, opacity;
}
#ptd-chip-tooltip.ptd-tt-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.ptd-tt-box {
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 13px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.36), 0 4px 16px rgba(0,0,0,0.2), 0 0 0 1px rgba(99,102,241,0.15);
    padding: 13px 15px 12px;
    min-width: 220px;
    max-width: 300px;
    backdrop-filter: blur(12px);
}
/* Folio header row */
.ptd-tt-folio-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ptd-tt-folio-badge {
    font-size: 10px;
    font-weight: 800;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: #a5b4fc;
    background: rgba(99,102,241,0.18);
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.5px;
    border: 1px solid rgba(99,102,241,0.25);
}
/* Category tag */
.ptd-tt-cat-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border: 1px solid transparent;
    margin-left: auto;
    flex-shrink: 0;
}
.ptd-tt-cat-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ptd-tt-cat-bug    { background: rgba(239,68,68,0.18);  color: #fca5a5; border-color: rgba(239,68,68,0.3);   }
.ptd-tt-cat-req    { background: rgba(245,158,11,0.18); color: #fcd34d; border-color: rgba(245,158,11,0.3);  }
.ptd-tt-cat-conf   { background: rgba(16,185,129,0.18); color: #6ee7b7; border-color: rgba(16,185,129,0.3);  }
.ptd-tt-cat-func   { background: rgba(139,92,246,0.18); color: #c4b5fd; border-color: rgba(139,92,246,0.3);  }
.ptd-tt-cat-none   { background: rgba(148,163,184,0.15); color: #94a3b8; border-color: rgba(148,163,184,0.25); }
/* Status row */
.ptd-tt-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.ptd-tt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
}
.ptd-tt-status-pending { background: rgba(249,115,22,0.18); color: #fdba74; border: 1px solid rgba(249,115,22,0.25); }
.ptd-tt-status-doc     { background: rgba(234,179,8,0.18);  color: #fde68a; border: 1px solid rgba(234,179,8,0.25);  }
.ptd-tt-status-hist    { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.2); }
.ptd-tt-status-dot-tt  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
/* Alias row */
.ptd-tt-alias-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 7px;
    padding: 7px 9px;
    background: rgba(99,102,241,0.1);
    border-radius: 8px;
    border: 1px solid rgba(99,102,241,0.18);
}
.ptd-tt-alias-label {
    font-size: 9px;
    font-weight: 700;
    color: #818cf8;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    white-space: nowrap;
    margin-top: 1px;
    flex-shrink: 0;
}
.ptd-tt-alias-val {
    font-size: 12px;
    font-weight: 600;
    color: #e0e7ff;
    line-height: 1.3;
    word-break: break-word;
}
/* Original title row */
.ptd-tt-title-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.ptd-tt-title-label {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    white-space: nowrap;
    margin-top: 1px;
    flex-shrink: 0;
}
.ptd-tt-title-val {
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
    line-height: 1.4;
    word-break: break-word;
}
/* Arrow */
.ptd-tt-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #0f172a;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.1);
    transform: rotate(45deg);
    top: -6px;
    left: 20px;
}

/* ---- BULK ACTION BUTTONS (masivas) ---- */
.bulk-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    white-space: nowrap;
    line-height: 1;
}
.bulk-action-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.18); }
.bulk-action-btn:active { transform: translateY(0); }

.bulk-action-doc {
    background: #1D4ED8;
    color: #fff;
    border-color: #1D4ED8;
}
.bulk-action-doc:hover { background: #1E40AF; }

.bulk-action-reject {
    background: #D97706;
    color: #fff;
    border-color: #D97706;
}
.bulk-action-reject:hover { background: #B45309; }

.bulk-action-delete {
    background: #DC2626;
    color: #fff;
    border-color: #DC2626;
}
.bulk-action-delete:hover { background: #B91C1C; }

/* ============================================================
   ITIL GENIUS LOGS PANEL (logs-kpi-grid, logs-filters, logs-table)
   ============================================================ */

/* KPI Grid */
.logs-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .logs-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .logs-kpi-grid { grid-template-columns: 1fr; }
}
.logs-kpi-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(15,23,42,0.05);
    transition: transform 0.15s, box-shadow 0.15s;
}
.logs-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,0.10); }
.logs-kpi-num {
    font-size: 30px;
    font-weight: 800;
    color: #1E293B;
    line-height: 1;
    letter-spacing: -1px;
}
.logs-kpi-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Variant accents */
.logs-kpi-success .logs-kpi-num { color: #16A34A; }
.logs-kpi-success { border-color: #BBF7D0; background: linear-gradient(135deg,#F0FDF4,#fff); }
.logs-kpi-warn    .logs-kpi-num { color: #D97706; }
.logs-kpi-warn    { border-color: #FDE68A; background: linear-gradient(135deg,#FFFBEB,#fff); }
.logs-kpi-rate    .logs-kpi-num { color: #6366F1; }
.logs-kpi-rate    { border-color: #C7D2FE; background: linear-gradient(135deg,#EEF2FF,#fff); }

/* Filters Row */
.logs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px 16px;
}
.logs-filter-select,
.logs-filter-input {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-family: inherit;
    color: #1E293B;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.logs-filter-select:focus,
.logs-filter-input:focus {
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.logs-filter-select { min-width: 160px; cursor: pointer; }
.logs-filter-input  { min-width: 130px; }
.logs-reload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
    margin-left: auto;
}
.logs-reload-btn:hover   { opacity: 0.9; transform: translateY(-1px); }
.logs-reload-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Table */
.logs-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 8px rgba(15,23,42,0.05);
}
.logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    font-family: inherit;
}
.logs-table thead tr {
    background: #F1F5F9;
    border-bottom: 2px solid #E2E8F0;
}
.logs-table th {
    padding: 11px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748B;
    white-space: nowrap;
}
.logs-tr { border-bottom: 1px solid #F1F5F9; transition: background 0.1s; }
.logs-tr:last-child { border-bottom: none; }
.logs-tr:hover { background: #F8FAFC; }
.logs-td {
    padding: 10px 14px;
    vertical-align: middle;
    color: #374151;
}
.logs-td-time  { white-space: nowrap; color: #64748B; font-size: 12px; }
.logs-td-folio { font-weight: 700; color: #1D4ED8; font-family: 'Courier New', monospace; }
.logs-td-text,
.logs-td-title,
.logs-td-short { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.logs-td-dur   { white-space: nowrap; font-variant-numeric: tabular-nums; color: #6B7280; }

/* State badges */
.log-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.log-badge-success { background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; }
.log-badge-empty   { background: #FEF9C3; color: #854D0E; border: 1px solid #FDE68A; }
.log-badge-error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }

/* Empty / loading states */
.logs-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94A3B8;
    font-style: italic;
    font-size: 13px;
}
.logs-loading { color: #6366F1; font-style: normal; font-weight: 600; }
.logs-error   { color: #DC2626; font-style: normal; }