/* ==========================================================
   COPILOT GESTORIA — API y desarrolladores
   Pantallas: /user/api, /user/api/nueva, /user/api/registro
              y la documentación pública /docs/api

   Construido SOBRE design-tokens.css (--cg-*). Aquí no se
   define ni un color suelto: todo sale de los tokens, para
   que un cambio de marca alcance también a esta sección.

   La documentación pública usa layouts.guest, que NO carga
   copilot-ui.css: por eso este fichero es autosuficiente y
   no depende de ninguna clase de allí.
   ========================================================== */

/* ── Cabecera de página ──────────────────────────────────── */
.cg-api-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cg-space-6);
    flex-wrap: wrap;
    margin-bottom: var(--cg-space-8);
}
/* 🚨 EL COLOR SALE DE UN TOKEN, NO DE UN HEXADECIMAL A MANO. Aquí había
   `var(--cg-amber-dark, #b8811f)`, y `--cg-amber-dark` NO EXISTE en
   `design-tokens.css`: se aplicaba siempre el literal, o sea un color suelto en un
   fichero cuya cabecera promete lo contrario, fuera del alcance de un cambio de
   marca. Y daba 3,13:1 sobre el fondo del panel, por debajo del mínimo AA para un
   texto de 11 px. `--cg-slate-600` da 7,4:1 y es del sistema. */
.cg-api-eyebrow {
    font-family: var(--cg-font-body);
    font-size: var(--cg-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--cg-tracking-widest);
    color: var(--cg-slate-600);
    margin: 0 0 var(--cg-space-2);
}

/* Cupo de claves del plan, junto al botón de crear. */
.cg-api-head-accion { text-align: right; }
.cg-api-cupo {
    font-size: var(--cg-text-sm);
    color: var(--cg-text-secondary);
    margin: var(--cg-space-2) 0 0;
}
.cg-api-title {
    font-family: var(--cg-font-display);
    font-size: var(--cg-text-4xl);
    font-weight: 400;
    line-height: var(--cg-leading-tight);
    letter-spacing: var(--cg-tracking-tight);
    color: var(--cg-text-primary);
    margin: 0;
}
.cg-api-sub {
    font-size: var(--cg-text-md);
    line-height: var(--cg-leading-relaxed);
    color: var(--cg-text-secondary);
    max-width: 60ch;
    margin: var(--cg-space-3) 0 0;
}

/* ── Superficies ─────────────────────────────────────────── */
.cg-api-panel {
    background: var(--cg-bg-card);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);
    box-shadow: var(--cg-shadow-card);
    margin-bottom: var(--cg-space-6);
    overflow: hidden;
}
.cg-api-panel-head {
    padding: var(--cg-space-6) var(--cg-space-7) 0;
}
.cg-api-panel-body { padding: var(--cg-space-6) var(--cg-space-7); }
.cg-api-panel-title {
    font-family: var(--cg-font-body);
    font-size: var(--cg-text-lg);
    font-weight: 600;
    letter-spacing: var(--cg-tracking-tight);
    color: var(--cg-text-primary);
    margin: 0;
}
.cg-api-panel-note {
    font-size: var(--cg-text-base);
    line-height: var(--cg-leading-relaxed);
    color: var(--cg-text-secondary);
    margin: var(--cg-space-2) 0 0;
    max-width: 68ch;
}

/* ── LA FIRMA: la clave se enseña UNA vez ────────────────────
   Es el único momento irreversible de toda la sección, así que
   es lo único que se permite gritar. Fondo navy de marca, la
   clave en monoespaciada grande, y un filo ámbar arriba que la
   separa de todo lo demás de la pantalla.
   ─────────────────────────────────────────────────────────── */
