/* ============================================================
   CONECTORES y CONECTAR (Familia Cocuyo, 29-sep-2026)
   ------------------------------------------------------------
   conectores.html: qué es, dónde funciona, cómo conectar en tres
   pasos, el control (ves el coste y confirmas), ideas, «Mis
   conexiones» y preguntas. conectar.html: el consentimiento OAuth.
   Acabado ligero de la familia: superficies en lugar de bordes,
   Geist 500–550 en titulares y la lima solo en la acción principal
   (y en el estado activo). Colores y fuentes SOLO desde tokens.css
   y familia.css (var()). Todo va bajo main, .cn-header, .cn-footer,
   el diálogo o el aviso: nada se filtra a la cabecera ni al pie
   comunes (antes «.cn-page h2» agrandaba los títulos del pie).
   ============================================================ */

.cn-page main [hidden], .cn-dialog [hidden], .cn-toast[hidden] { display: none !important; }
.cn-page main :is(h1, h2, h3, p, ul, ol) { margin: 0; }
.cn-page main :is(a, button, input, summary) { touch-action: manipulation; }
.cn-page main summary:focus-visible { outline: none; box-shadow: var(--anillo-foco); border-radius: var(--f-r-control); }
.cn-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--f-trazo); stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Respaldo sin JavaScript (cabecera y pie propios) ---------- */
.cn-skip { position: fixed; top: -70px; left: 12px; z-index: 20; padding: 12px 16px; border-radius: var(--f-r-pill); background: var(--f-lima); color: var(--f-lima-tinta); }
.cn-skip:focus { top: 12px; }
.cn-header, .cn-footer { width: min(100% - 2 * var(--f-gutter), var(--f-ancho)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--f-e-4); }
.cn-header { min-height: 72px; }
.cn-brand { display: inline-flex; align-items: center; gap: 9px; }
.cn-header-links { display: flex; align-items: center; gap: var(--f-e-5); }
.cn-back { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; color: var(--f-texto-2); }
.cn-back:hover { color: var(--f-texto); }
.cn-footer { flex-wrap: wrap; padding-block: 28px; margin-top: var(--f-e-12); box-shadow: 0 -1px 0 var(--f-linea); font-size: .8125rem; color: var(--f-texto-3); }
.cn-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cn-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Botones propios (mismo lenguaje que .f-btn) ---------- */
.cn-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--f-r-pill); background: var(--f-sup-2); color: var(--f-texto); font: var(--f-peso-ui) .875rem/1.2 var(--f-fuente); text-align: center; text-decoration: none; cursor: pointer; transition: background var(--f-rapido), box-shadow var(--f-rapido); }
.cn-button:hover { background: var(--f-sup-3); }
.cn-button:focus-visible { border-radius: var(--f-r-pill); }
.cn-button:disabled { opacity: .5; cursor: wait; }
.cn-button.cn-primary { background: var(--f-lima); color: var(--f-lima-tinta); }
.cn-button.cn-primary:hover { background: var(--f-lima-hover); box-shadow: var(--f-luz); }
.cn-actions { display: flex; flex-wrap: wrap; gap: var(--f-e-3); align-items: center; }
.cn-small { font-size: var(--f-t-sm); line-height: 1.6; color: var(--f-texto-3); }
.cn-error { color: var(--peligro) !important; }
.cn-page main pre { margin: 0; padding: 14px 16px; border-radius: var(--f-r-control); background: var(--f-sup-2); color: var(--f-texto-2); font: .8125rem/1.7 var(--fuente-mono); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; }

/* ---------- Secciones ---------- */
.cn-seccion { padding-block: 0 clamp(64px, 3rem + 4vw, 128px); }
.cn-seccion--final { padding-bottom: clamp(72px, 3.5rem + 4vw, 144px); }
.cn-cabeza-texto { display: grid; gap: var(--f-e-3); }
.cn-page .f-enlace { min-height: 44px; }
.cn-page .f-acciones .f-btn { --alto: 48px; }

/* Héroe centrado. */
.cn-heroe .f-heroe__contenido { gap: var(--f-e-5); }
.cn-heroe .f-lead { max-width: 54ch; }
.cn-heroe-acciones { justify-content: center; margin-top: var(--f-e-2); }
.cn-heroe + .cn-seccion { padding-top: clamp(24px, 1rem + 2vw, 56px); }

