/* Pestaña «APIs». Misma base que index.html y pantallas.html (paleta, tipografía, cabecera, tarjetas,
   tablas, avisos); el oscuro lo pone tema.css redefiniendo los mismos tokens. Aquí no hay un solo
   color suelto: todo sale de un token, para que el oscuro funcione sin tocar esta hoja. */
:root{
  --tinta:#15202b; --tinta-2:#57677a; --tinta-3:#5b6a7a;
  --fondo:#f4f6f8; --papel:#fff; --linea:#e1e6ec; --linea-2:#eef1f5;
  --acento:#1d6f5f; --acento-suave:#e7f2ef;
  --mal:#b3423a; --mal-suave:#fbeceb; --ojo:#8a6a1c; --ojo-suave:#fbf4e0;
  --general:#39699f; --negocio:#7a4c9e;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
code,.mono{font:12.5px/1.45 var(--mono)}
code{background:var(--linea-2);padding:1px 5px;border-radius:4px;color:var(--tinta-2)}
h1{font-size:20px;margin:0;letter-spacing:-.2px}
h2{font-size:13px;margin:0 0 14px;text-transform:uppercase;letter-spacing:.7px;color:var(--tinta-2);font-weight:600}
h3{font-size:15px;margin:0 0 8px;letter-spacing:-.1px}
h4{font-size:13.5px;margin:18px 0 8px;color:var(--tinta-2)}
a{color:var(--acento)}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.oculto,[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

header.cab{background:var(--papel);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:10}
.barra{max-width:1240px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:14px}
.barra .crece{flex:1}
.barra a.volver{color:var(--tinta-2);text-decoration:none;font-weight:600;font-size:14px;padding:7px 14px;border-radius:7px}
.barra a.volver:hover{background:var(--linea-2);color:var(--tinta)}

.env{max-width:1240px;margin:0 auto;padding:20px 20px 64px}
@media(max-width:600px){.env{padding:16px 16px 48px}.barra{padding:11px 16px}}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:10px;padding:18px;margin-bottom:16px}
@media(max-width:600px){.tarjeta{padding:14px}}

label{display:block;font-size:13px;font-weight:600;margin:0 0 5px;color:var(--tinta-2)}
input,select,button,textarea{font:inherit}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=url],input[type=search],select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--linea);border-radius:7px;background:var(--papel);color:var(--tinta);min-width:0}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:-1px;border-color:var(--acento)}
input:disabled,select:disabled,textarea:disabled,input[readonly]{background:var(--linea-2);color:var(--tinta-3)}
textarea{resize:vertical;min-height:72px}
textarea.json{font:12.5px/1.55 var(--mono);background:var(--codigo-fondo);min-height:160px}
[aria-invalid=true]{border-color:var(--mal)!important;background:var(--mal-suave)!important}
.campo{margin-bottom:12px}
.campo .pista{margin-top:4px}
.marca{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--tinta);margin:0}
.marca input{margin:0;width:auto}

button.b{background:var(--acento);color:var(--sobre-acento);border:0;border-radius:7px;padding:8px 16px;font-weight:600;cursor:pointer}
button.b:hover{filter:brightness(1.08)}
button.s{background:transparent;color:var(--tinta-2);border:1px solid var(--linea);border-radius:7px;padding:7px 13px;font-weight:600;cursor:pointer}
button.s:hover{background:var(--linea-2);color:var(--tinta)}
button.x{background:transparent;color:var(--mal);border:1px solid var(--linea);border-radius:7px;padding:7px 13px;font-weight:600;cursor:pointer}
button.x:hover{background:var(--mal-suave)}
button.chica{padding:3px 9px;font-size:12px}
button:disabled{opacity:.5;cursor:not-allowed}
button.enlace{background:none;border:0;color:var(--acento);cursor:pointer;padding:0;font-weight:600;font-size:13px}
button.enlace:hover{text-decoration:underline}

.fila{display:grid;gap:12px}
.f2{grid-template-columns:1fr 1fr}.f3{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.f2,.f3{grid-template-columns:1fr}}
.pista{font-size:12.5px;color:var(--tinta-3);margin:0}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acciones .crece{flex:1}