.cg-api-reveal {
    position: relative;
    background: var(--cg-navy);
    border-radius: var(--cg-radius-lg);
    padding: var(--cg-space-7);
    margin-bottom: var(--cg-space-8);
    box-shadow: var(--cg-shadow-lg);
    overflow: hidden;
}
.cg-api-reveal::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--cg-amber) 0%, var(--cg-amber-light) 60%, transparent 100%);
}
.cg-api-reveal-label {
    font-size: var(--cg-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--cg-tracking-widest);
    color: var(--cg-amber);
    margin: 0 0 var(--cg-space-3);
}
.cg-api-reveal-key {
    display: block;
    font-family: var(--cg-font-mono);
    font-size: var(--cg-text-lg);
    line-height: var(--cg-leading-snug);
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(232, 168, 56, 0.28);
    border-radius: var(--cg-radius-md);
    padding: var(--cg-space-4);
    word-break: break-all;
    margin-bottom: var(--cg-space-4);
}
.cg-api-reveal-note {
    font-size: var(--cg-text-base);
    line-height: var(--cg-leading-relaxed);
    color: var(--cg-slate-300);
    margin: 0;
    max-width: 62ch;
}
.cg-api-reveal-actions {
    display: flex;
    gap: var(--cg-space-3);
    align-items: center;
    margin-top: var(--cg-space-5);
    flex-wrap: wrap;
}
/* Aviso de "ya está copiada": texto de estado, sin borde ni fondo, para que no se
   confunda con otro botón al lado del de copiar. */
.cg-api-copiado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cg-text-sm);
    font-weight: 600;
    color: var(--cg-amber-light);
}

/* ── Botones ─────────────────────────────────────────────── */
.cg-api-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cg-space-2);
    font-family: var(--cg-font-body);
    font-size: var(--cg-text-base);
    font-weight: 600;
    line-height: 1;
    padding: 11px 20px;
    border-radius: var(--cg-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--cg-transition-fast), border-color var(--cg-transition-fast), color var(--cg-transition-fast);
}
.cg-api-btn:focus-visible {
    outline: 2px solid var(--cg-amber);
    outline-offset: 2px;
}
.cg-api-btn--primary {
    background: var(--cg-navy);
    color: #fff;
}
.cg-api-btn--primary:hover { background: var(--cg-navy-mid); color: #fff; text-decoration: none; }
.cg-api-btn--amber {
    background: var(--cg-amber);
    color: var(--cg-navy);
}
.cg-api-btn--amber:hover { background: var(--cg-amber-hover); color: var(--cg-navy); text-decoration: none; }
.cg-api-btn--ghost {
    background: transparent;
    color: var(--cg-text-secondary);
    border-color: var(--cg-border);
}
.cg-api-btn--ghost:hover { background: var(--cg-bg-hover); color: var(--cg-text-primary); text-decoration: none; }
.cg-api-btn--ghost-light {
    background: transparent;
    color: var(--cg-slate-300);
    border-color: rgba(255, 255, 255, 0.22);
}
.cg-api-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
.cg-api-btn--danger {
    background: transparent;
    color: var(--cg-red-dark);
    border-color: rgba(220, 38, 38, 0.28);
}
.cg-api-btn--danger:hover { background: var(--cg-red-light); color: var(--cg-red-dark); }
.cg-api-btn--sm { font-size: var(--cg-text-sm); padding: 7px 13px; }

/* ── Avisos EN LÍNEA (nunca flotantes) ───────────────────── */
.cg-api-note {
    display: flex;
    gap: var(--cg-space-4);
    align-items: flex-start;
    border: 1px solid var(--cg-border);
    border-left-width: 3px;
    border-radius: var(--cg-radius-md);
    background: var(--cg-bg-subtle);
    padding: var(--cg-space-4) var(--cg-space-5);
    margin-bottom: var(--cg-space-6);
    font-size: var(--cg-text-base);
    line-height: var(--cg-leading-relaxed);
    color: var(--cg-text-secondary);
}
.cg-api-note strong { color: var(--cg-text-primary); }
.cg-api-note-icon { font-size: 18px; line-height: 1.3; flex-shrink: 0; }
/* 🚨 FONDOS `*-glow` (rgba), NO `*-light` (sólidos). El panel tiene modo oscuro vivo
   —el interruptor está en la barra superior— y las variantes `*-light` son colores
   sólidos que `[data-theme="dark"]` NO redefine, mientras que el texto sí cambia. Con
   `*-light` el titular en negrita del aviso «Presentar modelos ante la AEAT es
   irreversible» quedaba a 1,02:1 en oscuro: literalmente invisible. Los `*-glow` son
   translúcidos y se mezclan con el fondo del tema, que es lo que ya hacen
   `.cg-badge-success` y `.cg-badge-warning` en `copilot-ui.css`. */
.cg-api-note--info   { border-left-color: var(--cg-blue-dark); background: var(--cg-blue-glow); }
.cg-api-note--info   .cg-api-note-icon { color: var(--cg-blue-dark); }
.cg-api-note--warn   { border-left-color: var(--cg-orange-dark); background: var(--cg-orange-glow); }
.cg-api-note--warn   .cg-api-note-icon { color: var(--cg-orange-dark); }
.cg-api-note--danger { border-left-color: var(--cg-red-dark); background: var(--cg-red-glow); }
.cg-api-note--danger .cg-api-note-icon { color: var(--cg-red-dark); }

/* ── LOS DOS CANDADOS ────────────────────────────────────────
   No es decoración: la API decide con estas dos cosas y con
   ninguna más. Por eso se pintan juntas y del mismo tamaño.
   ─────────────────────────────────────────────────────────── */
.cg-api-locks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--cg-space-5);
    margin: var(--cg-space-5) 0 0;
}
.cg-api-lock {
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    padding: var(--cg-space-5);
    background: var(--cg-bg-subtle);
}
.cg-api-lock-label {
    font-size: var(--cg-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--cg-tracking-widest);
    color: var(--cg-text-muted);
    margin: 0 0 var(--cg-space-2);
}
.cg-api-lock-value {
    font-family: var(--cg-font-display);
    font-size: var(--cg-text-2xl);
    line-height: 1;
    color: var(--cg-text-primary);
    margin: 0 0 var(--cg-space-2);
}
.cg-api-lock-desc { font-size: var(--cg-text-sm); color: var(--cg-text-secondary); margin: 0; }