/* Qué es y dónde funciona. */
.cn-donde { list-style: none; padding: 0; display: grid; gap: var(--f-e-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .cn-donde { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-donde-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--f-e-3); padding: var(--f-e-8) var(--f-e-6) var(--f-e-5); border-radius: var(--f-r-media); background: var(--f-sup-1); }
.cn-donde-item .f-h4 { margin-top: var(--f-e-2); }
.cn-donde-item p { color: var(--f-texto-3); font-size: .9375rem; }
.cn-donde-item .f-enlace { margin-top: auto; font-size: .875rem; }

/* ---------- Cómo conectar ---------- */
/* «Cómo conectar» y «Ver los pasos» bajan aquí: que la cabecera fija no tape el título. */
.cn-como { scroll-margin-top: calc(var(--f-alto-cabecera) + env(safe-area-inset-top) + 16px); }
.cn-tabs { display: flex; gap: 4px; padding: 4px; width: max-content; max-width: 100%; border-radius: var(--f-r-pill); background: var(--f-sup-1); overflow-x: auto; scrollbar-width: none; }
.cn-tabs::-webkit-scrollbar { display: none; }
.cn-tabs [role="tab"] { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--f-r-pill); background: transparent; color: var(--f-texto-3); font: var(--f-peso-ui) .9375rem/1 var(--f-fuente); white-space: nowrap; cursor: pointer; transition: color var(--f-rapido), background var(--f-rapido); }
.cn-tabs [role="tab"]:hover { color: var(--f-texto); }
.cn-tabs [role="tab"][aria-selected="true"] { background: var(--f-texto); color: var(--negro-abismo); }
.cn-tabs [role="tab"]:focus-visible { border-radius: var(--f-r-pill); }
/* El título cambia con la pestaña (conectores.js); aquí, en una sola línea. */
.cn-herramienta { margin-top: var(--f-e-8) !important; white-space: normal; }
.cn-panel { margin-top: var(--f-e-4); display: grid; gap: var(--f-e-5); }
.cn-device { display: flex; flex-wrap: wrap; gap: var(--f-e-5); }
.cn-device button { min-height: 44px; padding: 0; border: 0; background: none; color: var(--f-texto-3); font-size: .875rem; font-weight: var(--f-peso-ui); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; }
.cn-device button:hover { color: var(--f-texto); }
.cn-device [aria-pressed="true"] { color: var(--f-texto); box-shadow: inset 0 -2px 0 var(--f-lima); }
.cn-device button:focus-visible { border-radius: var(--f-r-control); }
/* Tres pasos (los escribe conectores.js: artículo, número, título, texto). */
.cn-instructions { display: grid; gap: var(--f-e-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cn-instructions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-step { display: grid; align-content: start; gap: var(--f-e-3); min-width: 0; padding: var(--f-e-6); border-radius: var(--f-r-media); background: var(--f-sup-1); }
.cn-step > span { font: .75rem/1 var(--fuente-mono); color: var(--f-lima); }
.cn-step h3 { font-size: var(--f-t-4); font-weight: var(--f-peso-titulo); line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 6px !important; }
.cn-step p { color: var(--f-texto-3); font-size: .9375rem; }
.cn-step pre { margin-top: var(--f-e-3) !important; }
.cn-conectar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--f-e-3); }
.cn-url { display: flex; align-items: center; gap: var(--f-e-3); min-width: 0; max-width: 100%; padding: 4px 4px 4px 18px; border-radius: var(--f-r-pill); background: var(--f-sup-1); box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); }
.cn-url code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: .875rem/1.4 var(--fuente-mono); color: var(--f-texto); }
.cn-url .cn-button { flex: none; min-height: 40px; background: var(--f-sup-3); }
.cn-page main .cn-url code:focus { outline: none; box-shadow: var(--anillo-foco); border-radius: 4px; }
#cn-client-config:focus { outline: none; box-shadow: var(--anillo-foco); }
.cn-cost-note { margin-top: var(--f-e-6) !important; }

