/* ============================================================
   Asistente BioMTC · diseño B "conversación limpia"
   Blanco, DM Sans, verde BioMTC solo como acento.
   ============================================================ */

:root{
  --bg:        #FFFFFF;
  --bg-soft:   #F4F5F2;   /* caja de pregunta */
  --bg-side:   #F7F8F6;   /* barra lateral */
  --bg-hover:  #ECEEEA;
  --bg-active: #E4E9E2;
  --bubble:    #F0F2EE;   /* burbuja del usuario */

  --ink:       #1B1F1C;
  --ink-soft:  #56615A;
  --ink-faint: #66706A;

  --line:      #E3E6E0;
  --line-soft: #F0F2EE;

  --green:      #207526;
  --green-dark: #0C5712;
  --green-pale: #ABCFA2;
  --danger:     #A0301F;

  --sidebar: 272px;
  --col:     720px;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ height: 100%; margin: 0; }
body{
  background: var(--bg); color: var(--ink);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button{ font: inherit; color: inherit; }
[hidden]{ display: none !important; }
.sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:is(button, a, input, textarea):focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }

.ib{
  width: 44px; height: 44px; flex-shrink: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink);
  cursor: pointer;
}
.ib:hover{ background: var(--bg-hover); }

/* ============================================================
   ESTRUCTURA
   ============================================================ */
.app{ display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

.sidebar{
  width: var(--sidebar); flex-shrink: 0;
  display: flex; flex-direction: column;
  padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg-side); border-right: 1px solid var(--line-soft);
}
.sb-head{ display: flex; align-items: center; gap: 2px; padding-left: 8px; }
.brand{ flex: 1; display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; }

.search{
  margin-top: 12px; height: 40px; padding: 0 12px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-hover); border-radius: 10px; color: var(--ink-soft);
}
.search input{
  flex: 1; min-width: 0; border: 0; background: transparent; outline: 0;
  font: inherit; font-size: 14px; color: var(--ink);
}
.search input::-webkit-search-cancel-button{ cursor: pointer; }

.hist{ flex: 1; overflow-y: auto; margin: 6px -4px 0; padding: 0 4px 8px; }
.hist-grp{ margin: 16px 0 4px; padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--ink-faint); }
.hist-row{ display: flex; align-items: center; border-radius: 10px; }
.hist-row:hover{ background: var(--bg-hover); }
.hist-row.active{ background: var(--bg-active); }
.hist-item{
  flex: 1; min-width: 0; padding: 10px;
  font-size: 14px; color: var(--ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hist-row.active .hist-item{ font-weight: 500; }
.hist-del{
  width: 36px; height: 36px; margin-right: 2px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft);
  cursor: pointer; opacity: 0;
}
.hist-del:hover{ color: var(--danger); background: rgba(0,0,0,.04); }
.hist-row:hover .hist-del, .hist-row.active .hist-del, .hist-del:focus-visible{ opacity: 1; }
.hist-empty{ margin: 18px 10px; font-size: 13.5px; color: var(--ink-faint); }

.sb-install{
  height: 40px; margin-top: 6px; padding: 0 10px;
  display: flex; align-items: center; gap: 8px;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--green); font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer;
}
.sb-install:hover{ background: var(--bg-hover); }
.sb-note{ margin: 6px 10px 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-faint); }

.scrim{ position: fixed; inset: 0; z-index: 20; background: rgba(20,24,21,.4); }

