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

  /* MiKPI · MODULO ANALITICA — ARMAZON                             */

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

  /* Solo afecta a #adm-view-analitica. Reutiliza las variables de  */

  /* color de base.css (--primary, --success, --warning, --danger)  */

  /* para mantener la identidad visual existente: NO se define una  */

  /* paleta nueva.                                                  */

  /*                                                                */

  /* Accesibilidad: los estados nunca se comunican solo con color.  */

  /* Cada chip lleva icono + texto; el color es refuerzo.           */

  /*                                                                */

  /* Las vistas concretas (recurrencia, mapa de calor, FT/PT) viven */

  /* en css/analitica-vistas.css.                                   */

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

#adm-view-analitica {
    --anl-ok:    var(--success);
    --anl-warn:  var(--warning);
    --anl-high:  #ea580c;             /* naranjo = riesgo (entre amarillo y rojo) */
    --anl-crit:  var(--danger);
    --anl-none:  var(--text-3);
    --anl-gap:   18px;
}

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

  /* CABECERA                           */

  /* ================================== */
.anl-head { margin-bottom: 16px; }
.anl-h1 {
    font-size: 18px; font-weight: 800; color: var(--text); margin: 0 0 4px;
    display: flex; align-items: center; gap: 9px;
}
.anl-h1 i { color: var(--primary); font-size: 21px; }
.anl-sub { font-size: 12.5px; color: var(--text-2); margin: 0; max-width: 780px; line-height: 1.5; }

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

  /* FILTROS GLOBALES                   */

  /* ================================== */
