/* ─────────────────────────────────────────────────────────────────
   FAQ — viewer completo (details/summary + sidebar navegación)
       .faq-layout   = grid 2 columnas (nav sticky + contenido)
       .faq-nav      = índice lateral sticky con scroll suave
       .faq-section  = bloque temático de preguntas
       .faq-item     = elemento <details> individual
       .faq-answer   = cuerpo de la respuesta expandida
   (Copia de la versión de zona admin — demokratianBack/css/styles.css)
   ───────────────────────────────────────────────────────────────── */
:root {
    --brand-bg: #e6edda; /* fondo claro tono pistacho */
}

/* .tile / .tile-body: contenedor de página usado por faqPrivada.php.
   Es una clase propia de la zona admin (demokratianBack/css/styles.css);
   aquí se reproduce con los tokens de esta zona (--paper, --line). */

.tile-body {
    font-size: 1rem;
    line-height: 1.5;
    background: #fff;
    padding: 40px;
    margin: 40px;
    border: 1px solid #cccccc;
}
/* En móvil esos 40px de margen más 40px de padding se comían 160px de los 375px
   de pantalla. Como esta hoja se carga en TODAS las páginas de la zona votante,
   la regla afecta a toda la zona, no solo a la ayuda. */
@media (max-width: 767px) {
    .tile-body { padding: 16px; margin: 12px 0; }
}

.faq-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.faq-nav { position: sticky; top: 80px; padding: 16px 0; }
.faq-nav h4 {
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--bs-gray-800); margin: 0 0 12px; padding: 0 16px;
}
.faq-nav ul { list-style: none; padding: 0; margin: 0; }
.faq-nav a  {
    display: block; padding: 8px 16px; font-size: 13.5px;
    color: var(--bs-gray-700); text-decoration: none;
    border-radius: 6px; transition: background .15s, color .15s;
}
.faq-nav a:hover  { background: var(--bs-gray-100); color: var(--bs-gray-900); }
.faq-nav a.active { background: var(--brand-bg); color: var(--bs-gray-900); font-weight: 500; }

.faq-section { margin-bottom: 64px; scroll-margin-top: 80px; }
.faq-section-head { margin-bottom: 20px; padding-bottom: 12px; }
.faq-num { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-deep, #3f6000); margin-bottom: 6px; }
.faq-section-head h2  { font-size: 1.4rem; font-weight: 700; margin: 4px 0 6px; color: var(--bs-gray-900); }
.faq-section-head > p { color: var(--bs-gray-600); margin: 0; font-size: .9rem; }
.faq-subsection       { padding-left: 12px; margin-bottom: 8px; }
.faq-subsection-title { font-size: 1rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bs-gray-900); margin: 30px 0 0; }

.faq-item        { border-bottom: 1px solid var(--bs-gray-200); background: transparent; transition: background .2s; }
.faq-item[open]  { background: var(--bs-gray-100); }
.faq-item summary {
    list-style: none; display: flex; justify-content: space-between; align-items: center;
    gap: 16px; padding: 18px 16px 18px 10px; cursor: pointer;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem; font-weight: 400; letter-spacing: -0.005em; line-height: 1.35;
    color: var(--bs-gray-900); user-select: none; transition: color .15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand); }
.faq-item summary::after {
    content: ""; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    border: 1.5px solid var(--bs-gray-300);
    background: linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,
                linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;
    color: var(--bs-gray-600);
    transition: border-color .2s, background-color .2s, color .2s;
}
.faq-item[open] summary::after {
    background: linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat;
    background-color: var(--brand-bg); border-color: var(--brand); color: var(--brand);
}
.faq-answer { padding: 4px 16px 24px 26px; font-size: .875rem; color: var(--bs-gray-700); line-height: 1.7; }
.faq-answer p           { margin: 0 0 .75em; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul, .faq-answer ol { padding-left: 1.25rem; margin: 0 0 .75em; }
.faq-answer li          { margin-top: .2em; }
.faq-answer li::marker  { color: var(--brand); }
.faq-answer a    { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.faq-answer code { font-size: .8rem; background: var(--brand-bg); color: var(--bs-gray-800); padding: 2px 5px; border-radius: 3px; }
em.hl { font-style: italic; color: var(--brand); }

@keyframes faq-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.faq-item[open] .faq-answer { animation: faq-slide-in 0.22s ease; }

@media (min-width: 1200px) { .faq-layout > div { max-width: 780px; } }
@media (max-width: 768px) {
    .faq-layout { grid-template-columns: 1fr; }
    .faq-nav { position: static; border: 1px solid var(--bs-gray-200); border-radius: 8px; padding: 12px 8px; margin-bottom: 24px; }
}