/* === Reset y base === */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* === Paleta corporativa Heroturfs (manual de marca) === */
    --hero-navy: #323f49;
    --hero-blue: #005e94;
    --hero-red: #e3332b;
    /* Paleta extendida Heroturfs: variaciones tonales para charts con
       multiples series, manteniendo coherencia con la marca. */
    --hero-blue-light: #4f9bcb;   /* azul claro (CAC, metricas coste secundarias) */
    --hero-red-dark:   #a8231c;   /* rojo oscuro (clientes convertidos, derivada de lead) */
    --hero-green:      #1f8c4d;   /* verde turf institucional (revenue, resultado) */
    --hero-green-light: #3eb072;  /* verde claro (ROAS, derivada de revenue) */
    --hero-cyan:       #5cb5c4;   /* cyan (metricas de eficiencia tipo conversion %) */

    /* Fondo claro (peticion explicita: NO usar Hero Navy como fondo) */
    --bg: #f7f9fb;
    --surface: #ffffff;
    --border: #dde3ea;

    --text: var(--hero-navy);
    --text-muted: #64748b;

    /* Color de accion principal: Hero Blue */
    --accent: var(--hero-blue);
    --accent-hover: #004876;

    --success: #16a34a;
    --warning: #f59e0b;
    --danger: var(--hero-red);
    --leads: #7c3aed;

    --shadow-sm: 0 1px 2px rgba(50, 63, 73, 0.05);
    --shadow: 0 2px 8px rgba(50, 63, 73, 0.07);
    --shadow-lg: 0 8px 24px rgba(50, 63, 73, 0.10);
    --radius: 12px;
    --radius-sm: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }

/* === Sticky header (envuelve topbar + meta-bar + tabs) === */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--surface);
    box-shadow: 0 1px 0 var(--border);
}

