/* conectar.css — La página que explica cómo enchufar el MCP a un asistente.

   Lo que se copia tiene que verse copiable de lejos: si la persona no
   distingue el bloque del texto, acaba seleccionando a mano y se le va media
   URL. */

/* La regla de prosa.css para <code> gana por especificidad y le mete su fondo
   y su relleno al bloque. Se califica con .ta-prosa para ganarle, y de paso
   queda claro que la colisión es conocida y no un accidente. */
.ta-prosa .ta-copiable {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-block: var(--esp-4);
    border: 1px solid var(--ta-borde);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--ta-carbon);
}

.ta-prosa .ta-copiable__texto {
    flex: 1;
    min-width: 0;
    padding: var(--esp-3) var(--esp-4);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--txt-sm);
    color: var(--ta-crema);
    background: transparent;
    border-radius: 0;
    padding-block: var(--esp-3);
    padding-inline: var(--esp-4);
    /* Una URL larga en un celular: que se desplace sola en vez de empujar la
       página entera a lo ancho. */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.ta-prosa .ta-copiable__boton {
    flex-shrink: 0;
    padding-inline: var(--esp-4);
    border: 0;
    border-inline-start: 1px solid rgba(255, 251, 245, .15);
    background: var(--ta-naranja);
    color: var(--ta-texto-invertido);
    font-family: var(--ta-fuente-texto);
    font-size: var(--txt-sm);
    font-weight: var(--peso-semi);
    cursor: pointer;
    transition: background var(--trans);
}

.ta-copiable__boton:hover,
.ta-copiable__boton:focus-visible {
    background: var(--ta-naranja-honda);
}

.ta-copiable__boton[data-copiado="true"] {
    background: var(--ta-verde);
}

/* Los pasos numerados. */
.ta-pasos {
    counter-reset: paso;
    list-style: none;
    padding: 0;
    margin-block-start: var(--esp-4);
}

.ta-pasos > li {
    counter-increment: paso;
    position: relative;
    padding-inline-start: var(--esp-7);
    margin-block-start: var(--esp-4);
}

.ta-pasos > li::before {
    content: counter(paso);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--radio-full);
    background: var(--ta-naranja);
    color: var(--ta-texto-invertido);
    font-weight: var(--peso-negro);
    font-size: var(--txt-sm);
}

/* Los ejemplos de qué preguntarle. */
.ta-ejemplos {
    display: grid;
    gap: var(--esp-3);
    margin-block-start: var(--esp-4);
    padding: 0;
    list-style: none;
}

.ta-ejemplos li {
    padding: var(--esp-3) var(--esp-4);
    border-inline-start: 3px solid var(--ta-amarillo);
    background: var(--ta-arena);
    border-radius: 0 var(--radio) var(--radio) 0;
    font-style: italic;
}