/* Componente: Chat — el asistente del Observatorio. */
.chat {
    display: grid;
    grid-template-columns: 17rem 1fr;
    height: calc(100vh - var(--alto-cabecera, 7rem));
    height: calc(100svh - var(--alto-cabecera, 7rem));
    max-width: 76rem;
    margin: 0 auto;
    min-height: 0;
    position: relative;
}

.chat-principal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    min-height: 0;

    position: relative;
}

.chat:has(.chat-lateral[hidden]) {
    grid-template-columns: 1fr;
}


/* ---------- el panel de conversaciones ---------- */

.chat-lateral {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--borde);
    padding: 1rem 0.75rem;
    gap: 0.75rem;
}

.chat-lateral-cabeza {
    flex: 0 0 auto;
}

.chat-nueva {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    font: 500 var(--t-sm) / 1.2 var(--sans);
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    cursor: pointer;
    text-align: left;
}

.chat-nueva:hover {
    background: var(--marca-claro);
    border-color: var(--marca-borde);
    color: var(--marca);
}

.chat-lista {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.chat-lista-vacia {
    padding: 0.75rem 0.6rem;
    font: 400 var(--t-xs) / 1.5 var(--sans);
    color: var(--tinta-tenue);
}

.chat-lista-grupo {
    padding: 0.85rem 0.6rem 0.3rem;
    font: 600 var(--t-xs) / 1.2 var(--sans);
    color: var(--tinta-tenue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: var(--radio-sm);
    padding-right: 0.2rem;
}

.chat-item:hover {
    background: var(--marca-claro);
}

.chat-item-activo {
    background: var(--marca-claro);
}

.chat-item-activo .chat-item-abrir {
    color: var(--marca);
    font-weight: 600;
}

.chat-item-abrir {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.35rem 0.5rem 0.6rem;
    font: 400 var(--t-sm) / 1.35 var(--sans);
    color: var(--tinta-media);
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-item-accion {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    font-size: var(--t-xs);
    color: var(--tinta-tenue);
    background: none;
    border: 0;
    border-radius: var(--radio-sm);
    cursor: pointer;
    opacity: 0;
}

.chat-item:hover .chat-item-accion,
.chat-item-accion:focus-visible {
    opacity: 1;
}

.chat-item-accion:hover {
    color: var(--tinta);
    background: var(--superficie);
}

.chat-item-renombrar {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0.25rem 0.35rem;
    padding: 0.35rem 0.5rem;
    font: 400 var(--t-sm) / 1.3 var(--sans);
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--marca-borde);
    border-radius: var(--radio-sm);
}

/* ---------- quien ha entrado ---------- */

.chat-cuenta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.5rem 0.2rem;
    border-top: 1px solid var(--borde);
    font: 400 var(--t-xs) / 1.3 var(--sans);
    color: var(--tinta-media);
}

.chat-cuenta-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 2.125rem;
    height: 2.125rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--marca);
    overflow: hidden;
}

.chat-cuenta-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.chat-cuenta-inicial {
    font: 700 var(--t-sm) / 1 var(--sans);
    color: #fff;
    text-transform: uppercase;
}

.chat-cuenta-nombre {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- el panel en pantalla estrecha ---------- */

.chat-abrir-lateral {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 3;
    width: 2.2rem;
    height: 2.2rem;
    display: none;
    place-items: center;
    color: var(--tinta-media);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    cursor: pointer;
}

.chat-velo {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgb(0 0 0 / 0.25);
    border: 0;
    cursor: pointer;
}

@media (max-width: 60rem) {
    .chat,
    .chat:has(.chat-lateral[hidden]) {
        grid-template-columns: 1fr;
    }

    .chat-abrir-lateral:not([hidden]) {
        display: grid;
    }

    .chat-lateral {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 5;
        width: 17rem;
        max-width: 82vw;
        background: var(--fondo);
        border-right: 1px solid var(--borde-fuerte);
        transform: translateX(-102%);
        transition: transform 0.18s ease-out;
    }

    .chat-lateral-abierto {
        transform: none;
    }

    .chat-principal {
        padding-top: 2.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-lateral {
        transition: none;
    }
}


.chat-sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ---------- el hilo ---------- */

.chat-hilo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.chat-inicio {
    margin: auto 0;
    text-align: center;
    padding: 1rem 0;
}

.chat-inicio-marca {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--marca-claro);
    color: var(--marca);
    font-size: 1.25rem;
}
.chat-inicio-titulo {
    font-size: var(--t-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.6rem;
    color: var(--tinta);
}
.chat-inicio-bajada {
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--tinta-suave);
    margin: 0 auto 1.5rem;
    max-width: 30rem;
}

.chat-sugerencias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    text-align: left;
}
.chat-sugerencia {
    font-family: var(--sans);
    font-size: var(--t-xs);
    line-height: 1.35;
    color: var(--tinta-media);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    padding: 0.7rem 0.8rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, color 0.15s;
}
.chat-sugerencia:hover {
    border-color: var(--marca);
    color: var(--marca);
}
.chat-sugerencia:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }


/* ---------- los mensajes ---------- */

.chat-msj {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}
.chat-msj-yo { align-self: flex-end; align-items: flex-end; }
.chat-msj-el { align-self: flex-start; align-items: flex-start; max-width: 100%; }

.chat-burbuja {
    font-size: var(--t-sm);
    line-height: 1.55;
    white-space: pre-wrap;      /* respeta los saltos que escribio la persona */
    overflow-wrap: anywhere;    /* una URL larga no ensancha la burbuja */
}
.chat-msj-yo .chat-burbuja {
    background: var(--marca);
    color: #fff;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radio) var(--radio) 0.25rem var(--radio);
}
.chat-msj-el .chat-burbuja { color: var(--tinta); }

.chat-quien {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    margin-bottom: 0.3rem;
    padding: 0 0.15rem;
}