/* === Tabs (dentro de sticky-header) === */
.tabs {
    background: var(--surface);
    padding: 0 32px;
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
    background: transparent;
    border: none;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tab-btn:hover {
    color: var(--text);
    background: linear-gradient(to bottom, transparent, var(--bg));
}
.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* Tab panes */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* === Topbar === */
/* Fondo Hero Navy + logo blanco para que la marca tenga presencia */
.topbar {
    background: var(--hero-navy);
    border-bottom: 1px solid var(--hero-navy);
    padding: 4px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    color: #fff;
}
.topbar .subtitle { color: rgba(255, 255, 255, 0.65); }
/* Botones de sync sobre Navy: invertimos a contrast outline */
.topbar .btn-primary {
    background: #fff;
    color: var(--hero-navy);
}
.topbar .btn-primary:hover { background: var(--hero-blue); color: #fff; }
/* Selector de rango sobre fondo Navy */
.topbar .range-selector {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
}
.topbar .range-btn { color: rgba(255, 255, 255, 0.70); }
.topbar .range-btn:hover { color: #fff; }
.topbar .range-btn.active {
    background: #fff;
    color: var(--hero-navy);
}
/* Country dropdown sobre Navy */
.topbar .country-trigger {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.topbar .country-trigger:hover { border-color: #fff; }
.topbar .country-trigger-arrow { color: rgba(255, 255, 255, 0.70); }
/* Cuando hay pais seleccionado el fondo del trigger pasa a blanco-azulado
   (regla .has-value mas abajo). En el topbar Navy hay que devolver el
   texto a color oscuro para que se lea. */
.topbar .country-dropdown.has-value .country-trigger {
    color: var(--hero-navy);
}
.topbar .country-dropdown.has-value .country-trigger-arrow {
    color: var(--hero-navy);
}

.topbar-left h1 {
    font-size: 18px;
    color: var(--text);
}

.topbar-left .brand {
    color: var(--accent);
}

.topbar-left .subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    display: block;
}

/* Logo Heroturfs en topbar. El PNG oficial es Hero Navy; lo invertimos a
   blanco con filter porque la topbar tiene fondo Navy. */
.brand-logo {
    height: 56px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* === Country selector === */
/* === Country dropdown custom (con banderas SVG reales) === */
.country-dropdown {
    position: relative;
    display: inline-block;
}
.country-trigger {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.country-trigger:hover { border-color: var(--accent); }
.country-trigger:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.country-dropdown.open .country-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.country-dropdown.has-value .country-trigger {
    background: linear-gradient(135deg, #fff, #eff6ff);
    border-color: var(--accent);
}
.country-trigger-flag {
    display: inline-flex;
    align-items: center;
    width: 22px;
    height: 16px;
    flex-shrink: 0;
}
.country-trigger-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.country-trigger-arrow {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform 0.2s;
}
.country-dropdown.open .country-trigger-arrow { transform: rotate(180deg); }

.country-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 360px;
    overflow-y: auto;
    z-index: 50;
    display: none;
}
.country-dropdown.open .country-options { display: block; }
.country-options li {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: background 0.1s;
    white-space: nowrap;
}
.country-options li:hover { background: var(--bg); }
.country-options li.selected {
    background: #eff6ff;
    color: var(--accent);
    font-weight: 600;
}
.country-options li .flag-img {
    width: 22px;
    height: 16px;
    flex-shrink: 0;
}

/* === Range dropdown === */
/* Mismo look-and-feel que .country-dropdown para coherencia visual.
   Sustituye al antiguo .range-selector (botones) por un selector
   compacto con popover. */
.range-dropdown {
    position: relative;
    display: inline-block;
}
.range-trigger {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.range-trigger:hover { border-color: var(--accent); }
.range-trigger:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.range-dropdown.open .range-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.range-trigger-icon {
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}
.range-trigger-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.range-trigger-arrow {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform 0.2s;
}
.range-dropdown.open .range-trigger-arrow { transform: rotate(180deg); }

.range-options {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 50;
    display: none;
}
.range-dropdown.open .range-options { display: block; }
.range-options li {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: background 0.1s;
    white-space: nowrap;
}
.range-options li:hover { background: var(--bg); }
.range-options li.selected {
    background: #eff6ff;
    color: var(--accent);
    font-weight: 600;
}
.range-options-sep {
    height: 1px;
    margin: 4px 0;
    background: var(--border);
    padding: 0;
    cursor: default;
    pointer-events: none;
}
.range-options-sep:hover { background: var(--border); }
.range-option-custom {
    color: var(--text-muted);
    font-style: italic;
}

/* Topbar Navy: invertimos colores como hace .country-trigger */
.topbar .range-trigger {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.topbar .range-trigger:hover { border-color: #fff; }
.topbar .range-trigger-arrow { color: rgba(255, 255, 255, 0.70); }
/* Cuando el rango NO es el default (30 dias) marcamos has-value para
   destacar visualmente que esta filtrando algo distinto al estandar */
.topbar .range-dropdown.has-value .range-trigger {
    background: linear-gradient(135deg, #fff, #eff6ff);
    color: var(--hero-navy);
    border-color: var(--accent);
}
.topbar .range-dropdown.has-value .range-trigger-arrow {
    color: var(--hero-navy);
}

/* Imagen de bandera generica */
.flag-img {
    display: inline-block;
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    vertical-align: middle;
    margin-right: 6px;
}
.flag-img.flag-big { width: 26px; height: 19px; }
.flag-fallback {
    display: inline-block;
    width: 18px;
    height: 13px;
    text-align: center;
    line-height: 13px;
    font-size: 12px;
}
.country-selector:hover { border-color: var(--accent); }
.country-selector:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.country-selector:not([value=""]):not(:has(option[value=""]:checked)) {
    background: linear-gradient(135deg, #fff, #eff6ff);
    border-color: var(--accent);
}

/* === Range selector === */
.range-selector {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
}

/* === Indicador de fuente en KPI label === */
.kpi-source {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    background: #ede9fe;
    color: #6d28d9;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.range-btn {
    background: transparent;
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    font-family: inherit;
}

.range-btn:hover { color: var(--text); }

.range-btn.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.range-btn-icon {
    font-size: 13px;
    margin-right: 3px;
    vertical-align: middle;
}

/* Popover de rango personalizado */
.custom-range {
    position: relative;
    display: inline-block;
}
.custom-range-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 14px;
    z-index: 100;
    min-width: 240px;
}
.custom-range.open .custom-range-popover,
.custom-range-popover.open { display: block; }
.custom-range-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.custom-range-row label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}
.custom-range-row input[type="date"] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    font-size: 12px;
    font-family: inherit;
    background: var(--bg);
}
.custom-range-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.custom-range-actions .btn {
    padding: 5px 12px;
    font-size: 12px;
}

/* === Botones === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled {
    background: var(--text-muted);
    cursor: wait;
    opacity: 0.7;
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg); }

.sync-icon {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
}

.btn.syncing .sync-icon {
    animation: spin 1s linear infinite;
}

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

/* === Meta bar === */
.meta-bar {
    padding: 12px 32px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg);
}

.meta-bar .separator {
    margin: 0 8px;
    opacity: 0.5;
}

/* === Alerts === */
.alerts-bar {
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    border-bottom: 1px solid var(--border);
    padding: 0 32px;
}
/* Boton-toggle: ocupa toda la cabecera para que sea facil clicar */
.alerts-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 12px 0;
    color: inherit;
}
.alerts-toggle:hover .alerts-chevron { color: #92400e; }
.alerts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.alerts-title {
    font-size: 15px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.alerts-icon { font-size: 18px; }
.alerts-count {
    background: var(--surface);
    color: var(--text);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
/* Dot rojo cuando hay alertas criticas y el banner esta colapsado, para
   que la urgencia sea visible aunque este plegado */
.alerts-severity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
    animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.alerts-period {
    color: var(--text-muted);
    font-size: 12px;
    margin-left: auto;
}
.alerts-chevron {
    color: #b45309;
    font-size: 14px;
    transition: transform 0.18s ease;
    display: inline-block;
}
.alerts-bar.collapsed .alerts-chevron { transform: rotate(-90deg); }
.alerts-bar.collapsed .alerts-list { display: none; }
.alerts-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 0 14px 0;
}
/* X para descartar una alerta concreta (solo durante la sesion) */
.alert-chip {
    position: relative;
}
.alert-chip-dismiss {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.alert-chip:hover .alert-chip-dismiss { opacity: 1; }
.alert-chip-dismiss:hover { background: #fee2e2; color: var(--danger); }
.alert-chip {
    flex: 0 0 auto;
    min-width: 280px;
    max-width: 380px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--warning);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--shadow-sm);
}
.alert-chip.severity-critical { border-left-color: var(--danger); }
.alert-chip.severity-warning  { border-left-color: var(--warning); }
.alert-chip.severity-boost    { border-left-color: var(--success); }
.alert-chip-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.alert-chip-tags {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.alert-chip-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
}
.alert-chip-tag.tag-meta    { background: #dbeafe; color: #1e40af; }
.alert-chip-tag.tag-google  { background: #fed7aa; color: #9a3412; }
.alert-chip-tag.tag-DROP     { background: #fee2e2; color: var(--danger); }
.alert-chip-tag.tag-STOPPED  { background: #fee2e2; color: var(--danger); }
.alert-chip-tag.tag-BOOST    { background: #dcfce7; color: var(--success); }
.alert-chip-change {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.alert-chip-change.change-negative { color: var(--danger); }
.alert-chip-change.change-positive { color: var(--success); }
.alert-chip-name {
    font-size: 12px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.alert-chip-vals {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* === Content === */
.content {
    padding: 8px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* === KPI grid === */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s;
    /* Flex column para que el delta se alinee abajo aunque algunas cards
       no tengan .kpi-unit. Asi todos los % quedan en la misma fila. */
    display: flex;
    flex-direction: column;
}

.kpi-card:hover { box-shadow: var(--shadow); }

.kpi-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 8px;
}

.kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.kpi-unit {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-delta {
    /* margin-top: auto empuja la pildora al fondo del card (flex col).
       Asi todos los % de la fila quedan alineados aunque algunos cards
       no tengan unidad (EUR/%). */
    margin-top: auto;
    font-size: 11px;
    font-weight: 600;
    align-self: flex-start;  /* el flex padre estira -> sin esto se ancha */
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-height: 18px;
}
.kpi-delta:empty { display: none; }
.kpi-delta.delta-up   { background: #dcfce7; color: var(--success); }
.kpi-delta.delta-down { background: #fee2e2; color: var(--danger); }
.kpi-delta.delta-flat { background: var(--bg); color: var(--text-muted); }
.kpi-delta-arrow { font-size: 13px; line-height: 1; }
.kpi-delta-prev {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 4px;
    font-size: 10px;
}

.kpi-spend .kpi-value { color: var(--accent); }
.kpi-leads .kpi-value { color: var(--leads); }
.kpi-cpl .kpi-value { color: var(--leads); }
/* KPIs Navision: revenue facturado + ROAS real (verde/oscuro = "dinero de verdad") */
.kpi-revenue-real .kpi-value { color: var(--success); }
.kpi-roas-real .kpi-value { color: var(--success); font-size: 28px; }

/* Google Ads KPIs */
.kpi-google-cost .kpi-value { color: #f97316; }
.kpi-google-conv .kpi-value { color: var(--success); }
.kpi-google-revenue .kpi-value { color: var(--success); }
.kpi-google-roas .kpi-value { color: var(--success); font-size: 28px; }
.section-badge-google {
    background: linear-gradient(135deg, #4285F4, #34A853);
}
.section-badge-meta {
    /* Meta gradient: blue Facebook -> magenta Instagram */
    background: linear-gradient(135deg, #0866FF, #C13584);
}
/* Badge "BLENDED" en el header de los charts top del Resumen */
.resumen-blended-badge {
    background: linear-gradient(135deg, var(--hero-blue), var(--hero-navy));
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-right: 12px;
}
.shopping-header #resumen-info { margin-right: auto; }
.shopping-header .meta-toggle input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
}
/* Header de la tarjeta Meta: agrupa toggle + selector de granularidad */
.meta-header-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}
.meta-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.meta-toggle:hover { color: var(--text); }
.meta-select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
}
.meta-select:hover { border-color: var(--accent); }
.meta-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 94, 148, 0.1); }
.google-status-msg {
    color: var(--warning);
    font-size: 12px;
    font-weight: 500;
}

/* HubSpot KPIs */
.kpi-hs-contacts .kpi-value { color: #0ea5e9; }
.kpi-hs-won .kpi-value { color: var(--success); }
.kpi-hs-revenue .kpi-value { color: var(--success); }
.kpi-hs-revenue-meta .kpi-value { color: var(--accent); }
.kpi-hs-revenue-google .kpi-value { color: #f97316; }
.kpi-roas .kpi-value { color: var(--success); font-size: 32px; }
.kpi-cpl-real .kpi-value { color: var(--leads); }
.kpi-cac .kpi-value { color: var(--warning); }

/* Section divider */
.section-divider {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px dashed var(--border);
}
.section-title {
    font-size: 22px;
    color: var(--text);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.section-badge {
    background: linear-gradient(135deg, var(--hero-red), #c42a23);
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.section-desc {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
}

/* Funnel */
.funnel-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
}
.funnel-stages {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: 8px;
}
.funnel-stage {
    flex: 1 1 0;
    min-width: 140px;
    background: linear-gradient(135deg, var(--bg), #fff);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    position: relative;
    transition: transform 0.15s;
}
.funnel-stage:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.funnel-stage:nth-child(1) { border-left-color: #2563eb; }
.funnel-stage:nth-child(2) { border-left-color: #7c3aed; }
.funnel-stage:nth-child(3) { border-left-color: #0ea5e9; }
.funnel-stage:nth-child(4) { border-left-color: #f59e0b; }
.funnel-stage:nth-child(5) { border-left-color: #16a34a; }
.funnel-stage:nth-child(6) { border-left-color: #15803d; background: linear-gradient(135deg, #dcfce7, #fff); }
.funnel-stage-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}
.funnel-stage-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.funnel-stage-unit {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
}
.funnel-stage-pct {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 2px 6px;
    border-radius: 8px;
}

/* === Weekly table (estilo Excel) === */
.weekly-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.weekly-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    gap: 12px;
}
.weekly-info {
    font-size: 12px;
    color: var(--text-muted);
}
.weekly-table-wrapper {
    overflow: auto;
    max-width: 100%;
    /* Altura limitada => el wrapper es el contenedor scroll y la cabecera
       puede ser sticky relativa a el. El sticky-header del dashboard sigue
       arriba, y este wrapper deja espacio razonable debajo. */
    max-height: calc(100vh - var(--sticky-header-h, 120px) - 80px);
    -webkit-overflow-scrolling: touch;
    position: relative;
    scroll-behavior: smooth;
}

/* Botones de scroll horizontal a izquierda y derecha */
.scroll-controls {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 12px 0;
    background: var(--surface);
}
.scroll-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 28px;
    cursor: pointer;
    color: var(--text);
    font-size: 14px;
    line-height: 1;
    transition: all 0.15s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.scroll-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.scroll-btn:disabled { opacity: 0.35; cursor: not-allowed; background: var(--bg); color: var(--text-muted); }
.scroll-btn:disabled:hover { background: var(--bg); color: var(--text-muted); border-color: var(--border); }

/* Fila de año en cabecera doble */
#weekly-table thead th.col-year,
#shopping-detail-table thead th.col-year {
    background: linear-gradient(to bottom, var(--bg), var(--surface));
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    letter-spacing: 0;
    padding: 6px 8px;
    text-transform: none;
}

/* Sticky vertical de cabeceras de las tablas tipo Excel.
   El wrapper tiene altura limitada y es el contenedor scroll, asi que
   el sticky del thead es relativo al wrapper (top:0). */
:root {
    --sticky-header-h: 120px;
    --year-row-h: 32px;
}
#weekly-table thead th.col-year,
#shopping-detail-table thead th.col-year {
    position: sticky;
    top: 0;
    z-index: 3;
}
#weekly-table thead th.col-period,
#shopping-detail-table thead th.col-period {
    position: sticky;
    top: var(--year-row-h);
    z-index: 3;
    background: var(--bg);
}
/* col-label y col-total tienen rowspan=2: usan top:0 (esquina superior)
   y mayor z-index para taparlo todo al hacer scroll en ambas direcciones */
#weekly-table thead th.col-label,
#shopping-detail-table thead th.col-label {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 6;
    background: var(--bg);
}
#weekly-table thead th.col-total,
#shopping-detail-table thead th.col-total {
    position: sticky;
    top: 0;
    z-index: 5;
}
#weekly-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}
#weekly-table thead th {
    background: var(--bg);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    text-align: right;
}
#weekly-table thead th.col-label {
    text-align: left;
    min-width: 240px;
    width: 240px;
}
#weekly-table thead th.col-total {
    background: #fef3c7;
    color: #92400e;
    border-left: 1px solid var(--border);
    border-right: 2px solid #fbbf24;
}
#weekly-table thead th.col-period {
    min-width: 90px;
}
#weekly-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
}
#weekly-table tbody td.col-label {
    text-align: left;
    color: var(--text);
}
#weekly-table tbody td.col-total {
    background: #fffbeb;
    font-weight: 600;
    border-right: 2px solid #fbbf24;
    color: #78350f;
}
/* Sticky primera columna y columna acumulado */
#weekly-table thead th.col-label,
#weekly-table tbody td.col-label {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 2;
    border-right: 1px solid var(--border);
}
#weekly-table thead th.col-label { background: var(--bg); z-index: 3; }
/* Filas con sub-indent */
#weekly-table tbody tr.row-indent td.col-label {
    padding-left: 28px;
    color: var(--text-muted);
    font-weight: 400;
}
#weekly-table tbody tr.row-header td {
    font-weight: 700;
    background: linear-gradient(90deg, #f0f9ff, var(--surface));
}
#weekly-table tbody tr.row-header td.col-total {
    background: #fef3c7;
}
#weekly-table tbody tr.section-title td {
    background: linear-gradient(135deg, var(--hero-navy), var(--hero-blue));
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    padding: 10px 12px;
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 3;
}
#weekly-table tbody tr.section-title td.col-total,
#weekly-table tbody tr.section-title td.col-period {
    background: #2563eb;
    color: #fff;
}
#weekly-table tbody tr:hover td:not(.col-total) {
    background: var(--bg);
}
#weekly-table tbody td.empty {
    color: var(--text-muted);
    font-weight: 300;
}
#weekly-table tbody td.note-disabled {
    color: var(--text-muted);
    font-style: italic;
    font-size: 10px;
}
.wgran-btn, .sgran-btn, .srgran-btn, .mgran-btn, .rgran-btn {
    background: transparent;
    border: none;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    font-family: inherit;
}
.wgran-btn:hover, .sgran-btn:hover, .srgran-btn:hover, .mgran-btn:hover, .rgran-btn:hover { color: var(--text); }
.wgran-btn.active, .sgran-btn.active, .srgran-btn.active, .mgran-btn.active, .rgran-btn.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

/* === Comparativa Shopping por pais === */
.shopping-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.shopping-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    gap: 12px;
}
/* Chips de paises (toggle visibilidad en los 3 graficos) */
.shopping-country-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    align-items: center;
}
.shopping-country-chips-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-right: 4px;
}
.country-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1.5px solid;
    background: var(--surface);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: opacity 0.15s, transform 0.1s;
    user-select: none;
}
.country-chip:hover { transform: translateY(-1px); }
.country-chip.disabled {
    opacity: 0.35;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.country-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.country-chip .flag-img { margin-right: 0; }

.shopping-grid {
    display: grid;
    /* 3 columnas fijas en desktop para tabs Shopping/Search/Meta (3 charts).
       En tablet baja a 1 columna. El Resumen sobreescribe a 4 cols (8 charts). */
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
}
.resumen-top-card .shopping-grid {
    /* Resumen tiene 8 charts -> 4 cols para layout limpio 4+4. */
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1400px) {
    .resumen-top-card .shopping-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1200px) {
    .shopping-grid { grid-template-columns: 1fr; }
    .resumen-top-card .shopping-grid { grid-template-columns: 1fr; }
}
.chart-shopping {
    background: var(--surface);
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 18px 20px;
}
.chart-shopping .chart-body { height: 280px; }
.shopping-totals {
    border-top: 1px solid var(--border);
    padding: 16px 20px;
}

/* === Marca columnas parciales en la vista por periodos === */
/* Header con la columna parcial: fondo levemente amarillento + asterisco */
#weekly-table th.col-period.col-partial {
    background: rgba(245, 158, 11, 0.10);  /* warning naranja muy sutil */
}
#weekly-table th.col-period.col-partial .partial-star {
    color: var(--warning);
    font-weight: 700;
    margin-left: 2px;
}
/* Celdas de la columna parcial: texto un poco atenuado para senalar
   que el dato no es comparable con un bucket completo. */
