/* Centro de Ayuda: la página /ayuda/, el ícono (?) con su panel lateral y el panel del personal.
   Las preguntas usan el mismo diseño que tenía la página de preguntas frecuentes. */

/* ───────── página ───────── */
.ay-centro { max-width: 880px; }
.ay-centro__titulo { font-size: 1.75rem; font-weight: 700; margin-bottom: .25rem; }

.ay-buscador {
    position: relative; display: flex; gap: .5rem; margin-bottom: .5rem;
}
.ay-buscador > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #6c757d; pointer-events: none; }
.ay-buscador input {
    flex: 1; min-width: 0; padding: .7rem 1rem .7rem 2.6rem; border: 1px solid var(--color-sutil, #d1d5db);
    border-radius: 10px; font-size: 1rem; background: var(--color-tarjeta-fondo, #fff);
}
.ay-buscador input:focus { outline: 2px solid #249F5F; outline-offset: 1px; border-color: #249F5F; }
.ay-resultado { min-height: 1.25rem; margin: 0 0 1.25rem; font-size: .9rem; color: #495057; }

.ay-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; margin-bottom: 2rem; }
.ay-categoria {
    display: flex; flex-direction: column; gap: .25rem; padding: 1rem; border: 1px solid var(--color-sutil, #e5e7eb);
    border-radius: 12px; background: var(--color-tarjeta-fondo, #fff); color: inherit; text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.ay-categoria:hover, .ay-categoria:focus-visible { border-color: #249F5F; box-shadow: 0 2px 10px rgba(36, 159, 95, .12); color: inherit; }
.ay-categoria:focus-visible { outline: 2px solid #249F5F; outline-offset: 2px; }
.ay-categoria i { font-size: 1.35rem; color: #249F5F; margin-bottom: .2rem; }
.ay-categoria strong { font-size: .95rem; }
.ay-categoria span { font-size: .8rem; color: #6c757d; line-height: 1.35; }

.ay-destacadas__lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .35rem 1rem; }
.ay-destacadas__lista a { display: inline-block; padding: .3rem 0; color: #1f7a4b; font-weight: 600; font-size: .92rem; }

.ay-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.ay-video-tarjeta { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; border: 1px solid var(--color-sutil, #e5e7eb); border-radius: 12px; background: var(--color-tarjeta-fondo, #fff); }
.ay-video-tarjeta span { font-size: .85rem; color: #6c757d; }

.ay-vacio { padding: 1rem 0; color: #6c757d; }

/* Las preguntas: el diseño de la página de preguntas frecuentes */
.faq-grupo { margin-bottom: 1.75rem; scroll-margin-top: 90px; }
.faq-grupo__titulo {
    display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem;
    font-size: 1.05rem; font-weight: 700; color: #249F5F;
}
.faq-item {
    border: 1px solid var(--color-sutil, #e5e7eb);
    border-radius: 10px;
    background: var(--color-tarjeta-fondo, #fff);
    margin-bottom: .5rem;
    scroll-margin-top: 90px;
}
.faq-item summary {
    position: relative; cursor: pointer; list-style: none;
    padding: .85rem 2.5rem .85rem 1.1rem; font-weight: 600; font-size: .95rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: ''; position: absolute; right: 1.1rem; top: 50%; width: .5rem; height: .5rem;
    border-right: 2px solid #6c757d; border-bottom: 2px solid #6c757d;
    transform: translateY(-70%) rotate(45deg); transition: transform .15s;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item summary:focus-visible { outline: 2px solid #249F5F; outline-offset: 2px; border-radius: 10px; }
.faq-item__respuesta { padding: 0 1.1rem 1rem; font-size: .9rem; line-height: 1.55; color: #495057; }
.faq-item__respuesta p, .faq-item__respuesta ul, .faq-item__respuesta ol { margin: 0 0 .6rem; }
.faq-item__respuesta ul, .faq-item__respuesta ol { padding-left: 1.25rem; }
.faq-item__respuesta > :last-child { margin-bottom: 0; }
.faq-item__respuesta a, .ay-panel a { color: #1f7a4b; font-weight: 600; }

.faq-ayuda {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: 2rem; padding: 1.1rem 1.25rem; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0;
}

.ay-ver-video {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .5rem; padding: .45rem .85rem;
    border: 1px solid #249F5F; border-radius: 999px; background: #fff; color: #1f7a4b; font-weight: 600; font-size: .85rem;
}
.ay-ver-video:hover, .ay-ver-video:focus-visible { background: #f0fdf4; }
.ay-video { margin-top: .75rem; }

/* ───────── ícono (?) y panel lateral ───────── */
.ay-ctx {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 32px; min-height: 32px;
    padding: 0 .35rem; margin-left: .35rem; border: 0; border-radius: 999px; background: transparent; color: #249F5F;
    font-size: 1.05rem; line-height: 1; vertical-align: middle; cursor: pointer;
}
.ay-ctx:hover { background: #f0fdf4; }
.ay-ctx:focus-visible { outline: 2px solid #249F5F; outline-offset: 2px; }
.ay-ctx--texto { font-size: .85rem; font-weight: 600; padding: 0 .65rem; }

.ay-panel { --bs-offcanvas-width: min(420px, 100vw); }
.ay-panel .offcanvas-title { font-size: 1.1rem; font-weight: 700; }
.ay-panel__lista .faq-item { margin-bottom: .5rem; }
.ay-panel__cargando, .ay-panel__vacio { color: #6c757d; font-size: .9rem; }
.ay-panel__pie { margin-top: 1rem; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.ay-panel__escribir { padding: 0; border: 0; background: none; color: #1f7a4b; font-weight: 600; text-decoration: underline; }

/* ───────── panel del personal ───────── */
.ay-adm { max-width: 1100px; }
.ay-adm__cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ay-adm__cabecera h2 { margin: 0 0 .25rem; font-size: 1.35rem; font-weight: 700; }
.ay-adm__cabecera p { margin: 0; color: #6c757d; font-size: .9rem; }
.ay-adm__acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.ay-adm__resumen { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.ay-adm__dato { padding: .6rem 1rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-size: .85rem; }
.ay-adm__dato strong { display: block; font-size: 1.15rem; }
.ay-adm__filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.ay-chip { padding: .3rem .8rem; border: 1px solid #d1d5db; border-radius: 999px; font-size: .85rem; color: #374151; text-decoration: none; background: #fff; }
.ay-chip--activo { background: #249F5F; border-color: #249F5F; color: #fff; }
.ay-adm__grupo { margin-bottom: 1.25rem; }
.ay-adm__grupo h3 { font-size: 1rem; font-weight: 700; color: #249F5F; display: flex; align-items: center; gap: .5rem; }
.ay-adm__fila {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .65rem .85rem; border: 1px solid #e5e7eb;
    border-radius: 10px; background: #fff; margin-bottom: .4rem; scroll-margin-top: 90px;
}
.ay-adm__fila:target { border-color: #249F5F; box-shadow: 0 0 0 2px rgba(36, 159, 95, .2); }
.ay-adm__titulo { flex: 1 1 320px; min-width: 0; }
.ay-adm__titulo a { font-weight: 600; color: #111827; }
.ay-adm__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.ay-etiqueta { padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; background: #f3f4f6; color: #374151; }
.ay-etiqueta--ok { background: #dcfce7; color: #166534; }
.ay-etiqueta--borrador { background: #fef3c7; color: #92400e; }
.ay-etiqueta--alta { background: #fee2e2; color: #991b1b; }
.ay-adm__botones { display: flex; flex-wrap: wrap; gap: .35rem; }
.ay-adm__botones form { margin: 0; }
.ay-adm__form { max-width: 820px; }
.ay-adm__form .ay-campo { margin-bottom: 1rem; }
.ay-adm__form label { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; display: block; }
.ay-adm__form .ay-ayuda { font-size: .8rem; color: #6c757d; margin: .25rem 0 0; }
.ay-adm__form .ay-error { font-size: .85rem; color: #b91c1c; margin: .25rem 0 0; }
.ay-adm__form ul.ay-lugares { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .25rem .75rem; }
.ay-adm__form ul.ay-lugares label { font-weight: 400; display: flex; align-items: center; gap: .4rem; }
.ay-adm__previa { margin-top: 1.25rem; padding: 1rem; border: 1px dashed #d1d5db; border-radius: 10px; background: #fff; }
.ay-adm__previa h4 { font-size: .85rem; text-transform: uppercase; color: #6c757d; letter-spacing: .03em; }
.ay-adm__tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
.ay-adm__tabla th, .ay-adm__tabla td { padding: .6rem .75rem; border-bottom: 1px solid #e5e7eb; font-size: .9rem; text-align: left; vertical-align: middle; }
.ay-adm__tabla th { background: #f9fafb; font-weight: 600; }

@media (max-width: 575.98px) {
    .ay-buscador { flex-wrap: wrap; }
    .ay-buscador button { width: 100%; }
    .ay-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}