/* ===========================
   PF (Preguntas Frecuentes) — CSS Nativo
   Encapsulado para evitar choques de estilos
   =========================== */
:root {
  --pf-color1: #e30b0b; /* color principal para número y acentos */
  --pf-text: #0f172a; /* slate-900 */
  --pf-text-subtle: #475569; /* slate-600 */
  --pf-border: #e2e8f0; /* slate-200 */
  --pf-bg: #ffffff;
  --pf-bg-hover: #f8fafc; /* slate-50 */
  --pf-panel: #fff0f0; /* fondo del panel abierto */
  --pf-focus: #e30b0b; /* emerald-500 */
  --pf-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  --pf-radius: 10px;
}

/* raíz del componente */
.pf-root {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--pf-text);
}

/* layout general */
.pf-wrap {
  max-width: 880px;
  margin: 0 auto;
}
.pf-stack {
  display: grid;
  gap: 12px;
}

/* card */
.pf-item {
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow);
  overflow: hidden; /* evita desbordes con bordes redondeados */
}

/* header del acordeón */
.pf-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  width: 100%;
  background: var(--pf-bg);
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease-in-out;
}
.pf-header:hover {
  background: var(--pf-bg-hover);
}

/* accesibilidad foco */
.pf-header:focus-visible {
  outline: 3px solid var(--pf-focus);
  outline-offset: 2px;
  border-radius: calc(var(--pf-radius) - 2px);
}

/* número */
.pf-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--pf-color1);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}

/* título */
.pf-title {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--pf-text);
}

/* chevron */
.pf-ico {
  width: 18px;
  height: 18px;
  color: #64748b; /* slate-500 */
  transition: transform 0.25s ease;
}

/* panel (contenido) */
.pf-panel {
  background: var(--pf-panel);
  color: var(--pf-text-subtle);
  font-size: 15px;
  padding: 0 16px 14px 16px; /* padding inferior; superior se añade al contenido interior */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease-in-out;
  border-top: 1px solid var(--pf-border);
}
.pf-panel > .pf-panel-inner {
  padding-top: 10px;
}

/* estado expandido */
.pf-header[aria-expanded="true"] + .pf-panel {
  /* solo cuando está abierto */
  /* max-height dinámico se controla vía JS */
}
.pf-header[aria-expanded="true"] .pf-ico {
  transform: rotate(180deg);
}

/* --------- estados vacíos / error --------- */
.pf-state {
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow);
  padding: 40px 20px;
  text-align: center;
  color: var(--pf-text-subtle);
}

/* --------- paginación --------- */
.pf-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}
.pf-page-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  background: var(--pf-bg);
  color: var(--pf-text);
  border: 1px solid var(--pf-border);
  border-radius: 8px;
  box-shadow: var(--pf-shadow);
  cursor: pointer;
  transition: background 0.18s, transform 0.06s;
}
.pf-page-btn:hover {
  background: var(--pf-bg-hover);
}
.pf-page-btn[disabled] {
  color: #94a3b8;
  background: #f1f5f9;
  cursor: not-allowed;
}
.pf-page-btn[aria-current="page"] {
  background: var(--pf-color1);
  color: #fff;
  border-color: var(--pf-color1);
}
.pf-ellipsis {
  padding: 0 4px;
  color: #94a3b8;
  align-self: center;
}