/* Dashboard Avance - versión 18 ajustada: encabezados NO fijos (thead estático) */

:root {
    --accent: #ff7a00;
    --muted: #6c757d;
    --green: #2f9e44;
    --yellow: #f6c243;
    --red: #e03131;
    --table-min-width: 1400px;
    --table-sticky-top: 120px; /* ya no usado para thead, se mantiene por compatibilidad */
}

/* ---------------- Layout ---------------- */
.page-avance {
    padding: 12px 18px;
}

.filtros-row .form-control {
    display: inline-block;
}

/* ---------------- KPI row: una sola fila (scroll horizontal si hace falta) ---------------- */
.kpi-row {
    display: flex;
    gap: 18px;
    align-items: stretch;
    flex-wrap: nowrap; /* mantener en una sola fila */
    overflow-x: auto;
    padding-bottom: 6px;
    margin: 6px 0;
}

/* Item que contiene cada card — mantener ancho mínimo consistente */
.kpi-item {
    min-width: 260px;
    flex: 0 0 auto;
}

/* Card de KPI */
.card.kpi {
    border: 1px solid #eef2f7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
    height: 100%;
}

.kpi .kpi-title {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 6px;
}

.kpi .kpi-value {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kpi .kpi-sub {
    font-size: 0.82rem;
    color: #7a7a7a;
}

/* pills dentro del KPI */
.kpi .sem-verde, .kpi .sem-amarillo, .kpi .sem-rojo, .kpi .sem-superverde {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Responsive KPI */
@media (max-width: 576px) {
    .kpi-item {
        min-width: 220px;
    }

    .kpi .kpi-value {
        font-size: 1.05rem;
    }
}

/* ---------------- Progress card ---------------- */
.progress-card .progress-header {
    margin-bottom: 6px;
    color: #333;
    font-weight: 600;
}

.progress {
    height: 12px;
    background: #f1f3f5;
    border-radius: 8px;
    overflow: hidden;
}

    .progress .progress-bar {
        background: linear-gradient(90deg, var(--accent), #ffb86b);
        height: 12px;
    }

/* ---------------- Tabs ---------------- */
.tabs .tab {
    display: inline-block;
    padding: 8px 12px;
    margin-right: 8px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    color: #444;
    background: transparent;
}

    .tabs .tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
        font-weight: 700;
    }

/* ---------------- Table top scroll ---------------- */
.table-top-scroll {
    height: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid #eceeef;
    border-bottom: 1px solid #eceeef;
    margin-bottom: 6px;
    background: #fff;
}

/* ---------------- Table responsive ---------------- */
.dashboard-table-wrapper {
    overflow-x: auto;
    padding-bottom: 8px;
}

/* ---------------- Table base ---------------- */
.dashboard-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    min-width: var(--table-min-width);
    font-size: 0.95rem;
}

    /* IMPORTANT: THEAD NO FIJO — encabezados estáticos (position: static) */
    .dashboard-table thead th {
        position: static;
        /* top / z-index removidos para evitar comportamiento sticky */
        background: #ffffff;
        border-bottom: 1px solid #e9ecef;
        padding: 10px 12px;
        color: #222;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.78rem;
    }

/* Colgroup / group colors (visual) */
.group-venta {
    color: var(--accent);
}

.group-margen {
    color: #555;
}

.group-meta {
    color: #0f4c81;
}

/* Cells */
.dashboard-table td,
.dashboard-table th {
    padding: 10px 12px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* First column (centro): left aligned and sticky (lo mantenemos) */
.dashboard-table .sticky-col {
    position: sticky;
    left: 0;
    background: #ffffff;
    z-index: 12000; /* encima de celdas, debajo de thead (thead ya no sticky) */
    box-shadow: 2px 0 6px rgba(0,0,0,0.03);
    text-align: left !important;
    padding-left: 14px;
    font-weight: 700;
}

/* Alineado específico para columna centro (por seguridad) */
.dashboard-table thead th.col-centro,
.dashboard-table td.col-centro {
    text-align: left !important;
    padding-left: 14px;
    font-weight: 700;
}

/* Nombres largos de centro: truncar con ellipsis (si quieres wrap, modificar) */
.dashboard-table td.col-centro {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Números a la derecha */
.text-right {
    text-align: right;
    font-family: Consolas, monospace;
}

/* Row zebra + hover */
.dashboard-table tbody tr:nth-child(odd) {
    background: #fafbfc;
}

.dashboard-table tbody tr:hover {
    background: #f0f8ff;
}

/* Sub-headers: permitir wrap en segunda fila */
.dashboard-table thead tr.table-top-row th {
    white-space: nowrap;
    text-align: center;
}

.dashboard-table thead tr.table-sub-row th {
    white-space: normal;
    line-height: 1.05;
    font-size: 0.86rem;
    padding-top: 8px;
    padding-bottom: 8px;
    word-break: break-word;
    hyphens: auto;
}

    /* Reducir padding en columnas pequeñas si hace falta */
    .dashboard-table thead tr.table-sub-row th.col-pct,
    .dashboard-table thead tr.table-sub-row th.col-small {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 0.84rem;
    }

/* Footer totals */
tfoot tr {
    background: #f8fafb;
    font-weight: 700;
}

/* Transición suave */
.dashboard-table td {
    transition: background .08s ease;
}

/* ---------------- Semáforos (pills, una sola definición) ---------------- */
.sem-verde {
    background: #dff6e6;
    color: #07612a;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 700;
    display: inline-block;
}

.sem-amarillo {
    background: #fff8e6;
    color: #8a6100;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 700;
    display: inline-block;
}

.sem-rojo {
    background: #ffd6d6;
    color: #7a0b0b;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 700;
    display: inline-block;
}

.sem-superverde {
    background: #c9f6d0;
    color: #054c1f;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 800;
    display: inline-block;
}

.pct-none {
    color: #666;
}

/* ---------------- Vertical separators por bloques (usar nth-child con cuidado) ----------------
   Asegúrate de mantener el orden/numero de columnas; si cambias la tabla, actualiza los índices.
*/
.dashboard-table th:nth-child(2), .dashboard-table td:nth-child(2) {
    border-left: 2px solid #e9ecef;
    padding-left: 12px;
}

.dashboard-table th:nth-child(6), .dashboard-table td:nth-child(6) {
    border-right: 2px solid #e9ecef;
}

.dashboard-table th:nth-child(7), .dashboard-table td:nth-child(7) {
    border-left: 2px solid #e9ecef;
    padding-left: 12px;
}

.dashboard-table th:nth-child(11), .dashboard-table td:nth-child(11) {
    border-right: 2px solid #e9ecef;
}

.dashboard-table th:nth-child(12), .dashboard-table td:nth-child(12) {
    border-left: 2px solid #e9ecef;
    padding-left: 12px;
}

.dashboard-table th:nth-child(16), .dashboard-table td:nth-child(16) {
    border-right: 2px solid #e9ecef;
}

.dashboard-table th:nth-child(17), .dashboard-table td:nth-child(17) {
    border-left: 2px solid #e9ecef;
    padding-left: 12px;
}

.dashboard-table th:nth-child(18), .dashboard-table td:nth-child(18) {
    border-right: 2px solid #e9ecef;
}

.dashboard-table th:nth-child(19), .dashboard-table td:nth-child(19) {
    border-left: 2px solid #e9ecef;
    padding-left: 12px;
}

.dashboard-table th:nth-child(20), .dashboard-table td:nth-child(20) {
    border-right: 2px solid #e9ecef;
}

/* ---------------- Responsive table min-width tweaks ---------------- */
@media (max-width:1200px) {
    :root {
        --table-min-width: 1200px;
    }
}

@media (max-width:768px) {
    :root {
        --table-min-width: 1000px;
    }

    .kpi .kpi-value {
        font-size: 1rem;
    }
}

/* ---------------- Small polish for KPI row scrollbar visibility ---------------- */
.kpi-row::-webkit-scrollbar {
    height: 8px;
}

.kpi-row::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.08);
    border-radius: 6px;
}

.kpi-row {
    -webkit-overflow-scrolling: touch;
}

/* --- Resumen Ejecutivo (executive summary) --- */
.exec-summary .exec-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  align-items: start;
}

