/* ============================================================
   MODO IA — TEMA POP/COMERCIAL (capa sobre ia-chat.css)
   Mismo lenguaje visual que /tour: papel + tinta + coral +
   ámbar + índigo, píldoras sticker, sombras duras y rebotes.
   Para volver al tema oscuro: quitar este <link> del Index.
   ============================================================ */
:root {
    --pop-ink: #101014;
    --pop-paper: #f0ede6;
    --pop-coral: #ff4e45;
    --pop-amber: #ffc933;
    --pop-indigo: #635bff;
    --pop-spring: cubic-bezier(.2, 1.5, .35, 1);

    /* variables base re-mapeadas al tema claro */
    --bg: var(--pop-paper);
    --bg-soft: #e8e4d9;
    --bg-elev: #ffffff;
    --bg-hover: #f7f4ec;
    --bg-bubble: var(--pop-ink);
    --border: rgba(16, 16, 20, 0.14);
    --border-mid: rgba(16, 16, 20, 0.26);
    --border-strong: rgba(16, 16, 20, 0.45);
    --text: var(--pop-ink);
    --text-soft: #4c4a45;
    --text-mute: #8a877f;
    --text-dim: #cdc8bc;
    --danger: var(--pop-coral);
    --shadow: 0 24px 60px rgba(16, 16, 20, 0.18);
}

/* ── fondo: papel limpio, fuera las ondas de neón ────────── */
.ia-grid-wave { display: none; }
body.ia-body { background: var(--bg); }

/* ── toggle "Modo Normal": sticker ámbar ─────────────────── */
.mode-toggle {
    background: var(--pop-amber);
    color: var(--pop-ink);
    border: none;
    border-radius: 999px;
    font-weight: 800;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
    transform: rotate(-1deg);
}
.mode-toggle:hover { background: var(--pop-amber); color: var(--pop-ink); transform: rotate(1deg) translateY(-2px); }

/* ── sidebar: tinta plena ────────────────────────────────── */
.ia-sidebar {
    background: var(--pop-ink);
    border-color: transparent;
    color: #fff;
}
.ia-sidebar__brand-text b, .ia-sidebar__brand-text { color: #fff; }
.ia-sidebar__brand-text span { color: rgba(255, 255, 255, 0.65); }
.ia-sidebar__avatar { border: 2px solid #fff; }
.ia-sidebar .ia-iconbtn { color: rgba(255, 255, 255, 0.8); }
.ia-sidebar .ia-iconbtn:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }

.ia-newchat {
    background: #fff;
    color: var(--pop-ink);
    border: none;
    border-radius: 999px;
    font-weight: 800;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
    transition: transform .2s var(--pop-spring), box-shadow .2s;
}
.ia-newchat:hover { background: #fff; color: var(--pop-ink); transform: translateY(-2px) rotate(-1deg); }
.ia-newchat:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }

.ia-quickbtn {
    background: rgba(255, 255, 255, 0.14);
    border: none;
    border-radius: 999px;
    color: #fff;
}
.ia-quickbtn:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }

.ia-history__title, .ia-history__label { color: rgba(255, 255, 255, 0.6); }
.ia-history__item { color: rgba(255, 255, 255, 0.88); border-radius: 10px; }
.ia-history__item:hover { background: rgba(255, 255, 255, 0.14); }
.ia-history__item.is-active { background: rgba(255, 255, 255, 0.22); color: #fff; }
.ia-history__del { color: rgba(255, 255, 255, 0.55); }
.ia-history__del:hover { color: #fff; }
.ia-history__empty { color: rgba(255, 255, 255, 0.55); }
.ia-sidebar hr, .ia-sidebar [class*="divider"] { border-color: rgba(255, 255, 255, 0.18); }

/* botones flotantes (abrir sidebar en móvil) */
.ia-floating-btn {
    background: var(--pop-ink);
    color: #fff;
    border: none;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
}

/* ── bienvenida ──────────────────────────────────────────── */
.ia-welcome__brand {
    background: #fff;
    border: none;
    color: var(--pop-ink);
    font-weight: 700;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
    transform: rotate(-1.5deg);
}
.ia-welcome__brand-dot { background: var(--pop-coral); }
.ia-welcome__title { font-weight: 900; letter-spacing: -1.6px; }
.ia-welcome__title .ia-name {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--pop-coral);
    font-family: inherit;
}
.ia-welcome__sub, .ia-welcome p { color: var(--text-soft); }

/* chips de sugerencias: stickers */
.ia-chip {
    background: #fff;
    border: none;
    border-radius: 999px;
    color: var(--pop-ink);
    font-weight: 700;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
    transition: transform .2s var(--pop-spring), box-shadow .2s;
}
.ia-chip:hover {
    background: var(--pop-amber);
    color: var(--pop-ink);
    border: none;
    transform: translateY(-3px) rotate(-1deg);
}
.ia-chip:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); }

