/* ===========================================================
   La ayuda de TAGA.

   Toma los colores, la tipografía y la escala de espaciado de
   app.css: es la misma casa, sólo que en una pantalla que se
   LEE en vez de operarse. Lo único propio es lo que un texto
   largo necesita y una grilla no —renglones más altos, ancho
   de lectura acotado, un árbol que no es el menú del sistema—.

   Sin CDN y sin fuentes de afuera, como todo acá: la app de
   escritorio funciona sin internet, y esto es lo que alguien
   abre justamente cuando algo no le sale.
   =========================================================== */

.ayuda-body {
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-base);
    margin: 0;
}

/* ---------- la barra ---------- */

.ayuda-barra {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    height: var(--altura-header);
    padding: 0 var(--e4);
    background: var(--color-barra);
    color: var(--color-barra-texto);
}

.ayuda-marca {
    color: var(--color-barra-texto);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.ayuda-marca span {
    font-weight: 400;
    opacity: 0.85;
}

.ayuda-volver {
    color: var(--color-barra-texto);
    text-decoration: none;
    font-size: 13px;
    border: 1px solid rgba(var(--velo-barra-rgb), 0.45);
    border-radius: var(--radio);
    padding: var(--e1) var(--e3);
}

.ayuda-volver:hover { background: rgba(var(--velo-barra-rgb), 0.12); }

/* ---------- el layout ---------- */

.ayuda-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--e5);
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--e5) var(--e4);
}

/*
   El árbol queda fijo mientras el texto scrollea.

   `align-self: flex-start` no es opcional: `.ayuda-layout` es un flex y estira
   a sus hijos a la altura del más alto, así que sin esto el árbol mide lo que
   mide el tema, no le queda margen donde pegarse y el `sticky` no hace
   absolutamente nada. Es la misma trampa que ya tenía documentada el menú del
   sistema.
*/
.ayuda-arbol {
    align-self: flex-start;
    position: sticky;
    top: calc(var(--altura-header) + var(--e4));
    flex: 0 0 260px;
    max-height: calc(100vh - var(--altura-header) - var(--e5));
    overflow-y: auto;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-chico);
    padding: var(--e2);
}

.ayuda-filtro { padding: var(--e1) var(--e1) var(--e3); }

.ayuda-filtro input {
    width: 100%;
    box-sizing: border-box;
    /*
       16px y no menos: abajo de eso iOS hace zoom solo al enfocar y la pantalla
       queda corrida con la mitad afuera. Es la misma razón por la que los campos
       del POS móvil no bajan de ahí.
    */
    font-size: 16px;
    font-family: inherit;
    line-height: 1.2;
    padding: var(--e2);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-superficie-alt);
}

.ayuda-grupo + .ayuda-grupo { margin-top: var(--e1); }

.ayuda-grupo-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--e2);
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--color-texto);
    padding: var(--e2);
    border-radius: var(--radio);
}

.ayuda-grupo-titulo:hover { background: var(--color-superficie-alt); }

.ayuda-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s;
}

.ayuda-grupo.abierto .ayuda-chevron { transform: rotate(180deg); }

.ayuda-grupo-temas {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--e2) var(--e2);
    display: none;
}

.ayuda-grupo.abierto .ayuda-grupo-temas { display: block; }

.ayuda-tema {
    display: block;
    padding: var(--e2) var(--e3);
    border-left: 2px solid transparent;
    color: var(--color-texto-suave);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.3;
}

a.ayuda-tema:hover {
    color: var(--color-texto);
    background: var(--color-superficie-alt);
}

a.ayuda-tema.activo {
    color: var(--color-primario);
    border-left-color: var(--color-primario);
    background: var(--color-primario-suave);
    font-weight: 600;
}

/* El que todavía no está escrito: se ve, no se puede tocar, y lo dice. */
.ayuda-tema.pendiente {
    color: var(--color-texto-tenue);
    cursor: default;
}

.ayuda-sin-resultados {
    color: var(--color-texto-suave);
    font-size: 14px;
    padding: var(--e3);
    margin: 0;
}