#weekly-table td.col-period.col-partial {
    background: rgba(245, 158, 11, 0.04);
    color: var(--text-muted);
}

/* === Drill-down por pais en la vista por periodos del Resumen === */
#weekly-table tr.weekly-drill-row {
    cursor: pointer;
    transition: background 0.15s;
}
#weekly-table tr.weekly-drill-row:hover {
    background: linear-gradient(to right, rgba(0, 94, 148, 0.05), transparent);
}
#weekly-table tr.weekly-subrow {
    background: var(--bg);
    font-size: 12px;
}
#weekly-table tr.weekly-subrow .col-label {
    padding-left: 36px;  /* indent visual bajo la fila padre */
    font-weight: 500;
    color: var(--text-muted);
}
#weekly-table tr.weekly-subrow .col-label .flag-img {
    margin-right: 6px;
}
#weekly-table tr.weekly-subrow .col-total,
#weekly-table tr.weekly-subrow .col-period {
    color: var(--text-muted);
}

/* === Drill-down de Search a nivel ad group === */
/* Filas de la tabla totales que pinchan para expandir ad groups */
tr.drill-row {
    cursor: pointer;
    transition: background 0.15s;
}
tr.drill-row:hover {
    background: linear-gradient(to right, rgba(0, 94, 148, 0.05), transparent);
}
.drill-chevron {
    display: inline-block;
    margin-right: 6px;
    color: var(--text-muted);
    font-size: 10px;
    transition: transform 0.2s;
}
.drill-chevron.open {
    transform: rotate(90deg);
    color: var(--accent);
}
/* Sub-filas que cuelgan del pais expandido (usan colspan total con grid interno) */
tr.drill-subrow {
    background: var(--bg);
}
tr.drill-subrow > td {
    padding: 0 !important;
    border-bottom: 1px solid var(--border);
}
tr.drill-subhead > td {
    background: rgba(50, 63, 73, 0.04);
    font-weight: 600;
}
.drill-subhead-grid,
.drill-subrow-grid {
    display: grid;
    grid-template-columns: minmax(280px, 2.4fr) repeat(7, minmax(80px, 1fr));
    gap: 12px;
    padding: 8px 16px 8px 48px;  /* sangrado a la izquierda para indicar jerarquia */
    align-items: center;
    font-size: 12px;
}
.drill-subhead-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.drill-subhead-num {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-align: right;
}
.drill-subrow-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;  /* permite que text-overflow funcione dentro de grid */
}
.drill-ag-name {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drill-camp-name {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drill-subrow-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.drill-subrow-grid.drill-paused {
    opacity: 0.55;
}

/* Tabla tipo Excel de la pestaña Shopping (similar a #weekly-table pero independiente) */
.shopping-detail-table-section {
    border-top: 1px solid var(--border);
}
.shopping-detail-header {
    padding: 12px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.shopping-detail-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* Reusamos los estilos de #weekly-table aplicandolos tambien a #shopping-detail-table */
#shopping-detail-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}
#shopping-detail-table thead th {
    background: var(--bg);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    text-align: right;
}
#shopping-detail-table thead th.col-label {
    text-align: left;
    min-width: 220px;
    width: 220px;
}
#shopping-detail-table thead th.col-total {
    background: #fef3c7;
    color: #92400e;
    border-left: 1px solid var(--border);
    border-right: 2px solid #fbbf24;
}
#shopping-detail-table thead th.col-period { min-width: 90px; }
#shopping-detail-table tbody td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
}
#shopping-detail-table tbody td.col-label {
    text-align: left;
    color: var(--text);
    padding-left: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}