/* Desplegables pequeños (más detalles, instalación manual, clave manual). */
.cn-page main .cn-help, .cn-page main #cn-key-options { border-radius: var(--f-r-tarjeta); }
.cn-page main :is(.cn-help, #cn-key-options) > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .875rem; font-weight: var(--f-peso-ui); color: var(--f-texto-2); cursor: pointer; }
.cn-page main :is(.cn-help, #cn-key-options) > summary::-webkit-details-marker { display: none; }
.cn-page main :is(.cn-help, #cn-key-options) > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--f-medio); }
.cn-page main :is(.cn-help, #cn-key-options)[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.cn-page main :is(.cn-help, #cn-key-options) > summary:hover { color: var(--f-texto); }
.cn-page main .cn-help[open] { padding: 0 var(--f-e-5) var(--f-e-5); background: var(--f-sup-1); }
.cn-page main .cn-help[open] > :not(summary) + :not(summary) { margin-top: var(--f-e-3); }
.cn-page main .cn-help > p { color: var(--f-texto-3); font-size: .875rem; }
.cn-page main .cn-help a:not(.cn-button), .cn-doc-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--f-texto); font-size: .875rem; text-decoration: underline; text-decoration-color: var(--f-linea-fuerte); text-underline-offset: 4px; }
.cn-page main .cn-help a:not(.cn-button):hover { text-decoration-color: currentColor; }
.cn-agent-prompt { font-family: var(--f-fuente) !important; font-size: .9375rem !important; line-height: 1.75 !important; padding: var(--f-e-5) !important; border-radius: var(--f-r-tarjeta) !important; background: var(--f-sup-1) !important; }

/* ---------- Control y seguridad ---------- */
.cn-control { list-style: none; padding: 0; display: grid; gap: var(--f-e-8) var(--f-e-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .cn-control { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cn-control { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cn-control li { display: grid; align-content: start; gap: var(--f-e-3); }
.cn-control .f-h4 { margin-top: var(--f-e-2); }
.cn-control p { color: var(--f-texto-3); font-size: .9375rem; max-width: 34ch; }

/* ---------- Ideas para copiar ---------- */
.cn-example-grid { display: grid; gap: var(--f-e-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .cn-example-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-example-grid article { display: flex; flex-direction: column; align-items: flex-start; gap: var(--f-e-3); padding: var(--f-e-6); border-radius: var(--f-r-media); background: var(--f-sup-1); }
.cn-example-grid .f-h4 { margin-top: var(--f-e-2); }
.cn-example-grid p { color: var(--f-texto-2); font-size: .9375rem; line-height: 1.6; }
.cn-example-grid p::before { content: "«"; }
.cn-example-grid p::after { content: "»"; }
.cn-example-grid .cn-button { margin-top: auto; }

/* ---------- Mis conexiones (gestión real de la cuenta) ---------- */
.cn-account { border-radius: var(--f-r-media); background: var(--f-sup-1); scroll-margin-top: calc(var(--f-alto-cabecera) + 24px); }
.cn-account-summary { list-style: none; display: flex; align-items: center; gap: var(--f-e-4); min-height: 76px; padding: 0 var(--f-e-6); cursor: pointer; font-size: var(--f-t-4); font-weight: var(--f-peso-titulo); }
.cn-account-summary::-webkit-details-marker { display: none; }
.cn-account-summary > span:first-child { flex: 1; }
.cn-account-summary .cn-small { font-weight: var(--f-peso-cuerpo); }
.cn-account-summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--f-texto-3); border-bottom: 1.5px solid var(--f-texto-3); transform: rotate(45deg) translateY(-3px); transition: transform var(--f-medio); }
.cn-account[open] > .cn-account-summary::after { transform: rotate(-135deg) translateY(-2px); }
.cn-page main .cn-account-summary:focus-visible { border-radius: var(--f-r-media); }
.cn-account-content { display: grid; gap: var(--f-e-4); padding: var(--f-e-5) var(--f-e-6) var(--f-e-6); box-shadow: inset 0 1px 0 var(--f-linea); }
.cn-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--f-e-4); }
.cn-section-heading > div { display: grid; gap: var(--f-e-2); }
.cn-account-identity { font-size: .875rem; color: var(--f-texto-2); overflow-wrap: anywhere; }
#cn-account-status:empty { display: none; }
#cn-account-status { font-size: .875rem; color: var(--f-texto-2); }
#cn-login { display: grid; gap: var(--f-e-3); justify-items: start; }
#cn-login p { color: var(--f-texto-2); }
#cn-manager { display: grid; gap: var(--f-e-4); }
.cn-connections { display: grid; }
.cn-connection { display: flex; justify-content: space-between; align-items: center; gap: var(--f-e-4); padding: var(--f-e-4) 0; box-shadow: 0 1px 0 var(--f-linea); }
.cn-connection h3 { font-size: .9375rem; font-weight: var(--f-peso-titulo); overflow-wrap: anywhere; margin-bottom: 2px !important; }
.cn-connection p { font-size: .8125rem; color: var(--f-texto-3); overflow-wrap: anywhere; }
.cn-connection button { flex-shrink: 0; }
.cn-revoked { opacity: .6; }
.cn-key-form { display: grid; gap: var(--f-e-4); padding-top: var(--f-e-4); }
.cn-key-form h3 { font-size: var(--f-t-4); font-weight: var(--f-peso-titulo); }
.cn-form-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--f-e-4); }
.cn-form-row label { display: grid; gap: 6px; font-size: .8125rem; font-weight: var(--f-peso-ui); color: var(--f-texto-2); }
.cn-form-row input { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--f-r-control); border: 1px solid var(--f-linea-fuerte); background: var(--f-sup-2); color: var(--f-texto); font-size: .9375rem; }
.cn-form-row input:focus-visible { border-color: var(--f-lima); box-shadow: 0 0 0 3px var(--f-lima-suave); border-radius: var(--f-r-control); }
.cn-form-row input:disabled { opacity: .45; }
.cn-check { display: flex; gap: 11px; align-items: flex-start; min-height: 44px; padding-top: 10px; font-size: .9375rem; color: var(--f-texto-2); cursor: pointer; }
.cn-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--f-lima); }
.cn-key-form .cn-button { justify-self: start; }

