:root{
  --bg:#0a0c0f;
  --panel:#11151b;
  --panel-soft:#161b22;
  --line: rgba(140,182,255,.14);
  --line-strong: rgba(140,182,255,.28);
  --ink:#eef1f4;
  --ink-soft:#8b96a5;
  --ink-faint:#57616f;
  --accent:#ff6a39;
  --accent-dim: rgba(255,106,57,.14);
  --cyan:#4fd1ff;
  --cyan-dim: rgba(79,209,255,.12);
  --mono:'JetBrains Mono', monospace;
  --disp:'Space Grotesk', sans-serif;
  --body:'Archivo', sans-serif;
  --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:auto; min-height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body);
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.only-desktop{display:none;}
.only-mobile{display:inline;}

/* ===== Layout — mobile: apilado / desktop: pantalla dividida ===== */
.layout{
  display:flex; flex-direction:column;
  min-height:100dvh;
}

.chat-panel{
  display:flex; justify-content:center;
  width:100%; height:100dvh;
}

/* ===== App shell (chat) ===== */
.app{
  width:100%; max-width:480px; height:100%;
  display:flex; flex-direction:column;
  background:var(--bg);
  position:relative;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}

.grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.35;
  mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
}

/* ===== Header ===== */
header{
  position:relative; z-index:2;
  padding:14px 16px 12px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,12,15,.98), rgba(10,12,15,.92));
  backdrop-filter:blur(6px);
}
.h-top{display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:baseline; gap:2px;}
.brand b{font-family:var(--disp); font-weight:700; font-size:1.05rem; letter-spacing:-.02em;}
.brand span{font-family:var(--mono); color:var(--accent); font-size:1.05rem;}
.status{
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.62rem; color:var(--ink-soft);
  letter-spacing:.04em; text-transform:uppercase;
}
.dot{width:6px;height:6px;border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.35}}
.h-fig{
  margin-top:8px; font-family:var(--mono); font-size:.62rem; color:var(--ink-faint);
  letter-spacing:.03em; display:flex; justify-content:space-between;
}

/* ===== Chat area ===== */
.chat{
  flex:1; overflow-y:auto; position:relative; z-index:1;
  padding:18px 14px 12px;
  display:flex; flex-direction:column; gap:14px;
  scroll-behavior:smooth;
}
.chat::-webkit-scrollbar{width:4px;}
.chat::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:4px;}

/* ===== Swap mobile: scrollytelling compacto <-> chat ===== */
#chat{ display:none; }
#storyInline{ display:none; }
.app.story-active #storyInline{ display:flex; }
.app.story-active #chat{ display:none; }
.app:not(.story-active) #storyInline{ display:none; }
.app:not(.story-active) #chat{ display:flex; }

/* ===== Scrollytelling compacto (dentro del chat, solo mobile) ===== */
.story-inline{
  flex:1; overflow-y:auto; position:relative; z-index:1;
  padding:20px 16px 14px;
  display:flex; flex-direction:column; gap:20px;
}
.story-inline::-webkit-scrollbar{width:4px;}
.story-inline::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:4px;}

.si-lead{
  font-size:.88rem; line-height:1.55; color:var(--ink-soft); margin:8px 0 0; max-width:36ch;
}