#shopping-detail-table tbody td.col-total {
    background: #fffbeb;
    font-weight: 600;
    border-right: 2px solid #fbbf24;
    color: #78350f;
}
/* Sticky primera columna */
#shopping-detail-table thead th.col-label,
#shopping-detail-table tbody td.col-label {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 2;
    border-right: 1px solid var(--border);
}
#shopping-detail-table thead th.col-label { background: var(--bg); z-index: 3; }
/* Section title (bloque por metrica) */
#shopping-detail-table tbody tr.section-title td {
    background: linear-gradient(135deg, var(--hero-navy), var(--hero-blue));
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    padding: 8px 12px;
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 3;
}
#shopping-detail-table tbody tr:hover td:not(.col-total) { background: var(--bg); }
#shopping-detail-table tbody td.empty { color: var(--text-muted); font-weight: 300; }

/* Mini etiqueta de cambio vs periodo anterior (en celdas de la tabla) */
.delta-mini {
    display: block;
    font-size: 10px;
    font-weight: 600;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.delta-mini.delta-up   { color: var(--success); }
.delta-mini.delta-down { color: var(--danger); }
.delta-mini.delta-flat { color: var(--text-muted); font-weight: 400; }
.delta-mini-arrow { font-weight: 700; }

/* Barra de utilizacion de presupuesto */
.util-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    min-width: 110px;
}
.util-bar {
    flex: 1;
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border);
    min-width: 50px;
    max-width: 80px;
}
.util-fill {
    height: 100%;
    transition: width 0.3s;
}
.util-fill.util-full     { background: var(--success); }
.util-fill.util-good     { background: #84cc16; }   /* lima */
.util-fill.util-low      { background: var(--warning); }
.util-fill.util-critical { background: var(--danger); }
.util-pct {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 42px;
    text-align: right;
    color: var(--text);
}

/* === Charts grid === */
.charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

@media (max-width: 1024px) {
    .charts-grid { grid-template-columns: 1fr; }
}

.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
}

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