/* ── Tabla ───────────────────────────────────────────────── */
.cg-api-tablewrap { overflow-x: auto; }
.cg-api-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--cg-font-body);
    font-size: var(--cg-text-base);
}
.cg-api-table thead th {
    font-size: var(--cg-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--cg-tracking-wider);
    color: var(--cg-text-muted);
    text-align: left;
    padding: var(--cg-space-3) var(--cg-space-5);
    border-bottom: 1px solid var(--cg-border);
    white-space: nowrap;
    background: var(--cg-bg-subtle);
}
.cg-api-table tbody td {
    padding: var(--cg-space-4) var(--cg-space-5);
    border-bottom: 1px solid var(--cg-border-light);
    color: var(--cg-text-primary);
    vertical-align: middle;
}
.cg-api-table tbody tr:last-child td { border-bottom: 0; }
.cg-api-table tbody tr:hover { background: var(--cg-bg-hover); }
.cg-api-table .is-right { text-align: right; }
/* Los dos controles de la fila, en línea. El <form> de revocar es de bloque y sin esto
   caía debajo del enlace de clientes. ⚠️ El `display:flex` va en un <div> DENTRO de la
   celda, nunca en el <td>: hacerlo en la celda la saca del layout de la tabla, que es
   una trampa ya documentada en este proyecto. */
.cg-api-acciones {
    display: flex;
    gap: var(--cg-space-2);
    justify-content: flex-end;
    align-items: center;
}
.cg-api-nombre { font-weight: 600; }

/* ── Píldoras de estado ──────────────────────────────────── */
.cg-api-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--cg-text-xs);
    font-weight: 600;
    letter-spacing: var(--cg-tracking-wide);
    padding: 4px 10px;
    border-radius: var(--cg-radius-full);
    white-space: nowrap;
}
/* Mismo criterio que los avisos: fondos translúcidos para que el modo oscuro no las
   deje ilegibles. La de «Producción» es la que más importa — es lo único que separa
   una clave real de una de pruebas — y llevaba un `#8a5e0c` fijo que en oscuro caía
   a ~2:1; ahora el texto sale de un token que sí cambia con el tema. */
