/* =====================================================================
   SGSI ISO 27001 — complementos sobre site.css

   site.css es el tema de auditoria.vstelecom.cl (RA.AU) copiado sin
   cambios, para que las dos plataformas se vean iguales. Lo propio de
   esta aplicación va acá; si se actualiza el tema, se reemplaza site.css
   y este archivo no se toca.
   ===================================================================== */

/* ---------- Empresa (tenant) ---------- */
.empresa-punto {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--chip);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip) 25%, transparent);
    flex: 0 0 auto;
}

.empresa-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    background: color-mix(in srgb, var(--chip) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--chip) 45%, transparent);
}

.empresa-chip::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--chip);
}

.chip-area {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    background: var(--chip-fondo);
    border: 1px solid var(--line-soft);
    color: var(--text-dim);
}

/* ---------- Menú: opciones de fases futuras ---------- */
.app-nav a .fase {
    margin-left: auto;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: .05rem .4rem;
    border-radius: 999px;
    color: var(--text-mute);
    border: 1px solid var(--line);
}

.app-nav a.apagada { cursor: default; }

/* ---------- Hoja de ruta del panel ---------- */
.hoja-ruta {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
}

.hoja-ruta li {
    padding: .6rem .8rem .6rem 2.2rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--superficie-1);
    color: var(--text-dim);
    position: relative;
    font-size: .9rem;
}

.hoja-ruta li strong { color: var(--text); margin-right: .4rem; }

.hoja-ruta li::before {
    content: "";
    position: absolute;
    left: .85rem;
    top: 50%;
    width: .65rem;
    height: .65rem;
    margin-top: -.325rem;
    border-radius: 50%;
    border: 2px solid var(--line-fuerte);
}

.hoja-ruta li.hecho { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.hoja-ruta li.hecho::before { background: var(--ok); border-color: var(--ok); }

/* ---------- Móvil: la barra lateral pasa a cajón ----------

   site.css apila la barra encima del contenido en pantallas angostas:
   con diez grupos, el contenido queda a una pantalla y media de
   distancia. Acá se convierte en un cajón que se abre con el botón de
   la cabecera y se cierra tocando fuera.                               */
.app-velo { display: none; }

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, var(--ra-sidebar));
        height: 100dvh;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform .22s ease;
        background: var(--superficie-1);
    }

    .menu-abierto .app-sidebar { transform: none; box-shadow: var(--sombra-modal); }

    .menu-abierto .app-velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1030;
        background: var(--velo);
    }

    .app-cabecera { position: sticky; padding: .65rem 1rem; }
    .app-principal { padding: 1rem; }
}

.min-w-0 { min-width: 0; }

/* =====================================================================
   F1 · Control documental
   ===================================================================== */

/* Estado de un documento o versión: punto de color + texto. */
.estado {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .12rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
    --c: var(--text-mute);
    color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, transparent);
    border-color: color-mix(in srgb, var(--c) 30%, transparent);
}
.estado::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--c); }
.estado-ok       { --c: var(--ok); }
.estado-revision { --c: var(--warn); }
.estado-borrador { --c: var(--accent); }
.estado-error    { --c: var(--err); }
.estado-neutro   { --c: var(--text-mute); }

/* Los KPI de la lista maestra son además filtros. */
a.kpi-enlace { display: block; color: inherit; text-decoration: none; height: 100%; transition: border-color .15s, transform .15s; }
a.kpi-enlace:hover { border-color: var(--line-fuerte); transform: translateY(-1px); }

.barra-avance {
    height: 6px;
    border-radius: 999px;
    background: var(--superficie-2);
    overflow: hidden;
    margin-top: .45rem;
}
.barra-avance > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primario-2), var(--ok));
}

.tabla-datos tr.fila-grupo td {
    background: var(--superficie-2);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding-top: .45rem;
    padding-bottom: .45rem;
}

/* Ficha del documento: etiqueta arriba, valor abajo. */
.ficha dt { font-size: .72rem; font-weight: 600; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; }
.ficha dd { margin-bottom: .7rem; }
.ficha dd:last-child { margin-bottom: 0; }

