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

  /* MiKPI · MODULO ANALITICA — VISTAS DE DATOS                     */

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

  /* Recurrencia, mapa de calor maquinistas x KPI, detalle mensual  */

  /* de una celda, comparacion FT/PT y estados vacios.              */

  /*                                                                */

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

  /* debe cargarse antes. Las herramientas de analisis (DMAIC, SPC, */

  /* riesgos, ficha) viven en css/analitica-analisis.css.           */

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

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

  /* RECURRENCIA                        */

  /* ================================== */
.anl-reccards {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.anl-reccard {
    border: 1px solid var(--border); border-top: 3px solid var(--anl-none);
    border-radius: 12px; background: var(--surface-2); padding: 13px; min-width: 0;
}
.anl-reccard.rc-crit { border-top-color: var(--anl-crit); }
.anl-reccard.rc-high { border-top-color: var(--anl-high); }
.anl-reccard.rc-warn { border-top-color: var(--anl-warn); }
.anl-reccard.rc-none { border-top-color: var(--anl-none); }

.anl-reccard-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--text); margin-bottom: 5px;
}
.anl-reccard-head i { font-size: 16px; }
.rc-crit .anl-reccard-head i { color: var(--anl-crit); }
.rc-high .anl-reccard-head i { color: var(--anl-high); }
.rc-warn .anl-reccard-head i { color: var(--anl-warn); }
.rc-none .anl-reccard-head i { color: var(--anl-none); }
.anl-reccard-head b { min-width: 0; overflow-wrap: anywhere; }

.anl-reccard-desc {
    margin: 0 0 9px; font-size: 10.5px; color: var(--text-3);
    font-weight: 600; line-height: 1.45;
}
.anl-reccard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.anl-reccard-list li {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 9px; font-size: 11.5px; color: var(--text-2); line-height: 1.4;
    overflow-wrap: anywhere;
}
.anl-reccard-list li b { color: var(--text); }
.anl-reccard-list li span { display: block; font-size: 10.5px; color: var(--text-3); font-weight: 700; margin-top: 2px; }
.anl-reccard-list li.vacio, .anl-reccard-list li.mas {
    background: none; border-style: dashed; text-align: center;
    color: var(--text-3); font-style: italic;
}

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

  /* MAPA DE CALOR                      */

  /* ================================== */