.si-steps{display:flex; flex-direction:column; gap:14px;}
.si-step{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--panel);
}
.si-num{
  font-family:var(--mono); font-size:.72rem; color:var(--cyan);
  border:1px solid var(--line-strong); border-radius:6px;
  width:26px; height:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.si-step b{font-family:var(--disp); font-weight:600; font-size:.85rem; display:block; margin-bottom:2px;}
.si-step p{font-size:.76rem; line-height:1.4; color:var(--ink-soft); margin:0;}

.si-cta{
  text-align:center; font-family:var(--mono); font-size:.66rem; color:var(--cyan);
  letter-spacing:.03em; margin-top:4px;
  animation:cueMove 2s ease-in-out infinite;
}

.row{display:flex; gap:8px; max-width:100%;}
.row.bot{justify-content:flex-start;}
.row.user{justify-content:flex-end;}

.bubble{
  max-width:82%;
  padding:11px 13px;
  border-radius:var(--radius);
  font-size:.87rem; line-height:1.45;
  position:relative;
  animation:rise .28s ease both;
}
@keyframes rise{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.bubble.bot{
  background:var(--panel);
  border:1px solid var(--line);
  border-top-left-radius:4px;
}
.bubble.user{
  background:var(--accent-dim);
  border:1px solid rgba(255,106,57,.35);
  border-top-right-radius:4px;
}

.fig-tag{
  font-family:var(--mono); font-size:.58rem; color:var(--cyan);
  letter-spacing:.04em; text-transform:uppercase;
  display:block; margin-bottom:5px; opacity:.75;
}

.bubble img{
  display:block; width:100%; max-width:230px; border-radius:8px;
  border:1px solid var(--line-strong); margin-top:6px;
}

.bubble.bot::before, .bubble.bot::after{
  content:''; position:absolute; width:7px; height:7px;
  border-color:var(--cyan); opacity:.5;
}
.bubble.bot::before{ top:-1px; left:-1px; border-top:1px solid; border-left:1px solid; }
.bubble.bot::after{ bottom:-1px; right:-1px; border-bottom:1px solid; border-right:1px solid; }

.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px;}
.chip{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.02em;
  padding:7px 11px; border-radius:20px;
  border:1px solid var(--line-strong); background:var(--panel-soft);
  color:var(--ink); cursor:pointer; transition:.15s;
}
.chip:hover{border-color:var(--cyan); color:var(--cyan);}
.chip:active{transform:scale(.96);}

.typing{display:flex; gap:4px; padding:4px 2px;}
.typing span{width:5px; height:5px; border-radius:50%; background:var(--ink-soft); animation:blink 1.2s infinite;}
.typing span:nth-child(2){animation-delay:.2s;}
.typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.25} 40%{opacity:1}}

.scan-wrap{position:relative; width:100%; max-width:230px; border-radius:8px; overflow:hidden; margin-top:6px; border:1px solid var(--line-strong);}
.scan-wrap img{margin:0; border:none; border-radius:0; display:block; width:100%;}
.scan-line{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow:0 0 10px var(--cyan);
  animation:scan 1.6s linear infinite;
}
@keyframes scan{0%{top:0%} 100%{top:100%}}
.scan-label{
  position:absolute; bottom:6px; left:6px; right:6px;
  font-family:var(--mono); font-size:.6rem; color:#fff;
  background:rgba(0,0,0,.55); padding:3px 6px; border-radius:4px;
  letter-spacing:.03em;
}

.result-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:.6rem; color:var(--accent);
  letter-spacing:.03em; margin-top:8px; text-transform:uppercase;
}
.result-tag::before{content:'◆'; font-size:.55rem;}

.cta-btn{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:10px; padding:9px 14px;
  background:var(--accent); color:#100701; border:none; border-radius:9px;
  font-family:var(--disp); font-weight:600; font-size:.8rem; letter-spacing:-.01em;
  cursor:pointer; transition:.15s;
}
.cta-btn:hover{filter:brightness(1.08);}
.cta-btn:active{transform:scale(.97);}
.cta-btn.ghost{
  background:transparent; border:1px solid var(--line-strong); color:var(--ink);
}

/* ===== Composer ===== */
.composer{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  background:rgba(10,12,15,.98);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
}
.composer-row{
  display:flex; align-items:center; gap:8px;
}
.icon-btn{
  width:38px; height:38px; flex-shrink:0;
  border-radius:10px; border:1px solid var(--line-strong);
  background:var(--panel-soft); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s; font-size:1rem;
}
.icon-btn:hover{border-color:var(--cyan); color:var(--cyan);}
.icon-btn:active{transform:scale(.92);}

.text-input{
  flex:1; height:38px; border-radius:19px;
  border:1px solid var(--line-strong); background:var(--panel-soft);
  color:var(--ink); padding:0 14px; font-family:var(--body); font-size:.85rem;
  outline:none;
}
.text-input:focus{border-color:var(--cyan);}
.text-input::placeholder{color:var(--ink-faint);}

