/* =============================================================================
   Fase 6 — semáforo, matriz de calor y tablero de control.
   El semáforo (--r-low/mod/high/crit) es color SEMÁNTICO: se usa aquí y
   SOLO aquí para severidad. Nunca se mezcla con --cat-* (categorías), y
   cada banda siempre lleva su etiqueta de texto además del color — un
   daltónico o una impresión en blanco y negro tienen que poder leer todo
   esto (DISEÑO.md, capítulo 5).
   ============================================================================= */

/* --- Indicadores del tablero ejecutivo -------------------------------------- */

.indicadores-ejecutivos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.indicador-tarjeta .etiqueta {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.indicador-tarjeta .cifra {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.indicador-tarjeta .variacion {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 6px;
}

.variacion-buena { color: var(--r-low); }
.variacion-mala { color: var(--r-crit); }
.variacion-neutral { color: var(--text-muted); }

/* --- ICR: el diferenciador del producto, con tarjeta propia y más grande --- */

.tarjeta-icr {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, color-mix(in srgb, var(--route) 10%, var(--bg-elevated)), var(--bg-elevated));
    border: 1px solid var(--route);
    border-radius: var(--radio-radius);
    padding: 20px 22px;
    margin-bottom: 20px;
}

.tarjeta-icr .cifra-icr {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--route);
    line-height: 1;
}

.tarjeta-icr .detalle { flex: 1; min-width: 220px; }
.tarjeta-icr h2 { margin: 0 0 4px; }

/* --- Semáforo por categoría (barra apilada) --------------------------------- */

.semaforo-categorias { display: flex; flex-direction: column; gap: 10px; }

