/* ============================================================= */

  /* MiKPI · MODULO ANALITICA — HERRAMIENTAS DE ANALISIS            */

  /* ------------------------------------------------------------- */

  /* DMAIC, cartas de control (SPC), indice de riesgo y ficha de    */

  /* detalle del maquinista.                                        */

  /*                                                                */

  /* Depende de los tokens y utilidades de css/analitica.css, que   */

  /* debe cargarse antes.                                           */

  /* ============================================================= */

  /* ================================== */

  /* DMAIC                              */

  /* ================================== */

  /* Las cinco fases en columna: el ciclo se lee de arriba abajo, que es
   como se recorre (definir -> medir -> analizar -> mejorar -> controlar).
   En pantallas anchas cada fase ocupa todo el ancho para que las tablas
   internas respiren, en vez de comprimir cinco columnas ilegibles. */
.anl-dmaic { display: flex; flex-direction: column; gap: 12px; }

.anl-dm {
    border: 1px solid var(--border); border-left: 3px solid var(--anl-none);
    border-radius: 12px; background: var(--surface-2); overflow: hidden;
}
.anl-dm.f-ok      { border-left-color: var(--anl-ok); }
.anl-dm.f-warn    { border-left-color: var(--anl-warn); }
.anl-dm.f-crit    { border-left-color: var(--anl-crit); }
.anl-dm.f-neutral { border-left-color: var(--text-3); }