.send-btn{
  width:38px; height:38px; flex-shrink:0; border-radius:10px; border:none;
  background:var(--accent); color:#100701; font-size:1rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.send-btn:active{transform:scale(.92);}

.composer-hint{
  font-family:var(--mono); font-size:.58rem; color:var(--ink-faint);
  text-align:center; margin-top:7px; letter-spacing:.03em;
}

input[type="file"]{display:none;}

/* ============================================================
   ABOUT PAGE
============================================================ */
.about-app{
  width:100%; max-width:640px; min-height:100dvh;
  position:relative;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  overflow-x:hidden;
}
.about-header{
  position:relative; z-index:2;
  padding:14px 20px 12px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.about-header a.back{
  font-family:var(--mono); font-size:.68rem; color:var(--ink-soft);
  text-decoration:none; letter-spacing:.03em;
  display:flex; align-items:center; gap:5px;
}
.about-header a.back:hover{color:var(--cyan);}

.about-content{
  position:relative; z-index:1;
  padding:36px 22px 60px;
}

.about-eyebrow{
  font-family:var(--mono); font-size:.66rem; color:var(--cyan);
  letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:6px; margin-bottom:14px;
}
.about-eyebrow .dot{width:5px;height:5px;}

.about-h1{
  font-family:var(--disp); font-weight:700; font-size:clamp(1.8rem,7vw,2.4rem);
  letter-spacing:-.02em; line-height:1.08; margin:0 0 16px;
}
.about-h1 em{
  font-style:normal; color:var(--accent);
}

.about-lead{
  font-size:.95rem; line-height:1.65; color:var(--ink-soft);
  max-width:46ch; margin:0 0 40px;
}

.about-block{
  border-top:1px solid var(--line);
  padding:28px 0;
}
.about-block:last-of-type{border-bottom:1px solid var(--line);}

.about-block-tag{
  font-family:var(--mono); font-size:.6rem; color:var(--ink-faint);
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px;
  display:block;
}
.about-block h2{
  font-family:var(--disp); font-weight:600; font-size:1.25rem;
  letter-spacing:-.01em; margin:0 0 10px;
}
.about-block p{
  font-size:.86rem; line-height:1.65; color:var(--ink-soft); margin:0;
  max-width:52ch;
}

.steps{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:16px;}
.steps li{
  position:relative; padding-left:38px; font-size:.86rem; line-height:1.55; color:var(--ink-soft);
}
.steps li b{color:var(--ink); font-family:var(--disp); font-weight:600;}
.steps li::before{
  content:attr(data-n);
  position:absolute; left:0; top:-2px;
  width:26px; height:26px; border-radius:7px;
  border:1px solid var(--line-strong); background:var(--panel);
  color:var(--cyan); font-family:var(--mono); font-size:.68rem;
  display:flex; align-items:center; justify-content:center;
}

.stack-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px;
}
.stack-card{
  border:1px solid var(--line); border-radius:10px; padding:12px 13px;
  background:var(--panel);
}
.stack-card .k{
  font-family:var(--mono); font-size:.58rem; color:var(--cyan);
  text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:4px;
}
.stack-card .v{font-size:.82rem; color:var(--ink);}

.about-cta{
  margin-top:40px; padding:26px 22px;
  border:1px solid var(--line-strong); border-radius:14px;
  background:var(--panel);
  position:relative; overflow:hidden;
}
.about-cta::before, .about-cta::after{
  content:''; position:absolute; width:9px; height:9px;
  border-color:var(--accent); opacity:.6;
}
.about-cta::before{top:-1px; left:-1px; border-top:1px solid; border-left:1px solid;}
.about-cta::after{bottom:-1px; right:-1px; border-bottom:1px solid; border-right:1px solid;}
.about-cta h3{
  font-family:var(--disp); font-weight:700; font-size:1.15rem; margin:0 0 8px;
}
.about-cta p{
  font-size:.83rem; color:var(--ink-soft); margin:0 0 16px; line-height:1.55;
}

.about-footer{
  margin-top:50px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.6rem; color:var(--ink-faint); letter-spacing:.03em;
}

/* ============================================================
   SCROLLYTELLING — "story" (columna izquierda)
============================================================ */
.story{
  display:none; /* en mobile el scrollytelling vive dentro del chat, ver #storyInline */
  position:relative;
  padding:44px 22px 60px;
  border-bottom:1px solid var(--line);
}
.story-grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.3;
  mask-image: radial-gradient(ellipse at 30% 20%, black 0%, transparent 70%);
}