/* ---------- el texto de la respuesta ---------- */

.chat-parrafo { margin: 0 0 0.6rem; }
.chat-parrafo:last-child { margin-bottom: 0; }

.chat-cita {
    margin: 0 0 0.7rem;
    padding: 0.15rem 0 0.15rem 0.85rem;
    border-left: 3px solid var(--marca-borde);
    background: var(--marca-claro);
    border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
}

.chat-cita p {
    margin: 0;
    padding: 0.35rem 0.6rem 0.35rem 0;
    font-style: italic;
    line-height: 1.55;
    color: var(--tinta);
}

.chat-cita cite {
    display: block;
    padding: 0 0.6rem 0.35rem 0;
    font-size: var(--t-xs);
    font-style: normal;
    color: var(--tinta-media);
}

.chat-puntos { display: inline-flex; gap: 0.25rem; padding: 0.4rem 0; }
.chat-puntos i {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--tinta-tenue);
    animation: chat-latido 1.2s infinite ease-in-out;
}
.chat-puntos i:nth-child(2) { animation-delay: 0.15s; }
.chat-puntos i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-latido {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-2px); }
}


/* ---------- el redactor ---------- */

.chat-redactor {
    flex: 0 0 auto;
    padding: 0.5rem 0 0.9rem;
    background: var(--fondo);
}
.chat-forma {
    display: flex;
    flex-wrap: wrap;            /* para que el aviso de caracteres baje solo */
    align-items: flex-end;
    gap: 0.5rem;
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    padding: 0.45rem 0.45rem 0.45rem 0.9rem;
    transition: border-color 0.15s;
}
.chat-forma:focus-within { border-color: var(--marca); }

.chat-texto {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    resize: none;               /* el alto lo lleva el JS segun lo escrito */
    background: none;
    font-family: var(--sans);
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--tinta);
    padding: 0.35rem 0;
    max-height: 9rem;           /* a partir de aqui se desplaza por dentro */
    overflow-y: auto;
}
.chat-texto::placeholder { color: var(--tinta-tenue); }

.chat-enviar {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--marca);
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    transition: opacity 0.15s;
}
.chat-enviar:disabled { opacity: 0.3; cursor: default; }
.chat-enviar:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.chat-nota {
    font-size: 0.6rem;
    line-height: 1.4;
    color: var(--tinta-tenue);
    text-align: center;
    margin: 0.5rem 0 0;
}


@media (prefers-reduced-motion: reduce) {
    .chat-puntos i { animation: none; opacity: 0.5; }
}

@media (max-width: 760px) {
    .chat { padding: 0 1rem; }
    .chat-hilo { padding-top: 1rem; gap: 0.9rem; }

    .chat-sugerencias { grid-template-columns: 1fr; }

    .chat-inicio-titulo { font-size: var(--t-lg); }
    .chat-msj { max-width: 92%; }
}

.chat-fuentes {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
}

.chat-fuente {
    display: inline-block;
    padding: .15rem .5rem;
    border: 1px solid var(--marca-borde);
    border-radius: 999px;
    background: var(--marca-claro);
    color: var(--marca);
    font-size: .74rem;
    line-height: 1.5;
    text-decoration: none;
}

a.chat-fuente:hover,
a.chat-fuente:focus-visible {
    background: var(--marca);
    color: #fff;
    border-color: var(--marca);
}


/* La puerta: el bloque de identificarse.
 *
 * ---- Por que lleva min-height y overflow ----
 *
 * Esta pagina no se desplaza: body es overflow:hidden y el chat mide justo
 * 100svh menos la cabecera. Todo lo que no quepa dentro NO se puede alcanzar de
 * ninguna manera, porque no hay barra que mover.
 *
 * Y un elemento flexible no encoge por su cuenta: min-height vale "auto" por
 * defecto, que en una columna significa "nunca menos que mi contenido". Asi
 * que en una pantalla baja --un movil con la cabecera y el menu ocupando
 * arriba-- la puerta se quedaba a su alto entero, se salia por debajo del
 * chat, y los botones de entrar caian fuera de la pantalla. Se veian a medias
 * y no habia forma de pulsarlos.
 *
 * min-height:0 le deja encoger y overflow-y:auto pone una barra DENTRO de la
 * puerta. Entre las dos, los botones siempre se pueden alcanzar, por baja que
 * sea la pantalla. */
.chat-puerta {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 1.75rem;
    background: var(--superficie);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -8px 20px -14px rgba(0, 0, 0, 0.3);

    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Y que el sitio lo gane la puerta, no el hilo.
 *
 * Con la puerta a la vista no hay sesion, asi que el hilo es solo el saludo y
 * las sugerencias: si hay que apretar a alguien, que sea a el. Con basis 0 el
 * hilo reparte en proporcion en vez de reclamar el alto de su contenido. */
.chat-principal:has(.chat-puerta:not([hidden])) .chat-hilo {
    flex: 1 1 0;
}

.chat-puerta-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    max-width: 32rem;
    text-align: center;
}

.chat-puerta-titulo {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--tinta);
}

.chat-puerta-texto {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--tinta-suave);
}

.chat-puerta-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: 9999px;
    background: #fff;
    color: #1f1f1f;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-puerta-boton:hover { border-color: #9aa0a6; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); }
.chat-puerta-boton:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.chat-puerta-boton:disabled { opacity: 0.55; cursor: wait; }
.chat-puerta-g { display: inline-flex; align-items: center; }

.chat-puerta-nota {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--t-xs);
    line-height: 1.45;
    color: var(--tinta-tenue);
}

.chat-cupo {
    margin: 0 0 0.35rem;
    font-family: var(--sans);
    font-size: var(--t-xs);
    color: var(--tinta-tenue);
    text-align: right;
}
.chat-cupo-agotado { color: var(--marca); font-weight: 600; }

/* ---------- cobertura periodística ---------- */

.chat-relacionadas {
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--borde);
}

