/* =============================================================
   DSA Compliance · Visión de grupo
   -------------------------------------------------------------
   La matriz obligación × sociedad. Lo que la hace legible no es
   el color: es que «no aplica» se vea distinto de «no cumple».
   Un cuadro que pinta en rojo lo que no es exigible deja de
   mirarse a la segunda semana.
   ============================================================= */

.grp-cab { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.grp-titulo {
    display: flex; align-items: center; gap: .5rem;
    margin: 0; font-size: 1.35rem; font-weight: 700; color: #0f172a;
}
.grp-titulo .rzi { font-size: 26px; color: #4f46e5; }
.grp-sub { margin: .2rem 0 0; font-size: .86rem; color: #64748b; }
.grp-cab > .rz-button { margin-left: auto; }

/* ---- Leyenda ---- */
.grp-leyenda { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: #64748b; }
.grp-c { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-left: .5rem; }
.grp-c--ok { background: #22c55e; }
.grp-c--mid { background: #f59e0b; }
.grp-c--ko { background: #ef4444; }
.grp-c--na { background: #e2e8f0; }

/* ---- La matriz ----
   Scroll horizontal propio: con doce sociedades la tabla no cabe, y hacer
   scrollear la página entera pierde la columna de obligaciones. */
.grp-matriz-caja {
    overflow-x: auto;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
}
.grp-matriz { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; }

.grp-matriz th, .grp-matriz td { padding: .6rem .7rem; text-align: center; }

.grp-matriz thead th {
    background: #f8fafc; border-bottom: 1px solid #e2e8f0;
    font-weight: 600; font-size: .8rem; color: #0f172a;
    position: sticky; top: 0; z-index: 2;
}
/* La columna de obligaciones se queda fija: al desplazarse a la derecha, saber
   de qué fila es la celda es justo lo que se necesita. */
.grp-matriz__esq, .grp-matriz__fila {
    position: sticky; left: 0; z-index: 3;
    background: #fff; text-align: left !important;
    border-right: 1px solid #e2e8f0;
    min-width: 230px;
}
.grp-matriz__esq { background: #f8fafc; z-index: 4; }

.grp-obl-linea > .rzi { font-size: 19px; color: #6366f1; flex-shrink: 0; }

/* UNA sola linea: icono, nombre y norma ISO, alineados y sin envolver.
   El ambito ocupaba una segunda linea que doblaba la altura de cada fila para repetir un dato
   que ya esta en el icono y en el filtro de arriba. Con flex, el nombre se encoge si hace falta
   y el chip de la ISO nunca se parte: es corto y es lo que se busca de un vistazo. */
/* El flex va en un envoltorio DENTRO del <th>, no en el <th>.
   La celda es sticky y forma parte de una tabla: ponerle display:flex la saca del algoritmo de
   tabla y la columna fija deja de cuadrar con las filas del cuerpo — funciona en un navegador y
   se descuelga en otro, que es la peor clase de fallo de maquetacion. */
.grp-obl-linea {
    display: flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
    min-width: 0;
}

.grp-obl {
    font-size: .86rem; font-weight: 600; color: #0f172a; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

.grp-soc { font-size: .84rem; font-weight: 650; color: #0f172a; white-space: nowrap; }
.grp-soc__pais { font-size: .7rem; color: #94a3b8; font-weight: 500; }

.grp-matriz tbody tr:not(:last-child) td,
.grp-matriz tbody tr:not(:last-child) th { border-bottom: 1px solid #f1f5f9; }
.grp-matriz tbody tr:hover td { background: #f8fafc; }
.grp-matriz tbody tr:hover .grp-matriz__fila { background: #f8fafc; }

/* ---- Celdas ---- */
.grp-celda { min-width: 120px; }
.grp-celda .rzi { font-size: 21px; display: block; margin: 0 auto; }
.grp-norma { display: block; font-size: .66rem; color: #94a3b8; margin-top: .15rem; line-height: 1.25; }

.grp-celda.is-ok  .rzi { color: #22c55e; }
.grp-celda.is-mid .rzi { color: #f59e0b; }
.grp-celda.is-ko  .rzi { color: #ef4444; }
.grp-celda.is-sd  .rzi { color: #94a3b8; }
/* «No aplica» se apaga entero, norma incluida: no es un resultado que evaluar. */
.grp-celda.is-na { background: #fafafa; }
.grp-celda.is-na .rzi { color: #cbd5e1; }

.grp-nota {
    display: flex; align-items: flex-start; gap: .5rem;
    margin-top: .9rem; font-size: .78rem; color: #64748b; line-height: 1.5;
}
.grp-nota .rzi { font-size: 17px; color: #94a3b8; flex-shrink: 0; }
.grp-nota b { color: #334155; }

.grp-vacio {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; padding: 3.5rem 1.5rem; text-align: center; color: #94a3b8;
    background: #fff; border: 1px dashed #e2e8f0; border-radius: 16px;
}
.grp-vacio .rzi { font-size: 42px; opacity: .5; }
.grp-vacio p { margin: 0; font-size: .92rem; color: #475569; font-weight: 600; }
.grp-vacio span { font-size: .82rem; max-width: 46ch; }

/* La norma ISO junto al ambito, en su propio tono.
   Va mas apagada que el ambito a proposito: es una referencia de que sistema de gestion cubre
   la fila, NO lo que te obliga. Igualarlas visualmente sugeriria que la ISO es exigible. */
.grp-iso {
    display: inline-block;
    flex-shrink: 0;
    padding: .05rem .32rem;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: help;
}

/* La columna de obligaciones respira un poco mas: los nombres ya se han acortado para caber
   en una linea, y este margen es lo que evita que el siguiente que se anada vuelva a los
   puntos suspensivos. */
.grp-matriz__esq, .grp-matriz__fila { min-width: 268px; max-width: 320px; }
.grp-matriz__fila { display: table-cell; }