.anl-filters {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
}
.anl-f { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.anl-f.grow { flex: 1 1 200px; }
.anl-f label {
    font-size: 10.5px; font-weight: 700; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .4px;
}
.anl-f .adm-select { width: 100%; }
.anl-f-actions { margin-left: auto; display: flex; align-items: flex-end; }

/* Segmentado Global / FT / PT */
.anl-seg {
    display: inline-flex; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 9px; padding: 2px; gap: 2px;
}
.anl-seg-btn {
    border: none; background: none; cursor: pointer; font-family: inherit;
    padding: 7px 14px; border-radius: 7px;
    font-size: 12.5px; font-weight: 700; color: var(--text-2); transition: .15s;
}
.anl-seg-btn:hover { color: var(--text); }
.anl-seg-btn.active { background: var(--primary); color: #fff; }

.anl-f-resumen {
    flex-basis: 100%; font-size: 12px; color: var(--text-3); font-weight: 600;
    border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 2px;
}

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

  /* PESTAÑAS DEL MÓDULO                */

  /* ================================== */
.anl-tabs {
    display: flex; gap: 4px; overflow-x: auto; margin-bottom: var(--anl-gap);
    border-bottom: 1px solid var(--border); padding-bottom: 0;
    scrollbar-width: thin;
}
.anl-tabs::-webkit-scrollbar { height: 4px; }
.anl-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.anl-tab {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    border: none; background: none; cursor: pointer; font-family: inherit;
    padding: 10px 14px; border-bottom: 2px solid transparent;
    font-size: 13px; font-weight: 700; color: var(--text-2); transition: .15s;
}
.anl-tab i { font-size: 16px; color: var(--text-3); }
.anl-tab:hover { color: var(--text); }
.anl-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.anl-tab.active i { color: var(--primary); }
.anl-panel[hidden] { display: none; }

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

  /* BLOQUES                            */

  /* ================================== */
.anl-block {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px; margin-bottom: var(--anl-gap);
}
.anl-block-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.anl-block-head h3 {
    font-size: 14.5px; font-weight: 800; color: var(--text); margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.anl-block-head h3 i { color: var(--primary); font-size: 17px; }
.anl-hint { font-size: 11.5px; color: var(--text-3); font-weight: 600; }

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

  /* TARJETAS DEL RESUMEN EJECUTIVO     */

  /* ================================== */
.anl-tiles {
    display: grid; gap: 12px; margin-bottom: var(--anl-gap);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.anl-tile {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--anl-none);
    border-radius: 12px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 5px;
}
.anl-tile.t-ok   { border-left-color: var(--anl-ok); }
.anl-tile.t-warn { border-left-color: var(--anl-warn); }
.anl-tile.t-high { border-left-color: var(--anl-high); }
.anl-tile.t-crit { border-left-color: var(--anl-crit); }

.anl-tile-top {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .4px;
}
.anl-tile-top i { font-size: 15px; }
.anl-tile.t-ok   .anl-tile-top i { color: var(--anl-ok); }
.anl-tile.t-warn .anl-tile-top i { color: var(--anl-warn); }
.anl-tile.t-high .anl-tile-top i { color: var(--anl-high); }
.anl-tile.t-crit .anl-tile-top i { color: var(--anl-crit); }

.anl-tile-val {
    font-size: 25px; font-weight: 800; color: var(--text); line-height: 1.15;
    letter-spacing: -.5px; overflow-wrap: anywhere;
}
.anl-tile-det { font-size: 11.5px; color: var(--text-2); line-height: 1.45; }

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

  /* INTERPRETACIÓN AUTOMÁTICA          */

  /* ================================== */
.anl-analisis {
    display: flex; gap: 11px; align-items: flex-start;
    background: var(--primary-light); border: 1px solid var(--border);
    border-radius: 11px; padding: 13px 15px; margin-top: 14px;
}
.anl-analisis i { color: var(--primary); font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
/* Solo el rótulo "ANÁLISIS" es un bloque en mayúsculas. El selector debe
   ser el hijo directo: `.anl-analisis b` a secas alcanzaba también a los
   <b> del propio texto interpretado y partía la frase en líneas sueltas
   ("El" / "91%" / "de las 1295 desviaciones…"). */
.anl-analisis > div > b {
    display: block; font-size: 10.5px; font-weight: 800; color: var(--primary);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px;
}
.anl-analisis p { margin: 0; font-size: 13px; color: var(--text); line-height: 1.55; }
/* Énfasis dentro de la frase: resalta sin romper el flujo del texto. */
.anl-analisis p b { display: inline; font-weight: 800; color: var(--text); text-transform: none; letter-spacing: 0; }

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

  /* CHIPS DE ESTADO (color + icono + texto) */

  /* ================================== */
.anl-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    border: 1px solid transparent;
}
.anl-chip i { font-size: 13px; }
/* Los fondos de estado son TINTES TRANSLUCIDOS, no pasteles opacos.
   Misma convencion que las insignias de admin.css (.b-exc, .b-crit...):
   al ser rgba sobre la superficie real, el mismo codigo funciona en tema
   claro y oscuro sin duplicar reglas. Con --success-light y compania
   (opacos, solo definidos para el tema claro) los chips quedaban como
   manchas claras sobre el fondo oscuro. */
.anl-chip.c-ok      { background: rgba(5,150,105,.15);  color: var(--success); border-color: var(--success); }
.anl-chip.c-good    { background: rgba(5,150,105,.15);  color: var(--success); border-color: var(--success); }
.anl-chip.c-warn    { background: rgba(217,119,6,.16);  color: var(--warning); border-color: var(--warning); }
.anl-chip.c-high    { background: rgba(234,88,12,.15);  color: var(--anl-high); border-color: var(--anl-high); }
.anl-chip.c-crit    { background: rgba(220,38,38,.15);  color: var(--danger);  border-color: var(--danger); }
.anl-chip.c-neutral { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.anl-chip.c-none    { background: var(--surface-2); color: var(--text-3); border-color: var(--border); }

.anl-nd { font-size: 11.5px; color: var(--text-3); font-style: italic; }

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

  /* RADAR DE ATENCIÓN                  */

  /* ================================== */
.anl-radar { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.anl-radar-col {
    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-radar-col.r-alta  { border-top-color: var(--anl-crit); }
.anl-radar-col.r-media { border-top-color: var(--anl-high); }
.anl-radar-col.r-ok    { border-top-color: var(--anl-ok); }

.anl-radar-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text); margin-bottom: 4px;
}
.anl-radar-head i { font-size: 17px; }
.r-alta  .anl-radar-head i { color: var(--anl-crit); }
.r-media .anl-radar-head i { color: var(--anl-high); }
.r-ok    .anl-radar-head i { color: var(--anl-ok); }
.anl-count {
    margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px;
    border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
    font-size: 11px; font-weight: 800; color: var(--text-2);
    display: inline-flex; align-items: center; justify-content: center;
}
.anl-radar-crit {
    font-size: 10.5px; color: var(--text-3); font-weight: 600;
    line-height: 1.4; margin-bottom: 10px;
}
.anl-radar-body { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }

.anl-case {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 9px; padding: 10px 12px;
}
.anl-case.empty {
    color: var(--text-3); font-size: 12px; font-style: italic;
    text-align: center; padding: 16px 12px; background: none; border-style: dashed;
}
.anl-case-name {
    font-size: 13px; font-weight: 800; color: var(--text);
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.anl-case-tag {
    font-size: 9.5px; font-weight: 800; color: var(--text-3);
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 5px; padding: 1px 5px; letter-spacing: .3px;
}
.anl-case-kpi { font-size: 12px; font-weight: 700; color: var(--primary); margin-top: 3px; }
/* Caso de KPI estático: se distingue del deterioro real con un borde
   punteado, no solo con el texto, para que se lea de un vistazo. */
.anl-case.estatico { border-style: dashed; }
.anl-case.mas {
    text-align: center; font-size: 11.5px; font-weight: 700;
    color: var(--text-3); background: none; border-style: dashed; padding: 9px;
}
.anl-case-why { font-size: 11.5px; color: var(--text-2); margin-top: 3px; line-height: 1.45; }

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

  /* GRÁFICOS                           */

  /* ================================== */
.anl-chart { position: relative; height: 320px; width: 100%; }
.anl-chart.sm { height: 220px; }
.anl-chart.lg { height: 420px; }
.anl-chart canvas { max-width: 100%; }

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

  /* TABLAS                             */

  /* ================================== */
.anl-tabla-wrap { overflow-x: auto; }
.anl-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.anl-tabla th {
    text-align: left; padding: 9px 10px; font-size: 10.5px; font-weight: 800;
    color: var(--text-3); text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.anl-tabla td { padding: 10px; border-bottom: 1px solid var(--surface-2); color: var(--text-2); }
.anl-tabla tbody tr:hover { background: var(--surface-2); }
.anl-tabla td b { color: var(--text); }

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

  /* PARETO                             */

  /* ================================== */
.anl-tabla tr.vital td { background: rgba(220,38,38,.045); }
body.dark-mode .anl-tabla tr.vital td { background: rgba(220,38,38,.10); }
.anl-tag-vital {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 5px;
    background: rgba(220,38,38,.15); color: var(--danger);
    font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
    vertical-align: middle;
}

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

  /* RESPONSIVE                                                     */

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

  /* Escritorio: paneles amplios y separados.                       */

  /* Tablet: el radar pasa a 1 columna (3 columnas estrechas son    */

  /* ilegibles).                                                    */

  /* Movil: una sola columna; las tablas se vuelven tarjetas.       */

  /* En ningun ancho debe aparecer scroll horizontal de pagina.     */

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

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

@media (max-width: 760px) {
    .anl-h1 { font-size: 16px; }
    .anl-filters { padding: 12px; gap: 10px; }
    .anl-f, .anl-f.grow { min-width: 0; flex: 1 1 100%; }
    .anl-f-actions { margin-left: 0; flex: 1 1 100%; }
    .anl-f-actions .adm-btn { width: 100%; justify-content: center; }
    .anl-seg { width: 100%; }
    .anl-seg-btn { flex: 1; padding: 9px 6px; }

    .anl-tiles { grid-template-columns: 1fr; gap: 10px; }
    .anl-tile-val { font-size: 22px; }

    .anl-block { padding: 14px; border-radius: 12px; }
    .anl-chart { height: 260px; }
    .anl-chart.sm { height: 200px; }
    .anl-chart.lg { height: 300px; }

    /* Tabla -> tarjetas. Evita el scroll horizontal gigante. */
    .anl-tabla-wrap { overflow-x: visible; }
    .anl-tabla, .anl-tabla tbody, .anl-tabla tr, .anl-tabla td { display: block; width: 100%; }
    .anl-tabla thead { display: none; }
    .anl-tabla tr {
        border: 1px solid var(--border); border-radius: 10px;
        margin-bottom: 10px; padding: 6px 10px; background: var(--surface-2);
    }
    .anl-tabla td {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        padding: 7px 0; border-bottom: 1px dashed var(--border); text-align: right;
    }
    .anl-tabla tr td:last-child { border-bottom: none; }
    .anl-tabla td::before {
        content: attr(data-l); text-align: left; flex: 0 0 auto;
        font-size: 10.5px; font-weight: 800; color: var(--text-3);
        text-transform: uppercase; letter-spacing: .4px;
    }
    .anl-tabla tbody tr:hover { background: var(--surface-2); }
}