.etq{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--linea-2);color:var(--tinta-2);line-height:1.6}
.etq.activo,.etq.ok{background:var(--acento-suave);color:var(--acento)}
.etq.borrador,.etq.rechazo,.etq.inactivo{background:var(--ojo-suave);color:var(--ojo)}
.etq.retirado{background:var(--linea-2);color:var(--tinta-3);text-decoration:line-through}
.etq.error{background:var(--mal-suave);color:var(--mal)}
.etq.sesion{background:var(--violeta-suave);color:var(--violeta)}
.etq.erp{background:var(--info-suave);color:var(--info)}
.etq.http{background:var(--violeta-suave);color:var(--violeta)}
.met{display:inline-block;min-width:54px;text-align:center;font:700 11px/1.7 var(--mono);border-radius:5px;padding:0 6px;letter-spacing:.3px}
.met.GET{background:var(--info-suave);color:var(--info)}
.met.POST{background:var(--acento-suave);color:var(--acento)}
.met.PUT{background:var(--ojo-suave);color:var(--ojo)}
.met.DELETE{background:var(--mal-suave);color:var(--mal)}
.ruta{font:12.5px/1.45 var(--mono);color:var(--tinta);word-break:break-all}

.aviso{padding:10px 13px;border-radius:8px;font-size:13.5px;margin:0 0 12px}
.aviso.ok{background:var(--acento-suave);color:var(--acento)}
.aviso.mal{background:var(--mal-suave);color:var(--mal)}
.aviso.ojo{background:var(--ojo-suave);color:var(--ojo)}
.aviso.gris{background:var(--linea-2);color:var(--tinta-2)}
.vacio{padding:28px 14px;text-align:center;color:var(--tinta-3);font-size:13.5px}
.vacio b{display:block;color:var(--tinta-2);margin-bottom:6px;font-size:14px}
.vacio .acciones{justify-content:center;margin-top:12px}
.cargando{padding:28px 14px;text-align:center;color:var(--tinta-3);font-size:13.5px}

#toast{position:fixed;top:14px;right:14px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 28px))}
#toast div{background:var(--tinta);color:var(--papel);padding:10px 14px;border-radius:8px;font-size:13px;box-shadow:0 8px 24px -8px rgba(var(--sombra-rgb),.5)}
#toast div.mal{background:var(--mal);color:var(--papel)}

/* ── franja del resumen: altura fija para que no salte al llegar los números ── */
.franja{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:10px;overflow:hidden;margin-bottom:16px}
.franja > div{background:var(--papel);padding:10px 14px;min-height:62px}
.franja b{display:block;font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-.3px;line-height:1.3}
.franja span{font-size:12px;color:var(--tinta-3)}
.franja .det{font-size:11.5px;color:var(--tinta-3);display:block}
.franja .mal b{color:var(--mal)}

/* ── pestañas ── */
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin:0 0 16px;overflow-x:auto;scrollbar-width:none}
.pestanas button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 14px 10px;font-weight:600;font-size:14px;color:var(--tinta-3);cursor:pointer;white-space:nowrap}
.pestanas button:hover{color:var(--tinta)}
.pestanas button[aria-selected=true]{color:var(--acento);border-bottom-color:var(--acento)}

/* ── endpoints ── */
.filtros{display:grid;grid-template-columns:1.1fr 1.1fr .9fr .8fr 1.6fr;gap:10px;margin-bottom:12px}
@media(max-width:1000px){.filtros{grid-template-columns:1fr 1fr}.filtros .q{grid-column:1/-1}}
@media(max-width:420px){.filtros{gap:8px}.pestanas button{padding:9px 10px 10px}}
.filtros label{font-size:12px;margin-bottom:3px}
.disp{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:start}
@media(max-width:960px){.disp{grid-template-columns:1fr}.disp aside{order:-1}}
.lista-ep{list-style:none;margin:0;padding:0;border:1px solid var(--linea);border-radius:9px;background:var(--papel);min-height:220px}
.lista-ep li + li{border-top:1px solid var(--linea-2)}
.lista-ep button.fila-ep{display:grid;grid-template-columns:64px 1fr auto;gap:4px 12px;width:100%;text-align:left;background:none;border:0;padding:10px 12px;cursor:pointer;color:var(--tinta)}
.lista-ep button.fila-ep:hover{background:var(--fila-hover)}
.fila-ep .met{grid-row:1/3;align-self:start;margin-top:2px}
.fila-ep .ruta{grid-column:2}
.fila-ep .lado{grid-column:3;grid-row:1/3;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.fila-ep .sub{grid-column:2;font-size:12.5px;color:var(--tinta-2)}
.fila-ep .sub b{color:var(--tinta);font-weight:600}
.fila-ep .pant{font-size:11.5px;color:var(--tinta-3);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){
  .lista-ep button.fila-ep{grid-template-columns:1fr auto}
  .fila-ep .met{grid-row:auto;grid-column:1;justify-self:start}
  .fila-ep .ruta,.fila-ep .sub{grid-column:1/-1}
  .fila-ep .lado{grid-column:2;grid-row:1;flex-direction:row}
  .fila-ep .pant{display:none}
}
.paginar{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:10px;font-size:13px;color:var(--tinta-3);flex-wrap:wrap}
.modulos{list-style:none;margin:0;padding:0}
.modulos li button{display:grid;grid-template-columns:1fr auto;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:6px 8px;cursor:pointer;color:var(--tinta);font-size:13px}
.modulos li button:hover{background:var(--linea-2)}
.modulos li button[aria-pressed=true]{background:var(--acento-suave);color:var(--acento)}
.modulos small{display:block;color:var(--tinta-3);font-size:11.5px}
.modulos .n{font-variant-numeric:tabular-nums;font-weight:600}

/* ── tablas ── */
.desliza{overflow-x:auto;border:1px solid var(--linea);border-radius:9px;background:var(--papel)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--tinta-3);padding:9px 10px;border-bottom:1px solid var(--linea);font-weight:600;white-space:nowrap;background:var(--papel)}
td{padding:9px 10px;border-bottom:1px solid var(--linea-2);vertical-align:top}
tr:last-child td{border-bottom:0}
td.num,th.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
td.fecha{white-space:nowrap;color:var(--tinta-2)}
tbody tr.elegible{cursor:pointer}
tbody tr.elegible:hover td{background:var(--fila-hover)}
tbody tr.elegible:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}