/* ---------- el tema ---------- */

.ayuda-panel {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-chico);
    padding: var(--e5);
    /*
       Un renglón de más de 80 caracteres obliga al ojo a buscar dónde empieza
       el siguiente. El árbol ya acota el ancho en escritorio; esto lo acota
       también cuando la ventana es muy ancha o cuando esto va en el modal.
    */
    max-width: 78ch;
    line-height: 1.6;
}

.ayuda-titulo {
    margin: 0 0 var(--e2);
    font-size: 26px;
    line-height: 1.2;
}

.ayuda-resumen {
    margin: 0 0 var(--e5);
    font-size: 17px;
    color: var(--color-texto-suave);
}

.ayuda-h2 {
    margin: var(--e5) 0 var(--e2);
    font-size: 18px;
    line-height: 1.3;
    padding-bottom: var(--e1);
    border-bottom: 1px solid var(--color-borde);
}

.ayuda-panel p { margin: 0 0 var(--e3); }

.ayuda-pasos,
.ayuda-lista { margin: 0 0 var(--e4); padding-left: var(--e5); }

.ayuda-pasos li,
.ayuda-lista li { margin-bottom: var(--e2); }

/*
   "Esto es aquello". Es una lista de definiciones y no una tabla: en un celular
   una tabla de dos columnas con textos largos deja la primera —justo donde va
   el nombre del campo que se está buscando— de tres letras de ancho.
*/
.ayuda-campos { margin: 0 0 var(--e4); }

.ayuda-campos dt {
    font-weight: 600;
    margin-top: var(--e3);
}

.ayuda-campos dd {
    margin: 0 0 0 0;
    color: var(--color-texto-suave);
}

.ayuda-aviso {
    margin: 0 0 var(--e4);
    padding: var(--e3) var(--e4);
    border-left: 3px solid var(--color-info);
    border-radius: var(--radio);
    background: var(--color-info-fondo);
}

.ayuda-aviso-ojo {
    border-left-color: var(--color-alerta);
    background: var(--color-alerta-fondo);
}

.ayuda-aviso-peligro {
    border-left-color: var(--color-error);
    background: var(--color-error-fondo);
}

.ayuda-figura {
    margin: 0 0 var(--e4);
}

.ayuda-figura img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-superficie-alt);
}

.ayuda-figura figcaption {
    margin-top: var(--e2);
    font-size: 13px;
    color: var(--color-texto-suave);
}

.ayuda-ir {
    margin-top: var(--e5);
    padding-top: var(--e3);
    border-top: 1px solid var(--color-borde);
}

.ayuda-ir a { color: var(--color-primario); }

/* ---------- en la ventana modal ---------- */

/*
   Adentro del modal no hay barra ni árbol: lo que se está mirando es un tema
   solo, y la caja mide lo que mide. Sin el `border`, el panel se lee como parte
   del marco del modal en vez de como una tarjeta suelta adentro de él.
*/
.ayuda-en-marco .ayuda-layout { padding: 0; max-width: none; }

.ayuda-en-marco .ayuda-panel {
    border: 0;
    border-radius: 0;
    max-width: none;
    padding: var(--e4) var(--e5);
}

/* ---------- celular ---------- */

@media (max-width: 820px) {
    .ayuda-layout {
        flex-direction: column;
        gap: var(--e3);
        padding: var(--e3);
    }

    /*
       En el celular el árbol NO queda fijo: pegado arriba se comería media
       pantalla de un teléfono, que es justo lo que hay que dejarle al texto.
       Va arriba, con su propio scroll acotado, y se pasa de largo.
    */
    .ayuda-arbol {
        position: static;
        flex: 1 1 auto;
        width: 100%;
        box-sizing: border-box;
        max-height: 45vh;
    }

    .ayuda-panel {
        width: 100%;
        box-sizing: border-box;
        padding: var(--e4);
        max-width: none;
    }

    .ayuda-titulo { font-size: 22px; }
}