.lista-lectura li {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.lista-lectura li:last-child { border-bottom: 0; }
.lista-lectura li.leido span:first-child::before { content: "✓ "; color: var(--ok); }
.lista-lectura li.pendiente span:first-child::before { content: "○ "; color: var(--text-mute); }

.app-nav a.sub .contador { margin-left: auto; }

/* Los números de aviso usan los tonos del tema: el amarillo de Bootstrap no se lee en claro. */
.kpi-valor.valor-aviso { background: none; -webkit-text-fill-color: currentColor; color: var(--warn); }
.kpi-valor.valor-error { background: none; -webkit-text-fill-color: currentColor; color: var(--err); }

/* =====================================================================
   Visor de documentos (modal)
   ===================================================================== */
.modal-visor .modal-dialog { max-width: min(1280px, 96vw); }
@media (min-width: 992px) {
    .modal-visor .modal-dialog { height: calc(100vh - 3.5rem); }
    .modal-visor .modal-content { height: 100%; }
}
.modal-visor .modal-content { background: var(--superficie-1); border: 1px solid var(--line); box-shadow: var(--sombra-modal); }
.modal-visor .modal-header { border-bottom-color: var(--line-soft); }
.modal-visor .modal-body { background: var(--superficie-0); }

.visor-cuerpo { min-height: 100%; height: 100%; }
.visor-mensaje { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; padding: 2rem; text-align: center; color: var(--text-dim); }

/* PDF: el visor del navegador ocupa todo. */
.visor-pdf iframe { display: block; width: 100%; height: 100%; min-height: 75vh; border: 0; background: #525659; }

/* Word: páginas blancas sobre fondo neutro, como en un procesador de texto. */
.visor-word { overflow: auto; }
.visor-word .docx-wrapper { background: var(--superficie-0); padding: 1.5rem 1rem; }
.visor-word .docx-wrapper > section.docx { box-shadow: 0 4px 18px rgb(0 0 0 / 35%); margin-bottom: 1.5rem; color: #000; }

/* Excel: tabla con encabezados fijos y pestañas de hojas. */
.visor-excel { overflow: auto; padding: 1rem; background: #fff; color: #111; }
.visor-excel table.hoja { border-collapse: collapse; font-size: .82rem; }
.visor-excel table.hoja td { border: 1px solid #d0d7de; padding: .25rem .5rem; white-space: pre-wrap; vertical-align: top; min-width: 3rem; }
.visor-excel table.hoja tr:first-child td { background: #eef2f7; font-weight: 600; position: sticky; top: -1rem; }
.visor-pestanas { display: flex; gap: .25rem; padding: .5rem 1rem 0; border-bottom: 1px solid var(--line-soft); overflow-x: auto; }
.visor-pestanas button {
    border: 1px solid var(--line-soft); border-bottom: 0; background: var(--superficie-2); color: var(--text-dim);
    border-radius: 8px 8px 0 0; padding: .3rem .8rem; font-size: .8rem; white-space: nowrap;
}
.visor-pestanas button.active { background: var(--superficie-0); color: var(--text); font-weight: 600; }

.visor-marco-impresion { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; visibility: hidden; }

/* Botón de vista rápida en tablas. */
.btn-ver { display: inline-flex; align-items: center; gap: .3rem; }

/* =====================================================================
   F2 · Riesgos
   ===================================================================== */
:root, [data-bs-theme="dark"] {
    --b-bajo: #34d399; --b-medio: #fbbf24; --b-alto: #fb923c; --b-critico: #f87171;
}
[data-bs-theme="light"] {
    --b-bajo: #059669; --b-medio: #d97706; --b-alto: #ea580c; --b-critico: #dc2626;
}

/* Etiqueta de banda: mismo lenguaje visual que .estado. */
.banda { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 999px;
         font-size: .74rem; font-weight: 700; white-space: nowrap; --c: var(--text-mute);
         color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
         border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.banda-bajo { --c: var(--b-bajo); }
.banda-medio { --c: var(--b-medio); }
.banda-alto { --c: var(--b-alto); }
.banda-critico { --c: var(--b-critico); }
.banda-nd { --c: var(--text-mute); }
.banda .num { font-variant-numeric: tabular-nums; opacity: .85; }

/* Mapa de calor */
.mapa-calor { display: flex; flex-direction: column; gap: .4rem; }
.mapa-titulo { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.mapa-cuerpo { display: flex; gap: .4rem; }
.mapa-eje-y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .7rem; color: var(--text-mute); text-align: center; }
.mapa-eje-x { text-align: center; font-size: .7rem; color: var(--text-mute); padding-left: 2.2rem; }
.mapa-grilla { display: grid; grid-template-columns: 1.4rem repeat(5, minmax(2.6rem, 1fr)); gap: 4px; flex: 1; }
.mapa-etiqueta { display: flex; align-items: center; justify-content: center; font-size: .72rem; color: var(--text-mute); font-weight: 600; }
.mapa-celda { aspect-ratio: 1.35; border-radius: 8px; display: flex; align-items: center; justify-content: center;
              --c: var(--text-mute); background: color-mix(in srgb, var(--c) 22%, transparent);
              border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); transition: transform .12s; }
.mapa-celda.banda-bajo { --c: var(--b-bajo); }
.mapa-celda.banda-medio { --c: var(--b-medio); }
.mapa-celda.banda-alto { --c: var(--b-alto); }
.mapa-celda.banda-critico { --c: var(--b-critico); }
.mapa-celda.vacia { background: color-mix(in srgb, var(--c) 8%, transparent); border-style: dashed; }
.mapa-celda:not(.vacia) { background: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 0 1px var(--c) inset; }
.mapa-celda:not(.vacia):hover { transform: scale(1.06); }
.mapa-n { font-weight: 800; font-size: 1.05rem; color: var(--text); }
.mapa-v { font-size: .68rem; color: var(--text-mute); opacity: .7; }

/* Selector de nivel 1–5 (probabilidad, impacto, C/I/D) con su descripción. */
.niveles { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.niveles input { position: absolute; opacity: 0; pointer-events: none; }
.niveles label { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem .25rem; border-radius: 10px;
                 border: 1px solid var(--line); background: var(--superficie-2); cursor: pointer; text-align: center; min-height: 3.6rem;
                 transition: border-color .12s, background .12s; }
.niveles label strong { font-size: 1.05rem; }
.niveles label small { font-size: .66rem; color: var(--text-mute); line-height: 1.15; }
.niveles input:checked + label { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.niveles input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.calculo-riesgo { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: var(--radius);
                  background: var(--superficie-2); border: 1px solid var(--line-soft); }
.calculo-riesgo .valor { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Criticidad C+I+D de un activo */
.cid { display: inline-flex; gap: 2px; font-variant-numeric: tabular-nums; font-size: .74rem; }
.cid span { min-width: 1.35rem; text-align: center; border-radius: 5px; padding: .05rem .2rem; background: var(--chip-fondo); color: var(--text-dim); }
.cid span.alto { background: color-mix(in srgb, var(--b-alto) 25%, transparent); color: var(--text); }

/* Lista de casillas con buscador (activos y controles en el formulario de riesgo) */
.lista-check { max-height: 15rem; overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: .35rem .6rem;
               background: var(--superficie-1); }
.lista-check .form-check { padding-top: .15rem; padding-bottom: .15rem; }
.lista-check .form-check small { color: var(--text-mute); }

/* SoA */
.soa-fila.excluido td { opacity: .55; }
.soa-num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.chip-attr { display: inline-block; font-size: .66rem; padding: 0 .4rem; border-radius: 999px; background: var(--chip-fondo);
             color: var(--text-mute); margin: 0 .15rem .15rem 0; white-space: nowrap; }
.chip-attr.nuevo { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 15%, transparent); }
.madurez { display: inline-flex; gap: 2px; }
.madurez i { width: .55rem; height: .55rem; border-radius: 2px; background: var(--line); }
.madurez i.on { background: var(--accent); }
.fila-edicion td { background: var(--superficie-2) !important; }

/* Gráfico de barras de mediciones de un objetivo, con línea de meta. */
.grafico-barras { position: relative; display: flex; align-items: flex-end; gap: .5rem; height: 14rem; padding: 1.4rem .25rem 0; }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 1.6rem; }
.barra-col .barra { width: 100%; max-width: 3rem; border-radius: 6px 6px 2px 2px; max-height: 78%; }
.barra-col .barra.ok { background: linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 55%, transparent)); }
.barra-col .barra.mal { background: linear-gradient(180deg, var(--err), color-mix(in srgb, var(--err) 55%, transparent)); }
.barra-valor { font-size: .68rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.barra-etq { font-size: .66rem; color: var(--text-mute); margin-top: .25rem; height: 1.1rem; }
.linea-meta { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--accent-2); pointer-events: none; }
.linea-meta span { position: absolute; right: 0; top: -1.15rem; font-size: .66rem; color: var(--accent-2); }

/* FODA */
.foda-item { padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
.foda-item:last-child { border-bottom: 0; }
.foda-fortaleza { border-top: 3px solid var(--ok) !important; }
.foda-debilidad { border-top: 3px solid var(--warn) !important; }
.foda-oportunidad { border-top: 3px solid var(--accent) !important; }
.foda-amenaza { border-top: 3px solid var(--err) !important; }