/*
 * Preguntas frecuentes. Sigue la tarjeta del login (login.css):
 * franja superior con el logo, círculo con ícono y cuerpo azul.
 * Todo va bajo .faq-* porque guest.blade.php carga este archivo también en login y register.
 */

/* --- Tarjeta --- */
.faq-card {
  width: 100%;
  max-width: 900px;
  /* Que el logo o una URL larga no ensanchen la página en celulares */
  contain: inline-size;
  overflow-wrap: anywhere;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.2);
  margin: 1cm auto;
  
}

.faq-card-top {
  height: 200px;
  background-color: #1d3140;
  display: flex;
  justify-content: center;
  align-items: center;
}

.faq-card-top img {
  max-width: 80%;
  max-height: 150px;
}

.faq-circulo {
  width: 100px;
  height: 100px;
  background-color: #1d3140;
  border-radius: 50%;
  border: 4px solid #2b3e4c;
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.faq-circulo i {
  color: #87b867;
  font-size: 45px;
}

.faq-card-body {
  background-color: #2b3e4c;
  padding: 70px 3rem 2rem;
}

/* Con sesión iniciada no hay franja con el logo: el círculo pasa arriba del cuerpo */
.faq-card-sin-logo { background-color: #2b3e4c; }

.faq-card-sin-logo .faq-circulo {
  position: static;
  transform: none;
  margin: 2rem auto 0;
}

.faq-card-sin-logo .faq-card-body { padding-top: 1.5rem; }

/* Enlace debajo de la tarjeta, solo en la página pública (faq/pagina.blade.php) */
.faq-volver {
  text-align: center;
  margin-bottom: 1cm;
}

/* --- Contenido --- */
/* app.css (Tailwind) resetea márgenes, listas, títulos y enlaces: acá se restauran. */
.faq-ov {
  color: #dfe5ea;
  line-height: 1.7;
  text-align: left;
}

.faq-ov p { margin: 0 0 1rem; }

.faq-ov h2 {
  color: #fcf1db;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 1.5rem;
}

.faq-ov h3 {
  color: #87b867;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.faq-ov h4,
.faq-ov h5 {
  color: #fcf1db;
  font-weight: 600;
  margin: 1.75rem 0 .5rem -.5rem;
  padding: .25rem .5rem;
  border-radius: 6px;
}

.faq-ov h4 { font-size: 1.1rem; }
.faq-ov h5 { font-size: 1rem; margin-top: 1rem; }

/* Pregunta a la que se llegó desde el índice */
.faq-ov h4:target,
.faq-ov h5:target {
  background-color: rgba(135, 184, 103, .18);
  box-shadow: inset 3px 0 0 #87b867;
}

.faq-ov strong { color: #fcf1db; }

.faq-ov a,
.faq-volver a {
  color: #87b867;
  text-decoration: underline;
}

.faq-ov a:hover,
.faq-volver a:hover { color: #fcf1db; }

.faq-ov ul,
.faq-ov ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.faq-ov ul { list-style: disc; }
.faq-ov ol { list-style: decimal; }
.faq-ov li { margin-bottom: .35rem; }

.faq-ov code {
  color: #fcf1db;
  background-color: rgba(0, 0, 0, .25);
  padding: .1rem .35rem;
  border-radius: 4px;
  font-size: .9em;
}

.faq-ov hr {
  border: 0;
  border-top: 1px solid rgba(252, 241, 219, .2);
  margin: 2rem 0;
}

/* --- Índice --- */
.faq-ov-indice {
  background-color: #1d3140;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.faq-ov-indice h3 { margin-top: 0; }
.faq-ov-indice ul + h3 { margin-top: 1.5rem; }

.faq-ov-indice a { text-decoration: none; }
.faq-ov-indice a:hover { text-decoration: underline; }

.faq-ov-categoria { margin-bottom: 1rem; }
.faq-ov-categoria:last-child { margin-bottom: 0; }

.faq-ov-categoria strong {
  display: block;
  color: #fcf1db;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .15rem;
}

/* --- Acordeones: cada h3 agrupa sus preguntas en un <details> --- */
.faq-acordeones { margin-top: 2rem; }

.faq-acordeon {
  background-color: #1d3140;
  border: 1px solid rgba(252, 241, 219, .15);
  border-radius: 12px;
  margin-bottom: .75rem;
}

.faq-acordeon > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}

/* Se oculta el triángulo nativo y se usa una flecha propia */
.faq-acordeon > summary::-webkit-details-marker { display: none; }

.faq-acordeon > summary::after {
  content: "";
  flex-shrink: 0;
  width: .6rem;
  height: .6rem;
  margin-top: -.3rem;
  border-right: 2px solid #87b867;
  border-bottom: 2px solid #87b867;
  transform: rotate(45deg);
  transition: transform .2s;
}

.faq-acordeon[open] > summary::after {
  margin-top: .3rem;
  transform: rotate(-135deg);
}

.faq-acordeon > summary:hover { background-color: rgba(135, 184, 103, .08); }

.faq-acordeon > summary:focus-visible {
  outline: 2px solid #87b867;
  outline-offset: -2px;
}

.faq-acordeon > summary h3 { margin: 0; }

.faq-acordeon[open] > summary {
  border-bottom: 1px solid rgba(252, 241, 219, .15);
  border-radius: 12px 12px 0 0;
}

.faq-acordeon-contenido { padding: .25rem 1.5rem 1rem; }
.faq-acordeon-contenido > h4:first-child { margin-top: 1rem; }

/* Página pública (/FAQ) con sesión iniciada (la tarjeta no tiene logo): en lugar del fondo
   del login (.fondologin) se usa el crema del panel, el mismo de las pantallas de formularios */
.fondologin:has(.faq-card-sin-logo) {
  background-image: none;
  background-color: #fcf2dc;
}

.fondologin:has(.faq-card-sin-logo) .faq-volver a { color: #2b3e4c; }
.fondologin:has(.faq-card-sin-logo) .faq-volver a:hover { color: #4a7a2e; }

/* --- Celulares (mismo corte que login.css) --- */
@media (max-width: 600px) {
  .faq-card { margin: .5cm auto; }
  .faq-card-top { height: 150px; }

  .faq-circulo {
    top: 150px;
    width: 60px;
    height: 60px;
    border-width: 3px;
  }

  .faq-circulo i { font-size: 24px; }
  .faq-card-body { padding: 50px 1.25rem 1.5rem; }
  .faq-ov-indice { padding: 1rem; }
  .faq-acordeon > summary { padding: .85rem 1rem; }
  .faq-acordeon-contenido { padding: .25rem 1rem 1rem; }
}