/* ── composer ────────────────────────────────────────────── */
.ia-input-wrap {
    background: #fff;
    border: 2px solid var(--pop-ink);
    border-radius: 22px;
    box-shadow: 0 6px 0 rgba(16, 16, 20, 0.16);
}
.ia-input-wrap:focus-within {
    border-color: var(--pop-ink);
    background: #fff;
    box-shadow: 0 6px 0 rgba(16, 16, 20, 0.3);
}
.ia-input { color: var(--pop-ink); }
.ia-input::placeholder { color: var(--text-mute); }

.ia-send { background: var(--bg-hover); }
.ia-send.is-ready {
    background: var(--pop-coral);
    color: #fff;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}
.ia-send.is-ready:hover:not(:disabled) {
    background: var(--pop-coral);
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}
.ia-input-model { color: var(--text-mute); }
.ia-input-attach, .ia-input-mic { color: var(--text-soft); }
.ia-input-attach:hover, .ia-input-mic:hover { background: var(--bg-hover); color: var(--pop-ink); }
.ia-input-cv {
    background: var(--pop-amber);
    color: var(--pop-ink);
    border: none;
    border-radius: 999px;
    font-weight: 800;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.ia-input-cv:hover { background: var(--pop-amber); color: var(--pop-ink); transform: translateY(-1px); }
.ia-input-mic.is-recording { color: var(--pop-coral); }
.ia-attach-menu {
    background: #fff;
    border: 2px solid var(--pop-ink);
    box-shadow: 0 8px 0 rgba(16, 16, 20, 0.14);
    border-radius: 16px;
}
.ia-attach-item:hover { background: var(--pop-paper); }

/* ── mensajes ────────────────────────────────────────────── */
.m--user .m__body {
    background: var(--pop-ink);
    color: #fff;
    border: none;
    box-shadow: 0 4px 0 rgba(16, 16, 20, 0.2);
}
.m--bot .m__role { font-weight: 800; }
.m__avatar { box-shadow: 0 0 0 2px var(--pop-ink); }
.m__action:hover { background: rgba(16, 16, 20, 0.08); }

/* thinking: shimmer en tinta, icono coral */
.ia-thinking__icon {
    color: var(--pop-coral);
    filter: drop-shadow(0 0 6px rgba(255, 78, 69, 0.35));
}
.ia-thinking__text {
    background: linear-gradient(90deg, rgba(16, 16, 20, 0.3) 0%, #101014 50%, rgba(16, 16, 20, 0.3) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

/* ── GenUI: botones ──────────────────────────────────────── */
.gu-btn {
    background: #fff;
    border: 2px solid var(--pop-ink);
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 3px 0 rgba(16, 16, 20, 0.22);
    transition: transform .2s var(--pop-spring), box-shadow .2s, background .2s;
}
.gu-btn:hover { background: var(--pop-paper); border-color: var(--pop-ink); transform: translateY(-2px); }
.gu-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(16, 16, 20, 0.22); }
.gu-btn--primary, .m__body a.gu-btn--primary {
    background: var(--pop-amber);
    color: var(--pop-ink);
    border-color: var(--pop-ink);
    font-weight: 800;
}
.gu-btn--primary:hover, .m__body a.gu-btn--primary:hover { background: var(--pop-amber); color: var(--pop-ink); }
.gu-btn--ghost { background: transparent; box-shadow: none; }
.gu-btn--inline { border-width: 1.5px; box-shadow: 0 2px 0 rgba(16, 16, 20, 0.18); background: #fff; }

/* ── GenUI: cards ────────────────────────────────────────── */
.gu-card, .gu-mini, .gu-hack, .gu-fit, .gu-carta, .gu-compare__col, .gu-form {
    background: #fff;
    border: 2px solid var(--pop-ink);
    box-shadow: 0 6px 0 rgba(16, 16, 20, 0.14);
    border-radius: 18px;
}
.gu-card__chip, .gu-stack__chip {
    background: var(--pop-paper);
    border: 1.5px solid rgba(16, 16, 20, 0.35);
    border-radius: 999px;
    color: var(--pop-ink);
    font-weight: 600;
}
.gu-card__year, .gu-mini__year, .gu-hack__year, .gu-compare__year { color: var(--pop-coral); font-weight: 700; }
.gu-mini__head:hover { background: var(--bg-hover); }
.gu-hack__badge {
    background: var(--pop-amber);
    color: var(--pop-ink);
    border: none;
    font-weight: 800;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
    transform: rotate(-2deg);
}

/* tool-call: píldora con icono coral */
.gu-tool {
    background: #fff;
    border: 2px solid var(--pop-ink);
    border-left: 2px solid var(--pop-ink);
    border-radius: 999px;
    box-shadow: 0 4px 0 rgba(16, 16, 20, 0.14);
}
.gu-tool__icon {
    background: var(--pop-coral);
    color: #fff;
    border-radius: 50%;
}
.gu-tool__icon-status--ok { color: #14a44d; }
.gu-tool--running { border-left-color: var(--pop-ink); }

/* código: se queda oscuro (contraste rico sobre papel) */
.gu-code {
    border: 2px solid var(--pop-ink);
    box-shadow: 0 6px 0 rgba(16, 16, 20, 0.14);
}

/* tablas */
.gu-table th { color: var(--text-soft); }
.gu-table tr:hover td { background: var(--bg-hover); }
.gu-table-wrap {
    border: 2px solid var(--pop-ink);
    border-radius: 14px;
    box-shadow: 0 4px 0 rgba(16, 16, 20, 0.12);
    background: #fff;
}

/* fit ring: colores del tema */
.gu-fit--high .gu-fit__bar { stroke: #14a44d; }
.gu-fit--mid  .gu-fit__bar { stroke: var(--pop-amber); }
.gu-fit--low  .gu-fit__bar { stroke: var(--pop-coral); }
.gu-fit__track { stroke: rgba(16, 16, 20, 0.12); }
.gu-fit__num { color: var(--pop-ink); }
.gu-fit__title { color: var(--text-mute); }

/* carta / cv card */
.gu-carta__icon {
    background: var(--pop-coral);
    color: #fff;
    border: none;
}

/* formulario inline */
.gu-field__input {
    background: var(--pop-paper);
    border: 1.5px solid rgba(16, 16, 20, 0.3);
    border-radius: 12px;
    color: var(--pop-ink);
}
.gu-field__input:focus { border-color: var(--pop-ink); background: #fff; }
.gu-form__sent-icon { color: #14a44d; }

/* ── modal / confirm / scrim ─────────────────────────────── */
.ia-modal__panel, .ia-confirm__panel {
    background: var(--pop-paper);
    border: 2px solid var(--pop-ink);
    box-shadow: 0 18px 0 rgba(16, 16, 20, 0.14);
}
.ia-scrim, .ia-modal, .ia-confirm { background: rgba(16, 16, 20, 0.45); }
.ia-modal__shot { border: 2px solid var(--pop-ink); }
.ia-confirm__btn--danger { background: var(--pop-coral); border-color: var(--pop-coral); }

/* ── scrollbars claras ───────────────────────────────────── */
.ia-messages::-webkit-scrollbar-thumb,
.ia-history::-webkit-scrollbar-thumb {
    background: rgba(16, 16, 20, 0.25);
}
.ia-messages::-webkit-scrollbar-track,
.ia-history::-webkit-scrollbar-track { background: transparent; }

/* ── detalles ────────────────────────────────────────────── */
.ia-stream-cursor { background: var(--pop-coral); }
.m--bot.is-streaming .m__body::after { background: var(--pop-coral); }
.ia-suggestions { gap: 10px; }

/* ── ajustes finos del tema pop ──────────────────────────── */
/* El glitch CRT era estética "hacker oscuro" — en papel deja
   una caja de scanlines fea. Fuera; el nombre queda coral limpio. */
.ia-crt, .ia-glitch { animation: none; }
.ia-crt::after { display: none; }
.ia-glitch::before, .ia-glitch::after { display: none; }

/* label "Recientes" del sidebar, legible sobre índigo */
.ia-sidebar__section-title {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 700;
    letter-spacing: 2px;
}

/* ── negritas y GenUI: tinta, no blanco (bug de contraste) ── */
.m__body strong, .m__body b { color: inherit; font-weight: 800; }
.m--user .m__body strong, .m--user .m__body b { color: #fff; }

/* ── sidebar: títulos gruesos ────────────────────────────── */
.ia-sidebar__brand-text b { font-weight: 900; letter-spacing: -.2px; }
.ia-sidebar__section-title { font-weight: 800; }
.ia-history__item { font-weight: 600; }
.ia-newchat, .ia-quickbtn { font-weight: 800; }

/* ── botón "Ver tour" junto al toggle de modo ────────────── */
.mode-toggle--tour {
    right: 168px;
    background: var(--pop-coral);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
    transform: rotate(1deg);
}
.mode-toggle--tour:hover {
    background: var(--pop-coral);
    color: #fff;
    transform: rotate(-1deg) translateY(-2px);
}
.mode-toggle--tour i { color: rgba(255, 255, 255, 0.85); }
.mode-toggle--tour:hover i { color: #fff; }
@media (max-width: 600px) {
    .mode-toggle--tour { right: 62px; }
}

/* ── GenUI: títulos que seguían en blanco hardcodeado ─────── */
.gu-card__title, .gu-mini__title, .gu-hack__title, .gu-compare__title { color: var(--pop-ink); }
.ia-modal__title, .ia-confirm__title { color: var(--pop-ink); }
.ia-modal__p strong, .ia-modal__panel strong, .ia-modal__desc { color: var(--pop-ink); }
.ia-modal__p, .ia-confirm__msg { color: #4c4a45; }
.ia-modal__h { color: var(--pop-coral); }
.gu-mini__desc, .gu-hack__desc, .gu-card__desc { color: #4c4a45; }
.gu-hack__meta, .gu-mini__year { color: var(--pop-coral); }

/* el icono del botón "Ver tour" no gira (no son flechas) */
.mode-toggle--tour:hover i { transform: none; }

/* mic grabando: fondo coral + icono BLANCO (contraste) */
.ia-input-mic.is-recording,
.ia-input-mic.is-recording i {
    color: #fff !important;
}