.main{ flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar{
  height: 56px; flex-shrink: 0; padding: 0 8px;
  display: flex; align-items: center; gap: 4px;
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
}
.title{
  flex: 1; min-width: 0; margin: 0;
  font-size: 15px; font-weight: 700; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Sin conversación abierta: el título no se ve (sigue ahí para lectores de pantalla y para el hueco del flex) */
.title.is-empty{ color: transparent; user-select: none; }

.scroll{ flex: 1; overflow-y: auto; overscroll-behavior: contain; }

/* ============================================================
   BIENVENIDA (estado vacío): pregunta centrada + sugerencias
   ============================================================ */
.welcome{
  max-width: var(--col); margin: 0 auto; padding: 0 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.welcome h2{ margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.welcome p{ margin: 0; font-size: 15px; color: var(--ink-soft); }

.main.empty .scroll{ flex: 0 0 auto; margin-top: auto; overflow: visible; }
.main.empty .thread{ display: none; }
.main:not(.empty) .welcome{ display: none; }
.main.empty .composer-wrap{ margin-bottom: auto; padding-top: 22px; }
.main:not(.empty) .chips, .main:not(.empty) .install-link{ display: none; }

.chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.chip{
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  font-size: 13.5px; cursor: pointer;
}
.chip:hover{ background: var(--bg-soft); }

/* ============================================================
   CONVERSACIÓN
   ============================================================ */
.thread{
  max-width: var(--col); margin: 0 auto; padding: 12px 18px 28px;
  display: flex; flex-direction: column; gap: 22px;
}
.msg.user{
  align-self: flex-end; max-width: 85%;
  padding: 10px 16px; border-radius: 20px; background: var(--bubble);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg.bot{ display: flex; flex-direction: column; gap: 10px; }
.msg.bot .logo{ flex-shrink: 0; }
.msg.bot .body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.md{ overflow-wrap: anywhere; }
.md p{ margin: 0 0 10px; }
.md :is(ul, ol){ margin: 0 0 10px; padding-left: 20px; }
.md li{ margin: 0 0 6px; }
.md > :last-child{ margin-bottom: 0; }
.md strong{ font-weight: 700; }

.food{
  color: var(--green); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid var(--green-pale);
}
.food:hover{ color: var(--green-dark); border-bottom-color: var(--green); }

.status{ display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.dots{ display: inline-flex; gap: 4px; }
.dots i{ width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 1.2s infinite ease-in-out; }
.dots i:nth-child(2){ animation-delay: .15s; }
.dots i:nth-child(3){ animation-delay: .3s; }
@keyframes pulse{ 0%,80%,100%{ opacity: .25; transform: scale(.8); } 40%{ opacity: 1; transform: none; } }

.cur{
  display: inline-block; width: 8px; height: 15px; margin-left: 2px; vertical-align: -2px;
  background: var(--green); animation: blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }

.actions{ display: flex; gap: 2px; margin-left: -10px; }
.act{
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.act:hover{ background: var(--bg-hover); color: var(--ink); }

.err{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--danger); }
.err button{
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--ink); font-size: 13.5px; cursor: pointer;
}
.err button:hover{ background: var(--bg-soft); }

/* ============================================================
   CAJA DE PREGUNTA
   ============================================================ */
.composer-wrap{ flex-shrink: 0; width: 100%; max-width: calc(var(--col) + 32px); margin: 0 auto; padding: 8px 16px 0; }
.composer{
  display: flex; align-items: flex-end; gap: 4px;
  padding: 6px;
  background: var(--bg-soft); border: 1px solid transparent; border-radius: 28px;
}
.composer:focus-within{ border-color: var(--line); }
.composer textarea{
  flex: 1; min-width: 0; max-height: 168px; padding: 11px 0;
  border: 0; outline: 0; resize: none; background: transparent;
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);   /* 16px: iOS no hace zoom */
}
.composer textarea::placeholder{ color: var(--ink-faint); }
#btnAttach{ color: var(--ink-soft); border-radius: 999px; }
#btnAttach:hover{ color: var(--ink); }

/* Foto preparada para enviar */
.attach-preview{
  width: max-content; max-width: 100%; margin: 0 0 8px;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px 6px 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg);
  font-size: 13.5px; color: var(--ink-soft);
}
.attach-preview img{ width: 52px; height: 52px; object-fit: cover; border-radius: 11px; }
.attach-preview .ib{ width: 40px; height: 40px; }

/* Foto dentro de la burbuja del usuario */
.msg-img{
  display: block; width: 100%; max-width: 240px; max-height: 240px; margin: 2px 0 8px;
  object-fit: cover; border-radius: 14px;
}

.send{
  width: 44px; height: 44px; flex-shrink: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: var(--green); color: #fff; cursor: pointer;
}
.send:hover{ background: var(--green-dark); }
.send:disabled{ background: #C5D1C2; cursor: default; }
.send.stop{ background: var(--ink); }

.foot{
  flex-shrink: 0; padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.install-link{
  min-height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 12px; background: transparent;
  color: var(--green); font-size: 14px; font-weight: 500; cursor: pointer;
}
.install-link:hover{ background: var(--bg-soft); }
.disclaimer{ margin: 0; font-size: 11.5px; color: var(--ink-faint); text-align: center; }

/* ============================================================
   FICHA DEL ALIMENTO (diálogo)
   ============================================================ */
.sheet{
  width: calc(100% - 32px); max-width: 780px; max-height: 88vh; padding: 0; overflow: hidden;
  border: 0; border-radius: 20px; background: var(--bg); color: var(--ink);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.sheet::backdrop{ background: rgba(20,24,21,.45); }
/* Cabecera fija y cuerpo con scroll: la ficha completa es larga */
.sheet-inner{ display: flex; flex-direction: column; max-height: 88vh; }
.sheet-head{
  flex-shrink: 0; display: flex; align-items: flex-start; gap: 8px;
  padding: 16px 12px 12px 22px; border-bottom: 1px solid var(--line-soft);
}
.sheet-head > div{ flex: 1; min-width: 0; padding-top: 4px; }
.sheet-cat{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green);
}
.sheet-cat .star{
  padding: 2px 8px; border-radius: 999px; background: #FBEBD9; color: #7A4210;
  font-size: 10.5px; letter-spacing: .06em;
}
.sheet-title{ margin: 4px 0 0; font-size: 22px; font-weight: 700; line-height: 1.2; }
.sheet-body:focus{ outline: none; }   /* recibe el foco al abrir para poder desplazarse con el teclado */
.sheet-body{
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 22px 24px; display: flex; flex-direction: column; gap: 16px; font-size: 14.5px;
}

/* Secciones de la ficha */
.fs{ display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-radius: 14px; background: var(--bg-side); }
.fs-head{
  margin: 0; display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.fs-head .cn{ font-family: 'Noto Serif SC', 'Songti SC', serif; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--green); }

.props{ margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: baseline; }
.props dt{ font-size: 13px; color: var(--ink-soft); }
.props dd{ margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pill{ padding: 3px 10px; border-radius: 999px; font-size: 13px; line-height: 1.5; background: var(--bg); border: 1px solid var(--line); }
.pill.p-mer{ background: #E8F0E4; border-color: transparent; color: var(--green-dark); }
.pill.p-ton{ background: #F8E1DC; border-color: transparent; color: #8E2A1B; }
.pill.p-reg{ background: #F6EBD3; border-color: transparent; color: #6E4E10; }
/* Temperatura: del frío (azul) al caliente (rojo); cada tono cambia también de claridad */
.pill.temp{ font-weight: 700; border-color: transparent; }
.pill.t-1{ background: #DCE8F5; color: #1D4E80; }
.pill.t-2{ background: #DDF0EC; color: #1E5E55; }
.pill.t-3{ background: #ECEEE9; color: #454D47; }
.pill.t-4{ background: #FBE8D2; color: #8A4B12; }
.pill.t-5{ background: #F8DCD6; color: #8E2A1B; }

.fs-block{ display: flex; flex-direction: column; gap: 4px; }
/* Textos largos: justificados a ambos lados y sin partir palabras con guion */
.fs-block p, .notes{ text-align: justify; hyphens: none; -webkit-hyphens: none; }
.fs-block p{ margin: 0; line-height: 1.55; }
.fs-label{ display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; }
.fs-label::before{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fs-label.ok{ color: var(--green-dark); }
.fs-label.west{ color: #1D4E80; }
.fs-label.warn{ color: #8A4B12; }

.notes{ margin: 0; white-space: pre-line; line-height: 1.55; }
.muted{ margin: 0; color: var(--ink-soft); }

/* ============================================================
   WHATSAPP (botón flotante)
   Por defecto queda por encima de la caja de pregunta para no tapar
   el botón de enviar; en escritorio ancho baja a la esquina.
   ============================================================ */
.wa-fab{
  position: fixed; z-index: 15;   /* por debajo del velo (20) y del historial móvil (30) */
  right: 16px; bottom: calc(118px + env(safe-area-inset-bottom));
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--green); color: #fff;
  box-shadow: 0 8px 22px -6px rgba(32,117,38,.55);
  transition: transform .15s ease, background .15s ease;
}
.wa-fab:hover{ background: var(--green-dark); color: #fff; transform: scale(1.06); }
.wa-fab:active{ transform: scale(.98); }
@media (min-width: 1200px){
  .wa-fab{ right: 24px; bottom: 24px; width: 56px; height: 56px; }
}

.toast{
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 50;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px;
  background: var(--ink); color: #fff; font-size: 14px; text-align: center;
  opacity: 0; transform: translate(-50%, 8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   MÓVIL: historial como panel deslizante
   ============================================================ */
@media (max-width: 899px){
  .sidebar{
    position: fixed; inset: 0 auto 0 0; z-index: 30;
    width: min(310px, 86vw);
    padding-top: calc(8px + env(safe-area-inset-top));
    transform: translateX(-100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .app.sb-open .sidebar{
    transform: none; visibility: visible;
    box-shadow: 8px 0 30px rgba(0,0,0,.18);
    transition: transform .25s ease;
  }
  .hist-del{ opacity: 1; }
  .main.empty .scroll{ padding-bottom: 8px; }
}

/* ============================================================
   ESCRITORIO: barra lateral fija, conversación centrada
   ============================================================ */
@media (min-width: 900px){
  .only-mobile{ display: none !important; }
  .scrim{ display: none !important; }
  .foot .install-link{ display: none !important; }   /* en escritorio ya está en la barra lateral */
  .topbar{ padding: 0 24px; }
  .title{ text-align: left; }
  .main:not(.empty) .topbar{ border-bottom: 1px solid var(--line-soft); }
  .thread{ padding-top: 28px; }
  .msg.user{ max-width: 70%; }
  .msg.bot{ flex-direction: row; gap: 16px; }
  .msg.bot .logo{ margin-top: 1px; }
  .sheet-head{ padding: 20px 16px 14px 28px; }
  .sheet-body{ padding: 18px 28px 28px; }
}

@media (max-width: 899px){
  .sheet{
    width: 100%; max-width: 100%; margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }
  .sheet-body{ padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}