.cg-api-pill--live    { background: var(--cg-amber-glow-md); color: var(--cg-orange-dark); border: 1px solid var(--cg-amber-glow-md); }
.cg-api-pill--test    { background: var(--cg-bg-hover); color: var(--cg-text-secondary); }
.cg-api-pill--activa  { background: var(--cg-green-glow); color: var(--cg-green-dark); }
.cg-api-pill--revocada{ background: var(--cg-bg-hover); color: var(--cg-text-secondary); }
.cg-api-pill--ok      { background: var(--cg-green-glow); color: var(--cg-green-dark); }
.cg-api-pill--ko      { background: var(--cg-red-glow); color: var(--cg-red-dark); }
.cg-api-pill--aviso   { background: var(--cg-orange-glow); color: var(--cg-orange-dark); }

/* Cero clientes autorizados no es un número: es "no lee nada". */
.cg-api-cero {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cg-red-dark);
    font-weight: 600;
    font-size: var(--cg-text-sm);
}
.cg-api-cero::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cg-red);
    flex-shrink: 0;
}

/* ── Texto de máquina ────────────────────────────────────── */
.cg-api-mono {
    font-family: var(--cg-font-mono);
    font-size: var(--cg-text-sm);
    color: var(--cg-slate-600);
    background: var(--cg-slate-100);
    border-radius: var(--cg-radius-sm);
    padding: 2px 7px;
    white-space: nowrap;
}
.cg-api-mono--plain { background: none; padding: 0; }

/* ── Estado vacío ────────────────────────────────────────── */
.cg-api-empty {
    text-align: center;
    padding: var(--cg-space-16) var(--cg-space-8);
}
.cg-api-empty-icon {
    font-size: 40px;
    color: var(--cg-slate-300);
    margin-bottom: var(--cg-space-4);
    display: block;
}
.cg-api-empty-title {
    font-family: var(--cg-font-display);
    font-size: var(--cg-text-2xl);
    color: var(--cg-text-primary);
    margin: 0 0 var(--cg-space-2);
}
.cg-api-empty-desc {
    font-size: var(--cg-text-base);
    color: var(--cg-text-secondary);
    margin: 0 auto var(--cg-space-6);
    max-width: 48ch;
    line-height: var(--cg-leading-relaxed);
}

/* ── Formulario ──────────────────────────────────────────── */
.cg-api-field { margin-bottom: var(--cg-space-6); }
.cg-api-field:last-child { margin-bottom: 0; }
/* 🚨 `label.` DELANTE, Y NO ES ADORNO. `copilot-ui.css` declara
   `.cg-portal label { font-size:13px; font-weight:500; margin-bottom:6px; … }`, que
   vale (0,1,1), y `<body class="… cg-portal">` alcanza a las tres pantallas del panel.
   Una clase sola vale (0,1,0) y PIERDE, por mucho que esta hoja se cargue después: la
   especificidad decide antes que el orden. Calificando con el tipo subimos a (0,1,1),
   empatamos, y entonces sí gana la que carga después. Sin esto se perdían el tamaño,
   el grosor, el color y el margen de TODAS las etiquetas de la sección — incluido el
   `margin-bottom: 0` con el que se creía arreglada la barra de filtros. */
label.cg-api-label {
    display: block;
    font-size: var(--cg-text-base);
    font-weight: 600;
    color: var(--cg-text-primary);
    margin-bottom: var(--cg-space-2);
}
.cg-api-input,
.cg-api-select {
    width: 100%;
    font-family: var(--cg-font-body);
    font-size: var(--cg-text-base);
    color: var(--cg-text-primary);
    background: var(--cg-bg-input);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    padding: 11px var(--cg-space-4);
    transition: border-color var(--cg-transition-fast), box-shadow var(--cg-transition-fast);
}
.cg-api-input:focus,
.cg-api-select:focus {
    outline: none;
    border-color: var(--cg-amber);
    box-shadow: var(--cg-shadow-glow);
}
.cg-api-help {
    font-size: var(--cg-text-sm);
    color: var(--cg-text-secondary);
    line-height: var(--cg-leading-relaxed);
    margin: var(--cg-space-2) 0 0;
}

/* Enlaces dentro del panel. Sin esto se quedan con el azul del bundle heredado dentro
   de una maqueta navy/ámbar — en `/docs/api` ya estaba resuelto y aquí no. */
