/* ============================================================
   Styles — Key Sales Drivers (Factors) Module
   ============================================================ */

/* ============================================================
   Content cards
   ============================================================ */
.factors_content_card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    margin-top: 1rem;
}

/* ============================================================
   Section titles inside cards
   ============================================================ */
.factors_section_title {
    color: hsl(var(--foreground));
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* ============================================================
   Tab 1 — Metrics grid
   ============================================================ */

/* Outer wrapper — one entry per contracted module */
.factors_metrics_grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

/* Card that groups a module's header + its metric cards */
.factors_module_section {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Header row: icon wrap + module title [+ optional badge] */
.factors_module_section_header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid hsl(var(--border));
}

/* Teal icon container */
.factors_module_section_icon_wrap {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: calc(var(--radius) - 2px);
    background-color: hsl(var(--primary) / 0.12);
    border: 1px solid hsl(var(--primary) / 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--primary));
    flex-shrink: 0;
}

/* Module name */
.factors_module_section_title {
    color: hsl(var(--foreground));
    font-size: 0.9rem;
    font-weight: 600;
    flex: 1;
}

/* Row of metric cards within a group */
.factors_metric_cards_row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Individual metric card — fixed width so all cards are identical regardless of group size */
.factors_metric_card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    flex: 0 0 13rem;
    width: 13rem;
}

.factors_metric_card_label {
    color: hsl(var(--muted-foreground));
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.factors_metric_card_value {
    color: hsl(var(--foreground));
    font-size: 1.35rem;
    font-weight: 700;
}

/* ============================================================
   Tab 4 — Model setup panel
   ============================================================ */

/* Uppercase section labels: "VARIABLES DE ENTRADA" / "VARIABLE DE SALIDA" */
.factors_setup_section_label {
    color: hsl(var(--muted-foreground));
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.20rem;
}

/* Subtitle/description below each section label */
.factors_setup_section_sublabel {
    color: hsl(var(--muted-foreground));
    font-size: 0.78rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    opacity: 0.75;
    line-height: 1.45;
}

/* Radio items as checkbox-style rows (matches KPI checklist visual language) */
.factors_target_radio_rows {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    margin-top: 0.25rem;
}

.factors_target_radio_rows .form-check {
    flex: 0 0 auto;
    min-width: 13.5rem;
    padding-left: 0;
    padding-top: 0.10rem;
    padding-bottom: 0.10rem;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
}

.factors_target_radio_rows .form-check-input {
    display: none;
}

.factors_target_radio_rows .form-check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
    margin: 0 !important;
}

/* Custom checkbox square rendered via ::before — matches Bootstrap native checkbox size/shape */
.factors_target_radio_rows .form-check-label::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 0.25em;
    border: 1px solid rgba(59, 130, 246, 0.50);
    background-color: #ffffff;
    flex-shrink: 0;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* Selected state — fill only, no text color change (matches checklist behavior) */
.factors_target_radio_rows .form-check-input:checked + .form-check-label::before {
    background-color: #3b82f6;
    border-color: #3b82f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpolyline points='1,4 3,6 7,2' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}

/* ============================================================
   Tab 4 — Feature selection cards (built by callback)
   ============================================================ */

/* Checklist wrapper — responsive flex-wrap so options flow side by side on wide screens */
.factors_kpi_checklist {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    margin-top: 0.25rem;
}

.factors_kpi_checklist .form-check {
    flex: 0 0 auto;
    min-width: 13.5rem;
    padding-top: 0.10rem;
    padding-bottom: 0.10rem;
    margin-bottom: 0 !important;
}

.factors_kpi_checklist .form-check-label {
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}

/* Per-module checkbox accent colors (fill when checked, tinted border when available) */
.factors_kpi_ventas .form-check-input:not(:disabled) {
    border-color: rgba(59, 130, 246, 0.50);
}
.factors_kpi_ventas .form-check-input:checked {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

.factors_kpi_experiencia .form-check-input:not(:disabled) {
    border-color: rgba(34, 197, 94, 0.50);
}
.factors_kpi_experiencia .form-check-input:checked {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
}

.factors_kpi_menciones .form-check-input:not(:disabled) {
    border-color: rgba(168, 85, 247, 0.50);
}
.factors_kpi_menciones .form-check-input:checked {
    background-color: #a855f7 !important;
    border-color: #a855f7 !important;
}

.factors_kpi_pauta .form-check-input:not(:disabled) {
    border-color: rgba(249, 115, 22, 0.50);
}
.factors_kpi_pauta .form-check-input:checked {
    background-color: #f97316 !important;
    border-color: #f97316 !important;
}

.factors_kpi_organico .form-check-input:not(:disabled) {
    border-color: rgba(20, 184, 166, 0.50);
}
.factors_kpi_organico .form-check-input:checked {
    background-color: #14b8a6 !important;
    border-color: #14b8a6 !important;
}

/* Disabled KPI rows (objetivo + sin datos) — rendered outside the checklist */
.factors_kpi_disabled_rows {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.15rem;
}

.factors_kpi_disabled_row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    min-width: 13.5rem;
    padding: 0.15rem 0;
}

/* Visual square that mimics a disabled checkbox */
.factors_kpi_checkbox_disabled {
    width: 1rem;
    height: 1rem;
    border-radius: 0.20rem;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--muted) / 0.25);
    flex-shrink: 0;
}

