/* 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: flex;
    align-items: center;
    justify-content: space-between;
    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;
}
/* Desactivar pseudo-elementos ::after y ::before para evitar tooltips dobles */
.tip::after,
.tip::before,
.tip:hover::after,
.tip:hover::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 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; }

/* Override v2 cancelado para usar exclusivamente el tooltip flotante único */
.tip::after, .tip::before { display: none !important; }

/* 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); }

/* ========== Floating Smart Tooltip (ÚNICO Y FLOTANTE) ========== */
#app-floating-tooltip {
    position: fixed;
    z-index: 1000000;
    max-width: 310px;
    min-width: 180px;
    background: #0b132b;
    color: #f1f5f9;
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 9px 13px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.9), 0 0 1px 1px rgba(16, 185, 129, 0.2);
    pointer-events: none;
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
    opacity: 0;
    transform: translateY(4px);
    display: block;
}
#app-floating-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
#app-floating-tooltip.hidden {
    display: none !important;
    opacity: 0 !important;
}
body.theme-light #app-floating-tooltip {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(5, 150, 105, 0.4);
    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.2), 0 0 1px 1px rgba(5, 150, 105, 0.15);
}

/* Polished .tip badge */
.tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(51, 65, 85, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    cursor: help;
    margin-left: 5px;
    vertical-align: middle;
    user-select: none;
    transition: all 0.15s ease-in-out;
    flex-shrink: 0;
}
.tip:hover {
    background: #10b981;
    border-color: #059669;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
    transform: scale(1.1);
}
body.theme-light .tip {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #475569;
}
body.theme-light .tip:hover {
    background: #059669;
    border-color: #047857;
    color: #ffffff;
}