/* ---------- Preguntas ---------- */
.cn-faq-rejilla { display: grid; gap: var(--f-e-6); }
@media (min-width: 960px) { .cn-faq-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: var(--f-e-12); align-items: start; } }
.cn-faq summary { padding-block: 12px; }
.cn-faq summary:focus-visible { border-radius: var(--f-r-control); }

/* ---------- Clave recién creada y avisos ---------- */
.cn-dialog { max-width: 520px; width: calc(100vw - 32px); padding: var(--f-e-8); border: 0; border-radius: var(--f-r-media); background: var(--f-sup-2); color: var(--f-texto); font-family: var(--f-fuente); box-shadow: var(--f-sombra-menu); }
.cn-dialog::backdrop { background: color-mix(in srgb, var(--negro-abismo) 80%, transparent); backdrop-filter: blur(5px); }
.cn-dialog h2 { margin: 0 0 var(--f-e-3); font-size: var(--f-t-3); font-weight: var(--f-peso-titulo); letter-spacing: -0.015em; }
.cn-dialog p { margin: 0 0 var(--f-e-4); font-size: .875rem; color: var(--f-texto-2); }
.cn-dialog pre { margin: 0 0 var(--f-e-4); padding: 14px; border-radius: var(--f-r-control); background: var(--f-sup-1); font: .8125rem/1.7 var(--fuente-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.cn-dialog-close { position: absolute; right: 12px; top: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--f-texto-2); font-size: 24px; cursor: pointer; }
.cn-dialog-close:hover { background: var(--f-sup-3); color: var(--f-texto); }
.cn-dialog-close:focus-visible { border-radius: 50%; }
.cn-dialog > form:last-child { display: inline-block; margin-left: 8px; }
.cn-toast { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: var(--f-r-pill); background: var(--f-texto); color: var(--negro-abismo); font: var(--f-peso-ui) .875rem/1.4 var(--f-fuente); text-align: center; box-shadow: var(--f-sombra-menu); }

/* ---------- conectar.html: consentimiento ---------- */
.cn-consent main { width: min(100% - 2 * var(--f-gutter), 640px); margin-inline: auto; padding-block: clamp(48px, 3rem + 3vw, 104px); display: grid; gap: var(--f-e-4); }
.cn-consent main > .f-h1 { font-size: var(--f-t-2); }
.cn-consent .cn-lead { font-size: 1.0625rem; }
#cn-consent-status:empty { display: none; }
#cn-consent-status { color: var(--f-texto-2); }
#cn-consent-login { display: grid; gap: var(--f-e-3); justify-items: start; }
.cn-install { display: grid; gap: var(--f-e-4); margin-top: var(--f-e-4); padding: clamp(20px, 1rem + 1.5vw, 32px); border-radius: var(--f-r-media); background: var(--f-sup-1); }
.cn-permission-list { list-style: none; padding: 0 !important; display: grid; gap: var(--f-e-3); color: var(--f-texto-2); font-size: .9375rem; }
.cn-permission-list li { position: relative; padding-left: 20px; }
.cn-permission-list li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--f-texto-3); }
#cn-consent-form { display: grid; gap: var(--f-e-3); }
.cn-consent .cn-form-row { grid-template-columns: minmax(0, 1fr); }
.cn-consent .cn-actions { margin-top: var(--f-e-3); }