/* ── conectores ── */
.conectores{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
@media(max-width:420px){.conectores{grid-template-columns:1fr}}
.con{background:var(--papel);border:1px solid var(--linea);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.con .cabeza{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.con .cabeza h3{margin:0;flex:1;min-width:140px}
.con .cabeza code{display:block;margin-top:2px;background:none;padding:0;color:var(--tinta-3)}
.con dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:13px}
.con dt{color:var(--tinta-3)}
.con dd{margin:0;word-break:break-all}
.creds{list-style:none;margin:0;padding:0;font-size:13px;border-top:1px solid var(--linea-2)}
.creds li{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--linea-2)}
.creds li .crece{flex:1;min-width:0}
.creds small{display:block;color:var(--tinta-3);font-size:11.5px}
.resultado-prueba{margin-top:10px}

/* ── libro: antes / después ── */
.diff{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px}
@media(max-width:640px){.diff{grid-template-columns:1fr}}
.diff h5{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--tinta-3)}
.diff .lado{border:1px solid var(--linea);border-radius:8px;background:var(--codigo-fondo);font:12px/1.55 var(--mono);overflow:auto;max-height:340px}
.diff .k{display:grid;grid-template-columns:minmax(90px,38%) 1fr;gap:8px;padding:3px 9px;border-bottom:1px solid var(--linea-2)}
.diff .k:last-child{border-bottom:0}
.diff .k span:first-child{color:var(--j-key);word-break:break-all}
.diff .k span:last-child{word-break:break-word;white-space:pre-wrap}
.diff .antes .k.cambia{background:var(--mal-suave)}
.diff .despues .k.cambia{background:var(--acento-suave)}
.diff .k.falta span:last-child{color:var(--tinta-3);font-style:italic}

/* ── cajón lateral y diálogos (dialog nativo: foco atrapado y Esc gratis) ── */
dialog{border:0;padding:0;color:var(--tinta);background:var(--papel)}
dialog::backdrop{background:var(--velo)}
dialog.cajon{position:fixed;inset:0 0 0 auto;margin:0;width:min(720px,100vw);max-width:100vw;height:100%;max-height:100vh;box-shadow:-12px 0 40px -20px rgba(var(--sombra-rgb),.6);display:none;flex-direction:column}
dialog.cajon[open]{display:flex}
@media(prefers-reduced-motion:no-preference){dialog.cajon[open]{animation:entra .18s cubic-bezier(.2,.8,.2,1)}}
@keyframes entra{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.cajon > header{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--linea)}
.cajon > header h2{flex:1;margin:0;font-size:15px;text-transform:none;letter-spacing:-.1px;color:var(--tinta)}
button.cerrar{border:0;background:none;font-size:18px;color:var(--tinta-3);cursor:pointer;padding:2px 9px;border-radius:6px;line-height:1.4}
button.cerrar:hover{background:var(--linea-2);color:var(--tinta)}
.cajon .cuerpo{padding:16px 18px 24px;flex:1;overflow:auto}
.cajon .pie{padding:11px 18px;border-top:1px solid var(--linea);display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--papel)}
.cajon .pie .crece{flex:1}
@media(max-width:600px){.cajon .cuerpo{padding:14px 16px 20px}.cajon > header,.cajon .pie{padding-left:16px;padding-right:16px}}
dialog.chico{width:min(460px,calc(100vw - 32px));border-radius:12px;box-shadow:0 20px 50px -20px rgba(var(--sombra-rgb),.6)}
dialog.chico form{padding:18px}
dialog.chico h2{text-transform:none;letter-spacing:-.1px;color:var(--tinta);font-size:16px;margin:0 0 8px}
dialog.chico p{margin:0 0 12px;font-size:13.5px;color:var(--tinta-2)}

