/* ============ TOKENS API — "INTEGRA TU SISTEMA" (documentación de integración) ============
   Módulo SOLO de UI: se monta en #feApiDocs, debajo de la tabla de tokens (panel.html), con los
   mismos componentes del panel (.panel-card, .btn, .btn.small.secondary, .mini-title, --ink/--muted/
   --line, acento lima rgb(192,254,4)). No redeclara .btn/.panel-card ni toca la tabla de tokens:
   el enmascarado del token solo agrega un botón "Mostrar" a .fe-token-actions. ============ */
.fe-apidocs { display: grid; gap: 18px; margin-top: 22px; min-width: 0; }
.fe-apidocs * { min-width: 0; }

/* Encabezados = .section-head REAL del panel (misma familia, peso, tracking e interlineado que
   "Conexiones para POS, bots y webs"); solo se reduce el tamaño para que no compita con el título del módulo. */
#feApiDocs > .section-head { margin: 22px 0 0; }
#feApiDocs .section-head h2 { font-size: 30px !important; }
#feApiDisponibles .section-head { margin-bottom: 16px; }
#feApiDisponibles .section-head h2 { font-size: 24px !important; margin-bottom: 6px; }
/* .section-head p idéntico al original (16px / 1.55 / muted / margin 0); en la tarjeta, un punto menor. */
#feApiDocs .section-head p { font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0; }
#feApiDisponibles .section-head p { font-size: 14px; }

.fe-apidocs-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-family: var(--font-label), Poppins, sans-serif; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
}
.fe-apidocs-chip.is-accent { background: #fff; border-color: var(--line); }

/* Acordeón: una sección grande abierta a la vez. */
.fe-apidocs-acc { padding: 0 !important; overflow: hidden; }
.fe-apidocs-acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 24px; background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--ink);
}
.fe-apidocs-acc-btn:hover { background: rgba(192,254,4,.06); }
.fe-apidocs-acc-btn:focus-visible, .fe-apidocs-tab:focus-visible, .fe-apidocs .btn:focus-visible {
  outline: 3px solid rgba(192,254,4,.9); outline-offset: 2px;
}
.fe-apidocs-acc-title { display: flex; flex-direction: column; gap: 4px; }
.fe-apidocs-acc-title strong { font-family: var(--font-display), sans-serif; font-size: 1.12rem; font-weight: 700; }
.fe-apidocs-acc-title small { font-family: var(--font-mono), Poppins, sans-serif; color: var(--muted); font-size: 13px; }
.fe-apidocs-acc-icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-label), monospace; font-size: 16px;
  transition: transform .18s ease, background .18s ease;
}
.fe-apidocs-acc-btn[aria-expanded="true"] .fe-apidocs-acc-icon { transform: rotate(45deg); background: rgb(192,254,4); border-color: rgb(192,254,4); }
.fe-apidocs-acc-panel { padding: 4px 24px 24px; border-top: 1px solid var(--line); }
.fe-apidocs-acc-panel[hidden] { display: none; }