.anl-calor-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 11px; }
.anl-calor { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.anl-calor th {
    text-align: left; padding: 9px 10px; font-size: 10.5px; font-weight: 800;
    color: var(--text-3); text-transform: uppercase; letter-spacing: .35px;
    background: var(--surface-2); border-bottom: 1px solid var(--border);
    white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
/* La columna de nombre queda fija: sin ella, al desplazar en horizontal
   se pierde de vista a quién corresponde la fila. */
.anl-calor th.anl-calor-name {
    position: sticky; left: 0; z-index: 3;
    background: var(--surface-2); min-width: 168px;
    text-transform: none; font-size: 12px; font-weight: 700; color: var(--text);
}
.anl-calor thead th.anl-calor-name { z-index: 4; }
.anl-calor tbody th.anl-calor-name {
    border-bottom: 1px solid var(--border);
    display: table-cell; vertical-align: middle;
}
.anl-calor tbody th.anl-calor-name .anl-case-tag { margin-left: 6px; }
.anl-calor td { padding: 5px 6px; border-bottom: 1px solid var(--border); text-align: center; }
.anl-calor tbody tr:last-child td, .anl-calor tbody tr:last-child th { border-bottom: none; }
.anl-calor-tot { font-size: 13px; color: var(--text-2); }

/* Celda: color + icono + valor. Nunca solo color. */
.anl-cal {
    position: relative; width: 100%; min-width: 74px;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    border: 1px solid transparent; border-radius: 8px; padding: 7px 8px;
    font-family: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
    transition: .12s;
}
.anl-cal i { font-size: 13px; }
.anl-cal:hover  { transform: translateY(-1px); filter: brightness(.97); }
.anl-cal:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Mismo criterio que los chips: tintes translucidos, validos en ambos temas. */
.anl-cal.e-ok   { background: rgba(5,150,105,.15);  color: var(--success); border-color: var(--success); }
.anl-cal.e-warn { background: rgba(217,119,6,.16);  color: var(--warning); border-color: var(--warning); }
.anl-cal.e-crit { background: rgba(220,38,38,.15);  color: var(--danger);  border-color: var(--danger); }
.anl-cal.e-none { background: var(--surface-2); color: var(--text-3); border-color: var(--border); }
.anl-cal-n {
    position: absolute; top: -5px; right: -5px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.anl-calor-mas { margin-top: 12px; text-align: center; }
.anl-calor-mas .adm-btn { width: 100%; justify-content: center; }

/* Detalle mensual de una celda */
.anl-det {
    margin-top: 14px; border: 1px solid var(--primary);
    border-radius: 12px; background: var(--surface-2); padding: 14px;
}
.anl-det-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 13.5px; color: var(--text); margin-bottom: 11px; flex-wrap: wrap;
}
.anl-det-resumen {
    display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    margin-bottom: 12px;
}
.anl-det-resumen > div {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 9px; padding: 9px 11px;
}
.anl-det-resumen span {
    display: block; font-size: 10px; font-weight: 700; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .35px; margin-bottom: 3px;
}
.anl-det-resumen b { font-size: 14px; color: var(--text); }
.anl-det-meses { display: flex; flex-wrap: wrap; gap: 8px; }
.anl-det-mes {
    display: flex; align-items: center; gap: 7px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 9px; padding: 6px 10px;
}
.anl-det-mes > span { font-size: 11px; font-weight: 700; color: var(--text-3); }

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

  /* COMPARACIÓN DE GRUPOS (FT / PT)    */

  /* ================================== */
.anl-gcards { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.anl-gcard {
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); padding: 16px;
}
.anl-gcard-head {
    display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
    font-size: 13.5px; color: var(--text);
}
.anl-gcard-head span { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.anl-gcard-main { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -1px; margin-top: 6px; }
.anl-gcard-sub { font-size: 11px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.anl-gcard-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.anl-gcard-rows > div {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    font-size: 12px; padding-bottom: 5px; border-bottom: 1px dashed var(--border);
}
.anl-gcard-rows span { color: var(--text-3); font-weight: 600; }
.anl-gcard-rows b { color: var(--text); font-weight: 800; }
.anl-gcard-foot { margin-top: 12px; }

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

  /* ESTADOS VACÍOS / PENDIENTES        */

  /* ================================== */
.anl-empty, .anl-pending, .anl-insuf {
    background: var(--surface); border: 1px dashed var(--border);
    border-radius: 12px; color: var(--text-3);
}
.anl-empty { padding: 34px 18px; text-align: center; font-size: 13px; }
.anl-empty i { font-size: 22px; display: block; margin-bottom: 8px; }
.anl-insuf {
    padding: 11px 14px; font-size: 12.3px; line-height: 1.5;
    display: flex; align-items: flex-start; gap: 9px;
    background: var(--surface-2); border-style: solid; color: var(--text-2);
    margin-bottom: 14px;
}
.anl-insuf i { flex: 0 0 auto; font-size: 16px; margin-top: 1px; color: var(--text-3); }
.anl-insuf b { color: var(--text); }
.anl-pending {
    padding: 44px 20px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.anl-pending i { font-size: 30px; color: var(--text-3); }
.anl-pending b { font-size: 15px; color: var(--text-2); font-weight: 800; }
.anl-pending span { font-size: 12.5px; max-width: 380px; line-height: 1.5; }

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

  /* RESPONSIVE                                                     */

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

  /* Movil: el mapa de calor deja de ser una matriz y pasa a una    */

  /* tarjeta por maquinista. Nunca debe producir scroll horizontal  */

  /* de pagina.                                                     */

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

@media (max-width: 1100px) {
    .anl-gcards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .anl-reccards { grid-template-columns: 1fr; }
    .anl-gcard-main { font-size: 26px; }

    /* Mapa de calor -> una tarjeta por maquinista.
       Una matriz de 119x6 con scroll horizontal es inutilizable en un
       telefono: cada fila pasa a ser una tarjeta con sus KPI en rejilla. */
    .anl-calor-wrap { overflow-x: visible; border: none; border-radius: 0; }
    .anl-calor, .anl-calor tbody, .anl-calor tr { display: block; width: 100%; }
    .anl-calor thead { display: none; }
    .anl-calor tr {
        border: 1px solid var(--border); border-radius: 11px;
        background: var(--surface-2); padding: 10px; margin-bottom: 10px;
    }
    .anl-calor tbody th.anl-calor-name {
        display: flex; align-items: center; gap: 7px;
        position: static; min-width: 0; background: none; border: none;
        padding: 0 0 9px; font-size: 13.5px; font-weight: 800;
    }
    .anl-calor td {
        display: block; border: none; padding: 0; text-align: left;
    }
    /* Las celdas de KPI se reparten en rejilla dentro de la tarjeta. */
    .anl-calor tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .anl-calor tbody th.anl-calor-name { grid-column: 1 / -1; }
    .anl-calor td.anl-calor-tot {
        grid-column: 1 / -1; padding-top: 4px;
        display: flex; justify-content: space-between; align-items: center;
        font-size: 11.5px; color: var(--text-3); font-weight: 700;
        border-top: 1px dashed var(--border); padding-top: 8px;
    }
    .anl-calor td.anl-calor-tot::before {
        content: attr(data-l); text-transform: uppercase;
        font-size: 10px; letter-spacing: .35px;
    }
    /* Cada celda muestra a que KPI pertenece: sin cabecera de columna
       el color por si solo no dice nada. */
    .anl-calor td.anl-calor-cell::before {
        content: attr(data-l); display: block; margin-bottom: 3px;
        font-size: 9.5px; font-weight: 800; color: var(--text-3);
        text-transform: uppercase; letter-spacing: .3px;
    }
    .anl-cal { min-width: 0; }

    .anl-det-meses { flex-direction: column; }
    .anl-det-mes { justify-content: space-between; }
}