/* Shell agent-first de Proveemás (/app): la conversación es la pantalla raíz.
   Reutiliza de styles.css las burbujas, chips, botones, tarjetas y la modal; aquí solo va el layout.
   Móvil: una vista a la vez + barra inferior. Escritorio (≥ 960px): conversación + panel lateral, ancho real. */

html, body.shell-body { height: 100%; }
body.shell-body { margin: 0; overflow: hidden; overscroll-behavior: none; }

.shell {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--ground);
}

/* ---------- cabecera ---------- */
.sh-top {
  display: flex; align-items: center; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  flex: none;
}
.sh-top .wordmark { font-size: 20px; }
.sh-agent { display: flex; align-items: center; gap: 9px; min-width: 0; margin-left: 2px; }
.avatar.sm { width: 32px; height: 32px; border-radius: 10px; }
.avatar.sm svg { width: 18px; height: 18px; }
.sh-agent .who b { display: block; font-family: 'Bricolage', sans-serif; font-weight: 700; font-size: 14.5px; line-height: 1.15; }
.sh-agent .who > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sh-top .topnav { margin-left: auto; }
.sh-top .userchip { padding: 6px 12px; font-size: 13px; }
/* Chip de sesión (14-sep): con sesión, la inicial del nombre; sin sesión, «Ingresar». Va junto a
   Llamar porque la barra de cuenta se ocultó con el rediseño y no se veía si había sesión. */
.sh-top .yo { flex: none; height: 34px; min-width: 34px; padding: 0 10px; border-radius: 17px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sh-top .yo.dentro { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); padding: 0; width: 34px; }
#sh-dot.off { background: var(--muted); }

/* ---------- vistas ---------- */
.sh-main { flex: 1; min-height: 0; display: flex; }
.view { display: none; flex-direction: column; min-height: 0; width: 100%; }
.view.on { display: flex; }
.view[hidden] { display: none; }

/* conversación: los mensajes ocupan el alto disponible */
.view-chat .msgs {
  flex: 1; height: auto; min-height: 0;
  padding: 16px 14px 8px;
}
.view-chat .chips { padding: 4px 14px 8px; flex: none; }
.view-chat .inbar {
  flex: none; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); align-items: center;
}
.view-chat .inbar input { min-width: 0; }
.micbtn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); flex: none;
  background: var(--surface2); color: var(--ok); cursor: pointer;
  display: grid; place-items: center; transition: border-color .12s, transform .12s;
}
.micbtn:hover { border-color: var(--ok); transform: translateY(-1px); }
.micbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.micbtn svg { width: 20px; height: 20px; }
.view-chat .send { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; }
.view-chat .send svg { width: 20px; height: 20px; }
.view-chat .msg { max-width: 92%; }
.view-chat .msg.bot { font-size: 15px; }

/* paneles (cotizaciones, cuenta) */
.view-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 16px 8px;
}
.panel-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.panel-body { padding: 4px 14px 24px; }
.panel-body .empty { padding: 34px 10px; }
.panel-body .empty .btn { margin-top: 14px; }