.granularity-selector {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
}

/* Header sobre los charts (Shopping/Search/Meta). El selector de
   granularidad SOLO afecta a los charts y a la tabla detalle de abajo;
   no a la tabla resumen del top. Por eso esta entre la tabla y los charts. */
.shopping-charts-header {
    padding: 12px 20px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}
.shopping-charts-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* === Pestaña Comerciales === */
.comercial-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 20px;
    gap: 12px;
    flex-wrap: wrap;
}
.comercial-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.comercial-toolbar-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}
.comercial-attribution-info {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 4px 10px;
    border-radius: 12px;
}
.comercial-attribution-info code {
    background: #fef3c7;
    color: #92400e;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
}
/* Tabla de inputs editables */
.table-comercial-inputs {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.table-comercial-inputs th,
.table-comercial-inputs td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.table-comercial-inputs th.th-num,
.table-comercial-inputs td.td-num {
    text-align: right;
}
.table-comercial-inputs tr.input-default {
    background: #fef3c7;
}
.table-comercial-inputs tr.input-default td:first-child {
    font-weight: 700;
    color: #92400e;
}
.table-comercial-inputs input[type="number"],
.table-comercial-inputs input[type="text"] {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 6px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.table-comercial-inputs input[type="text"] { text-align: left; }
.table-comercial-inputs input:hover,
.table-comercial-inputs input:focus {
    border-color: var(--accent);
    background: var(--surface);
    outline: none;
}
.table-comercial-inputs input.dirty {
    background: #fef3c7;
    border-color: var(--warning);
}
/* Flash verde momentaneo al guardar correctamente */
.table-comercial-inputs input.saved {
    background: #dcfce7;
    border-color: var(--success);
    transition: background 0.5s ease, border-color 0.5s ease;
}

/* Detalle mes a mes Comerciales — mismo look que tabla detalle Shopping */
#table-comercial-detail {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
#table-comercial-detail thead th {
    background: var(--bg);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 2;
}
#table-comercial-detail thead th.metric { text-align: left; }
#table-comercial-detail thead th.num { text-align: right; }
#table-comercial-detail tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}
#table-comercial-detail tbody td.metric {
    text-align: left;
    background: var(--bg);
    position: sticky;
    left: 0;
    z-index: 1;
}
#table-comercial-detail tbody td.num { text-align: right; }
#table-comercial-detail tbody tr:hover td { background: rgba(0,94,148,0.04); }
#table-comercial-detail tbody tr:hover td.metric { background: #e6eef5; }
#table-comercial-detail .muted { color: var(--text-muted); }
.table-comercial-inputs .btn-delete-row {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
}
.table-comercial-inputs .btn-delete-row:hover {
    background: #fee2e2;
    color: var(--danger);
}