/* ---------- Móvil ---------- */
@media (max-width: 600px) {
  .cn-conectar { flex-direction: column; align-items: stretch; }
  .cn-url { justify-content: space-between; }
  .cn-connect-actions .cn-button { flex: 1 1 auto; }
  .cn-tabs [role="tab"] { padding: 0 11px; font-size: .875rem; }
  .cn-account-summary { padding-inline: var(--f-e-5); }
  .cn-account-summary .cn-small { display: none; }
  .cn-account-content { padding-inline: var(--f-e-5); }
  .cn-section-heading { align-items: flex-start; }
  .cn-connection { align-items: flex-start; flex-direction: column; }
  .cn-form-row { grid-template-columns: minmax(0, 1fr); }
  .cn-dialog { padding: var(--f-e-6) var(--f-e-5); }
  .cn-heroe-acciones .f-btn { flex: 1 1 auto; }
}
@media (max-width: 360px) { .cn-tabs [role="tab"] { padding: 0 8px; } }

@media (prefers-reduced-motion: reduce) {
  .cn-button, .cn-tabs [role="tab"], .cn-account-summary::after, .cn-page main summary::after { transition: none; }
}

/* Conectores: pestañas y marcas dentro de Cocuyo Metal. No afecta OAuth,
   la cabecera, el pie ni otras páginas que comparten este archivo. */