.anl-dm-head {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.anl-dm-head i { font-size: 16px; color: var(--text-3); }
.anl-dm-head b { font-size: 13.5px; font-weight: 800; color: var(--text); }
.anl-dm-letra {
    width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 800; color: #fff; background: var(--text-3);
}
.f-ok      .anl-dm-letra { background: var(--anl-ok); }
.f-warn    .anl-dm-letra { background: var(--anl-warn); }
.f-crit    .anl-dm-letra { background: var(--anl-crit); }
.f-ok      .anl-dm-head i { color: var(--anl-ok); }
.f-warn    .anl-dm-head i { color: var(--anl-warn); }
.f-crit    .anl-dm-head i { color: var(--anl-crit); }

.anl-dm-body { padding: 13px 14px; }
.anl-dm-body p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.anl-dm-kpi {
    font-size: 19px; font-weight: 800; color: var(--text);
    letter-spacing: -.3px; margin-bottom: 5px;
}

/* Rejilla de datos de las fases Measure y Analyze */
.anl-dm-datos {
    display: grid; gap: 9px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.anl-dm-dato {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 9px; padding: 9px 11px; min-width: 0;
}
.anl-dm-dato span {
    display: block; font-size: 10px; font-weight: 800; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .35px; margin-bottom: 3px;
}
.anl-dm-dato b { font-size: 13px; color: var(--text); font-weight: 800; overflow-wrap: anywhere; }

/* Maquinistas que concentran las desviaciones */
.anl-dm-top { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.anl-dm-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 20px; padding: 4px 10px;
    font-size: 11.5px; color: var(--text-2); font-weight: 600;
}
.anl-dm-chip b {
    background: rgba(220,38,38,.15); color: var(--danger);
    border-radius: 10px; padding: 0 6px; font-size: 10.5px; font-weight: 800;
}

/* Recomendaciones de la fase Improve */
.anl-dm-recos {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.anl-dm-reco {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 11px 13px; min-width: 0;
}
.anl-dm-reco-head {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px;
}
.anl-dm-reco-head i { font-size: 15px; color: var(--anl-ok); flex: 0 0 auto; }
.anl-dm-reco-head b { font-size: 12.5px; font-weight: 800; color: var(--text); }
.anl-dm-reco-dato {
    margin-left: auto; font-size: 10.5px; font-weight: 800; color: var(--text-3);
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}
.anl-dm-reco p { font-size: 12px; line-height: 1.5; }

.anl-dm-nota {
    display: flex; align-items: flex-start; gap: 7px; margin-top: 11px !important;
    font-size: 11.5px !important; color: var(--text-3) !important; line-height: 1.5;
}
.anl-dm-nota i { font-size: 14px; flex: 0 0 auto; margin-top: 1px; }
.anl-dm-vacio { font-size: 12.5px; color: var(--text-3); font-style: italic; }

/* Comparación antes / después de la fase Control */
.anl-dm-control {
    display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
}
.anl-dm-ctl {
    flex: 1 1 130px; min-width: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 11px 13px; text-align: center;
}
.anl-dm-ctl span {
    display: block; font-size: 10px; font-weight: 800; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .35px; margin-bottom: 4px;
}
.anl-dm-ctl b { display: block; font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.5px; }
.anl-dm-ctl small { display: block; margin-top: 5px; font-size: 10.5px; color: var(--text-3); }
.anl-dm-flecha {
    display: flex; align-items: center; color: var(--text-3); font-size: 20px;
    flex: 0 0 auto;
}

/* ================================== */

  /* CONTROL ESTADÍSTICO (SPC)          */

  /* ================================== */
.anl-spc-ptos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.anl-spc-pto {
    background: var(--surface-2); border: 1px solid var(--border);
    border-left: 3px solid var(--anl-crit);
    border-radius: 10px; padding: 11px 13px; min-width: 0;
}
.anl-spc-pto.vacio, .anl-spc-pto.mas {
    grid-column: 1 / -1; border-left-color: var(--border); border-style: dashed;
    text-align: center; color: var(--text-3); font-size: 12.5px; font-style: italic;
    background: none;
}
.anl-spc-pto-mes {
    font-size: 10.5px; font-weight: 800; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .35px;
}
.anl-spc-pto-val {
    font-size: 22px; font-weight: 800; color: var(--anl-crit);
    letter-spacing: -.5px; margin: 2px 0 4px;
}
.anl-spc-pto-det { font-size: 11.5px; color: var(--text-2); line-height: 1.45; }

.anl-spc-pats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.anl-spc-pat {
    background: var(--surface-2); border: 1px solid var(--border);
    border-left: 3px solid var(--anl-warn);
    border-radius: 10px; padding: 11px 13px; min-width: 0;
}
.anl-spc-pat-head {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 3px;
}
.anl-spc-pat-head i { font-size: 15px; color: var(--anl-warn); flex: 0 0 auto; }
.anl-spc-pat-head b { font-size: 12.5px; font-weight: 800; color: var(--text); }
.anl-spc-pat-head span {
    margin-left: auto; font-size: 10.5px; font-weight: 800; color: var(--text-3);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}
.anl-spc-pat-rango { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 3px; }
.anl-spc-pat-desc { font-size: 11.5px; color: var(--text-2); line-height: 1.45; }

/* Nota de "por qué esta carta": justificación siempre visible.
   El texto va SIEMPRE dentro de un <span>: al ser el contenedor un flex,
   un <b> suelto se convertiría en su propia columna y partiría la frase. */
.anl-spc-porque {
    display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0;
    font-size: 11.8px; color: var(--text-3); line-height: 1.55;
}
.anl-spc-porque i { font-size: 15px; flex: 0 0 auto; margin-top: 1px; }
.anl-spc-porque > span { min-width: 0; }
.anl-spc-porque b { color: var(--text-2); }

/* ================================== */

  /* RIESGOS                            */

  /* ================================== */

  /* Aviso de uso: encabeza el panel para que nadie lea el índice de
   riesgo como un puntaje disciplinario. */
.anl-aviso-uso { border-left: 3px solid var(--primary); }

/* Nombre pulsable que abre la ficha */
.anl-link-maq {
    background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 800; color: var(--primary); text-align: left;
}
.anl-link-maq:hover { text-decoration: underline; }
.anl-link-maq:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* Barras de distribución (consistencia) */
.anl-barras { display: flex; flex-direction: column; gap: 9px; }
.anl-barra { display: flex; align-items: center; gap: 11px; }
.anl-barra-lbl {
    flex: 0 0 210px; display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.anl-barra-lbl b { font-size: 13px; color: var(--text); font-weight: 800; }
.anl-barra-track {
    flex: 1; height: 10px; min-width: 0;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.anl-barra-fill { height: 100%; border-radius: 5px; transition: width .25s; }
.anl-barra-fill.f-ok   { background: var(--anl-ok); }
.anl-barra-fill.f-good { background: var(--anl-ok); }
.anl-barra-fill.f-warn { background: var(--anl-warn); }
.anl-barra-fill.f-crit { background: var(--anl-crit); }
.anl-barra-pct { flex: 0 0 44px; text-align: right; font-size: 12px; font-weight: 800; color: var(--text-2); }

/* Composición del índice: pesos a la vista */
.anl-pesos {
    margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.anl-pesos-tit {
    display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
    font-size: 11px; font-weight: 800; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .35px;
}
.anl-pesos-list { display: flex; flex-wrap: wrap; gap: 7px; }
.anl-peso {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
    padding: 5px 10px; font-size: 11.5px; color: var(--text-2);
}
.anl-peso b {
    background: var(--primary); color: #fff; border-radius: 5px;
    padding: 0 6px; font-size: 10.5px; font-weight: 800;
}

/* ================================== */

  /* FICHA DEL MAQUINISTA               */

  /* ================================== */
.anl-ficha { border: 2px solid var(--primary); }
.anl-ficha-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
/* El NOMBRE es el dato principal; el RUT no se muestra. */
.anl-ficha-name {
    font-size: 21px; font-weight: 800; color: var(--text); letter-spacing: -.4px; line-height: 1.15;
}
.anl-ficha-sub { font-size: 12px; color: var(--text-3); font-weight: 600; margin-top: 3px; }

.anl-ficha-sec { margin-top: 20px; }
.anl-ficha-sec h4 {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font-size: 13.5px; font-weight: 800; color: var(--text);
}
.anl-ficha-sec h4 i { color: var(--primary); font-size: 16px; }

/* Benchmark */
.anl-bm { display: flex; flex-direction: column; gap: 9px; }
.anl-bm-row { display: flex; align-items: center; gap: 11px; }
.anl-bm-lbl { flex: 0 0 190px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.anl-bm-row.destacado .anl-bm-lbl { color: var(--text); font-weight: 800; }
.anl-bm-track {
    flex: 1; min-width: 0; height: 14px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
}
.anl-bm-fill { height: 100%; background: var(--text-3); border-radius: 6px; }
.anl-bm-row.destacado .anl-bm-fill { background: var(--primary); }
.anl-bm-val { flex: 0 0 62px; text-align: right; font-size: 13px; color: var(--text); }

.anl-bm-difs {
    display: grid; gap: 10px; margin-top: 14px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.anl-bm-difs > div {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 9px; padding: 10px 12px;
}
.anl-bm-difs span {
    display: block; font-size: 10px; font-weight: 800; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .35px; margin-bottom: 3px;
}
.anl-bm-difs b { font-size: 17px; font-weight: 800; color: var(--text); }
.anl-bm-difs b.pos { color: var(--anl-ok); }
.anl-bm-difs b.neg { color: var(--anl-crit); }

/* KPI más fuerte / más débil */
.anl-kpicards {
    display: grid; gap: 11px; margin-bottom: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.anl-kpicard {
    border: 1px solid var(--border); border-left: 3px solid var(--anl-none);
    border-radius: 10px; background: var(--surface-2); padding: 11px 13px; min-width: 0;
}
.anl-kpicard.k-ok   { border-left-color: var(--anl-ok); }
.anl-kpicard.k-crit { border-left-color: var(--anl-crit); }
.anl-kpicard-tit {
    font-size: 10px; font-weight: 800; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .35px;
}
.anl-kpicard-name { font-size: 16px; font-weight: 800; color: var(--text); margin: 3px 0 4px; }
.anl-kpicard-det { font-size: 11.5px; color: var(--text-2); line-height: 1.45; }

/* Recurrencias de la ficha */
.anl-recs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.anl-rec-item {
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2); padding: 11px 13px; min-width: 0;
}
.anl-rec-kpi { font-size: 13px; font-weight: 800; color: var(--text); }
.anl-rec-desc { font-size: 11.5px; color: var(--text-2); margin: 3px 0 7px; line-height: 1.45; }
.anl-rec-meses { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.anl-rec-meses span {
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: 2px 7px; font-size: 10.5px; color: var(--text-3); font-weight: 700;
}

/* ============================================================= */

  /* RESPONSIVE                                                     */

  /* ------------------------------------------------------------- */

  /* Movil: todo a una columna. Las barras horizontales del          */

  /* benchmark y de la consistencia pasan a etiqueta arriba y barra  */

  /* debajo, porque a 375 px una etiqueta de 190 px no deja sitio    */

  /* para la barra.                                                  */

  /* ============================================================= */

@media (max-width: 760px) {
    /* DMAIC: una columna. La flecha de Control sobra en vertical
       (las tarjetas ya se leen en orden de arriba abajo). */
    .anl-dm-datos, .anl-dm-recos { grid-template-columns: 1fr; }
    .anl-dm-kpi { font-size: 17px; }
    .anl-dm-flecha { display: none; }
    .anl-dm-ctl { flex: 1 1 100%; }
    .anl-dm-reco-dato { margin-left: 0; }

    /* SPC: una columna. */
    .anl-spc-ptos, .anl-spc-pats { grid-template-columns: 1fr; }
    .anl-spc-pat-head span { margin-left: 0; }

    /* Riesgos y ficha: una columna; las barras pasan a vertical. */
    .anl-barra, .anl-bm-row { flex-wrap: wrap; }
    .anl-barra-lbl, .anl-bm-lbl { flex: 1 1 100%; }
    .anl-barra-track, .anl-bm-track { flex: 1 1 auto; }
    .anl-bm-difs, .anl-kpicards, .anl-recs { grid-template-columns: 1fr; }
    .anl-ficha-name { font-size: 18px; }
    .anl-pesos-list { flex-direction: column; }
    .anl-peso { width: 100%; }
}