/* analitic panel — dense Ahrefs-style dark theme */

body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; }

/* Nav items en sidebar */
.nav-item {
    display: block;
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    color: rgb(203 213 225); /* slate-300 */
    transition: all 0.15s;
    text-decoration: none;
}
.nav-item:hover { background: rgb(30 41 59); color: rgb(255 255 255); }
.nav-item.active { background: rgb(30 58 138); color: rgb(147 197 253); }  /* blue-900/blue-300 */

/* Tables */
table { width: 100%; font-size: 13px; border-collapse: collapse; }
table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    color: rgb(148 163 184);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgb(30 41 59);
    background: rgb(2 6 23);
}
table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgb(30 41 59); }
table tr:hover td { background: rgb(15 23 42); }

/* KPI cards */
.kpi-card {
    background: rgb(15 23 42);
    border: 1px solid rgb(30 41 59);
    border-radius: 0.5rem;
    padding: 1rem;
}

.section-card {
    background: rgb(15 23 42);
    border: 1px solid rgb(30 41 59);
    border-radius: 0.5rem;
    padding: 1.25rem;
}

/* Scroll */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgb(2 6 23); }
::-webkit-scrollbar-thumb { background: rgb(51 65 85); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(71 85 105); }

/* ========== LIGHT THEME · Variante 3 "Defined" + sidebar más oscuro + brand BLUE ========== */
body.theme-light { background: rgb(228 228 231) !important; color: rgb(9 9 11) !important; }
body.theme-light ::-webkit-scrollbar-track { background: rgb(212 212 216); }
body.theme-light ::-webkit-scrollbar-thumb { background: rgb(113 113 122); border-radius: 4px; }
body.theme-light ::-webkit-scrollbar-thumb:hover { background: rgb(82 82 91); }

/* Main BG: zinc-200 (más contraste con cards blancas) */
body.theme-light .bg-slate-950 { background-color: rgb(228 228 231) !important; }
/* Sidebar más OSCURO que main (zinc-300/400) */
body.theme-light .bg-slate-900\/80,
body.theme-light .bg-slate-900\/50,
body.theme-light .bg-slate-900 { background-color: rgb(212 212 216) !important; border-color: rgb(161 161 170) !important; }
/* Inputs */
body.theme-light .bg-slate-800 { background-color: rgb(244 244 245) !important; border-color: rgb(161 161 170) !important; color: rgb(9 9 11) !important; }
body.theme-light .bg-slate-950\/95 { background-color: rgba(228 228 231 / 0.95) !important; }

/* Text contrast fuerte */
body.theme-light .text-slate-100 { color: rgb(9 9 11) !important; }
body.theme-light .text-slate-200 { color: rgb(24 24 27) !important; }
body.theme-light .text-slate-300 { color: rgb(39 39 42) !important; }
body.theme-light .text-slate-400 { color: rgb(63 63 70) !important; }
body.theme-light .text-slate-500 { color: rgb(82 82 91) !important; }
body.theme-light .text-slate-600 { color: rgb(113 113 122) !important; }
body.theme-light .text-white { color: rgb(9 9 11) !important; }

/* Borders visibles */
body.theme-light .border-slate-800,
body.theme-light .border-slate-700 { border-color: rgb(161 161 170) !important; }