.semaforo-fila { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: center; }
.semaforo-fila .nombre-categoria { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.semaforo-barra {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
}

.semaforo-segmento {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink);
    min-width: 0;
    transition: filter 0.15s;
}
.semaforo-segmento:hover { filter: brightness(0.92); }
.semaforo-segmento.banda-bajo { background: var(--r-low); }
.semaforo-segmento.banda-moderado { background: var(--r-mod); }
.semaforo-segmento.banda-alto { background: var(--r-high); }
.semaforo-segmento.banda-critico { background: var(--r-crit); color: #fff; }
.semaforo-segmento.banda-sin_calificar { background: var(--border); color: var(--text-muted); }

/* --- Distribución inherente vs. residual (barras pareadas) ------------------ */

.distribucion-bandas { display: flex; flex-direction: column; gap: 12px; }
.distribucion-fila { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; }
.distribucion-barras { display: flex; flex-direction: column; gap: 4px; }
.distribucion-barra-linea { display: flex; align-items: center; gap: 8px; }
.distribucion-barra-linea .etiqueta-mini { width: 66px; font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.distribucion-barra-pista { flex: 1; background: var(--bg); border-radius: 4px; height: 14px; overflow: hidden; }
.distribucion-barra-relleno { height: 100%; border-radius: 4px; }
.distribucion-barra-linea .valor-mini { width: 28px; text-align: right; font-family: var(--font-mono); font-size: 0.75rem; }

/* --- Alertas propias --------------------------------------------------------- */

.alertas-panel { display: flex; flex-direction: column; gap: 8px; }
.alerta-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    text-decoration: none;
    color: inherit;
}
.alerta-fila:hover { border-color: var(--route); }
.alerta-fila .cuenta-alerta {
    font-family: var(--font-mono);
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    border-radius: 999px;
    padding: 2px 8px;
    background: var(--bg-elevated);
}
.alerta-fila.alerta-vacia { opacity: 0.5; }

/* --- Top 10 por residual ------------------------------------------------------ */

.top10-lista { display: flex; flex-direction: column; gap: 0; }
.top10-fila {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}
.top10-fila:hover { background: var(--bg); }
.top10-fila .puesto { font-family: var(--font-mono); color: var(--text-muted); }
.top10-fila .nombre-riesgo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top10-fila .dueno-riesgo { font-size: 0.75rem; color: var(--text-muted); display: block; }
.flecha-cambio { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; }
.flecha-sube { color: var(--r-crit); }
.flecha-baja { color: var(--r-low); }
.flecha-igual { color: var(--text-muted); }

/* =============================================================================
   Matriz de calor 5×5
   ============================================================================= */

.matriz-envoltura { display: flex; flex-direction: column; gap: 14px; }

.matriz-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.matriz-interruptor {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    overflow: hidden;
}
.matriz-interruptor button {
    border: none;
    background: var(--bg-elevated);
    color: var(--text);
    padding: 8px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    min-height: 40px;
}
.matriz-interruptor button.activo { background: var(--route); color: #fff; }

.matriz-toolbar select { min-height: 40px; padding: 6px 10px; }

.matriz-svg-envoltura { overflow-x: auto; }
.matriz-svg { display: block; max-width: 100%; height: auto; }

.matriz-celda { stroke: var(--paper); stroke-width: 2; }
.matriz-celda-bajo { fill: var(--r-low); }
.matriz-celda-moderado { fill: var(--r-mod); }
.matriz-celda-alto { fill: var(--r-high); }
.matriz-celda-critico { fill: var(--r-crit); }

/* paint-order + stroke: un halo detrás del texto, no para contrastar con el
   color de la banda (eso ya lo resuelve matriz-texto-claro) sino con los
   propios puntos de riesgo, que en una celda con muchos riesgos empacados
   pueden cubrir buena parte del texto — sin esto, "49" se leía como un
   número ilegible detrás de una nube de círculos. */
.matriz-celda-etiqueta {
    font-size: 11px;
    font-weight: 700;
    fill: var(--ink);
    letter-spacing: 0.03em;
    pointer-events: none;
    paint-order: stroke;
    stroke: var(--paper);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.matriz-celda-cuenta {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-display);
    fill: var(--ink);
    pointer-events: none;
    paint-order: stroke;
    stroke: var(--paper);
    stroke-width: 4px;
    stroke-linejoin: round;
}
.matriz-texto-claro { fill: #fff; stroke: var(--ink); }

.matriz-eje-num { font-size: 13px; fill: var(--text-muted); font-family: var(--font-mono); }
.matriz-eje-titulo { font-size: 13px; fill: var(--text); font-weight: 600; }

.matriz-punto {
    fill: var(--ink);
    stroke: var(--paper);
    stroke-width: 1;
    transition: cx 0.7s cubic-bezier(0.4, 0, 0.2, 1), cy 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
:root:not([data-theme="light"]) .matriz-punto { fill: var(--paper); stroke: var(--ink); }
:root[data-theme="dark"] .matriz-punto { fill: var(--paper); stroke: var(--ink); }

.matriz-lista-celda {
    border: 1px solid var(--border-strong);
    border-radius: var(--radio-radius);
    background: var(--bg-elevated);
    padding: 14px 16px;
    max-width: 480px;
}
.matriz-lista-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.matriz-lista-riesgos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.matriz-lista-riesgos li { display: flex; flex-direction: column; }
.matriz-lista-riesgos a { font-weight: 600; }

/* =============================================================================
   Tablero de control de mitigaciones — pestañas y kanban
   ============================================================================= */

.pestanas-control { display: flex; gap: 4px; border-bottom: 1px solid var(--border-strong); margin-bottom: 18px; }
.pestana-control {
    padding: 10px 16px;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.pestana-control.activa { color: var(--route); border-bottom-color: var(--route); }

.alerta-vencido-control { color: var(--r-crit); font-weight: 700; }
.alerta-por-vencer-control { color: var(--r-mod); font-weight: 700; }

.kanban-tablero {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
}
@media (max-width: 900px) { .kanban-tablero { grid-template-columns: 1fr; } }

.kanban-columna {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radio-radius);
    padding: 10px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kanban-columna.zona-drop-activa { border-color: var(--route); background: color-mix(in srgb, var(--route) 8%, var(--bg)); }
.kanban-columna-titulo { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 6px; color: var(--text-muted); }

.kanban-tarjeta {
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: grab;
    font-size: 0.8125rem;
}
.kanban-tarjeta:active { cursor: grabbing; }
.kanban-tarjeta.arrastrando { opacity: 0.4; }
.kanban-tarjeta .titulo-plan { font-weight: 600; display: block; margin-bottom: 4px; }
.kanban-tarjeta .meta-plan { color: var(--text-muted); font-size: 0.75rem; display: block; }
.kanban-tarjeta .meta-plan.vencido { color: var(--r-crit); font-weight: 700; }

/* --- Panel de portafolio (super_admin) --------------------------------------- */

.tarjeta-empresa-portafolio { display: flex; flex-direction: column; gap: 10px; }
.tarjeta-empresa-portafolio h3 { margin: 0; }
.mini-barras-portafolio { display: flex; height: 10px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.mini-barras-portafolio span.banda-bajo { background: var(--r-low); }
.mini-barras-portafolio span.banda-moderado { background: var(--r-mod); }
.mini-barras-portafolio span.banda-alto { background: var(--r-high); }
.mini-barras-portafolio span.banda-critico { background: var(--r-crit); }

/* --- Comparación entre ciclos ------------------------------------------------ */

.comparacion-columna-subida { color: var(--r-crit); font-weight: 700; }
.comparacion-columna-bajada { color: var(--r-low); font-weight: 700; }