.cg-api-enlace {
    color: var(--cg-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}
.cg-api-enlace:hover { color: var(--cg-amber-hover); }

/* Buscador de la lista larga de clientes. */
.cg-api-buscador {
    width: 100%;
    font-family: var(--cg-font-body);
    font-size: var(--cg-text-base);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    padding: 9px var(--cg-space-4);
    margin-bottom: var(--cg-space-3);
    background: var(--cg-bg-input);
    color: var(--cg-text-primary);
}
.cg-api-buscador:focus {
    outline: none;
    border-color: var(--cg-amber);
    box-shadow: var(--cg-shadow-glow);
}

/* Casillas: fila entera pulsable, no solo el cuadradito. */
label.cg-api-check {
    display: flex;
    gap: var(--cg-space-3);
    align-items: flex-start;
    padding: var(--cg-space-3) var(--cg-space-4);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
    margin-bottom: var(--cg-space-2);
    cursor: pointer;
    transition: border-color var(--cg-transition-fast), background var(--cg-transition-fast);
}
.cg-api-check:hover { border-color: var(--cg-slate-300); background: var(--cg-bg-subtle); }
.cg-api-check input { margin-top: 3px; flex-shrink: 0; accent-color: var(--cg-amber); }
.cg-api-check-main { font-size: var(--cg-text-base); color: var(--cg-text-primary); }
.cg-api-check-code {
    display: block;
    font-family: var(--cg-font-mono);
    font-size: var(--cg-text-xs);
    color: var(--cg-text-muted);
    margin-top: 2px;
}
.cg-api-check input:checked ~ .cg-api-check-body .cg-api-check-main { font-weight: 600; }
/* 🚨 SIN `max-height` por defecto. Con un tope y `overflow:auto` el último
   elemento visible se corta por la mitad y nada avisa de que hay más: en la
   pantalla real "Enviar documentos para su digitalización" aparecía rebanado
   contra el aviso de abajo y parecía un fallo de maquetación. Los permisos son
   catorce y caben; el único listado que puede crecer de verdad es el de clientes
   (hasta 500 en Empresa), y ese pide el modificador de abajo. */
.cg-api-checklist { padding-right: var(--cg-space-1); }

/* Listado largo: se acota con borde propio, que ya lo delata como zona con scroll.
   ⚠️ Aquí había además un degradado «para avisar de que hay más», y no podía verse:
   iba de `--cg-bg-card` a transparente SOBRE un panel de ese mismo color (blanco
   sobre blanco), y un `background` se pinta DETRÁS del contenido, así que tampoco
   habría difuminado las casillas. Quitado: lo que avisa de verdad es el borde, la
   barra de desplazamiento y el recuento que la vista pinta debajo. */
.cg-api-checklist--scroll {
    max-height: 420px;
    overflow-y: auto;
    padding: var(--cg-space-2) var(--cg-space-3);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-md);
}
.cg-api-tag-escribe {
    display: inline-block;
    font-size: var(--cg-text-xs);
    font-weight: 700;
    letter-spacing: var(--cg-tracking-wide);
    background: var(--cg-orange-glow);
    color: var(--cg-orange-dark);
    border-radius: var(--cg-radius-full);
    padding: 2px 8px;
    margin-left: var(--cg-space-2);
}

/* `row-reverse`: el marcado pone primero el botón principal (para que el tabulador lo
   alcance antes) y aquí se coloca visualmente a la derecha, que es donde lo espera el
   ojo. En móvil se apila en columna SIN invertir, así que orden visual y orden de
   tabulación coinciden en los dos tamaños. */
/* 🚨 EL BOTÓN PRINCIPAL NO PUEDE QUEDAR DEBAJO DE LA BURBUJA DEL CHAT.
   Medido en producción sobre `.chat-widget-fab`: `position: fixed`, 60x60,
   `right: 37px`, `bottom: 68px` y `z-index: 9998`. Es decir, ocupa los 97 px
   pegados al borde derecho y los 128 px pegados al inferior, y va MUY por encima
   de cualquier cosa de la página.

   Como esta fila de botones es lo último del formulario y va alineada a la
   derecha, al llegar al final de la página caía justo ahí: `elementFromPoint`
   sobre el centro de «Crear clave» devolvía `DIV.chat-widget-fab`, o sea que el
   clic se lo llevaba el chat y el formulario NO se enviaba. Sin ningún error,
   sin ningún aviso: el gestor pulsa, no pasa nada, y vuelve a pulsar.

   Se despeja por los dos ejes, porque con uno solo no basta: el hueco inferior
   evita el solape al llegar abajo del todo, y el derecho evita que el botón
   invada la columna del widget en cualquier posición de scroll. El
   `padding-bottom` anterior (64 px) se quedaba corto frente a los 128 que hacen
   falta. */