.cn-display .cn-heroe { padding-block: 40px 54px; }
.cn-display .cn-heroe .f-heroe__contenido { max-width: 1000px; gap: 0; }
.cn-display .cn-tabs { justify-self: center; margin-bottom: 66px; padding: 4px; background: var(--f-sup-2); }
.cn-display .cn-tabs [role="tab"] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 0 16px; font-size: .875rem; }
.cn-display .cn-tabs [role="tab"][aria-selected="true"] { background: var(--f-texto); color: var(--negro-abismo); }
.cn-display .cn-client-icon { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; mask: var(--cn-icon) center / contain no-repeat; -webkit-mask: var(--cn-icon) center / contain no-repeat; }
.cn-display .cn-icon--claude { --cn-icon: url('../brand/conectores/claude.svg'); }
.cn-display .cn-icon--chatgpt, .cn-display .cn-icon--codex { --cn-icon: url('../brand/conectores/openai.svg'); }
.cn-display .cn-icon--cli { --cn-icon: url('../brand/conectores/cli.svg'); }
.cn-display .cn-icon--cursor { background: url('../brand/conectores/cursor.svg') center / contain no-repeat; mask: none; -webkit-mask: none; }
.cn-display .cn-icon--cocuyo { background: url('../brand/cocuyo-20260922/favicon.svg') center / contain no-repeat; mask: none; -webkit-mask: none; }
.cn-display .cn-display-title { font-size: clamp(2rem, 1.5rem + 2.3vw, 3.5rem); line-height: 1.16; }
.cn-display .cn-title-first { display: block; }
.cn-display .cn-title-second { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .22em; margin-top: 8px; }
.cn-display .cn-title-agent { display: inline-flex; align-items: center; gap: .2em; white-space: nowrap; }
.cn-display .cn-client-tile, .cn-display .cn-cocuyo-tile { display: inline-flex; align-items: center; justify-content: center; width: .95em; height: .95em; flex: none; border-radius: .24em; background: var(--f-sup-3); }
.cn-display .cn-client-tile .cn-client-icon { width: .65em; height: .65em; }
.cn-display .cn-cocuyo-tile { background: transparent; }
.cn-display .cn-cocuyo-tile .cn-client-icon { width: .95em; height: .95em; }
.cn-display .cn-heroe-acciones { margin-top: 28px; gap: 10px; }
.cn-display .cn-heroe-acciones .cn-button { min-height: 48px; padding-inline: 20px; border-radius: var(--f-r-control); }
.cn-display .cn-hero-url { justify-self: center; margin-top: 14px; padding: 0; gap: 0; background: transparent; box-shadow: none; }
.cn-display .cn-hero-url code { color: var(--f-texto-3); font-size: .8125rem; }
.cn-display .cn-hero-url .cn-copy-link { width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--f-texto-3); }
.cn-display .cn-hero-url .cn-copy-link:hover { color: var(--f-texto); background: var(--f-sup-2); }
.cn-display .cn-hero-note { font-size: .75rem; }
.cn-display .cn-hero-manage { display: inline-flex; align-items: center; justify-self: center; min-height: 44px; margin-top: 6px; color: var(--f-texto-2); font-size: .8125rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--f-linea-fuerte); }
.cn-display .cn-hero-manage:hover { color: var(--f-texto); }
.cn-display .cn-heroe + .cn-examples { padding-top: 0; }
.cn-display .cn-examples .f-cabeza-seccion { margin-bottom: 24px; }
.cn-display .cn-examples .f-h2 { font-size: var(--f-t-3); }
.cn-display .cn-examples .f-lead { font-size: .9375rem; }
.cn-display .cn-ideas-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cn-display .cn-idea-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.cn-display .cn-idea-filters button { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--f-r-pill); background: transparent; color: var(--f-texto-3); font: var(--f-peso-ui) .875rem/1.2 var(--f-fuente); cursor: pointer; }
.cn-display .cn-idea-filters button[aria-pressed="true"] { background: var(--f-sup-3); color: var(--f-texto); }
.cn-display .cn-idea-filters button:hover { color: var(--f-texto); }
.cn-display .cn-idea-search { display: flex; align-items: center; gap: 9px; width: 240px; max-width: 100%; padding: 0 14px; border-radius: var(--f-r-control); background: var(--f-sup-2); color: var(--f-texto-3); }
.cn-display .cn-idea-search input { min-width: 0; width: 100%; min-height: 44px; border: 0; background: transparent; color: var(--f-texto); font: .875rem/1.2 var(--f-fuente); }
.cn-display .cn-idea-search input::placeholder { color: var(--f-texto-3); opacity: 1; }
.cn-display .cn-idea-search:focus-within { box-shadow: var(--anillo-foco); }
.cn-display .cn-idea-search input:focus-visible { outline: none; box-shadow: none; }
.cn-display .cn-example-grid article { min-width: 0; border-radius: var(--f-r-tarjeta); }
.cn-display .cn-example-grid .cn-button { min-height: 44px; }
.cn-display .cn-ideas-empty { padding-block: 24px; }
@media (max-width: 600px) {
  .cn-display .cn-heroe { padding-block: 28px 38px; }
  .cn-display .cn-tabs { margin-bottom: 38px; justify-self: stretch; width: 100%; }
  .cn-display .cn-tabs [role="tab"] { min-height: 44px; padding-inline: 12px; }
  .cn-display .cn-tabs .cn-client-icon { width: 17px; height: 17px; }
  .cn-display .cn-display-title { font-size: clamp(1.7rem, 6.8vw, 2.3rem); }
  .cn-display .cn-title-second { row-gap: 6px; }
  .cn-display .cn-heroe-acciones { width: 100%; gap: 8px; margin-top: 24px; }
  .cn-display .cn-heroe-acciones .cn-button { padding-inline: 12px; font-size: .8125rem; }
  .cn-display .cn-ideas-bar { align-items: stretch; flex-direction: column; gap: 10px; }
  .cn-display .cn-idea-search { width: 100%; }
  .cn-display .cn-idea-filters button { padding-inline: 10px; font-size: .8125rem; }
}

/* Pantallas táctiles: el buscador de ideas y los campos del formulario de
   clave (nombre y límite diario) a 16 px, para que el iPhone no amplíe la
   página al tocarlos (auditoría móvil C4, oct-2026). */
@media (pointer: coarse) {
  .cn-display .cn-idea-search input { font-size: 1rem; }
  .cn-form-row input { font-size: 1rem; }
}