.story-intro{position:relative; z-index:1; max-width:480px;}
.story-scroll-cue{
  margin-top:22px; font-family:var(--mono); font-size:.66rem; color:var(--cyan);
  letter-spacing:.04em; display:flex; align-items:center; gap:6px;
  animation:cueMove 2s ease-in-out infinite;
}
@keyframes cueMove{0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);}}

.story-steps{
  position:relative; z-index:1;
  margin-top:56px;
  display:flex; flex-direction:column; gap:44px;
}

.story-step{
  max-width:460px;
  padding-top:26px; border-top:1px solid var(--line);
  opacity:.45; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
}
.story-step.in-view{ opacity:1; transform:translateY(0); }

.story-num{
  font-family:var(--disp); font-weight:700; font-size:2.6rem;
  color:transparent; -webkit-text-stroke:1px var(--line-strong);
  display:block; line-height:1; margin:2px 0 6px;
  transition:color .4s ease, -webkit-text-stroke .4s ease;
}
.story-step.in-view .story-num{
  -webkit-text-stroke:1px var(--accent);
  color:var(--accent-dim);
}

.story-step h2{
  font-family:var(--disp); font-weight:600; font-size:1.3rem;
  letter-spacing:-.01em; margin:0 0 8px;
}
.story-step p{
  font-size:.85rem; line-height:1.6; color:var(--ink-soft); margin:0 0 16px; max-width:42ch;
}

.story-visual{margin-top:14px;}

.sv-frame{
  position:relative; width:100%; max-width:220px; aspect-ratio:16/10;
  border:1px solid var(--line-strong); border-radius:10px;
  background:var(--panel);
  display:flex; align-items:center; justify-content:center;
}
.sv-icon{font-size:1.6rem; opacity:.6;}
.sv-corner{position:absolute; width:9px; height:9px; border-color:var(--cyan); opacity:.6;}
.sv-corner.tl{top:-1px; left:-1px; border-top:1px solid; border-left:1px solid;}
.sv-corner.tr{top:-1px; right:-1px; border-top:1px solid; border-right:1px solid;}
.sv-corner.bl{bottom:-1px; left:-1px; border-bottom:1px solid; border-left:1px solid;}
.sv-corner.br{bottom:-1px; right:-1px; border-bottom:1px solid; border-right:1px solid;}

.sv-chips{display:flex; flex-wrap:wrap; gap:7px; max-width:260px;}
.sv-chips span{
  font-family:var(--mono); font-size:.66rem; padding:6px 10px; border-radius:16px;
  border:1px solid var(--line-strong); background:var(--panel); color:var(--ink-soft);
}

.sv-scan{
  position:relative; width:100%; max-width:220px; height:90px;
  border:1px solid var(--line-strong); border-radius:10px; overflow:hidden;
  background:repeating-linear-gradient(135deg, var(--panel) 0 10px, var(--panel-soft) 10px 20px);
}
.sv-scan-line{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow:0 0 10px var(--cyan);
  animation:scan 1.8s linear infinite;
}

.sv-wa{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.72rem; color:var(--accent);
  padding:9px 13px; border:1px solid rgba(255,106,57,.35); border-radius:9px;
  background:var(--accent-dim);
}

.story-outro{
  position:relative; z-index:1; margin-top:50px;
  font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.02em;
}

/* progreso — oculto en mobile, visible como riel central en desktop */
.story-progress{display:none;}

/* ============================================================
   DESKTOP — pantalla dividida: story (izq) / chat (der)
============================================================ */
@media (min-width:980px){
  .only-desktop{display:inline;}
  .only-mobile{display:none;}

  .layout{
    display:grid;
    grid-template-columns: 1fr auto 480px;
    align-items:start;
    min-height:100dvh;
  }

  .story{
    display:block;
    padding:64px 56px 120px 64px;
    border-bottom:none;
    border-right:1px solid var(--line);
    min-height:100dvh;
  }
  .story-intro{max-width:520px;}
  .story-steps{max-width:520px;}
  .story-step{max-width:480px; min-height:70vh; display:flex; flex-direction:column; justify-content:center;}

  .story-progress{
    display:flex; flex-direction:column; gap:14px;
    position:sticky; top:50%; transform:translateY(-50%);
    padding:0 18px; height:fit-content;
  }
  .p-dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--line-strong); transition:.3s;
  }
  .p-dot.active{ background:var(--accent); box-shadow:0 0 8px var(--accent); }

  .chat-panel{
    position:sticky; top:0; height:100dvh;
  }

  /* en desktop el chat siempre está visible; el scrollytelling grande
     ya vive en la columna izquierda (.story), no dentro del chat */
  .app #storyInline{ display:none !important; }
  .app #chat{ display:flex !important; }
}
/* ============================================================
   rediseno-chat.css
   Añadir este archivo con <link rel="stylesheet" href="css/rediseno-chat.css">
   DESPUÉS de css/chat.css en el <head>, o pegar su contenido al
   final de css/chat.css.
============================================================ */

