/* ============================================================
   INVERSIÓN INMOBILIARIA — módulos añadidos
   ------------------------------------------------------------
   Hoja aparte de home.css a propósito: aquí viven sólo las
   secciones nuevas (agenda de visitas, manual de uso y
   documentos legales). Así home.css no crece sin control y
   estos bloques se pueden quitar de una pieza.

   Usa los MISMOS tokens que home.css (--sup, --texto, --oro…),
   así que hereda el modo claro/oscuro automático sin repetir
   una sola paleta. No define ningún color a pelo salvo los
   dos o tres que no existen como token.

   1. Botón de ayuda (va en la barra, en todas las páginas)
   2. Piezas compartidas (migas, listas de datos, tablas)
   3. Agenda de visitas
   4. Manual de uso
   5. Documentos legales
   ============================================================ */

/* ============================================================
   1. BOTÓN DE AYUDA
   Vive dentro del navbar oscuro, así que se pinta en claro.
   Se mantiene visible en móvil (fuera del menú plegable): si
   se metiera dentro del `collapse`, en el celular quedaría
   escondido detrás de la hamburguesa, que es justo cuando más
   falta hace.
   ============================================================ */
.btn-ayuda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: var(--transition);
}
.btn-ayuda:hover,
.btn-ayuda:focus-visible {
    background: var(--oro);
    border-color: var(--oro);
    color: #000;
}
.btn-ayuda .interrogacion {
    font-size: 1rem;
    font-weight: 900;
}
/* El rótulo sólo cabe en escritorio; en móvil queda el círculo
   con el signo, que es lo que la gente reconoce. */
.btn-ayuda .rotulo { display: none; }
@media (min-width: 992px) {
    .btn-ayuda .rotulo { display: inline; }
}

/* ============================================================
   2. PIEZAS COMPARTIDAS
   ============================================================ */

/* Migas de pan */
.ruta-migas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .82rem;
    color: var(--texto-3);
}
.ruta-migas li + li::before {
    content: "›";
    margin-right: 6px;
    color: var(--borde-2);
}
.ruta-migas a { color: var(--texto-3); text-decoration: none; }
.ruta-migas a:hover { color: var(--oro-txt); text-decoration: underline; }
.ruta-migas [aria-current] { color: var(--texto); font-weight: 600; }

/* Lista etiqueta ↔ valor. Se usa en el resumen de la visita y
   en la ficha de cada plan. */
.lista-datos {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lista-datos li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--borde);
    font-size: .9rem;
}
.lista-datos li:last-child { border-bottom: 0; }
.lista-datos li > span:first-child { color: var(--texto-2); }
.lista-datos li > span:last-child { font-weight: 600; text-align: right; }

/* Aviso de privacidad simplificado bajo los formularios
   (art. 16 fr. II de la LFPDPPP). */
.nota-privacidad {
    font-size: .78rem;
    line-height: 1.5;
    color: var(--texto-3);
    border-left: 2px solid var(--oro-borde);
    padding-left: 10px;
}

/* Cualquier tabla ancha se desplaza dentro de su tarjeta en vez
   de estirar la página. Sin esto, el historial de visitas
   provocaba scroll horizontal en el cuerpo a 375 px. */
.tabla-envuelta {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tabla-envuelta table { margin-bottom: 0; min-width: 520px; }

/* Puntito de estado (conectado / desconectado) */
.punto-estado {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.punto-ok  { background: var(--exito); box-shadow: 0 0 0 3px var(--exito-bg); }
.punto-off { background: var(--borde-2); box-shadow: 0 0 0 3px var(--sup-2); }

/* ============================================================
   3. AGENDA DE VISITAS
   ============================================================ */
.marca-listo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--exito-bg);
    color: var(--exito);
}

.cita-fila { border-left: 3px solid var(--oro); }
.cita-fecha {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--oro-txt);
}
.cita-hora {
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--texto);
}

/* ============================================================
   4. MANUAL DE USO
   ============================================================ */