/* === Modal de errores con instrucciones (Fixable Error Modal === */
/* Se usa cuando el backend devuelve un error_code conocido (ej. OAuth
   token caducado) para guiar al usuario a la solucion en lugar de
   mostrar un toast crudo. */
.fem-overlay {
    position: fixed;
    inset: 0;
    background: rgba(50, 63, 73, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fem-fadein 0.18s ease-out;
}
@keyframes fem-fadein { from { opacity: 0; } to { opacity: 1; } }
.fem-card {
    background: var(--surface);
    border-radius: var(--radius);
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(50,63,73,0.35);
    animation: fem-slideup 0.22s ease-out;
}
@keyframes fem-slideup {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.fem-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    border-radius: var(--radius) var(--radius) 0 0;
}
.fem-icon { font-size: 22px; }
.fem-header h3 {
    flex: 1;
    margin: 0;
    font-size: 16px;
    color: #92400e;
}
.fem-close {
    background: transparent;
    border: 0;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}
.fem-close:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.fem-body {
    padding: 18px 20px;
}
.fem-error-msg {
    background: var(--bg);
    border-left: 3px solid var(--danger);
    padding: 8px 12px;
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--text);
    font-family: 'SF Mono', Consolas, Monaco, monospace;
}
.fem-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}
.fem-steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    line-height: 1.4;
    border-bottom: 1px dashed var(--border);
}
.fem-steps li:last-child { border-bottom: 0; }
.fem-step-num {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--hero-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fem-command {
    display: flex;
    align-items: center;
    background: var(--hero-navy);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 12px 0;
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 13px;
}
.fem-command code {
    flex: 1;
    background: transparent;
    color: #fff;
    padding: 0;
}
.fem-copy-btn {
    background: rgba(255,255,255,0.15);
    border: 0;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.fem-copy-btn:hover { background: rgba(255,255,255,0.25); }
.fem-link {
    display: inline-block;
    margin: 8px 0;
    padding: 8px 12px;
    background: var(--bg);
    color: var(--hero-blue);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    transition: all 0.15s;
}
.fem-link:hover {
    background: var(--hero-blue);
    color: #fff;
    border-color: var(--hero-blue);
}
.fem-tip {
    margin-top: 14px;
    padding: 10px 12px;
    background: #eff6ff;
    border-left: 3px solid var(--hero-blue);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
}
.fem-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    text-align: right;
    border-radius: 0 0 var(--radius) var(--radius);
}

.gran-btn {
    background: transparent;
    border: none;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    font-family: inherit;
}

.gran-btn:hover { color: var(--text); }

.gran-btn.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.chart-header h2 {
    font-size: 15px;
    color: var(--text);
}

.chart-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

.chart-body {
    position: relative;
    height: 320px;
}

/* === Tabla === */
.table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
}

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