.factors_kpi_label_disabled {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    opacity: 0.55;
}

.factors_kpi_badge_sin_datos {
    background-color: hsl(var(--muted) / 0.30);
    color: hsl(var(--muted-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.10rem 0.45rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Badge for ventas features excluded because they are a mathematical component
   of the currently selected target (not a data-coverage issue). Amber tone
   distinguishes it from the gray "sin datos" badge. */
.factors_kpi_badge_componente {
    background-color: rgba(234, 179, 8, 0.12);
    color: rgb(161, 120, 0);
    border: 1px solid rgba(234, 179, 8, 0.35);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.10rem 0.45rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================
   Filter modal — granularity pill toggle (white/dark-gray palette, overrides --primary teal)
   ============================================================ */
[id='factors/radio/granularity'].shared_button_pill_toggle {
    background: #f0f0f0;
    border-color: #cccccc !important;
}

[id='factors/radio/granularity'] .shared_button_pill_toggle_label {
    color: #3a3a3a;
}

[id='factors/radio/granularity'] .shared_button_pill_toggle_input:checked + .shared_button_pill_toggle_label {
    background: #3a3a3a !important;
    color: #ffffff;
}

/* ============================================================
   Shared — Info popover trigger badge
   ============================================================ */
.info_popover_trigger {
    cursor: pointer;
    color: hsl(var(--primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: hsl(var(--primary) / 0.10);
    border: 1px solid hsl(var(--primary) / 0.28);
    flex-shrink: 0;
    animation: info-badge-ping 2.8s ease-in-out infinite;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.info_popover_trigger:hover {
    background-color: hsl(var(--primary) / 0.18);
    animation: none;
    transform: scale(1.10);
}

@keyframes info-badge-ping {
    0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0); }
    50%       { box-shadow: 0 0 0 5px hsl(var(--primary) / 0.14); }
}

/* ============================================================
   Tab 4 — Model summary row (compact config after "Modelar")
   ============================================================ */
.factors_model_summary_content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.factors_summary_label {
    color: hsl(var(--muted-foreground));
    font-size: 0.80rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.factors_summary_value {
    color: hsl(var(--foreground));
    font-size: 0.85rem;
    font-weight: 500;
}

/* ============================================================
   Tab 4 — OOB R² quality indicator
   ============================================================ */
.factors_oob_indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.factors_oob_label {
    color: hsl(var(--muted-foreground));
    font-size: 0.80rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.factors_oob_quality_badge {
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    white-space: nowrap;
}

/* ============================================================
   Tab 2 — Correlation recommendations grid
   ============================================================ */

/* 3-column grid for Include / Evaluate / Low-signal groups */
.factors_corr_recommendations_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

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

/* One group column */
.factors_corr_group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    border-radius: 8px;
    background-color: hsl(var(--muted) / 0.4);
}

/* Centered title per group card — color driven by tier variant classes below */
.factors_corr_group_title {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.1rem;
}

/* Sublabel below the group title */
.factors_corr_group_sublabel {
    color: hsl(var(--muted-foreground));
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    text-align: center;
}

/* Vertical list of pills */
.factors_corr_pills_list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Individual pill: variable name + r value */
.factors_corr_pill {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.80rem;
    line-height: 1.4;
}

/* Group title color variants */
.factors_corr_group_include    { color: #16a34a; }
.factors_corr_group_evaluate   { color: #d97706; }
.factors_corr_group_low_signal { color: #dc2626; }

/* ============================================================
   Tab 4 — Importance chart header (title + OOB on same row)
   ============================================================ */
.factors_importance_header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}