.fe-apidocs h3 {
  font-family: var(--font-label), Poppins, sans-serif; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin: 22px 0 10px; font-weight: 700;
}
.fe-apidocs p, .fe-apidocs li, .fe-apidocs-table td { font-family: var(--font-mono), Poppins, sans-serif; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.fe-apidocs p { margin: 0 0 10px; }
.fe-apidocs ul { margin: 0 0 10px; padding-left: 18px; }
.fe-apidocs .fe-apidocs-muted { color: var(--muted); }
.fe-apidocs code.fe-apidocs-inline { font-family: var(--font-mono), monospace; font-size: .92em; background: #fbfaf4; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }

/* Fila copiable (Base URL / Authorization / URL de ejemplo). */
.fe-apidocs-copyrow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf4; padding: 10px 10px 10px 16px; margin-bottom: 10px; }
.fe-apidocs-copyrow-label { flex: 0 0 130px; font-family: var(--font-label), Poppins, sans-serif; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fe-apidocs-copyrow code { flex: 1 1 auto; font-family: var(--font-mono), monospace; font-size: 13.5px; color: var(--ink); overflow-x: auto; white-space: nowrap; }
.fe-apidocs-copyrow .btn, .fe-apidocs-actions .btn { flex: 0 0 auto; white-space: nowrap; }
.fe-apidocs .btn.is-copied { background: rgb(192,254,4); border-color: rgb(192,254,4); color: #000; }

.fe-apidocs-note { border: 1px solid var(--line); background: #fbfaf4; border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.fe-apidocs-note p:last-child { margin-bottom: 0; }
.fe-apidocs-note.is-neutral { border-color: var(--line); background: #fbfaf4; }

.fe-apidocs-features { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Endpoints */
.fe-apidocs-endpoints { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fe-apidocs-endpoints li { display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(0, .9fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; }
.fe-apidocs-endpoints code { font-family: var(--font-mono), monospace; font-size: 13px; overflow-wrap: anywhere; }
.fe-apidocs-endpoints span.fe-apidocs-ep-desc { color: var(--muted); font-size: 13px; font-family: var(--font-mono), Poppins, sans-serif; }
.fe-pill.fe-apidocs-method { justify-content: center; background: #fbfaf4; border-color: rgba(32,32,32,.07); color: var(--muted); }
.fe-pill.fe-apidocs-method.is-post { background: rgba(192,254,4,.16); border-color: rgba(192,254,4,.4); color: var(--ink); }
.fe-apidocs-epline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.fe-apidocs-epline code { font-family: var(--font-mono), monospace; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

/* Tabs (documentos y lenguajes): scroll horizontal en mobile. */
.fe-apidocs-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; margin: 14px 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf4; scrollbar-width: thin; }
.fe-apidocs-tab {
  flex: 0 0 auto; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap;
  padding: 9px 14px; border-radius: 8px; font-family: var(--font-label), Poppins, sans-serif; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
}
.fe-apidocs-tab:hover { color: var(--ink); background: #fff; }
.fe-apidocs-tab[aria-selected="true"] { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: inset 0 -2px 0 rgb(192,254,4); }
.fe-apidocs-tabpanel[hidden] { display: none; }

.fe-apidocs-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.fe-apidocs-flow li { font-size: 12.5px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: #fff; }
.fe-apidocs-flow li + li::before { content: "→"; margin-right: 6px; color: var(--muted); }

/* Bloques de código: claros, monocromos, con scroll horizontal. */
.fe-apidocs-code { position: relative; border: 1px solid var(--line); border-radius: 12px; background: #fbfaf4; margin: 0 0 10px; }
.fe-apidocs-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.fe-apidocs-code-head span { font-family: var(--font-label), Poppins, sans-serif; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
/* Solo scroll HORIZONTAL: el bloque crece en alto con la página (un único scroll vertical, el del documento). */
.fe-apidocs-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; overflow-y: hidden; }
.fe-apidocs-code pre code { font-family: var(--font-mono), ui-monospace, monospace; font-size: 12.5px; line-height: 1.55; color: var(--ink); white-space: pre; background: none; border: 0; padding: 0; display: block; }

.fe-apidocs-table { width: 100%; border-collapse: collapse; margin: 0 0 10px; }
.fe-apidocs-table th { font-family: var(--font-label), Poppins, sans-serif; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; background: #fbfaf4; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.fe-apidocs-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.fe-apidocs-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.fe-apidocs-table-wrap .fe-apidocs-table { margin: 0; }

.fe-apidocs-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fe-apidocs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.fe-apidocs-actions .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.fe-apidocs-soon { font-family: var(--font-label), Poppins, sans-serif; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Token enmascarado en la tabla existente (solo visual). */
.fe-token-mask { letter-spacing: .02em; }

.fe-apidocs-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 980px) {
  .fe-apidocs-grid2 { grid-template-columns: 1fr; }
  .fe-apidocs-endpoints li { grid-template-columns: 58px minmax(0, 1fr); }
  .fe-apidocs-endpoints span.fe-apidocs-ep-desc { grid-column: 2; }
}
@media (max-width: 640px) {
  .fe-apidocs .panel-card { padding: 18px; }
  .fe-apidocs-acc-btn { padding: 16px 18px; }
  .fe-apidocs-acc-panel { padding: 4px 18px 18px; }
  .fe-apidocs-copyrow { flex-wrap: wrap; padding: 10px 12px; }
  .fe-apidocs-copyrow-label { flex-basis: 100%; }
  .fe-apidocs-copyrow code { flex-basis: calc(100% - 110px); }
}
.fe-apidocs-more h3 { font-family: var(--font-display), sans-serif; font-size: 1.25rem; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 8px 0 6px; }
.fe-apidocs-code-head .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .fe-apidocs-actions .btn { white-space: normal; width: 100%; min-height: 44px; height: auto; padding-top: 8px; padding-bottom: 8px; text-align: center; }
}

/* ============ SCROLL NATURAL DEL NAVEGADOR (fase URLs + scroll) ============
   Un único scroll vertical: el del documento. Sin Lenis ni listeners de wheel/touch (panel.html ya no los carga).
   styles.css fija html{scroll-behavior:smooth}: aquí vuelve a "auto" para que rueda/teclado/anclas sean nativos.
   La barra vertical se oculta SIN tocar overflow (no se usa overflow:hidden en html/body: el POS pantalla completa
   conserva su propio body.fe-pos-fullscreen{overflow:hidden} de styles.css). */
html { scroll-behavior: auto; scrollbar-width: none; -ms-overflow-style: none; }
body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Destinos de "Ver ejemplo": que la topbar sticky no los tape. */
.fe-apidocs-acc-btn, .fe-apidocs-tabs, #feApiDisponibles { scroll-margin-top: 110px; }

/* ============ APIs DISPONIBLES ============
   Tarjeta = .panel-card.fe-table-card (igual que la tabla de tokens). Listado = .fe-table-wrap + table.fe-table (mismos th/td,
   filas separadas por su border-bottom). Botones = .fe-token-actions + .btn.small.secondary (mismo "Copiar" de la tabla). */
#feApiDocs .fe-table-wrap { overflow-y: hidden; }
#feApiDisponibles .fe-table-wrap + .fe-table-wrap { margin-top: 14px; }
.fe-apidocs-apitable { min-width: 0; }
.fe-apidocs-apitable th[scope="row"] { width: 150px; white-space: nowrap; }
.fe-apidocs-apitable .fe-apidocs-method-cell { width: 82px; }
.fe-apidocs-apitable td strong { display: block; margin-bottom: 4px; }
.fe-apidocs-apitable code.fe-apidocs-api-url, .fe-apidocs-apitable code.fe-apidocs-auth-code {
  display: block; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere;
}
.fe-apidocs-note-cell { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.fe-apidocs-actions-cell { width: 1%; white-space: nowrap; }
.fe-apidocs-apitable .fe-token-actions { justify-content: flex-end; flex-wrap: nowrap; }
.fe-apidocs-apitable .fe-token-actions .btn.small { width: auto; min-width: 88px; max-width: none; flex: 0 0 auto; padding: 0 15px; }
@media (max-width: 640px) {
  .fe-apidocs-apitable thead { display: none; }
  .fe-apidocs-apitable, .fe-apidocs-apitable tbody, .fe-apidocs-apitable tr, .fe-apidocs-apitable td, .fe-apidocs-apitable th[scope="row"] { display: block; width: auto; }
  .fe-apidocs-apitable tr { border-bottom: 1px solid rgba(32,32,32,.07); padding: 6px 0; }
  .fe-apidocs-apitable tr:last-child { border-bottom: 0; }
  .fe-apidocs-apitable td, .fe-apidocs-apitable th[scope="row"] { border-bottom: 0; padding: 6px 13px; }
  .fe-apidocs-apitable .fe-apidocs-actions-cell { white-space: normal; }
  .fe-apidocs-apitable .fe-token-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* Componentes con scroll SOLO horizontal (tabs, tablas, código en línea): overflow-y explícito "hidden" para que
   ninguno compute overflow-y:auto (regla CSS: un eje no-visible convierte el otro "visible" en "auto"). No desbordan en alto. */
.fe-apidocs-tabs, .fe-apidocs-table-wrap, .fe-apidocs-copyrow code { overflow-y: hidden; }
.fe-apidocs-tab:focus-visible { outline-offset: -3px; }

.fe-apidocs .fe-apidocs-endpoints, .fe-apidocs .fe-apidocs-features { padding-left: 0; }

/* ============ MODAL "EJEMPLO DE INTEGRACIÓN" ============
   Mismas clases que los modales fiscales del panel (.fe-pos-doc-modal/.fe-pos-doc-backdrop/.panel-card.fe-baja-dialog,
   cabecera .section-head h3, .fe-baja-acciones). facturacion.js solo inyecta la maquetación de .fe-baja-dialog al abrir un
   modal fiscal (ensureBajaModalStyle), así que aquí se repiten EXACTAMENTE esos valores para este modal; ancho = el de
   .fe-anulacion-rc-dialog (920px). Overlay: el mismo del panel, más suave. Scroll interno solo aquí, sin barra visible. */
#feApiEjemploModal .fe-pos-doc-backdrop { background: rgba(2, 6, 23, .36); backdrop-filter: blur(4px); }
#feApiEjemploModal .fe-baja-dialog {
  position: relative; width: min(920px, calc(100vw - 28px)); max-height: min(90vh, 820px); overflow: auto; margin: 0;
  overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none;
}
#feApiEjemploModal .fe-baja-dialog::-webkit-scrollbar { width: 0; height: 0; display: none; }
#feApiEjemploModal .fe-baja-dialog:focus { outline: none; }
#feApiEjemploModal .section-head { margin-bottom: 12px; align-items: flex-start; }
#feApiEjemploModal .section-head h3 { margin: 0; font-size: 24px; line-height: 1; letter-spacing: -.04em; }
#feApiEjemploModal .section-head .mini-title { margin-bottom: 6px; }
#feApiEjemploModal .fe-baja-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 18px; }
#feApiEjemploModal .fe-apidocs { margin-top: 0; gap: 12px; }
#feApiEjemploModal .fe-apidocs-tabs { margin: 0; }
#feApiEjemploModal .fe-apidocs-tabpanel { display: grid; gap: 12px; }
#feApiEjemploModal .fe-apidocs-tabpanel[hidden] { display: none; }
#feApiEjemploModal .fe-table-wrap { overflow-y: hidden; }
#feApiEjemploModal .fe-apidocs-apitable th[scope="row"] { width: 130px; }
#feApiEjemploModal .fe-apidocs-apitable td .fe-pill { margin-bottom: 6px; }
.fe-apidocs-modal-x { width: 42px; min-width: 42px; padding: 0; font-size: 22px; line-height: 1; justify-content: center; flex: 0 0 42px; }
/* Mientras el modal está abierto la página queda quieta (la posición se guarda y se restaura al cerrar). */
html.fe-apidocs-modal-open, html.fe-apidocs-modal-open body { overflow: hidden; }
@media (max-width: 640px) {
  #feApiEjemploModal { padding: 10px; }
  #feApiEjemploModal .fe-baja-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 18px; }
  #feApiEjemploModal .fe-apidocs-apitable th[scope="row"] { width: auto; }
}