.chat-relacionadas-titulo {
    margin: 0 0 .45rem;
    font: 600 var(--t-xs) / 1.3 var(--sans);
    color: var(--tinta-tenue);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.chat-nota {
    display: flex;
    align-items: stretch;
    gap: .6rem;
    margin-bottom: .4rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background: var(--superficie);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

a.chat-nota:hover {
    border-color: var(--marca-borde);
    background: var(--marca-claro);
}

a.chat-nota:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 1px;
}

.chat-nota-foto {
    flex: 0 0 auto;
    width: 4.5rem;
    align-self: stretch;
    object-fit: cover;
    background: var(--marca-claro);
}

.chat-nota-cuerpo {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    padding: .5rem .6rem;
}

.chat-nota-titulo {
    font: 500 var(--t-sm) / 1.35 var(--sans);
    color: var(--tinta);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-nota-pie {
    font: 400 var(--t-xs) / 1.2 var(--sans);
    color: var(--tinta-tenue);
}

@media (max-width: 30rem) {
    .chat-nota-foto { width: 3.5rem; }
}

.chat-microfono {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--tinta-suave);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.chat-microfono:hover:not(:disabled) {
    background: var(--marca-claro);
    border-color: var(--marca-borde);
    color: var(--marca-hondo);
}

.chat-microfono:disabled { cursor: default; opacity: 0.6; }

.chat-microfono-grabando {
    --nivel: 0;

    position: relative;
    overflow: hidden;
    background: var(--superficie);
    border-color: var(--marca);
    color: var(--marca);
}

.chat-microfono-grabando::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--nivel) * 100%);
    background: linear-gradient(to top, #128f46, #35c46e);
    z-index: 0;

    transition: height .06s linear;
}

.chat-microfono-grabando i {
    position: relative;
    z-index: 1;
}

.chat-microfono-grabando[data-alto] i { color: #fff; }

.chat-microfono-grabando:hover {
    border-color: var(--marca-hondo);
}

@media (prefers-reduced-motion: reduce) {
    .chat-microfono-grabando::before {
        height: 45%;
        transition: none;
    }
}

.chat-conversa {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--superficie);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
}

.chat-conversa[hidden] { display: none; }

.chat-conversa-salir {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borde);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--tinta-suave);
    cursor: pointer;
}
.chat-conversa-salir:hover { background: var(--marca-claro); color: var(--marca-hondo); }

.chat-orbe {
    --intensidad: 0;

    position: relative;
    width: 15rem;
    height: 15rem;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.chat-orbe-glow,
.chat-orbe-anillos,
.chat-orbe-onda,
.chat-orbe-nucleo,
.chat-orbe-micro { grid-area: 1 / 1; }

/* ---------- El resplandor ---------- Crece con la intensidad. */
.chat-orbe-glow {
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(182, 28, 28, calc(.20 + var(--intensidad) * .30)) 0%,
        rgba(182, 28, 28, .10) 45%,
        transparent 70%);
    filter: blur(10px);
    transition: background .12s linear;
}

.chat-orbe-anillos {
    width: 15rem;
    height: 15rem;
    pointer-events: none;
}

.chat-orbe-anillo {
    --fuerza: .6;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7rem;
    height: 7rem;
    margin: -3.5rem 0 0 -3.5rem;
    border-radius: 50%;
    border: 2px solid var(--marca);
    opacity: 0;
}

.chat-orbe-anillo-va {
    animation: chat-orbe-expande 1.15s cubic-bezier(.16, .8, .3, 1) forwards;
}

@keyframes chat-orbe-expande {
    0%   { transform: scale(.85); opacity: calc(.55 * var(--fuerza)); }
    100% { transform: scale(calc(1.5 + var(--fuerza) * .5)); opacity: 0; }
}

/* ---------- El contorno ---------- */
.chat-orbe-onda { width: 15rem; height: 15rem; }
.chat-orbe-onda path { stroke: var(--marca); transition: stroke .3s; }

/* ---------- El núcleo ---------- Respira muy poco a propósito. */
.chat-orbe-nucleo {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #e06a6a, var(--marca) 58%, var(--marca-hondo));
    box-shadow: inset 0 -.6rem 1.2rem rgba(0, 0, 0, .18);
    transform: scale(var(--respira, 1));
    transition: transform .09s ease-out, background .3s;
}