/* Cards: blancas + shadow más pronunciado para contraste con BG zinc-200 */
body.theme-light .kpi-card,
body.theme-light .section-card {
    background: rgb(255 255 255) !important;
    border-color: rgb(212 212 216) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Tables */
body.theme-light table th {
    background: rgb(244 244 245) !important;
    color: rgb(63 63 70) !important;
    border-bottom-color: rgb(212 212 216) !important;
    font-weight: 700 !important;
}
body.theme-light table td { border-bottom-color: rgb(228 228 231) !important; }
body.theme-light table tr:hover td { background: rgb(244 244 245) !important; }

/* ========== BRAND: emerald → BLUE (ambos themes) ========== */
/* Tailwind emerald classes → blue */
.text-emerald-400, body.theme-light .text-emerald-400 { color: rgb(37 99 235) !important; }   /* blue-600 */
.text-emerald-300, body.theme-light .text-emerald-300 { color: rgb(29 78 216) !important; }   /* blue-700 */
.text-emerald-500 { color: rgb(37 99 235) !important; }
.bg-emerald-600 { background-color: rgb(37 99 235) !important; }
.bg-emerald-500 { background-color: rgb(59 130 246) !important; }
.hover\:bg-emerald-500:hover { background-color: rgb(59 130 246) !important; }
.hover\:text-emerald-400:hover { color: rgb(37 99 235) !important; }
.border-emerald-500 { border-color: rgb(37 99 235) !important; }
.border-emerald-600 { border-color: rgb(29 78 216) !important; }

/* Position badges top3 (eran emerald) → indigo oscuro */
.bg-emerald-900\/60 { background-color: rgb(30 27 75) !important; }   /* indigo-950 dark */
.bg-emerald-900\/30 { background-color: rgb(49 46 129) !important; }
.text-emerald-300 { color: rgb(165 180 252) !important; }              /* indigo-300 */
.border-emerald-700 { border-color: rgb(67 56 202) !important; }       /* indigo-700 */
.border-emerald-800\/50 { border-color: rgb(67 56 202) !important; }

/* Light theme badges top3 */
body.theme-light .bg-emerald-900\/60,
body.theme-light .bg-emerald-900\/30 { background-color: rgb(219 234 254) !important; }  /* blue-100 */
body.theme-light .text-emerald-300 { color: rgb(30 64 175) !important; }                 /* blue-800 */
body.theme-light .border-emerald-700,
body.theme-light .border-emerald-800\/50 { border-color: rgb(147 197 253) !important; }  /* blue-300 */

/* Light theme: nav active blue */
body.theme-light .nav-item.active { background: rgb(219 234 254) !important; color: rgb(29 78 216) !important; }

/* Light theme: brand logo "Analitic" (era emerald-400) ya cubierto arriba */

/* Light theme: hovers de cards */
body.theme-light .hover\:border-emerald-600:hover { border-color: rgb(37 99 235) !important; }

/* Brand emerald se mantiene igual en light pero más oscuro */
body.theme-light .text-emerald-400 { color: rgb(5 150 105) !important; }
body.theme-light .text-emerald-300 { color: rgb(4 120 87) !important; }
body.theme-light .text-rose-400 { color: rgb(220 38 38) !important; }
body.theme-light .text-rose-300 { color: rgb(185 28 28) !important; }
body.theme-light .text-sky-300, body.theme-light .text-sky-400 { color: rgb(2 132 199) !important; }
body.theme-light .text-amber-300, body.theme-light .text-amber-400 { color: rgb(180 83 9) !important; }
body.theme-light .text-violet-400 { color: rgb(124 58 237) !important; }
body.theme-light .text-red-400 { color: rgb(220 38 38) !important; }

/* Backgrounds tintados (gradientes, badges) */
body.theme-light .bg-emerald-900\/30,
body.theme-light .bg-emerald-900\/60 { background-color: rgb(220 252 231) !important; }
body.theme-light .bg-sky-900\/30,
body.theme-light .bg-sky-900\/60 { background-color: rgb(224 242 254) !important; }
body.theme-light .bg-amber-900\/30,
body.theme-light .bg-amber-900\/60 { background-color: rgb(254 243 199) !important; }
body.theme-light .bg-rose-900\/30,
body.theme-light .bg-rose-900\/60 { background-color: rgb(254 226 226) !important; }
body.theme-light .border-emerald-700, body.theme-light .border-emerald-800\/50 { border-color: rgb(167 243 208) !important; }
body.theme-light .border-sky-700, body.theme-light .border-sky-800\/50 { border-color: rgb(186 230 253) !important; }
body.theme-light .border-amber-700, body.theme-light .border-amber-800\/50 { border-color: rgb(253 224 71) !important; }
body.theme-light .border-rose-700, body.theme-light .border-rose-800\/50 { border-color: rgb(252 165 165) !important; }

/* Nav items */
body.theme-light .nav-item { color: rgb(51 65 85); }
body.theme-light .nav-item:hover { background: rgb(241 245 249); color: rgb(15 23 42); }
body.theme-light .nav-item.active { background: rgb(220 252 231); color: rgb(4 120 87); }

/* Inputs/selects */
body.theme-light input, body.theme-light select { background: rgb(255 255 255) !important; color: rgb(15 23 42) !important; border-color: rgb(203 213 225) !important; }

/* ========== Tooltips didácticos ========== */
.tip {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgb(51 65 85);
    color: rgb(148 163 184);
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    cursor: help;
    margin-left: 4px;
    position: relative;
    vertical-align: middle;
    font-weight: bold;
    user-select: none;
}
.tip:hover {
    background: rgb(59 130 246);
    color: white;
}
.tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(15 23 42);
    color: rgb(226 232 240);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: normal;
    white-space: normal;
    width: 280px;
    max-width: 90vw;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    border: 1px solid rgb(51 65 85);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.tip:hover::after { opacity: 1; }

/* Para tooltips cerca del borde derecho, alinear a la derecha */
.tip.tip-right::after { left: auto; right: 0; transform: none; }
.tip.tip-left::after { left: 0; right: auto; transform: none; }

/* Intro box (subtítulo didáctico arriba de sub-views) */
.intro-box {
    background: linear-gradient(135deg, rgb(30 41 59) 0%, rgb(15 23 42) 100%);
    border: 1px solid rgb(51 65 85);
    border-left: 3px solid rgb(59 130 246);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 13px;
    color: rgb(203 213 225);
    line-height: 1.5;
}
.intro-box strong { color: rgb(96 165 250); }
.intro-box code { background: rgb(51 65 85); padding: 1px 6px; border-radius: 3px; font-size: 11px; color: rgb(125 211 252); }

/* Light theme adjustments */
body.theme-light .tip { background: rgb(226 232 240); color: rgb(71 85 105); }
body.theme-light .tip:hover { background: rgb(37 99 235); color: white; }
body.theme-light .tip::after { background: rgb(15 23 42); color: rgb(241 245 249); }
body.theme-light .intro-box {
    background: linear-gradient(135deg, rgb(241 245 249) 0%, rgb(248 250 252) 100%);
    border-color: rgb(203 213 225);
    color: rgb(51 65 85);
}
body.theme-light .intro-box strong { color: rgb(37 99 235); }
body.theme-light .intro-box code { background: rgb(226 232 240); color: rgb(30 64 175); }

/* Glossary footer */
.glossary {
    margin-top: 32px;
    padding: 16px;
    background: rgb(15 23 42);
    border: 1px solid rgb(30 41 59);
    border-radius: 8px;
    font-size: 12px;
}
.glossary summary {
    cursor: pointer;
    font-weight: 600;
    color: rgb(148 163 184);
    user-select: none;
}
.glossary summary:hover { color: rgb(96 165 250); }
.glossary dl { margin-top: 12px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
.glossary dt { font-weight: 600; color: rgb(96 165 250); }
.glossary dd { color: rgb(148 163 184); margin: 0; }
body.theme-light .glossary { background: rgb(248 250 252); border-color: rgb(203 213 225); }
body.theme-light .glossary dt { color: rgb(37 99 235); }
body.theme-light .glossary dd { color: rgb(71 85 105); }

/* ========== FIXES v2: tooltip positioning + overflow ========== */
/* Asegurar que los contenedores no corten los tooltips */
.intro-box, .kpi-card, .section-card { overflow: visible; }

/* Tooltip aparece DEBAJO (más confiable, no se corta arriba) */
.tip::after {
    bottom: auto !important;
    top: 130% !important;
    z-index: 9999 !important;
    max-width: 320px;
    width: max-content;
    min-width: 240px;
}

/* Pequeña flecha apuntando hacia arriba al tooltip */
.tip::before {
    content: '';
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgb(15 23 42);
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 9999;
}
.tip:hover::before { opacity: 1; }
body.theme-light .tip::before { border-bottom-color: rgb(15 23 42); }

/* En intro-box, los tooltips deben ir DELANTE de todo */
.intro-box { position: relative; z-index: 1; }
.intro-box:hover, .intro-box:has(.tip:hover) { z-index: 10; }

/* ========== Keywords table — Ahrefs-style badges ========== */
.kw-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    margin-right: 4px;
    margin-bottom: 2px;
}
.kw-badge-i  { background: rgb(30 58 138); color: rgb(191 219 254); }     /* Informational - blue */
.kw-badge-c  { background: rgb(120 53 15); color: rgb(254 215 170); }     /* Commercial - amber */
.kw-badge-n  { background: rgb(76 29 149); color: rgb(221 214 254); }     /* Navigational - purple */
.kw-badge-t  { background: rgb(20 83 45); color: rgb(187 247 208); }      /* Transactional - emerald */
.kw-badge-local   { background: rgb(15 118 110); color: rgb(204 251 241); } /* Local - teal */
.kw-badge-branded { background: rgb(157 23 77); color: rgb(251 207 232); } /* Branded - pink */

.kw-entity {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgb(30 41 59);
    color: rgb(203 213 225);
    font-size: 10px;
    font-weight: 500;
    border: 1px solid rgb(51 65 85);
}
.kw-entity-geo::before { content: '📍 '; }
.kw-entity-brand::before { content: '🏷️ '; }

.kw-lang {
    display: inline-flex;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgb(30 41 59);
    color: rgb(148 163 184);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kw-na {
    color: rgb(71 85 105);
    font-size: 11px;
    font-style: italic;
    cursor: help;
}

/* Light theme adjustments */
body.theme-light .kw-badge-i  { background: rgb(219 234 254); color: rgb(30 58 138); }
body.theme-light .kw-badge-c  { background: rgb(254 215 170); color: rgb(120 53 15); }
body.theme-light .kw-badge-n  { background: rgb(221 214 254); color: rgb(76 29 149); }
body.theme-light .kw-badge-t  { background: rgb(187 247 208); color: rgb(20 83 45); }
body.theme-light .kw-badge-local   { background: rgb(204 251 241); color: rgb(15 118 110); }
body.theme-light .kw-badge-branded { background: rgb(251 207 232); color: rgb(157 23 77); }
body.theme-light .kw-entity { background: rgb(241 245 249); color: rgb(51 65 85); border-color: rgb(203 213 225); }
body.theme-light .kw-lang { background: rgb(241 245 249); color: rgb(71 85 105); }
body.theme-light .kw-na { color: rgb(148 163 184); }

/* Sidebar section separator */
.sidebar-section-title {
    padding: 0 0.5rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(100 116 139);
    margin-bottom: 4px;
    margin-top: 12px;
    font-weight: 600;
}
body.theme-light .sidebar-section-title { color: rgb(100 116 139); }

/* ========== Heatmap calendar — improved ========== */
.heatmap-cell {
    width: 14px; height: 14px;
    border-radius: 3px;
    transition: transform 0.12s ease;
    cursor: default;
}
.heatmap-cell:hover {
    transform: scale(1.4);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.5);
}

/* Chart containers — más padding visual */
.section-card canvas { font-family: inherit; }

/* Kpi cards — más densidad y mejor hover */
.kpi-card {
    background: rgb(15 23 42);
    border: 1px solid rgb(30 41 59);
    border-radius: 8px;
    padding: 14px 16px;
    transition: border-color 0.15s;
}
.kpi-card:hover { border-color: rgb(51 65 85); }

body.theme-light .kpi-card { background: rgb(255 255 255); border-color: rgb(226 232 240); }
body.theme-light .kpi-card:hover { border-color: rgb(148 163 184); }

/* Section card consistency */
.section-card {
    background: rgb(15 23 42);
    border: 1px solid rgb(30 41 59);
    border-radius: 8px;
    padding: 16px;
}
body.theme-light .section-card { background: rgb(255 255 255); border-color: rgb(226 232 240); }