.exec-left {
  display: flex;
  gap: 12px;
  flex-direction: column;
}

.label-block .label {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 6px;
}
.label-block .label.green { background: #16a34a; }
.label-block .label.orange { background: #f97316; }
.label-block .label.light { background: #f97316; opacity:.15; color:#333; }
.label-block .label.orange-2 { background: #fb923c; }
.label-block .label.dark { background: #374151; }

/* summary-values */
.summary-values { background: #fff; border-radius: 8px; padding: 10px; border: 1px solid #eef2f7; }
.summary-row { display:flex; align-items:center; gap:10px; padding:6px 0; }
.summary-row .tag { font-weight:700; color:#555; width:80px; }
.summary-row .value { font-weight:800; font-size:1rem; color:#111; }
.pct-pill { padding:4px 8px; border-radius:10px; font-weight:700; font-size:0.85rem; display:inline-block; }

/* right side metrics */
.exec-right .metrics-row { display:flex; gap:12px; flex-wrap:wrap; }
.metric-card {
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:8px;
  padding:10px;
  min-width:220px;
  flex: 1 1 220px;
  box-shadow: 0 4px 12px rgba(12,20,30,0.03);
}
.metric-card.small { min-width:160px; flex:0 1 160px; }
.metric-title { font-size:0.78rem; color:#666; margin-bottom:6px; }
.metric-value { font-size:1.1rem; font-weight:800; color:#111; margin-bottom:4px; }
.metric-sub { font-size:0.78rem; color:#888; }

/* highlighted cards */
.metric-card.highlight { border-color:#ffe9d6; background:linear-gradient(180deg,#fff,#fffaf0); }
.metric-card.highlight-green { border-color:#dff6e6; background:linear-gradient(180deg,#fff,#f6fff6); }

/* responsive: stack left and right on small screens */
@media (max-width:900px) {
  .exec-summary .exec-grid { grid-template-columns: 1fr; }
  .exec-left { order: 2; }
  .exec-right { order: 1; }
  .exec-right .metrics-row { justify-content: space-between; }
}

/* ===== Resumen Ejecutivo — ajustes finales (reemplazar la sección anterior) ===== */

.card.exec-summary {
    background: transparent;
    border: none;
    margin: 0;
}

    /* body de la card: contenedor con padding consistente */
    .card.exec-summary .card-body {
        padding: 16px;
    }

/* grid principal: left narrow column + right flexible column */
.exec-summary .exec-grid {
    display: grid;
    grid-template-columns: 320px 1fr; /* left column más ancha para etiquetas */
    gap: 20px;
    align-items: start;
    width: 100%;
}

/* LEFT column: etiquetas + cuadro resumen */
.exec-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* etiqueta vertical estilo bloque (columna izquierda) */
.label-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    /* estilo visual de etiquetas de la izquierda */
    .label-block .label {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 6px;
        color: #fff;
        font-weight: 700;
        font-size: 0.82rem;
        width: 100%;
        box-sizing: border-box;
    }

        /* colores */
        .label-block .label.green {
            background: #16a34a;
        }

        .label-block .label.orange {
            background: #f97316;
        }

        .label-block .label.light {
            background: rgba(249,115,22,0.12);
            color: #333;
            font-weight: 600;
        }

        .label-block .label.orange-2 {
            background: #fb923c;
        }

        .label-block .label.dark {
            background: #374151;
        }

/* cuadro de valores resumen (dentro de la columna izquierda) */
.summary-values {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #eef2f7;
    box-shadow: 0 6px 12px rgba(12,20,30,0.03);
}

/* filas dentro del cuadro resumen */
.summary-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed transparent;
}

    .summary-row + .summary-row { /* separación visual sutil */
        margin-top: 4px;
    }

    /* etiqueta lateral (ej: Venta, Margen) */
    .summary-row .tag {
        font-weight: 700;
        color: #4b5563;
        width: 96px;
        font-size: 0.85rem;
    }

    /* valor principal */
    .summary-row .value {
        font-weight: 800;
        font-size: 1rem;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* píldora de porcentaje — reutiliza semáforos */
.pct-pill {
    padding: 5px 10px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-block;
}

/* RIGHT column: tarjetas métricas en filas responsivas */
.exec-right .metrics-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* cada tarjeta métrica */
.metric-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    padding: 12px;
    min-width: 220px;
    flex: 0 1 240px; /* permite adaptarse pero mantiene tamaño legible */
    box-shadow: 0 6px 12px rgba(12,20,30,0.03);
    box-sizing: border-box;
}

    /* variantes más pequeñas */
    .metric-card.small {
        min-width: 160px;
        flex: 0 1 160px;
    }

/* títulos / valores dentro de métricas */
.metric-title {
    font-size: 0.78rem;
    color: #6b7280;
    margin-bottom: 6px;
}

.metric-value {
    font-size: 1.12rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 4px;
}

.metric-sub {
    font-size: 0.78rem;
    color: #8b8b8b;
}

/* tarjetas destacadas */
.metric-card.highlight {
    border-color: #ffe9d6;
    background: linear-gradient(180deg,#fff,#fffaf0);
}

.metric-card.highlight-green {
    border-color: #dff6e6;
    background: linear-gradient(180deg,#fff,#f6fff6);
}

/* pequeña ayuda visual: separar claramente left / right cuando se deja poco espacio */
.exec-summary .exec-grid > * {
    min-height: 56px;
}

/* responsive: en móviles apilar columnas */
@media (max-width: 900px) {
    .exec-summary .exec-grid {
        grid-template-columns: 1fr;
    }

    .exec-left {
        order: 2;
    }

    .exec-right {
        order: 1;
    }

        .exec-right .metrics-row {
            justify-content: space-between;
        }
}

/* Filas KPI por colaborador */
.kpi-row-ok {
    background-color: #e6f4ea; /* verde suave */
}

.kpi-row-warning {
    background-color: #fff4e5; /* naranja suave */
}

.kpi-row-risk {
    background-color: #fde8e8; /* rojo suave */
}

/* limpieza: garantizar que la card-body no introduzca padding excesivo o line-height raro */
.card.exec-summary .card-body .summary-row,
.card.exec-summary .card-body .metric-card {
    line-height: 1.15;
}