/*
    ══════════════════════════════════════════════════════════════════════════
    ACCESOS — lo propio de /mapa-accesos
    ══════════════════════════════════════════════════════════════════════════

    El formato de la pantalla —cabecera, filtros, indicadores, tabla— lo pone
    pantalla.css. Aquí sólo vive lo que es de este mapa y de ningún otro sitio:
    las marcas de la matriz, las fichas de rol y los bloques de hallazgos.
*/

/* Las dos rejillas que toda pantalla ajusta a sus controles. */
.acc-filtros { grid-template-columns: max-content max-content max-content minmax(180px, 1fr) max-content; }
.acc-tira    { grid-template-columns: repeat(4, minmax(210px, 1fr)); }

/* ═══════════════════ La matriz ═══════════════════ */

/*
    La marca de una casilla. Un punto tenue cuando el rol NO entra y una palomilla
    cuando sí: lo que se lee de un vistazo es la forma de la columna —dónde hay
    palomillas y dónde no—, así que el «no» tiene que pesar visualmente lo mínimo.
*/
.acc-celda {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.acc-celda .rzi,
.acc-celda .rz-icon,
.acc-celda .notranslate { font-size: 17px; }

.acc-si   { color: var(--pan-verde); }
.acc-no   { color: #dbe3ea; }

/* Sin sesión y «cualquier cuenta» no son un permiso concedido a ese rol: son la
   ausencia de puerta. Se pintan distinto para que no se confundan con un sí. */
.acc-abierto  { color: var(--pan-ambar); }
.acc-sesion   { color: #7ea6cf; }

/* La columna del rol propio de quien mira. */
.acc-rejilla .rz-grid-table thead th.acc-col-rol .rz-column-title-content { justify-content: center; }

/* ═══════════════════ Fichas ═══════════════════ */

.acc-chips { display: flex; flex-wrap: wrap; gap: 4px; }

.acc-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--pan-linea);
    background: #f4f7fa;
    color: var(--pan-apagado);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}

.acc-chip-si    { border-color: #bfe3d2; background: #f0faf5; color: #146b46; }
.acc-chip-alerta{ border-color: #f0d6bd; background: #fdf6ef; color: #8a4413; }

/* La etiqueta de nivel, en la columna de la tabla. */
.acc-nivel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.acc-nivel-rol     { color: var(--pan-verde); }
.acc-nivel-sesion  { color: var(--pan-azul); }
.acc-nivel-abierto { color: var(--pan-ambar); }
.acc-nivel .rzi,
.acc-nivel .notranslate { font-size: 15px; }

/* ═══════════════════ Vista por rol ═══════════════════ */

/*
    El bloque que se desplaza por dentro en las vistas que no son la tabla de
    Radzen. Hereda el hueco que deja la columna de la pantalla, igual que hace
    .pan-tarjeta, y desplaza su propio contenido.
*/
.acc-lienzo {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 14px 16px 18px;
    background: var(--pan-papel);
    border: 1px solid var(--pan-linea);
    border-radius: var(--pan-radio);
    box-shadow: var(--pan-sombra);
}

.acc-resumen { width: 100%; border-collapse: collapse; }

.acc-resumen th {
    position: sticky;
    top: -14px;
    z-index: 2;
    background: var(--pan-papel);
    padding: 6px 10px;
    border-bottom: 1px solid var(--pan-linea);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--pan-apagado);
    text-align: left;
}

.acc-resumen td {
    padding: 7px 10px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: var(--pan-tinta);
    vertical-align: middle;
}

.acc-resumen tr:last-child td { border-bottom: 0; }
.acc-resumen .acc-num { text-align: right; font-family: var(--pan-mono); font-variant-numeric: tabular-nums; }

/* La barra de proporción: cuánto del módulo alcanza el rol. */
.acc-barra {
    position: relative;
    height: 6px;
    width: 100%;
    min-width: 90px;
    border-radius: 999px;
    background: #eef2f6;
    overflow: hidden;
}

.acc-barra > div {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: var(--pan-verde);
}

.acc-barra-nada > div { background: #dbe3ea; }

/* ═══════════════════ Hallazgos ═══════════════════ */

.acc-hallazgo {
    border: 1px solid var(--pan-linea);
    border-left: 3px solid var(--pan-tenue);
    border-radius: var(--pan-radio);
    padding: 12px 14px;
    margin-bottom: 12px;
    background: #fbfcfe;
}

.acc-hallazgo:last-child { margin-bottom: 0; }
.acc-hallazgo-alto  { border-left-color: var(--pan-rojo);  background: #fff8f6; }
.acc-hallazgo-medio { border-left-color: var(--pan-ambar); background: #fffaf5; }
.acc-hallazgo-bajo  { border-left-color: var(--pan-azul);  background: #f7fafd; }

.acc-hallazgo-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.acc-hallazgo-cab h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--pan-tinta);
    letter-spacing: .2px;
}

.acc-hallazgo-conteo {
    margin-left: auto;
    font-family: var(--pan-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--pan-apagado);
    white-space: nowrap;
}

.acc-hallazgo-por {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pan-apagado);
}

.acc-hallazgo-lista {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--pan-linea);
    max-height: 320px;
    overflow: auto;
}

.acc-hallazgo-lista li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 2px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12.5px;
}

.acc-hallazgo-lista li:last-child { border-bottom: 0; }
.acc-hallazgo-lista .acc-ruta { font-family: var(--pan-mono); color: var(--pan-azul); }
.acc-hallazgo-lista .acc-donde { margin-left: auto; color: var(--pan-tenue); font-size: 11.5px; white-space: nowrap; }

.acc-limpio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border-radius: var(--pan-radio);
    background: #f0faf5;
    border: 1px solid #bfe3d2;
    color: #146b46;
    font-size: 13px;
}

/* ═══════════════════ Leyenda ═══════════════════ */

.acc-leyenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 11.5px;
    color: var(--pan-apagado);
}

.acc-leyenda span { display: inline-flex; align-items: center; gap: 4px; }
.acc-leyenda .rzi,
.acc-leyenda .notranslate { font-size: 15px; }

@media (max-width: 1100px) {
    .acc-filtros { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .acc-tira    { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}