.table-header h2 {
    font-size: 15px;
    color: var(--text);
}

.table-wrapper {
    overflow-x: auto;
    margin: -8px;
    padding: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

thead th {
    background: var(--bg);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

thead th:first-child { border-top-left-radius: 6px; }
thead th:last-child { border-top-right-radius: 6px; }
thead th.th-num { text-align: right; }
thead th:hover { background: #eef2f7; }

thead th.sort-asc::after { content: " \25B2"; font-size: 9px; color: var(--accent); }
thead th.sort-desc::after { content: " \25BC"; font-size: 9px; color: var(--accent); }

tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    white-space: nowrap;
}

tbody td.td-name {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

tbody td.td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

tbody td.td-country {
    white-space: nowrap;
    font-size: 12px;
}
tbody td.td-country .flag-img {
    margin-right: 4px;
}

tbody tr:hover { background: var(--bg); }

tfoot td {
    padding: 12px;
    font-weight: 700;
    background: var(--bg);
    border-top: 2px solid var(--border);
}
tfoot td.td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* === Status pills === */
.status-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-ACTIVE { background: #dcfce7; color: var(--success); }
.status-PAUSED { background: #fef3c7; color: var(--warning); }
.status-DELETED, .status-ARCHIVED { background: #fee2e2; color: var(--danger); }
.status-default { background: var(--bg); color: var(--text-muted); }

/* === Toast === */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--text);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s;
    pointer-events: none;
    z-index: 100;
    max-width: 400px;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.toast-success { background: var(--success); }
.toast.toast-error { background: var(--danger); }

/* === Chatbot widget (esquina inferior derecha) === */
.chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    font-family: inherit;
}

.chat-toggle {
    background: linear-gradient(135deg, var(--hero-navy), var(--hero-blue));
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(50, 63, 73, 0.35);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.chat-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 94, 148, 0.45); }
.chat-toggle-icon { font-size: 18px; line-height: 1; }
.chat-widget.open .chat-toggle { display: none; }

.chat-panel {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 420px;
    max-width: calc(100vw - 32px);
    height: 580px;
    max-height: calc(100vh - 100px);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
}
.chat-widget.open .chat-panel { display: flex; }

.chat-header {
    background: linear-gradient(135deg, var(--hero-navy), var(--hero-blue));
    color: #fff;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-header-left { display: flex; gap: 10px; align-items: center; }
.chat-header-icon {
    font-size: 22px;
    background: rgba(255,255,255,0.18);
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.chat-header-title { font-size: 15px; font-weight: 700; }
.chat-header-sub { font-size: 11px; opacity: 0.85; }
.chat-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}
.chat-close:hover { background: rgba(255,255,255,0.3); }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg);
}

.chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
}
.chat-msg-user {
    background: var(--accent);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}
.chat-msg-bot {
    background: var(--surface);
    color: var(--text);
    align-self: flex-start;
    border: 1px solid var(--border);
    border-bottom-left-radius: 2px;
}
.chat-msg-bot table {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
}
.chat-msg-bot th, .chat-msg-bot td {
    border: 1px solid var(--border);
    padding: 4px 8px;
    text-align: left;
}
.chat-msg-bot th { background: var(--bg); }
.chat-msg-bot code {
    background: var(--bg);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 11px;
}
.chat-msg-bot strong { color: var(--text); }
.chat-msg-bot .chat-msg-tools {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    font-style: italic;
}
.chat-msg-loading {
    display: flex; align-items: center; gap: 6px;
    color: var(--text-muted);
    font-style: italic;
}
.chat-msg-loading::after {
    content: "•••";
    animation: dots 1.4s infinite;
}
@keyframes dots {
    0%, 20% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}
.chat-msg-error {
    background: #fee2e2;
    color: var(--danger);
    border: 1px solid #fecaca;
}

.chat-suggestions {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.chat-suggestion {
    flex-shrink: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 11px;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all 0.15s;
}
.chat-suggestion:hover {
    background: #eff6ff;
    border-color: var(--accent);
    color: var(--accent);
}

.chat-form {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.chat-form input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    background: var(--bg);
}
.chat-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    background: var(--surface);
}
.chat-send {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0 14px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.chat-send:hover { background: var(--accent-hover); }
.chat-send:disabled { background: var(--text-muted); cursor: wait; }