.cg-api-form-actions {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: var(--cg-space-3);
    margin-top: var(--cg-space-8);
    /* 128 px que ocupa el widget desde abajo + margen. */
    padding-bottom: 152px;
    /* 97 px que ocupa desde la derecha + margen. */
    padding-right: 116px;
}

/* ── Filtros del registro ────────────────────────────────── */
.cg-api-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--cg-space-4);
}
.cg-api-filter { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
label.cg-api-filter-label {
    font-size: var(--cg-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--cg-tracking-wider);
    color: var(--cg-text-muted);
    margin-bottom: 0;
}
/* 🚨 TODOS los controles de la barra a la MISMA altura. Medido en pantalla: los
   campos daban 45 px, los botones 38 y la casilla quedaba 6 px descolgada, así
   que la fila se leía como tres cosas sueltas en vez de como una banda de
   filtros. El `padding-bottom` mágico que compensaba la casilla se retira: lo
   que alinea es la altura declarada, no un número afinado a ojo. */
.cg-api-filters .cg-api-btn { min-height: 45px; }
/* `label.` obligatorio: son DOS las reglas que le ponen margen inferior a todo
   <label> —`app.css` con `.5rem` y `copilot-ui.css` con `.cg-portal label { 6px }`—
   y la segunda vale (0,1,1). Con la clase sola, este `margin-bottom: 0` perdía y la
   casilla seguía descolgada de la línea de los campos, que es justo lo que el
   comentario anterior daba por resuelto. */
label.cg-api-filter-check {
    display: inline-flex;
    align-items: center;
    gap: var(--cg-space-2);
    min-height: 45px;
    margin-bottom: 0;
    font-size: var(--cg-text-base);
    color: var(--cg-text-primary);
    cursor: pointer;
}
.cg-api-filter-check input { accent-color: var(--cg-amber); }

/* ── Documentación pública (layouts.guest) ───────────────── */
/* 🚨 SUPERFICIE Y COLOR PROPIOS, sin depender de los tokens de TEMA.
   Dos motivos, los dos medidos:
   1. Esta página empuja `design-tokens.css` al layout PÚBLICO, que trae el bloque
      `[data-theme="dark"]`. El interruptor de tema del panel escribe en el mismo
      `localStorage`, así que un gestor con modo oscuro puesto abría la documentación
      —desde el propio menú, «Integraciones → API y desarrolladores → Documentación»—
      y `--cg-text-primary` pasaba a `#f1f5f9`… sobre un fondo que NO cambia, porque
      `app.css` le pone al área pública una textura casi blanca. Texto blanco sobre
      blanco.
   2. Sin `background` propio, el texto se leía encima de esa textura estirada ~4,6×
      (la imagen mide 1080 de alto y la página varios miles), con manchas gigantes
      detrás. El resto de páginas públicas de contenido sí pintan su fondo.
   `--cg-slate-900` no cambia con el tema; `--cg-text-primary` sí. */
.cg-docs {
    /* Los títulos y los enlaces de esta página van en navy, que NO se voltea con el
       tema (`--cg-navy` es `#0c1222` en los dos). Sobre la tarjeta oscura serían
       invisibles, así que el color vive en una variable propia y el modo oscuro solo
       tiene que redefinir ésta y las dos de la tarjeta. */
    --docs-titulo: var(--cg-navy);
    max-width: 860px;
    margin: 0 auto;
    padding: var(--cg-space-16) var(--cg-space-5) var(--cg-space-16);
    background: #fff;
    font-family: var(--cg-font-body);
    font-size: var(--cg-text-md);
    line-height: var(--cg-leading-relaxed);
    color: var(--cg-slate-900);
}

/* 🚨 EN MODO OSCURO ESTA PÁGINA ERA TEXTO BLANCO SOBRE BLANCO.
   El fondo estaba fijado a `#fff` a mano —hace falta: sin él el texto cae sobre la
   textura del layout público estirada varios miles de píxeles— pero el color del texto
   sale de tokens que el tema SÍ voltea, y las cabeceras y los enlaces heredan de otros
   que también. Medido en producción: fondo `rgb(255,255,255)` con texto
   `rgb(226,232,240)`, que son 1,2:1 de contraste. Ilegible.

   Y es la peor página posible para que pase: es la primera que abre un desarrollador
   que llega de fuera, sin cuenta, desde el pie de la web.

   Se pinta la tarjeta oscura cuando el tema lo es, en los dos caminos que el proyecto
   contempla: la preferencia del sistema y el interruptor explícito. El `:not([data-theme
   ="light"])` del primero evita pisar a quien ha elegido claro a propósito. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cg-docs {
        background: var(--cg-bg-card);
        color: var(--cg-text-primary);
        --docs-titulo: var(--cg-text-primary);
    }
}
:root[data-theme="dark"] .cg-docs {
    background: var(--cg-bg-card);
    color: var(--cg-text-primary);
    --docs-titulo: var(--cg-text-primary);
}
.cg-docs-hero { margin-bottom: var(--cg-space-12); }
.cg-docs-h1 {
    font-family: var(--cg-font-display);
    font-size: var(--cg-text-5xl);
    font-weight: 400;
    line-height: var(--cg-leading-tight);
    letter-spacing: var(--cg-tracking-tight);
    margin: var(--cg-space-3) 0 var(--cg-space-4);
    color: var(--docs-titulo);
}
.cg-docs-lead {
    font-size: var(--cg-text-xl);
    line-height: var(--cg-leading-normal);
    color: var(--cg-text-secondary);
    max-width: 58ch;
    margin: 0 0 var(--cg-space-6);
}
.cg-docs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cg-space-3);
    align-items: center;
    font-size: var(--cg-text-sm);
    color: var(--cg-text-secondary);
}
/* Los enlaces de la documentación se tienen que ver COMO enlaces: el bundle
   público los deja del color del texto y en una página de integración el único
   camino a la especificación OpenAPI pasaba desapercibido. */
/* Navy en reposo (17:1) y el ámbar reservado para el hover: `--cg-amber-hover` sobre
   blanco da 2,58:1, muy por debajo del mínimo, y este es el único camino a la
   especificación OpenAPI. El subrayado es lo que los distingue como enlaces. */
.cg-docs a:not(.cg-api-btn) {
    color: var(--docs-titulo);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.cg-docs a:not(.cg-api-btn):hover { color: var(--cg-amber-hover); }
.cg-docs a:focus-visible { outline: 2px solid var(--cg-amber); outline-offset: 2px; }
.cg-docs-h2 {
    font-family: var(--cg-font-display);
    font-size: var(--cg-text-3xl);
    font-weight: 400;
    letter-spacing: var(--cg-tracking-tight);
    color: var(--docs-titulo);
    margin: var(--cg-space-16) 0 var(--cg-space-4);
    padding-top: var(--cg-space-6);
    border-top: 1px solid var(--cg-border);
}
.cg-docs p { max-width: 68ch; }
.cg-docs ul, .cg-docs ol { max-width: 68ch; padding-left: var(--cg-space-6); }
.cg-docs li { margin-bottom: var(--cg-space-2); }

/* 🚨 Los tres selectores de arriba valen (0,1,1) y pisaban a sus modificadores, que
   valen (0,1,0) — el mismo tropiezo que ya hubo con `.cg-docs code`. Aquí no basta el
   orden: hay que calificar. Efectos que se perdían: la frase de entrada corría a 68ch
   en vez de a 58, los tres pasos quedaban sangrados 24 px respecto a los párrafos y a
   los bloques de código, y sus separadores salían descentrados. */
.cg-docs p.cg-docs-lead { max-width: 58ch; }
.cg-docs ol.cg-docs-steps { padding-left: 0; }
.cg-docs li.cg-docs-step { margin-bottom: 0; }
.cg-docs-code {
    font-family: var(--cg-font-mono);
    font-size: var(--cg-text-sm);
    line-height: 1.65;
    color: #e6edf7;
    background: var(--cg-navy);
    border-radius: var(--cg-radius-lg);
    padding: var(--cg-space-5) var(--cg-space-6);
    overflow-x: auto;
    margin: var(--cg-space-5) 0 var(--cg-space-8);
    border: 1px solid var(--cg-navy-light);
}
/* 🚨 ESPECIFICIDAD, no capricho: `.cg-docs code` (la pastilla clara del código
   suelto dentro de un párrafo) y `.cg-docs-code code` valen las DOS (0,1,1), así
   que ganaba la declarada más abajo y las líneas del bloque navy salían con fondo
   claro encima del navy. Se sube a (0,2,1) para que el bloque mande sobre la
   pastilla, en vez de depender del orden del fichero. */
.cg-docs .cg-docs-code code {
    color: inherit;
    background: none;
    padding: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
}
.cg-docs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--cg-text-base);
    margin: var(--cg-space-5) 0 var(--cg-space-8);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-radius-lg);
    overflow: hidden;
}
.cg-docs-table th {
    text-align: left;
    font-size: var(--cg-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--cg-tracking-wider);
    color: var(--cg-text-muted);
    background: var(--cg-bg-subtle);
    padding: var(--cg-space-3) var(--cg-space-4);
    border-bottom: 1px solid var(--cg-border);
}
.cg-docs-table td {
    padding: var(--cg-space-3) var(--cg-space-4);
    border-bottom: 1px solid var(--cg-border-light);
    vertical-align: top;
}
.cg-docs-table tr:last-child td { border-bottom: 0; }
.cg-docs code {
    font-family: var(--cg-font-mono);
    font-size: 0.875em;
    background: var(--cg-slate-100);
    /* `app.css` le pone a todo `code` un `border: 1px solid #ebecf1`. Se anulaban su
       fondo, su radio y su relleno, pero no el borde, así que los códigos en línea de
       la documentación salían con un filete gris alrededor de la pastilla. Dentro de
       un `<pre>` no se veía porque el bundle sí lo quita ahí. */
    border: 0;
    border-radius: var(--cg-radius-sm);
    padding: 2px 6px;
    color: var(--cg-slate-700);
}
.cg-docs-tablewrap { overflow-x: auto; }
.cg-docs-steps { list-style: none; padding: 0; margin: var(--cg-space-5) 0 var(--cg-space-8); counter-reset: paso; }
.cg-docs-step {
    display: flex;
    gap: var(--cg-space-4);
    align-items: flex-start;
    padding: var(--cg-space-4) 0;
    border-bottom: 1px solid var(--cg-border-light);
}
.cg-docs-step:last-child { border-bottom: 0; }
.cg-docs-step::before {
    counter-increment: paso;
    content: counter(paso);
    font-family: var(--cg-font-mono);
    font-size: var(--cg-text-sm);
    font-weight: 700;
    color: var(--cg-amber-hover);
    border: 1px solid var(--cg-amber-glow-md);
    border-radius: 50%;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .cg-api-title { font-size: var(--cg-text-3xl); }
    .cg-api-panel-body, .cg-api-panel-head { padding-left: var(--cg-space-5); padding-right: var(--cg-space-5); }
    .cg-api-reveal { padding: var(--cg-space-5); }
    .cg-api-reveal-key { font-size: var(--cg-text-base); }
    .cg-docs { padding: var(--cg-space-10) var(--cg-space-4); }
    .cg-docs-h1 { font-size: var(--cg-text-4xl); }
    .cg-docs-h2 { font-size: var(--cg-text-2xl); margin-top: var(--cg-space-12); }
    /* En móvil los botones ocupan el ancho completo, así que el hueco de la
       derecha los estrecharía sin motivo: la burbuja del chat ya no puede
       taparlos por el lado, solo por abajo. Ese hueco sí se mantiene. */
    .cg-api-form-actions { flex-direction: column; align-items: stretch; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cg-api-btn, .cg-api-check, .cg-api-input, .cg-api-select { transition: none; }
}