/* =============================================================================
   InercIA APIs · Sistema de diseño (Portal y Administración)
   Colores del logo: pizarra (#0F172A → #1E293B) y degradado esmeralda → cian
   (#34D399 → #06B6D4). Sin estilos en línea: la política CSP no los permite.
============================================================================= */
:root {
    --pizarra-950: #0b1120;
    --pizarra-900: #0f172a;
    --pizarra-800: #1e293b;
    --pizarra-700: #334155;
    --pizarra-500: #64748b;
    --pizarra-300: #cbd5e1;
    --pizarra-100: #f1f5f9;
    --pizarra-50: #f8fafc;
    --esmeralda: #34d399;
    --esmeralda-oscuro: #059669;
    --cian: #06b6d4;
    --cian-oscuro: #0891b2;
    --degradado: linear-gradient(135deg, #34d399 0%, #06b6d4 100%);
    --degradado-suave: linear-gradient(135deg, rgba(52,211,153,.14) 0%, rgba(6,182,212,.14) 100%);
    --texto: #0f172a;
    --texto-suave: #64748b;
    --borde: #e2e8f0;
    --fondo: #ffffff;
    --fondo-alterno: #f8fafc;
    --exito: #059669;
    --exito-fondo: #ecfdf5;
    --error: #dc2626;
    --error-fondo: #fef2f2;
    --aviso: #b45309;
    --aviso-fondo: #fffbeb;
    --info-fondo: #ecfeff;
    --radio: 18px;
    --radio-sm: 12px;
    --sombra: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
    --sombra-alta: 0 20px 50px rgba(15,23,42,.14);
    --ancho: 1200px;
    --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font-family: var(--fuente); color: var(--texto); background: var(--fondo-alterno); font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
img { max-width: 100%; display: block; }
a { color: var(--cian-oscuro); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.2; letter-spacing: -.02em; color: var(--pizarra-900); }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
code { font-family: var(--mono); font-size: .86em; background: var(--pizarra-100); padding: .1em .4em; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--borde); margin: 1.5rem 0; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.texto-degradado { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.suave { color: var(--texto-suave); }
.pequeno { font-size: .85rem; }
.oculto { display: none !important; }
.centrado { text-align: center; }
.derecha { text-align: right; }
.mt { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.ancho-completo { width: 100%; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); }

/* ------------------------------------------------------------------ botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .92rem; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap; text-decoration: none !important; font-family: inherit; line-height: 1.2; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-principal { background: var(--degradado); color: var(--pizarra-900); box-shadow: 0 8px 22px rgba(6,182,212,.28); }
.btn-oscuro { background: var(--pizarra-900); color: #fff; }
.btn-oscuro:hover { background: var(--pizarra-800); }
.btn-claro { background: #fff; color: var(--pizarra-900); border: 1px solid var(--borde); }
.btn-claro:hover { border-color: var(--cian); }
.btn-peligro { background: #fff; color: var(--error); border: 1px solid #fecaca; }
.btn-peligro:hover { background: var(--error-fondo); }
.btn-sm { padding: .45rem .9rem; font-size: .83rem; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.acciones form { display: inline; }

/* ------------------------------------------------------------------ encabezado */
.encabezado { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.encabezado .contenedor { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.logo img { height: 36px; width: auto; }
.logo { display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; text-decoration: none !important; }
.menu { display: flex; gap: .25rem; align-items: center; flex: 1; }
.menu a { white-space: nowrap; color: var(--pizarra-700); font-weight: 500; padding: .5rem .8rem; border-radius: 10px; font-size: .93rem; text-decoration: none; }
.menu a:hover { background: var(--pizarra-100); }
.menu a.activo { color: var(--pizarra-900); background: var(--degradado-suave); font-weight: 600; }
.menu .separador { flex: 1; }
.usuario-menu { display: flex; align-items: center; gap: .75rem; font-size: .88rem; }
.usuario-menu .nombre { color: var(--texto-suave); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boton-menu { display: none; background: none; border: 1px solid var(--borde); border-radius: 10px; width: 42px; height: 42px; font-size: 1.3rem; cursor: pointer; margin-left: auto; }
/* En pantallas medianas el nombre del usuario no cabe junto al menú: se oculta (vuelve en el menú móvil). */
@media (min-width: 901px) and (max-width: 1200px) {
    .usuario-menu .nombre { display: none; }
}
@media (max-width: 900px) {
    .boton-menu { display: inline-flex; align-items: center; justify-content: center; }
    .menu { display: none; position: absolute; top: 68px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 1rem 20px; border-bottom: 1px solid var(--borde); box-shadow: var(--sombra); }
    .menu.abierto { display: flex; }
    .menu .separador { display: none; }
    .usuario-menu { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------------------ pie */
.pie { background: var(--pizarra-900); color: var(--pizarra-300); padding: 2.5rem 0 2rem; margin-top: 4rem; font-size: .88rem; }
.pie .contenedor { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: center; }
.pie img { height: 30px; }
.pie a { color: var(--pizarra-300); }
.pie nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ portada */
.portada { background: radial-gradient(1000px 400px at 80% -10%, rgba(6,182,212,.18), transparent), radial-gradient(800px 400px at 0% 0%, rgba(52,211,153,.15), transparent), var(--pizarra-900); color: #fff; padding: 5rem 0 4.5rem; }
.portada h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.1rem); max-width: 760px; }
.portada p { color: var(--pizarra-300); font-size: 1.12rem; max-width: 640px; }
.portada .acciones { margin-top: 1.75rem; }
.portada .btn-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.insignia { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(52,211,153,.12); color: var(--esmeralda); font-size: .8rem; font-weight: 600; margin-bottom: 1.25rem; border: 1px solid rgba(52,211,153,.25); }
/* Portada en dos columnas: mensaje + ejemplo de código */
.portada { position: relative; overflow: hidden; padding-bottom: 2.5rem; }
.portada-rejilla { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
/* Sin esto, el bloque de código (texto que no se parte) ensancha la columna más que la pantalla. */
.portada-rejilla > * { min-width: 0; }
.portada-texto p { margin-bottom: 0; }
.portada-ventajas { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9rem; font-weight: 500; }
.portada-ventajas li { display: flex; align-items: center; gap: .4rem; }
.portada-ventajas i { color: var(--esmeralda); }
.portada-visual { position: relative; padding: 1.5rem 0; }

.ventana-codigo { background: var(--pizarra-950); border-radius: var(--radio); box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); overflow: hidden; transform: rotate(-1deg); }
.ventana-barra { display: flex; align-items: center; gap: .4rem; padding: .75rem 1rem; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.07); }
.ventana-barra .punto { width: 10px; height: 10px; border-radius: 50%; background: #475569; }
.ventana-barra .punto:nth-child(1) { background: #ef4444; }
.ventana-barra .punto:nth-child(2) { background: #f59e0b; }
.ventana-barra .punto:nth-child(3) { background: #22c55e; }
.ventana-ruta { margin-left: .75rem; font-family: var(--mono); font-size: .78rem; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metodo-chip { background: var(--esmeralda); color: var(--pizarra-950); font-weight: 800; font-size: .68rem; padding: .1rem .4rem; border-radius: 5px; margin-right: .35rem; }
.ventana-cuerpo { margin: 0; padding: 1.1rem 1.25rem; font-family: var(--mono); font-size: .8rem; line-height: 1.65; color: #e2e8f0; overflow-x: auto; }
.ventana-cuerpo code { background: none; padding: 0; font-size: inherit; color: inherit; }
.c-clave { color: #93c5fd; }
.c-texto { color: #86efac; }
.c-numero { color: #fcd34d; }
.ventana-respuesta { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; padding: .8rem 1.25rem; border-top: 1px solid rgba(255,255,255,.07); background: rgba(52,211,153,.08); color: #e2e8f0; font-size: .85rem; }
.respuesta-codigo { background: #16a34a; color: #fff; font-family: var(--mono); font-weight: 700; font-size: .75rem; padding: .15rem .5rem; border-radius: 6px; }
.respuesta-total { margin-left: auto; font-family: var(--mono); color: #cbd5e1; }

.tarjeta-flotante { position: absolute; display: flex; align-items: center; gap: .65rem; background: #fff; color: var(--pizarra-900); border-radius: 14px; padding: .65rem .9rem; box-shadow: var(--sombra-alta); border: 1px solid var(--borde); font-size: .82rem; }
.tarjeta-flotante i { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--degradado); color: #fff; font-size: 1rem; }
.tarjeta-flotante strong { display: block; font-size: .85rem; }
.tarjeta-flotante span { color: var(--texto-suave); }
/* Las tarjetas flotan sobre zonas vacías de la ventana (arriba y a la derecha del JSON), sin tapar texto. */
.flotante-arriba { top: -1.6rem; right: -1rem; }
.flotante-abajo { bottom: 5.25rem; right: -1.5rem; }

.portada-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.12); }
.portada-cifras strong { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.portada-cifras span { font-size: .85rem; color: var(--pizarra-300); }

@media (max-width: 960px) {
    .portada-rejilla { grid-template-columns: 1fr; gap: 2rem; }
    .flotante-arriba { right: .5rem; }
    .flotante-abajo { right: .5rem; }
    .portada-cifras { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .tarjeta-flotante { display: none; }
    .ventana-codigo { transform: none; }
    .ventana-cuerpo { font-size: .72rem; }
}

.seccion { padding: 3.5rem 0; }
.titulo-seccion { text-align: center; max-width: 680px; margin: 0 auto 2.5rem; }
.titulo-seccion p { color: var(--texto-suave); }

/* ------------------------------------------------------------------ tarjetas */
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem; box-shadow: var(--sombra); }
.tarjeta + .tarjeta { margin-top: 1.25rem; }
.tarjeta h2, .tarjeta h3 { display: flex; align-items: center; gap: .5rem; }
.tarjeta-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tarjeta-cabecera h2, .tarjeta-cabecera h3 { margin: 0; }
.rejilla { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.rejilla-2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla-4 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rejilla .tarjeta + .tarjeta, .rejilla-2 .tarjeta + .tarjeta, .rejilla-4 .tarjeta + .tarjeta { margin-top: 0; }
.icono-api { width: 52px; height: 52px; border-radius: 14px; background: var(--pizarra-900); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; }
.icono-api i { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tarjeta-api { display: flex; flex-direction: column; }
.tarjeta-api p { color: var(--texto-suave); flex: 1; }
.precio-desde { font-size: .88rem; color: var(--texto-suave); margin-bottom: 1rem; }
.precio-desde strong { color: var(--pizarra-900); font-size: 1.05rem; }
.paso { text-align: center; }
/* Los h3 de .tarjeta son flex (para alinear íconos): el título se centra con justify-content. */
.paso h3 { justify-content: center; }
.paso p { margin-bottom: 0; }
.paso .numero { width: 44px; height: 44px; border-radius: 50%; background: var(--degradado); color: var(--pizarra-900); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .75rem; }

/* ------------------------------------------------------------------ planes */
.planes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.plan { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; position: relative; }
.plan.destacado { border: 2px solid var(--cian); box-shadow: var(--sombra-alta); }
.plan .cinta { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--degradado); color: var(--pizarra-900); font-size: .72rem; font-weight: 800; padding: .25rem .8rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
.plan h3 { font-size: 1.15rem; }
.plan .precio { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; margin: .5rem 0 0; color: var(--pizarra-900); }
.plan .periodo { color: var(--texto-suave); font-size: .88rem; margin-bottom: 1rem; }
.plan ul { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.plan li { padding: .35rem 0; display: flex; gap: .5rem; font-size: .92rem; }
.plan li i { color: var(--esmeralda-oscuro); }
/* Selector Mensual / Anual dentro del plan */
.selector-periodo { display: inline-flex; gap: .25rem; padding: .25rem; margin: .75rem 0 .25rem; background: var(--pizarra-100); border-radius: 999px; align-self: flex-start; }
.selector-periodo button, .selector-periodo a { text-decoration: none !important; border: 0; background: transparent; padding: .4rem .9rem; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 600; color: var(--texto-suave); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.selector-periodo button.activo, .selector-periodo a.activo { background: #fff; color: var(--pizarra-900); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.selector-periodo .ahorro { background: var(--degradado); color: #fff; font-size: .68rem; font-weight: 800; padding: .1rem .4rem; border-radius: 999px; }
.limites { font-size: .82rem; color: var(--texto-suave); border-top: 1px dashed var(--borde); padding-top: .75rem; margin-bottom: 1rem; }
.limites div { display: flex; justify-content: space-between; }

/* ------------------------------------------------------------------ formularios */
.formulario { display: grid; gap: 1rem; }
.formulario-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.campo-grupo { display: flex; flex-direction: column; gap: .35rem; }
.campo-grupo.completo { grid-column: 1 / -1; }
label { font-weight: 600; font-size: .88rem; color: var(--pizarra-700); }
.campo { width: 100%; padding: .7rem .9rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); font: inherit; background: #fff; color: var(--texto); transition: border-color .15s, box-shadow .15s; }
.campo:focus { outline: none; border-color: var(--cian); box-shadow: 0 0 0 3px rgba(6,182,212,.18); }
textarea.campo { min-height: 110px; resize: vertical; }
.ayuda { font-size: .8rem; color: var(--texto-suave); }
.casilla { display: flex; gap: .55rem; align-items: flex-start; font-weight: 500; }
.casilla input { margin-top: .3rem; accent-color: var(--cian-oscuro); }
.field-validation-error, .text-danger { color: var(--error); font-size: .82rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.input-validation-error { border-color: var(--error); }
.filtros { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.25rem; }
.filtros .campo-grupo { min-width: 160px; }

/* ------------------------------------------------------------------ acceso */
.caja-acceso { max-width: 460px; margin: 3.5rem auto; }
.caja-acceso.ancha { max-width: 760px; }
.caja-acceso .tarjeta { padding: 2rem; }
.caja-acceso h1 { font-size: 1.5rem; }

/* ------------------------------------------------------------------ avisos */
.aviso { padding: .85rem 1.1rem; border-radius: var(--radio-sm); margin-bottom: 1.25rem; display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; border: 1px solid transparent; }
.aviso.exito { background: var(--exito-fondo); color: #065f46; border-color: #a7f3d0; }
.aviso.error { background: var(--error-fondo); color: #991b1b; border-color: #fecaca; }
.aviso.info { background: var(--info-fondo); color: #155e75; border-color: #a5f3fc; }
.aviso.advertencia { background: var(--aviso-fondo); color: var(--aviso); border-color: #fde68a; }

/* ------------------------------------------------------------------ insignias de estado */
.estado { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; background: var(--pizarra-100); color: var(--pizarra-700); }
.estado.verde { background: var(--exito-fondo); color: #065f46; }
.estado.rojo { background: var(--error-fondo); color: #991b1b; }
.estado.ambar { background: var(--aviso-fondo); color: var(--aviso); }
.estado.cian { background: var(--info-fondo); color: #155e75; }
.estado.oscuro { background: var(--pizarra-900); color: #fff; }

/* ------------------------------------------------------------------ tablas */
.tabla-contenedor { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: #fff; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .89rem; }
.tabla th { text-align: left; background: var(--pizarra-50); color: var(--pizarra-700); font-weight: 600; padding: .7rem .9rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: .7rem .9rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--texto-suave); }
.vacio i { font-size: 2.2rem; display: block; margin-bottom: .5rem; color: var(--pizarra-300); }

/* ------------------------------------------------------------------ indicadores */
.indicador { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; }
.indicador .valor { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
.indicador .nombre { color: var(--texto-suave); font-size: .85rem; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; font-size: .92rem; margin: 0; }
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; font-weight: 500; }
progress.consumo { width: 100%; height: 8px; border-radius: 999px; overflow: hidden; border: 0; background: var(--pizarra-100); appearance: none; }
progress.consumo::-webkit-progress-bar { background: var(--pizarra-100); border-radius: 999px; }
progress.consumo::-webkit-progress-value { background: var(--degradado); border-radius: 999px; }
progress.consumo::-moz-progress-bar { background: var(--degradado); border-radius: 999px; }

/* ------------------------------------------------------------------ cabecera de página */
.cabecera-pagina { padding: 2rem 0 1.25rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.cabecera-pagina p { color: var(--texto-suave); margin: 0; }
.migas { font-size: .85rem; color: var(--texto-suave); margin-bottom: .35rem; }
.migas a { color: var(--texto-suave); }

/* ------------------------------------------------------------------ token / secreto */
.secreto { display: flex; gap: .5rem; align-items: stretch; margin: .5rem 0 1rem; }
.secreto code { flex: 1; display: block; padding: .8rem 1rem; font-size: .88rem; background: var(--pizarra-900); color: var(--esmeralda); border-radius: var(--radio-sm); word-break: break-all; }

/* ------------------------------------------------------------------ documentación */
.documentacion { display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: start; padding-top: 2rem; }
.indice-doc { position: sticky; top: 88px; font-size: .9rem; }
.indice-doc h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); margin: 1.25rem 0 .5rem; }
.indice-doc a { display: block; padding: .3rem .6rem; border-radius: 8px; color: var(--pizarra-700); }
.indice-doc a:hover { background: var(--pizarra-100); text-decoration: none; }
.contenido-doc { min-width: 0; }
.contenido-doc section { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.75rem; margin-bottom: 1.5rem; }
.contenido-doc h2 { margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--borde); }
.contenido-doc h3 { margin-top: 1.5rem; }
.contenido-doc ul, .contenido-doc ol { padding-left: 1.25rem; }
.contenido-doc li { margin-bottom: .3rem; }
pre.codigo { background: var(--pizarra-950); color: #e2e8f0; padding: 1.1rem 1.25rem; border-radius: var(--radio-sm); overflow-x: auto; font-family: var(--mono); font-size: .82rem; line-height: 1.6; margin: .75rem 0 1.25rem; }
pre.codigo code { background: none; padding: 0; color: inherit; font-size: inherit; }
.endpoint { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .9rem; background: var(--pizarra-50); border: 1px solid var(--borde); border-radius: 10px; padding: .6rem .9rem; margin: .5rem 0 1rem; flex-wrap: wrap; }
.metodo { font-weight: 800; font-size: .72rem; padding: .2rem .5rem; border-radius: 6px; color: #fff; }
.metodo.post { background: var(--esmeralda-oscuro); }
.metodo.get { background: var(--cian-oscuro); }
@media (max-width: 900px) {
    .documentacion { grid-template-columns: 1fr; }
    .indice-doc { position: static; }
}

/* ------------------------------------------------------------------ paginación */
.paginacion { display: flex; gap: .4rem; justify-content: center; margin: 1.5rem 0; }
.paginacion a, .paginacion span { min-width: 40px; height: 40px; padding: 0 .8rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--borde); font-weight: 600; background: #fff; color: var(--pizarra-700); }
.paginacion .actual { background: var(--pizarra-900); color: #fff; border-color: var(--pizarra-900); }

/* ------------------------------------------------------------------ API WhatsApp: vinculación con QR */
.wa-panel { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start; }
.wa-qr { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.wa-qr img { width: 264px; height: 264px; padding: .6rem; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-sm); image-rendering: pixelated; }
@media (max-width: 720px) {
    .wa-panel { grid-template-columns: 1fr; }
    .wa-qr img { width: 100%; max-width: 264px; height: auto; aspect-ratio: 1; }
}

/* ------------------------------------------------------------------ Cloudflare Turnstile (verificación anti-robots) */
.contenedor-turnstile { width: 100%; min-height: 65px; margin: .25rem 0 .75rem; }

/* ------------------------------------------------------------------ próximamente: Bot de WhatsApp */
.indice-doc .proximo { display: flex; align-items: center; gap: .4rem; padding: .3rem .6rem; color: var(--texto-suave); cursor: default; }
.indice-doc .proximo::after { content: "Pronto"; margin-left: auto; font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: rgba(201,100,66,.12); color: #A9502F; }
.proximamente { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; padding: 2.25rem; border-radius: var(--radio); border: 1px dashed rgba(201,100,66,.45); background: linear-gradient(135deg, #FAF9F5, #FBEFE9); }
.proximamente h2 { margin: .75rem 0 .5rem; }
.proximamente-lista { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1rem; font-size: .92rem; font-weight: 500; }
.proximamente-lista i { color: #C96442; margin-right: .35rem; }
.proximamente-chat { background: #fff; border: 1px solid var(--borde); border-radius: 18px; padding: 1rem; box-shadow: 0 20px 40px rgba(31,30,29,.08); display: flex; flex-direction: column; gap: .6rem; }
.chat-cabecera { display: flex; align-items: center; gap: .45rem; font-size: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--borde); }
.chat-cabecera i { color: #C96442; font-size: 1.1rem; }
.chat-cabecera span { margin-left: auto; font-size: .75rem; color: #A9502F; }
.chat-msg { max-width: 85%; padding: .55rem .8rem; border-radius: 14px; font-size: .88rem; line-height: 1.4; }
.chat-msg.cliente { align-self: flex-start; background: #FAF9F5; border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.chat-msg.bot { align-self: flex-end; background: #FBEFE9; border: 1px solid rgba(201,100,66,.25); border-bottom-right-radius: 4px; }
@media (max-width: 860px) {
    .proximamente { grid-template-columns: 1fr; padding: 1.5rem; }
    .proximamente-lista { grid-template-columns: 1fr; }
}