/* Rejilla del índice */
.manual-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}
.manual-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    background: var(--sup);
    border: 1px solid var(--borde);
    border-radius: var(--card-radius);
    color: var(--texto);
    text-decoration: none;
    transition: var(--transition);
}
.manual-tarjeta:hover,
.manual-tarjeta:focus-visible {
    border-color: var(--oro-borde);
    box-shadow: var(--sombra-alta);
    transform: translateY(-2px);
    color: var(--texto);
}
.manual-tarjeta h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.manual-tarjeta p  { font-size: .85rem; color: var(--texto-2); margin: 0; }
.manual-tarjeta .icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--oro-suave);
    color: var(--oro-txt);
    margin-bottom: 4px;
}

/* Índice lateral de la ficha del manual */
.manual-indice {
    position: sticky;
    top: 104px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}
.manual-indice a {
    display: block;
    padding: 7px 12px;
    border-left: 2px solid var(--borde);
    color: var(--texto-2);
    font-size: .86rem;
    text-decoration: none;
}
.manual-indice a:hover { color: var(--oro-txt); border-left-color: var(--oro); }
.manual-indice a.activo { color: var(--texto); font-weight: 700; border-left-color: var(--oro); }
/* En móvil el índice se vuelve una fila que se desliza: pegado
   arriba taparía media pantalla. */
@media (max-width: 991.98px) {
    .manual-indice {
        position: static;
        max-height: none;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 8px;
    }
    .manual-indice a {
        flex: 0 0 auto;
        border-left: 0;
        border-bottom: 2px solid var(--borde);
        white-space: nowrap;
    }
    .manual-indice a.activo { border-bottom-color: var(--oro); }
}

/* Pasos numerados */
.manual-pasos {
    list-style: none;
    counter-reset: paso;
    padding: 0;
    margin: 0;
}
.manual-pasos > li {
    counter-increment: paso;
    position: relative;
    padding: 0 0 18px 44px;
    border-left: 1px solid var(--borde);
    margin-left: 14px;
}
.manual-pasos > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.manual-pasos > li::before {
    content: counter(paso);
    position: absolute;
    left: -14px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--oro);
    color: #000;
    font-size: .8rem;
    font-weight: 800;
}
.manual-pasos strong { display: block; margin-bottom: 2px; }
.manual-pasos p { color: var(--texto-2); font-size: .9rem; margin: 0; }

/* Consejos y problemas frecuentes */
.manual-consejo {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--oro-suave);
    border: 1px solid var(--oro-borde);
    font-size: .88rem;
    color: var(--texto);
}
.manual-consejo .marca { color: var(--oro-txt); font-weight: 900; flex: 0 0 auto; }

/* ============================================================
   5. DOCUMENTOS LEGALES
   ============================================================ */
.legal-doc {
    max-width: 74ch;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--texto);
}
.legal-doc h2 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 34px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
    scroll-margin-top: 110px;
}
.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-doc h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 20px 0 6px;
    color: var(--oro-txt);
}
.legal-doc p, .legal-doc li { color: var(--texto-2); }
.legal-doc strong { color: var(--texto); }
.legal-doc ul, .legal-doc ol { padding-left: 20px; }
.legal-doc li { margin-bottom: 6px; }

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--sup-2);
    border: 1px solid var(--borde);
    font-size: .83rem;
    color: var(--texto-2);
}
.legal-meta strong { color: var(--texto); }

/* Cita de artículo de ley */
.legal-fundamento {
    border-left: 3px solid var(--oro);
    padding: 4px 0 4px 12px;
    margin: 12px 0;
    font-size: .84rem;
    color: var(--texto-3);
}

/* ============================================================
   Menos movimiento para quien lo pidió
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .manual-tarjeta:hover,
    .manual-tarjeta:focus-visible { transform: none; }
}

/* Icono grande de la cabecera del manual */
.manual-icono-grande {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--oro-suave);
    color: var(--oro-txt);
}
.manual-icono-grande svg { width: 23px; height: 23px; }