.chat-orbe-micro {
    font-size: 2.1rem;
    color: #fff;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}

.chat-orbe[data-estado="idle"] .chat-orbe-glow { filter: blur(14px); }

.chat-orbe[data-estado="listening"] .chat-orbe-nucleo {
    background: radial-gradient(circle at 34% 30%, #4bd88a, #128f46 58%, #0d6b34);
}
.chat-orbe[data-estado="listening"] .chat-orbe-onda path { stroke: #128f46; }
.chat-orbe[data-estado="listening"] .chat-orbe-anillo { border-color: #128f46; }
.chat-orbe[data-estado="listening"] .chat-orbe-micro { opacity: 1; }
.chat-orbe[data-estado="listening"] .chat-orbe-glow {
    background: radial-gradient(circle,
        rgba(18, 143, 70, calc(.20 + var(--intensidad) * .34)) 0%,
        rgba(18, 143, 70, .10) 45%,
        transparent 70%);
}

.chat-orbe[data-estado="thinking"] .chat-orbe-onda {
    animation: chat-orbe-gira 3.2s linear infinite;
}
.chat-orbe[data-estado="thinking"] .chat-orbe-onda path {
    stroke: var(--marca-borde);
    stroke-dasharray: 34 210;
    animation: chat-orbe-late 1.8s ease-in-out infinite;
}
.chat-orbe[data-estado="thinking"] .chat-orbe-nucleo {
    animation: chat-orbe-respira 1.8s ease-in-out infinite;
}

@keyframes chat-orbe-gira  { to { transform: rotate(360deg); } }
@keyframes chat-orbe-late  { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes chat-orbe-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.chat-orbe[data-estado="speaking"] .chat-orbe-onda path { stroke: var(--marca); }

.chat-orbe[data-estado="error"] .chat-orbe-nucleo {
    background: radial-gradient(circle at 34% 30%, #9aa0a6, #6b7075 58%, #4a4e52);
}
.chat-orbe[data-estado="error"] .chat-orbe-onda path {
    stroke: var(--alerta);
    stroke-dasharray: 6 7;
}
.chat-orbe[data-estado="error"] .chat-orbe-glow {
    background: radial-gradient(circle, rgba(168, 27, 31, .28) 0%, rgba(168, 27, 31, .08) 45%, transparent 70%);
}

@media (max-width: 30rem) {
    .chat-orbe, .chat-orbe-onda, .chat-orbe-anillos { width: 12rem; height: 12rem; }
    .chat-orbe-nucleo { width: 5.2rem; height: 5.2rem; }
    .chat-orbe-glow { width: 9rem; height: 9rem; }
    .chat-orbe-micro { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-orbe-anillo,
    .chat-orbe[data-estado="thinking"] .chat-orbe-onda,
    .chat-orbe[data-estado="thinking"] .chat-orbe-onda path,
    .chat-orbe[data-estado="thinking"] .chat-orbe-nucleo { animation: none; }
    .chat-orbe-nucleo { transition: none; }
}

.chat-conversa-estado {
    margin: 0;
    font-weight: 600;
    color: var(--tinta);
}

.chat-conversa-dicho {
    margin: 0;
    max-width: 32rem;
    color: var(--tinta-suave);
    font-style: italic;
    min-height: 1.5em;
}

.chat-conversa-pista {
    margin: 0;
    font-size: .82rem;
    color: var(--tinta-suave);
}

@media (prefers-reduced-motion: reduce) {
}

.chat-leer {
    align-self: flex-start;
    margin-top: .3rem;
    width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borde);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--tinta-suave);
    font-size: .7rem;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s, color .15s, border-color .15s;
}

.chat-msj-el:hover .chat-leer,
.chat-leer:focus-visible { opacity: 1; }

.chat-leer:hover { color: var(--marca-hondo); border-color: var(--marca-borde); }

.chat-leer-activo {
    opacity: 1;
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}
.chat-leer-activo:hover { background: var(--marca-hondo); border-color: var(--marca-hondo); color: #fff; }

/* ---------- Leer siempre ---------- */
.chat-leer-todo {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--tinta-suave);
    font-size: .72rem;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.chat-leer-todo:hover { background: var(--marca-claro); border-color: var(--marca-borde); color: var(--marca-hondo); }

.chat-leer-todo-on {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}
.chat-leer-todo-on:hover { background: var(--marca-hondo); border-color: var(--marca-hondo); color: #fff; }

.chat-conversa-entrar {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--tinta-suave);
    font-size: .75rem;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.chat-conversa-entrar:hover { background: var(--marca-claro); border-color: var(--marca-borde); color: var(--marca-hondo); }

@media (max-width: 30rem) {
    .chat-leer-todo,
    .chat-conversa-entrar,
    .chat-microfono { width: 1.75rem; height: 1.75rem; font-size: .66rem; }
}

.chat-leyendo .chat-pal {
    opacity: 0;
    transition: opacity .14s ease-out;
}

.chat-leyendo .chat-pal-dicha { opacity: 1; }

.chat-pal { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .chat-leyendo .chat-pal { transition: none; }
}


.chat-sub {
    margin: 0;
    width: 100%;
    max-width: 34rem;
    min-height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--tinta);
    padding: 0 .5rem;
}

.chat-sub[hidden] { display: none; }

.chat-confirma {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.chat-confirma[hidden] { display: none; }

.chat-confirma-si,
.chat-confirma-no {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid;
    background: var(--superficie);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.chat-confirma-si { border-color: #128f46; color: #128f46; }
.chat-confirma-si:hover { background: #128f46; color: #fff; }

.chat-confirma-no { border-color: var(--alerta); color: var(--alerta); }
.chat-confirma-no:hover { background: var(--alerta); color: #fff; }

.chat-confirma[data-modo="repasa"] [data-cara="edita"],
.chat-confirma[data-modo="edita"]  [data-cara="repasa"] { display: none; }

.chat-confirma[data-modo="edita"] .chat-confirma-no {
    border-color: var(--borde-fuerte);
    color: var(--tinta-suave);
}
.chat-confirma[data-modo="edita"] .chat-confirma-no:hover {
    background: var(--tinta-suave);
    color: #fff;
}

.chat-conversa-dicho[contenteditable] {
    font-style: normal;
    color: var(--tinta);
    text-align: left;
    background: var(--superficie);
    border: 1px solid var(--marca);
    border-radius: .5rem;
    padding: .5rem .75rem;
    outline: none;
    cursor: text;
    white-space: pre-wrap;
    box-shadow: 0 0 0 3px rgba(182, 28, 28, .12);
}

/* ---------- esqueleto de carga (mientras se resuelve la sesion) ---------- */
.chat-cargando { display: none; }

.chat-esperando .chat-cargando {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    min-height: 60vh;
    padding: 2rem 1rem;
}

/* Mientras carga: solo el esqueleto; el hilo, el redactor y la puerta se ocultan. */
.chat-esperando .chat-hilo,
.chat-esperando .chat-redactor,
.chat-esperando .chat-puerta { display: none; }

.chat-cargando .esq.chat-cargando-marca { width: 3.5rem; height: 3.5rem; border-radius: 50%; margin-bottom: 0.4rem; }
.chat-cargando .esq.chat-cargando-titulo { width: min(24rem, 82%); height: 1.7rem; }
.chat-cargando .esq.chat-cargando-linea { width: min(32rem, 92%); height: 0.95rem; }
.chat-cargando .esq.chat-cargando-linea-corta { width: min(20rem, 62%); }

.chat-cargando-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1rem; }
.chat-cargando .esq.chat-cargando-pill { width: 13rem; max-width: 80vw; height: 2.8rem; border-radius: 999px; }

/* ---------- botones de la puerta: Google + Apple, mismo ancho ---------- */
.chat-puerta-botones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
}

.chat-puerta-boton { min-width: 15rem; justify-content: center; }

/* En pantalla estrecha, uno a cada lado de la misma fila.
 *
 * Apilados no caben: encima llevan el titulo, un parrafo de tres lineas y la
 * nota legal, y en un movil de 360 el segundo boton se quedaba fuera de la
 * pantalla. No es que se viera mal, es que no habia forma de pulsarlo, y como
 * el de la cabecera entraba directo con Google, quien tiene cuenta de Apple se
 * quedaba sin entrar.
 *
 * "Continuar con" se cae: con dos botones repartiendose 360 px menos el
 * espacio entre ellos, lo unico que tiene que leerse es de quien es la cuenta.
 * El texto largo vuelve en cuanto hay sitio. */
@media (max-width: 34rem) {
    /* Y de paso se recorta el acolchado: cada pixel que la puerta deja de
       medir es un pixel que no hay que ir a buscar desplazandose. */
    .chat-puerta { padding: 1rem 0.75rem 1.25rem; }
    .chat-puerta-caja { gap: 0.55rem; }

    .chat-puerta-botones { flex-direction: row; }

    /* flex-basis 0 y no auto: asi los dos miden lo mismo aunque "Google" y
       "Apple" no ocupen igual, que es lo que hace que la fila se vea partida
       por la mitad y no descentrada. */
    .chat-puerta-boton {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .chat-puerta-larga { display: none; }
}

.chat-puerta-apple {
    background: #000;
    border-color: #000;
    color: #fff;
}
.chat-puerta-apple:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.chat-puerta-a { display: inline-flex; align-items: center; margin-top: -2px; }

/* ---------- tablas en la respuesta ----------

   El asistente las usa para los desgloses: que norma pone el dinero, a quien va
   y con cargo a que. Antes solo sabia pintar texto plano, asi que una tabla
   markdown salia con las barras a la vista.

   El marco con scroll propio es lo que impide que una tabla de cuatro columnas
   ensanche la burbuja del chat --que es estrecha por diseno-- y con ella toda la
   conversacion. La tabla se desplaza dentro; el chat no se mueve. */
.chat-tabla-marco {
    overflow-x: auto;
    margin: 0.5rem 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background: var(--superficie);
}

.chat-tabla {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--t-xs);
    line-height: 1.35;
}

.chat-tabla th,
.chat-tabla td {
    padding: 0.4rem 0.55rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--borde);
}

.chat-tabla th {
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    background: var(--fondo);
    white-space: nowrap;
}

.chat-tabla tbody tr:last-child td { border-bottom: none; }

/* Los importes no parten: una cifra cortada entre dos lineas se lee mal y se
   copia peor. Lo demas si puede envolver. */
.chat-tabla td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Los enlaces que el asistente escribe dentro de su respuesta.
   Van subrayados siempre: en una tabla de normas, la unica pista de que el
   nombre lleva al documento es esa. El destino ya se filtro en chat.js. */
.chat-enlace {
    color: var(--marca);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chat-enlace:hover,
.chat-enlace:focus-visible { text-decoration-thickness: 2px; }

/* ---------- la mascota ---------- */

/* La mascota posada en el borde del redactor.
 *
 * Es su sitio durante la conversación: encima del sitio donde se escribe, de pie
 * sobre el borde, como si el redactor fuera el suelo.
 *
 * Va en posición absoluta y NO en el flujo, que es lo que pedía el encargo: así
 * no le quita ni un píxel de ancho a la conversación ni de alto al redactor. El
 * precio es que puede solaparse con el último mensaje cuando el hilo está abajo
 * del todo; por eso es pequeña y no pinta sombra.
 *
 * pointer-events: none para que nunca se coma un clic del botón de enviar ni la
 * selección del texto que tiene detrás. */
.chat-mascota-posada {
    /* ---- Sin alto y en el flujo, a propósito ----
     *
     * Estuvo en posición absoluta y con el alto fijado a 30 px. Se cambió
     * después de verlo en pantalla, y por dos razones:
     *
     * NITIDEZ. Sin `height`, la imagen se dibuja a su tamaño natural —64 px, que
     * es como se guardó— y el navegador no la reescala. Reducirla por CSS a 30
     * la obligaba a un remuestreo que le quitaba definición justo en la cara,
     * que es lo poco que se distingue a ese tamaño.
     *
     * POSADA DE VERDAD. En el flujo ocupa su sitio encima del redactor, y el
     * margen negativo la baja hasta solaparse con él: así se apoya sobre el
     * campo de escribir en vez de flotar por encima. En absoluta quedaba
     * despegada del borde y se leía como una pegatina.
     *
     * El precio, dicho claro: ahora SÍ ocupa espacio en la columna, unos 39 px
     * (64 de alto menos los 25 que sube). Era lo que se quería evitar al
     * principio y se aceptó al verlo, porque el resultado se lee mejor.
     *
     * Va a la izquierda sin pedirlo: el div es un bloque de ancho completo y la
     * imagen, al ser lo primero que hay dentro, empieza donde empieza la línea. */
    width: auto;
    line-height: 0;             /* sin el hueco que deja la línea base */
    margin-bottom: -25px;       /* se mete dentro del redactor hasta apoyarse */

    /* ---- Apoyada por abajo, no colgada por arriba ----
     *
     * Cuatro poses tienen el lienzo mas alto que las demas: al igualar el tamaño
     * del muñeco, la bombilla de la idea y el confeti dejaron de caber en 64 px.
     * Colocando la imagen por arriba, al cambiar a una de esas la mascota
     * bajaria y empujaria el redactor hacia abajo en cada gesto.
     *
     * Anclada abajo, los pies se quedan donde estan y lo que sobresale es el
     * objeto, por encima de la cabeza. El alto es el de siempre --64 del dibujo
     * mas los 12 del relleno del area de toque, que con border-box van dentro--
     * asi que lo que ocupa en la columna no cambia ni un pixel. */
    height: 76px;
    display: flex;
    align-items: flex-end;

    /* ---- Se puede tocar ----
     *
     * El muñeco mide 30 px de alto y en un dedo eso es poco: la recomendacion
     * para un objetivo tactil ronda los 44. Se agranda la ZONA sin agrandar el
     * dibujo, poniendo relleno y descontandolo con margen negativo del mismo
     * tamaño: la caja de toque crece 12 px a lo alto y 20 a lo ancho, y lo que
     * se ve no se mueve ni un pixel.
     *
     * touch-action evita la espera de los 300 ms por si el toque era un doble
     * toque para ampliar; sin ella, la caricia llega tarde y parece que no ha
     * pasado nada. Y no se selecciona, que al mantener el dedo encima un rato
     * el movil ofreceria copiar la imagen. */
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    padding: 6px 10px;
    margin: -6px -10px -31px;   /* el mismo relleno, descontado: no mueve nada */

    /* Sin z-index: aquí no haría nada, porque z-index solo cuenta en elementos
       posicionados y este ya no lo está. Los 25 px que se solapan con el campo
       de escribir quedan DEBAJO de él, que es justo lo que hace que parezca
       apoyada y no pegada encima. Si algún día se quisiera que los pies se vean
       enteros, la línea que falta es `position: relative`. */
}

.chat-mascota-posada[hidden] { display: none; }

.chat-mascota-img {
    /* A su tamaño natural: los 64 px con los que se guardó.
     *
     * No es dejadez, es lo que la mantiene nítida. Cualquier alto en CSS obliga
     * al navegador a remuestrear, y a este tamaño eso se nota enseguida en la
     * cara, que es lo único que se distingue. Los catorce estados se guardaron
     * todos con la misma altura, así que a tamaño natural ya salen iguales sin
     * que haya que forzarlo. */
    height: auto;
    width: auto;
    display: block;
}

/* La mascota grande: la bienvenida y la puerta de identificación.
 *
 * Sustituye al icono redondo que había, así que hereda su hueco pero no su
 * forma: el muñeco tiene brazos y pies y dentro de un círculo de 3rem se veía
 * apretado. */
/* La mascota de la bienvenida.
 *
 * Del mismo alto que la que se posa en el redactor, y pegada al título: no es un
 * emblema encima de una portada, es el mismo muñeco esperando en el sitio donde
 * todavía no hay conversación. Que cambie de tamaño al empezar a hablar lo
 * convertiría en dos cosas distintas.
 *
 * Sin margen abajo y con line-height a cero, que es el hueco fantasma que deja
 * la línea base de una imagen en línea y que separaba sin que nada lo pidiera. */
.chat-inicio-marca {
    /* ---- Alto FIJO, y el muñeco apoyado dentro ----
     *
     * No es un tamaño: es un hueco reservado. Las poses no miden todas lo
     * mismo --64 px las normales, pero 73 la imprenta, 76 el fallo de red, 80
     * el agradecimiento, 82 la sugerencia y 83 el sello-- porque las que
     * llevan algo encima necesitan sitio por arriba.
     *
     * Sin alto fijo, cada cambio de pose cambiaba el alto de la bienvenida, y
     * eso movia la pantalla entera: en el asistente aparecia y desaparecia la
     * barra de desplazamiento a cada gesto. Se veia poco mientras la mascota
     * solo cambiaba al preguntar; desde que piensa en voz alta cada quince
     * segundos, saltaba sola.
     *
     * Con el hueco reservado al alto de la mas alta y la imagen apoyada abajo,
     * los pies caen siempre en la misma linea y nada se mueve. La imagen sigue
     * a su tamaño natural, asi que no pierde nitidez.
     *
     * Si algun dia entra una pose mas alta que 83 px, este numero sube con
     * ella. prueba_tamano_mascota.py lo vigila. */
    height: 5.2rem;          /* 83,2 px: la pose mas alta es el sello, 83 */
    width: auto;
    margin: 0 auto;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    line-height: 0;
    background: none;
    border-radius: 0;
}

/* El hueco de la bienvenida lleva display:flex de su regla original, y eso gana
   al display:none que el navegador aplica a [hidden]. Sin esta linea, esconderlo
   desde el codigo no lo esconde. */
.chat-inicio-marca[hidden] { display: none; }

.chat-mascota-grande {
    height: 100%;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

.chat-puerta-mascota {
    width: 6.5rem;
    height: 6.5rem;
    margin: 0 auto 0.25rem;
    display: block;
}

/* Un guiño al tocarla, para que se note que ha respondido al dedo. */
.chat-mascota-posada:active .chat-mascota-img,
.chat-inicio-marca:active .chat-mascota-img { transform: scale(0.92); }

.chat-mascota-img { transition: transform 0.12s ease-out; }

.chat-inicio-marca {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .chat-mascota-img { transition: none; }
    .chat-mascota-posada:active .chat-mascota-img,
    .chat-inicio-marca:active .chat-mascota-img { transform: none; }
}

@media (max-width: 480px) {
    .chat-puerta-mascota { width: 5rem; height: 5rem; }
}

/* Cuanto queda para el tope de la pregunta.
 *
 * Discreto y pegado al redactor: es una ayuda, no una advertencia. Se pone en
 * rojo solo al llegar al maximo, que es cuando el navegador empieza a rechazar
 * teclas y hace falta explicar por que.
 *
 * Ocupa toda la fila para que no empuje a los botones del redactor: un rotulo
 * que aparece y desaparece los movia de sitio cada vez.
 *
 * OJO: esto llevaba "grid-column: 1 / -1", y .chat-forma NO es una rejilla
 * sino un flex. En flex esa propiedad no hace nada, asi que el aviso se
 * colocaba como un hermano mas A LA DERECHA del campo y le robaba la mitad del
 * ancho justo cuando mas falta hace escribir. Con flex se baja de linea
 * ocupandola entera, y order lo manda al final aunque en el marcado vaya antes
 * que los botones. */
.chat-quedan {
    flex: 1 0 100%;
    order: 99;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--tinta-suave);
    padding: 0 0.25rem;
}

.chat-quedan[hidden] { display: none; }
.chat-quedan-lleno { color: var(--marca); font-weight: 600; }

/* ---------- la nube de la bienvenida ----------
 *
 * El muñeco sigue donde estaba, centrado, y la nube FLOTA sobre él.
 *
 * ---- Por que flota ----
 *
 * Estuvo en el flujo, en una rejilla de tres columnas junto al muñeco. Bastaba
 * con que apareciera para que la bienvenida entera --titulo, bajada y las
 * cuatro sugerencias-- bajara de golpe, y volviera a subir al esconderse: la
 * pantalla daba un salto cada quince segundos por un comentario al margen. Lo
 * que se le ocurre al muñeco no puede mover la pagina.
 *
 * En posicion absoluta no ocupa sitio, asi que el resto del asistente se queda
 * quieto pase lo que pase.
 *
 * La FORMA de la nube vive en components/_shared/nube.css, compartida con la
 * esquina de la portada; aqui solo se decide donde se pone.
 */
.chat-inicio-saluda {
    position: relative;

    /* ---- El sitio de la nube va AQUI DENTRO ----
     *
     * La nube esta en posicion absoluta para no empujar nada al aparecer. Pero
     * "no empujar" no es "no ocupar": si se sale por arriba de esta caja, el
     * hilo --que es `overflow-y: auto`-- la RECORTA, y lo que se ve es nada. Un
     * elemento absoluto que sobresale por encima del inicio de un contenedor
     * con scroll no alarga el area desplazable hacia arriba: se pierde.
     *
     * Eso es lo que pasaba en produccion: la nube se colocaba fuera, la tapaba
     * la cabecera y no salia. El relleno que se le puso a .chat-inicio para
     * darle aire no servia --el recorte lo hace el hilo, no la bienvenida-- y
     * ademas era el que hacia aparecer la barra de desplazamiento.
     *
     * Con el hueco reservado aqui, la nube queda dentro de la caja, nada la
     * recorta, y como el hueco esta SIEMPRE --con nube o sin ella-- tampoco se
     * mueve nada cuando habla.
     *
     * El numero: lo mas alto que llega la nube (dos o tres lineas, su fuente y
     * su relleno) mas el rastro de burbujas. */
    padding-top: 6.4rem;
}

/* Con las DOS clases, no con una.
 *
 * `.nube` trae `position: relative` --lo necesita para colgar de ella el ovalo
 * y las burbujas-- y aqui hace falta `absolute`. Las dos son de una sola clase,
 * asi que entre ellas gana la que se cargue la ultima, y basta con mover un
 * enlace en el layout para que esto deje de funcionar sin que nadie lo toque.
 *
 * Ya paso: la nube salia en el flujo, medida en cero, y no se dibujaba.
 * Nombrando las dos clases, esta regla gana siempre. */
.nube.chat-inicio-nube {
    position: absolute;

    /* Anclada por su BAJO, a 1.4rem por encima de la coronilla.
     *
     * `bottom` se cuenta desde el suelo de la caja, y el muñeco ocupa los
     * 5.2rem de abajo. Asi que su coronilla esta a 5.2rem del suelo, y dejar
     * 1rem de aire entre los dos es ponerla a 6.2rem.
     *
     * Ese 1rem es lo que cruza el rastro de burbujas, que cuelga 1.75rem: las
     * dos bajan hasta la cabeza y la de abajo la roza, que es lo que se busca.
     * Mas aire seria mas hueco reservado arriba, y el hueco lo paga la
     * bienvenida en alto: pasado cierto punto le sale barra de desplazamiento,
     * que es el problema que vino a resolver todo esto.
     *
     * El primer intento puso 4.8rem sin restar el alto del muñeco, y el bajo de
     * la nube acababa por DEBAJO de su coronilla: las burbujas salian pintadas
     * encima del periodico.
     *
     * Y con `bottom: 100%` --el intento anterior-- la nube salia FUERA de la
     * caja por arriba, donde el hilo, que es `overflow-y: auto`, la recortaba
     * entera: por eso no se veia nada en produccion. */
    bottom: 6.2rem;    /* 5.2 del muñeco + 1 de aire */

    /* Arriba y un poco a la IZQUIERDA.
     *
     * Se ancla por el borde derecho al centro del muñeco, corrido 1.25rem: asi
     * el rastro --que sale del bajo derecho de la nube-- cae justo sobre la
     * cabeza, y el cuerpo de la nube queda al sesgo, como en el comic. Centrada
     * del todo, el rastro bajaba por donde no hay nadie. */
    right: 50%;
    margin-right: -1.25rem;

    /* Mas ancha que en la portada, y a proposito: aqui hay sitio de sobra a lo
       ancho y ninguno a lo alto. Un dato de cien caracteres cabe en dos lineas
       en vez de en cinco, y cada linea que se ahorra es hueco que la
       bienvenida no tiene que reservar por encima del muñeco. */
    max-width: min(22rem, calc(50vw - 1rem));
}

/* La equis, en voz baja y dentro de la nube.
 *
 * Mas discreta que la del boton flotante a proposito: alli compite con una
 * portada entera y aqui esta sola en el centro de una pantalla vacia. Se ve
 * cuando se la busca. */
.chat-inicio-callar {
    position: absolute;
    z-index: 2;            /* por encima del ovalo y del texto */
    top: -0.45rem;
    right: -0.45rem;

    width: 1.3rem;
    height: 1.3rem;
    display: grid;
    place-items: center;
    padding: 0;

    font-size: 0.85rem;
    line-height: 1;
    color: var(--tinta-suave, #6b6360);
    background: var(--superficie, #fff);
    border: 1px solid var(--borde, #cfcac5);
    border-radius: 50%;
    cursor: pointer;

    /* Entra con la nube, no antes: es su equis, no la del muñeco. */
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}

.nube-visible .chat-inicio-callar { opacity: 0.55; }

.chat-inicio-callar:hover,
.chat-inicio-callar:focus-visible {
    opacity: 1;
    color: var(--tinta, #241f1f);
    border-color: var(--tinta-suave, #6b6360);
}

.nube-yendose .chat-inicio-callar { opacity: 0; }

@media (max-width: 560px) {
    /* En el movil la nube sigue encima, pero mas pegada y mas estrecha: el
       muñeco esta centrado y a los lados queda media pantalla justa. */
    /* En el movil, CENTRADA sobre el muñeco y con casi toda la pantalla.
     *
     * Corrida a la izquierda como en pantalla ancha, le quedaba media pantalla
     * --unos 170 px-- y un dato de cien caracteres salia en seis lineas: un
     * ladrillo colgando encima del titulo. Centrada cabe entera, y el rastro
     * se mueve al centro para seguir cayendo sobre la cabeza. */
    /* Mas estrecha, asi que mas lineas, asi que mas hueco reservado. */
    /* Medido en la pagina de verdad: con la nube ya ancha, el dato mas largo
       ocupa tres lineas y la nube mide 91 px en una pantalla de 330. Mas 14 de
       aire hasta la cabeza son 105; se reservan 112. Cada rem de mas aqui es
       alto que la bienvenida le quita a la pantalla. */
    .chat-inicio-saluda { padding-top: 7rem; }

    /* La equis, DENTRO de la nube.
     *
     * En pantalla ancha vive en la esquina, medio fuera, y ahi queda bien. En
     * el movil, con la nube casi tan ancha como la pantalla, ese medio dedo que
     * sobresale es lo unico que puede asomar por el borde. Metida dentro no
     * asoma nada, y sigue estando donde se la busca. */
    .chat-inicio-callar { top: 0.2rem; right: 0.2rem; }

    /* Y menos aire a los lados, que es de donde sale el ancho.
     *
     * La columna del chat va con 1.25rem de relleno a cada lado mas otro
     * tanto de la seccion: en un movil de 330 px eso son 72 px, mas de un
     * quinto de la pantalla, gastados en margen. A la mitad sigue habiendo
     * separacion y la conversacion entera --no solo la nube-- gana sitio. */
    .chat-principal { padding-left: 0.6rem; padding-right: 0.6rem; }

    /* ---- En el movil, sin preguntas propuestas ----
     *
     * En pantalla ancha caben debajo del titulo sin estorbar. En el movil son
     * cuatro botones de dos lineas cada uno que empujan el campo de escribir
     * fuera de la pantalla: quien entra a preguntar tiene que desplazarse para
     * encontrar donde se escribe, que es lo contrario de lo que hacen unas
     * sugerencias.
     *
     * `display: none` y no `visibility`: asi tampoco estan en el recorrido del
     * tabulador ni las lee un lector de pantalla. Lo que proponen sigue a un
     * toque de distancia --son preguntas que se pueden escribir-- y la nube del
     * muñeco ya ofrece por donde empezar. */
    .chat-sugerencias { display: none; }

    .nube.chat-inicio-nube {
        bottom: 6.1rem;    /* 5.2 del muñeco + 0.9 de aire */

        /* ---- Anclada a los DOS lados, no al centro ----
         *
         * Con `left: 50%` el navegador solo tiene media columna para calcular
         * el ancho: lo que queda del 50 % al borde derecho. El `max-width` no
         * sirve de nada, porque el limite lo pone el hueco disponible, no el
         * tope. Medido en la pagina: columna de 243 px, nube de 122 --la mitad
         * clavada-- y 170 px de alto, un ladrillo encima del titulo.
         *
         * Con los dos bordes a cero, el hueco disponible es la columna entera;
         * `width: fit-content` la encoge a lo que ocupe el texto y los margenes
         * automaticos la centran. Misma frase: 243 px de ancho y 91 de alto. */
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        transform: none;

        /* Todo el ancho que hay, menos un margen corto.
         *
         * Cada linea que se ahorra a lo ancho es alto que la nube no le quita
         * a la bienvenida, y en el movil el alto es lo que escasea. Con 2.5rem
         * de margen la frase mas larga salia en cuatro lineas; con 1.5rem y el
         * relleno lateral recortado, en tres. */
        /* El `100%` no sobra: acota al ancho de la columna.
         *
         * `100vw` es la pantalla entera, y la columna puede ser mas estrecha
         * --hoy no lo es, pero basta con que alguien le ponga un margen-- y
         * entonces la nube se saldria por los lados. Con las dos, se queda con
         * la menor de las dos. */
        /* Con aire a los lados, y por dos razones.
         *
         * La primera es que pegada a los bordes de la columna se lee apretada.
         * La segunda es que la nube NO acaba en su caja: la equis sobresale
         * 0.45rem por la derecha y la sombra otro tanto. Con la caja al ras del
         * borde, eso es lo que asoma fuera y saca barra horizontal en un movil
         * --no en todos, y por eso cuesta verlo--. El margen se lo come. */
        max-width: min(calc(100vw - 2.5rem), calc(100% - 1.5rem));
        padding-left: 0.85rem;
        padding-right: 0.85rem;

        --nube-rastro: calc(50% - 0.7rem);
        font-size: 0.76rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-inicio-callar { transition: none; }
}