/* ---------- Burbujas de chat ---------- */
.chat-msg {
  max-width: 78%;
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  animation: chatFadeIn .25s ease;
}

.chat-msg p { margin: 0 0 6px; }
.chat-msg p:last-child { margin-bottom: 0; }

.chat-msg--bot {
  align-self: flex-start;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  border-bottom-left-radius: 4px;
}

.chat-msg--user {
  align-self: flex-end;
  margin-left: auto;
  background: #1fae56;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-msg-photo {
  display: block;
  max-width: 220px;
  max-height: 220px;
  border-radius: 10px;
  object-fit: cover;
}

@keyframes chatFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Asegura que #chat organice las burbujas en columna */
#chat {
  display: flex;
  flex-direction: column;
}

/* ---------- Chips de estilo ---------- */
.ia-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ia-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}

.ia-chip:hover { background: rgba(255,255,255,.1); }

/* ---------- Botón de reintentar ---------- */
.ia-retry-btn {
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2);
  background: transparent;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
}

/* ---------- Botón "Enviar a WhatsApp" dentro del chat ---------- */
.ia-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  background: #25D366;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}

.ia-wa-btn:hover { background: #1ebe5b; }
.ia-wa-btn:active { transform: scale(.97); }

/* ---------- Puntos de progreso del story (izquierda) ---------- */
.story-progress .p-dot {
  transition: background .2s ease, transform .2s ease;
}

.story-progress .p-dot.on {
  background: #25D366;
  transform: scale(1.15);
}

/* ============================================================
   BOTÓN DE ENVIAR (composer) → estilo tipo WhatsApp
   Círculo verde con ícono de avión de papel, igual al botón
   nativo de envío de WhatsApp.
============================================================ */
.send-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: none;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0; /* oculta el ➤ de texto si quedara como fallback */
  transition: background .15s ease, transform .1s ease;
}

.send-btn:hover { background: #1ebe5b; }
.send-btn:active { transform: scale(.94); }

/* Ícono de avión de papel inyectado vía CSS (sin tocar el HTML) */
.send-btn::before {
  content: '';
  width: 18px;
  height: 18px;
  display: block;
  background-color: #fff;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 21l21-9L2 3v7l15 2-15 2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 21l21-9L2 3v7l15 2-15 2z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* ============================================================
   rediseno-chat-extra.css
   Agregar DESPUÉS de css/chat.css en el <head>.
   Todo usa las variables ya definidas en chat.css (--accent,
   --cyan, --panel, --ink, --mono, --disp) — cero colores nuevos.
============================================================ */

/* El botón de enviar del composer, con forma circular tipo
   "enviar mensaje" pero en el naranja térmico del sitio (--accent),
   no en verde WhatsApp. */
.send-btn{
  border-radius:50%;
  font-size:0; /* oculta el "➤" de texto, se reemplaza por el ícono de abajo */
  position:relative;
}
.send-btn::before{
  content:'';
  width:16px; height:16px;
  display:block;
  background-color:#100701; /* mismo tono oscuro que ya usa .send-btn para el ícono */
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 21l21-9L2 3v7l15 2-15 2z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 21l21-9L2 3v7l15 2-15 2z'/></svg>");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}

/* El botón "Enviar a WhatsApp" dentro del chat ya usa .cta-btn
   (naranja térmico + texto oscuro), solo separamos un poco el ícono. */
.cta-btn svg{ flex-shrink:0; }

/* scan-label ya existe en chat.css para la etapa de "generación";
   la reutilizamos para "subida" — solo un pequeño ajuste de contraste
   cuando el texto cambia a estado de error. */
.scan-label{ transition: background .2s ease; }