/* tarjeta de pedido */
.ped {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; margin-bottom: 12px;
}
.ped-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ped-head b { font-family: 'Bricolage', sans-serif; font-size: 16px; font-weight: 700; }
.ped-head .meta { color: var(--muted); font-size: 12.5px; margin-left: auto; }
.ped-detalle { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.q {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.q .nombre { font-weight: 600; }
.q .badge { justify-self: end; }
.q .analisis { grid-column: 1 / -1; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.q .analisis b { color: var(--ink); font-weight: 600; }
.q .datos { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 1 / -1; margin-top: 4px; }
.q .datos i {
  font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--line); color: var(--ink);
}
.ped-reco {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px;
  background: var(--ok-soft); color: var(--ink); border: 1px solid transparent;
}
.ped-reco b { color: var(--ok); }

/* cuenta */
.cuenta-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 12px; }
.cuenta-card b.nombre { display: block; font-family: 'Bricolage', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.cuenta-card .sub { color: var(--muted); font-size: 14px; margin: 2px 0 14px; }
.perfil-distrito { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; margin: 0 0 14px; }
.perfil-distrito label { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.perfil-distrito input { min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; font-size: 15px; }
.perfil-distrito small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.cuenta-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cuenta-meta { color: var(--muted); font-size: 12px; margin-top: 16px; }

/* ---------- barra inferior ---------- */
.sh-nav {
  flex: none; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
}
.tab-btn {
  position: relative; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted);
  background: none; border: 0; border-radius: 12px; padding: 6px 4px 5px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tab-btn svg { width: 22px; height: 22px; }
.tab-btn.on { color: var(--accent-deep); }
@media (prefers-color-scheme: dark) { .tab-btn.on { color: var(--accent); } }
.tab-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.tab-badge {
  position: absolute; top: 4px; right: calc(50% - 22px);
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  background: var(--accent-deep); color: #fff; font-style: normal; font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.tab-badge[hidden] { display: none; }

/* ---------- banner de instalación ---------- */
.install {
  position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 40;
  background: var(--band); color: var(--band-ink); border-radius: 16px; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35); animation: pop .2s ease;
}
.install[hidden] { display: none; }
.install-txt { flex: 1; min-width: 200px; }
.install-txt b { display: block; font-family: 'Bricolage', sans-serif; font-size: 15px; }
.install-txt span { font-size: 13px; opacity: .8; }
.install-acts { display: flex; gap: 8px; }
.install .btn-ghost { color: var(--band-ink); border-color: rgba(255, 255, 255, .3); }

/* aviso breve (toast) */
.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--ink); color: var(--ground); font-size: 13.5px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px; z-index: 45; box-shadow: var(--shadow);
  animation: pop .18s ease;
}

/* ---------- escritorio: conversación + panel lateral, ancho real ---------- */
@media (min-width: 960px) {
  .sh-top { padding: 12px 24px; }
  .sh-top .wordmark { font-size: 24px; }
  .sh-main {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px;
    max-width: 1280px; width: 100%; margin: 0 auto; gap: 0;
  }
  .view-chat { display: flex !important; border-right: 1px solid var(--line); }
  .view-chat .msgs { padding: 24px 28px 10px; }
  .view-chat .msg { max-width: 78%; }
  .view-chat .chips, .view-chat .inbar { padding-left: 24px; padding-right: 24px; }
  .view-panel { background: var(--surface2); }
  .view-panel:not(.on) { display: none; }
  .sh-nav {
    position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 24px;
    grid-template-columns: auto auto; gap: 4px; border: 1px solid var(--line); border-top: 1px solid var(--line);
    border-radius: 12px; padding: 3px; background: var(--surface2);
  }
  .sh-nav .tab-btn[data-view="chat"] { display: none; }
  .tab-btn { flex-direction: row; gap: 7px; padding: 7px 12px; font-size: 13px; border-radius: 9px; }
  .tab-btn svg { width: 18px; height: 18px; }
  .tab-btn.on { background: var(--surface); color: var(--ink); box-shadow: 0 2px 6px rgba(19,43,42,.08); }
  .tab-badge { position: static; margin-left: 2px; }
  .sh-top { position: relative; }
  .sh-top .topnav { margin-right: 250px; }
  .install { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
  .toast { bottom: 90px; }
}
@media (min-width: 1200px) {
  .sh-main { grid-template-columns: minmax(0, 1fr) 440px; }
}

/* ---------- cotizaciones: detalle y acciones (día 7) ---------- */
.ped.cerrado { opacity: .75; }
.ped-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.q .q-web { font-size: 12px; font-weight: 600; margin-left: 6px; }
.q .analisis.faltan { color: var(--warn); }

/* Botón de llamada — 12-sep.
   Antes era un micrófono de 44 px dentro de la barra de escritura, del mismo tamaño que
   "enviar": se leía como el "mantén pulsado para grabar audio" de WhatsApp, no como una
   llamada en tiempo real. Ahora vive en la cabecera (donde las apps de mensajería ponen
   la llamada), lleva auricular en vez de micrófono, va relleno en vez de contorneado y
   dice "Llamar". Tres señales apuntando a lo mismo. */
.callnow {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  margin-left: auto; padding: 9px 15px 9px 12px;
  border: none; border-radius: 999px;
  background: var(--ok); color: #fff;
  font: 600 14px/1 inherit; letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.callnow svg { width: 17px; height: 17px; }
.callnow:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.callnow:active { transform: translateY(0); }
.callnow:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.callnow[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: none; }

/* En móvil se queda el auricular solo: la etiqueta se come el ancho de la cabecera,
   pero el icono de teléfono relleno ya no se confunde con un micrófono. */
@media (max-width: 430px) {
  .callnow { padding: 9px; gap: 0; }
  .callnow span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Mientras suena el timbre, el botón late para que se vea que la llamada está en curso. */
.callnow.llamando { animation: callpulse 1.4s ease-in-out infinite; }
@keyframes callpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  50%      { box-shadow: 0 0 0 6px rgba(0,0,0,.06); }
}
@media (prefers-reduced-motion: reduce) { .callnow.llamando { animation: none; } }

/* ==== Nueva cara (13-sep) — cabecera despejada, Provi sin globo, contador y fichas ==== */

/* La cabecera se queda con logo · Provi + estado · Llamar. El chip de usuario y «Salir» viven en
   la pestaña Cuenta: en 360 px no cabían y se pisaban con el botón de llamada. */
.sh-top .topnav { display: none; }
.sh-top .wordmark { font-size: 20px; }
.sh-agent { gap: 8px; margin-left: 4px; }
.sh-agent .who > span { white-space: normal; }

/* La onda: la firma de Provi. Respira en reposo, late cuando busca o habla. */
.onda { display: flex; align-items: center; gap: 2px; height: 20px; flex: none; }
.onda i { display: block; width: 3px; height: 18px; border-radius: 2px; background: var(--ok); transform-origin: center; animation: respira 2.2s ease-in-out infinite; }
.onda i:nth-child(2) { animation-delay: .25s; } .onda i:nth-child(3) { animation-delay: .5s; }
.onda i:nth-child(4) { animation-delay: .75s; } .onda i:nth-child(5) { animation-delay: 1s; }
.onda.late i { animation-duration: .7s; background: var(--accent); }
.onda.off i { animation: none; transform: scaleY(.35); background: var(--muted); }
@keyframes respira { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .onda i { animation: none; transform: scaleY(.6); } }

/* Provi sin globo: texto limpio con una barra naranja a la izquierda. El usuario sigue en globo.
   Que se note quién asesora y quién pregunta. */
.view-chat .msg.bot {
  background: transparent; border: 0; border-radius: 0; padding: 2px 0 2px 14px;
  border-left: 3px solid var(--accent); max-width: 96%; line-height: 1.5;
}
.view-chat .msg.bot.typing { border-left-color: var(--line); padding: 10px 0 10px 14px; }
.view-chat .msg.bot.wide { border-left: 0; padding: 0; max-width: 100%; }
.view-chat .msg.bot.apertura .titulo {
  display: block; font-family: 'Bricolage', sans-serif; font-weight: 700; font-size: 22px;
  line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; margin-bottom: 6px;
}
.view-chat .msg.bot.apertura .sub { color: var(--muted); font-size: 14px; }
.view-chat .msg.bot.apertura .sub b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Necesidades de ejemplo en el chat vacío: filas tocables, no píldoras. Desaparecen al primer mensaje. */
.ejemplos { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ejemplos .eti { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-left: 2px; }
.ejemplo {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; min-height: 44px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.ejemplo:hover { border-color: var(--accent); transform: translateY(-1px); }
.ejemplo:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ejemplo svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.ejemplo svg.flecha { margin-left: auto; width: 18px; height: 18px; color: var(--muted); }
.ejemplos .menor { align-self: center; font-size: 13.5px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 8px 4px; cursor: pointer; font-family: inherit; }
.ejemplos .menor b { color: var(--accent); font-weight: 600; }

/* El contador: lo que Provi hizo en este turno, en una franja. */
.contador {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; margin: 2px 0;
  border-radius: 10px; background: var(--surface2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.contador b { color: var(--ink); font-weight: 600; }
.contador svg { width: 12px; height: 12px; flex: none; color: var(--muted); }
.contador svg.ok { width: 15px; height: 15px; color: var(--ok); }

/* Fichas de proveedor: el dato estructurado se pinta estructurado. */
.fichas { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 2px; }
.ficha {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.ficha .nombre { font-family: 'Bricolage', sans-serif; font-weight: 700; font-size: 16.5px; line-height: 1.2; }
.ficha .linea { font-size: 13.5px; color: var(--muted); }
.ficha .insignias { display: flex; gap: 6px; flex-wrap: wrap; }
.ficha .insignia { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface2); color: var(--muted); border: 1px solid var(--line); }
.ficha .insignia.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.ficha .acts { display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.ficha .acts .btn-sm { min-height: 36px; }
.fichas .mas { align-self: center; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fichas .mas svg { width: 16px; height: 16px; }