.ficha{display:grid;grid-template-columns:150px 1fr;gap:4px 12px;margin:0 0 16px;font-size:13px}
@media(max-width:520px){.ficha{grid-template-columns:1fr}.ficha dt{margin-top:6px}}
.ficha dt{color:var(--tinta-3)}
.ficha dd{margin:0;word-break:break-word}
.seccion{border-top:1px solid var(--linea-2);padding-top:14px;margin-top:6px}
.versiones{list-style:none;margin:0;padding:0}
.versiones li{border:1px solid var(--linea);border-radius:8px;margin-bottom:8px;background:var(--papel)}
.versiones summary{cursor:pointer;padding:8px 12px;font-size:13px;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;list-style:none}
.versiones summary::-webkit-details-marker{display:none}
.versiones summary::before{content:"▸";color:var(--tinta-3);font-size:11px}
.versiones details[open] summary::before{content:"▾"}
.versiones summary b{font-variant-numeric:tabular-nums}
.versiones summary .que{flex:1;min-width:160px;color:var(--tinta)}
.versiones summary small{color:var(--tinta-3);font-size:12px}
pre.json{margin:0;font:12px/1.55 var(--mono);background:var(--codigo-fondo);border-top:1px solid var(--linea);padding:10px 12px;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto;border-radius:0 0 8px 8px}

/* A1 · ejecución con libro (registro, lectura, reverso) y «Probar» */
fieldset.ejec{border:1px solid var(--linea);border-radius:9px;padding:12px 14px 4px;margin:4px 0 14px;min-width:0}
fieldset.ejec legend{font-weight:600;font-size:13.5px;padding:0 6px;color:var(--tinta)}
fieldset.ejec > .pista{margin-bottom:12px}
.mapa{display:grid;gap:6px;margin:8px 0}
.mapa:empty{display:none}
.mapa .pista{margin:0}
.mapa-fila{display:grid;grid-template-columns:minmax(90px,max-content) auto 1fr;gap:8px;align-items:center}
.mapa-fila code{font:12.5px var(--mono);color:var(--tinta-2)}
.mapa-fila span{color:var(--tinta-3)}
.mapa-fila input{font:12.5px var(--mono)}
textarea.json.corto{min-height:64px;margin-top:6px}
ul.faltan{margin:0 0 12px;padding-left:18px;font-size:13.5px}
ul.faltan li + li{margin-top:3px}
pre.json.prueba{white-space:pre-wrap;word-break:break-word;font:12.5px/1.55 var(--mono);background:var(--codigo-fondo);border:1px solid var(--linea);border-radius:8px;padding:10px 12px;margin:0}
@media(max-width:520px){.mapa-fila{grid-template-columns:1fr}.mapa-fila span{display:none}}
/* A5 — sistemas externos: lo plegable del formulario, avisos ámbar de credenciales y la muestra de «Probar». */
.etq.limite{background:var(--ojo-suave);color:var(--ojo)}
.franja .ojo b{color:var(--ojo)}
.franja .ojo a{color:var(--ojo)}
.creds small.alerta{color:var(--ojo);font-weight:600}
.aviso.ojo ul{margin:6px 0 0;padding-left:18px}
details.externo{border:1px solid var(--linea);border-radius:8px;padding:0 12px;margin:0 0 12px}
details.externo[open]{padding-bottom:4px}
details.externo summary{cursor:pointer;padding:9px 0;font-size:13px;font-weight:600;color:var(--tinta-2)}
details.externo[open] summary{margin-bottom:6px;border-bottom:1px solid var(--linea-2)}
.campo .etiqueta{display:block;font-size:13px;font-weight:600;color:var(--tinta-2);margin-bottom:5px}
.marcas{display:flex;flex-wrap:wrap;gap:6px 16px}
pre.muestra{white-space:pre-wrap;word-break:break-word;font:12px/1.5 var(--mono);background:var(--codigo-fondo);border-radius:6px;padding:6px 8px;margin:6px 0 0;max-height:160px;overflow:auto;color:var(--tinta-2)}