/* ═══════════════════════════════════════════════════════════════════════════
   Rediseño del chat + adaptación a teléfono.

   La app nació para escritorio: barra lateral fija de 210px, alturas en 100vh,
   tipografías de 13px. En un teléfono eso da una franja lateral que se come la
   pantalla, texto ilegible y el campo de escribir tapado por el teclado.

   Se resuelve en tres frentes:
     · la navegación pasa a una barra INFERIOR (donde llega el pulgar)
     · alturas en dvh, no vh — la barra del navegador móvil crece y encoge, y
       con vh el input del chat queda debajo del borde visible
     · safe areas de iOS/Android, para no quedar bajo el notch ni la barra de
       gestos (necesita viewport-fit=cover en el meta viewport)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. CHAT — rediseño, vale para escritorio y teléfono
   ─────────────────────────────────────────────────────────────────────────── */

#chat-messages {
  padding: 22px 20px 8px;
  gap: 4px;
  scroll-behavior: smooth;
}

/* Los mensajes del mismo lado se agrupan: menos aire entre ellos que entre
   turnos distintos, como en cualquier app de mensajería. */
.msg-row { margin-bottom: 14px; }
.msg-row + .msg-row { margin-top: 2px; }

.msg-bubble {
  max-width: 76%;
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.62;
  border: 0;
  animation: burbuja-entra .22s ease-out;
  overflow-wrap: anywhere;
}

@keyframes burbuja-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .msg-bubble { animation: none; }
  #chat-messages { scroll-behavior: auto; }
}

/* El usuario habla en el color de la app; el coach, sobre una superficie
   neutra. Invertirlo (coach en color) hacía que la pantalla gritara. */
.msg-row.user .msg-bubble {
  background: var(--sage);
  color: #16240f;
  border-radius: 16px 16px 4px 16px;
}
.msg-row.user .msg-bubble strong { color: #16240f; font-weight: 700; }
.msg-row.user .msg-bubble code {
  background: rgba(0, 0, 0, .12);
  color: #16240f;
}

.msg-row.ai .msg-bubble {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 4px;
  color: var(--text);
}
.msg-row.ai .msg-bubble strong { color: var(--sage); font-weight: 600; }

/* Ritmo interno del mensaje del coach: suele traer listas y párrafos */
.msg-bubble p { margin: 0 0 10px; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble ul, .msg-bubble ol { margin: 8px 0; padding-left: 20px; }
.msg-bubble li { margin-bottom: 5px; }
.msg-bubble li::marker { color: var(--sage); }
.msg-bubble h1, .msg-bubble h2, .msg-bubble h3 {
  font-size: 14.5px;
  font-weight: 600;
  margin: 14px 0 6px;
  color: var(--sage);
}
.msg-bubble h1:first-child,
.msg-bubble h2:first-child,
.msg-bubble h3:first-child { margin-top: 0; }

.msg-bubble pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 10px 0;
  overflow-x: auto;
}
.msg-bubble pre code { padding: 12px; font-size: 12.5px; line-height: 1.5; }

.msg-bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
}
.msg-bubble th, .msg-bubble td {
  text-align: left;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--border);
}
.msg-bubble th { color: var(--text-muted); font-weight: 600; }

.msg-time {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 5px;
  padding: 0 4px;
}
.msg-row.user .msg-time { text-align: right; }

/* Estado mientras el coach consulta la base */
.msg-status {
  font-size: 11.5px !important;
  color: var(--sand) !important;
  margin-top: 6px !important;
  padding-left: 4px;
  font-variant-numeric: tabular-nums;
}

.msg-thinking .msg-bubble { color: var(--text-muted); font-style: normal; }

.btn-extract-routine {
  border-radius: 5px;
  padding: 2px 7px !important;
  transition: color .15s, background .15s;
}
.btn-extract-routine:hover {
  color: var(--sage) !important;
  background: var(--sage-dim) !important;
}

/* ── Zona de escritura ──────────────────────────────────────────────────── */
.chat-input-area {
  padding: 12px 20px 16px;
  gap: 10px;
  align-items: flex-end;
  background: var(--surface);
}

#chat-input {
  /* 16px es el mínimo: por debajo, Safari hace zoom al enfocar el campo y
     descoloca toda la pantalla. Es el bug clásico de formularios en iPhone. */
  font-size: 16px;
  line-height: 1.5;
  padding: 11px 14px;
  border-radius: 20px;
  max-height: 140px;
  transition: border-color .15s;
}
#chat-input:focus { border-color: var(--sage); outline: none; }

.chat-btn {
  border-radius: 20px;
  font-weight: 600;
  transition: filter .15s, transform .1s;
}
.chat-btn:active { transform: scale(.96); }
.btn-send { background: var(--sage); color: #16240f; }
.btn-send:hover { filter: brightness(1.08); }
.btn-send:disabled { opacity: .5; }

.chat-welcome {
  margin: auto;
  text-align: center;
  padding: 32px 24px;
  color: var(--text-muted);
}
.chat-welcome .big { font-size: 40px; margin-bottom: 10px; opacity: .85; }
.chat-welcome strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 6px; }
.chat-welcome span { font-size: 13.5px; line-height: 1.55; display: block; max-width: 34ch; margin: 0 auto; }

/* ───────────────────────────────────────────────────────────────────────────
   2. TELÉFONO — navegación abajo, alturas dinámicas, safe areas
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 820px) {

  /* dvh en vez de vh: la barra del navegador móvil aparece y desaparece, y con
     vh la zona de escribir del chat queda por debajo del borde visible. */
  #app {
    flex-direction: column;
    height: 100dvh;
    min-height: 100dvh;
  }

  /* ── La barra lateral pasa a ser un cajón que entra desde el costado ────── */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 264px;
    max-width: 82vw;
    min-width: 0;
    z-index: 200;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--border);
    border-top: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Fuera de pantalla hasta que se abre. transform y no `left` porque se
       compone en la GPU: en un teléfono la diferencia se nota. */
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    overflow-y: auto;
  }
  #sidebar.abierto { transform: none; box-shadow: var(--shadow-md); }

  /* Fondo oscuro detrás del cajón: cierra al tocarlo */
  #velo-menu {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
  }
  #velo-menu.visible { opacity: 1; pointer-events: auto; }

  @media (prefers-reduced-motion: reduce) {
    #sidebar, #velo-menu { transition: none; }
  }

  /* Dentro del cajón el logo sí entra, y ayuda a ubicarse */
  .sidebar-logo {
    display: block;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-bottom { display: block; }

  .nav-section {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
  }

  .nav-btn, .nav-btn-action {
    /* 52px: por debajo de ~44px los dedos fallan el objetivo */
    min-height: 52px;
    font-size: 14.5px;
    padding: 0 20px;
    gap: 13px;
  }

  .nav-icon { font-size: 18px; }
  .nav-label { font-size: 14px; }

  /* ── Contenido ─────────────────────────────────────────────────────────── */
  #content {
    order: 1;
    flex: 1;
    min-height: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .tab-panel { padding: 16px 14px; }

  .panel-title {
    font-size: 17px;
    margin-bottom: 14px;
  }
  .panel-title span { display: block; margin: 3px 0 0; font-size: 11px; }

  /* ── Chat a pantalla completa ──────────────────────────────────────────── */
  #tab-chat.tab-panel { padding: 0; }

  .chat-container { height: 100%; min-height: 0; }

  #chat-messages { padding: 16px 14px 6px; }

  .msg-bubble {
    max-width: 88%;
    font-size: 15px;
    padding: 11px 14px;
  }

  .chat-input-area {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }

  /* El botón pasa a ser circular: ocupa menos y es mejor objetivo táctil */
  .chat-btn {
    min-width: 46px;
    height: 46px;
    padding: 0 14px;
    border-radius: 23px;
    font-size: 14px;
  }
  .btn-clear { padding: 0; min-width: 46px; }

  /* ── Tarjetas y gráficos ───────────────────────────────────────────────── */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .charts-grid, .trend-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .chart-card, .heatmap-card, .activities-card, .peso-card, .nutri-card {
    padding: 14px;
  }

  .chart-wrap { height: 190px; }

  /* Los formularios en línea no entran a lo ancho */
  .peso-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .peso-form, .nutri-form { width: 100%; }
  .peso-form input, .nutri-form input { flex: 1; min-width: 0; }

  /* 16px en TODO input: evita el zoom automático de Safari al enfocar */
  input, textarea, select { font-size: 16px; }

  /* El heatmap del año no entra: se desplaza en su propio contenedor */
  .heatmap-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Mapa */
  #tab-map.tab-panel { padding: 14px !important; }
  .map-header { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  #map { height: 60dvh !important; }

  /* Onboarding y login en pantalla chica */
  .paso, .auth-caja { padding: 24px 20px; }
  #onboarding { padding: 16px; align-items: flex-start; }
  body.pantalla-auth { padding: 16px; align-items: flex-start; padding-top: 8dvh; }
}

/* Teléfonos angostos (iPhone SE y similares) */
@media (max-width: 380px) {
  .nav-label { display: none; }
  .nav-btn, .nav-btn-action { min-width: 48px; min-height: 48px; }
  .nav-icon { font-size: 21px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
}

/* ───────────────────────────────────────────────────────────────────────────
   3. Detalles de plataforma
   ─────────────────────────────────────────────────────────────────────────── */

/* Sin resaltado azul al tocar, y sin selección accidental al arrastrar */
@media (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent; }
  .nav-btn, .nav-btn-action, .chat-btn, button { touch-action: manipulation; }
}

/* Foco visible para teclado, sin ensuciar el toque */
:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────────────────
   4. Barra superior de teléfono
   En escritorio no existe: ahí el usuario, el costo y "Salir" viven en el pie
.chat-welcome strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 6px; }
.chat-welcome span { font-size: 13.5px; line-height: 1.55; display: block; max-width: 34ch; margin: 0 auto; }

/* ───────────────────────────────────────────────────────────────────────────
   2. TELÉFONO — navegación abajo, alturas dinámicas, safe areas
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 820px) {

  /* dvh en vez de vh: la barra del navegador móvil aparece y desaparece, y con
     vh la zona de escribir del chat queda por debajo del borde visible. */
  #app {
    flex-direction: column;
    height: 100dvh;
    min-height: 100dvh;
  }

  /* ── La barra lateral pasa a ser un cajón que entra desde el costado ────── */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 264px;
    max-width: 82vw;
    min-width: 0;
    z-index: 200;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--border);
    border-top: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Fuera de pantalla hasta que se abre. transform y no `left` porque se
       compone en la GPU: en un teléfono la diferencia se nota. */
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    overflow-y: auto;
  }
  #sidebar.abierto { transform: none; box-shadow: var(--shadow-md); }

  /* Fondo oscuro detrás del cajón: cierra al tocarlo */
  #velo-menu {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
  }
  #velo-menu.visible { opacity: 1; pointer-events: auto; }

  @media (prefers-reduced-motion: reduce) {
    #sidebar, #velo-menu { transition: none; }
  }

  /* Dentro del cajón el logo sí entra, y ayuda a ubicarse */
  .sidebar-logo {
    display: block;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-bottom { display: block; }

  .nav-section {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
  }

  .nav-btn, .nav-btn-action {
    /* 52px: por debajo de ~44px los dedos fallan el objetivo */
    min-height: 52px;
    font-size: 14.5px;
    padding: 0 20px;
    gap: 13px;
  }

  .nav-icon { font-size: 18px; }
  .nav-label { font-size: 14px; }

  /* ── Contenido ─────────────────────────────────────────────────────────── */
  #content {
    order: 1;
    flex: 1;
    min-height: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .tab-panel { padding: 16px 14px; }

  .panel-title {
    font-size: 17px;
    margin-bottom: 14px;
  }
  .panel-title span { display: block; margin: 3px 0 0; font-size: 11px; }

  /* ── Chat a pantalla completa ──────────────────────────────────────────── */
  #tab-chat.tab-panel { padding: 0; }

  .chat-container { height: 100%; min-height: 0; }

  #chat-messages { padding: 16px 14px 6px; }

  .msg-bubble {
    max-width: 88%;
    font-size: 15px;
    padding: 11px 14px;
  }

  .chat-input-area {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }

  /* El botón pasa a ser circular: ocupa menos y es mejor objetivo táctil */
  .chat-btn {
    min-width: 46px;
    height: 46px;
    padding: 0 14px;
    border-radius: 23px;
    font-size: 14px;
  }
  .btn-clear { padding: 0; min-width: 46px; }

  /* ── Tarjetas y gráficos ───────────────────────────────────────────────── */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .charts-grid, .trend-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .chart-card, .heatmap-card, .activities-card, .peso-card, .nutri-card {
    padding: 14px;
  }

  .chart-wrap { height: 190px; }

  /* Los formularios en línea no entran a lo ancho */
  .peso-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .peso-form, .nutri-form { width: 100%; }
  .peso-form input, .nutri-form input { flex: 1; min-width: 0; }

  /* 16px en TODO input: evita el zoom automático de Safari al enfocar */
  input, textarea, select { font-size: 16px; }

  /* El heatmap del año no entra: se desplaza en su propio contenedor */
  .heatmap-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Mapa */
  #tab-map.tab-panel { padding: 14px !important; }
  .map-header { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  #map { height: 60dvh !important; }

  /* Onboarding y login en pantalla chica */
  .paso, .auth-caja { padding: 24px 20px; }
  #onboarding { padding: 16px; align-items: flex-start; }
  body.pantalla-auth { padding: 16px; align-items: flex-start; padding-top: 8dvh; }
}

/* Teléfonos angostos (iPhone SE y similares) */
@media (max-width: 380px) {
  .nav-label { display: none; }
  .nav-btn, .nav-btn-action { min-width: 48px; min-height: 48px; }
  .nav-icon { font-size: 21px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
}

/* ───────────────────────────────────────────────────────────────────────────
   3. Detalles de plataforma
   ─────────────────────────────────────────────────────────────────────────── */

/* Sin resaltado azul al tocar, y sin selección accidental al arrastrar */
@media (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent; }
  .nav-btn, .nav-btn-action, .chat-btn, button { touch-action: manipulation; }
}

/* Foco visible para teclado, sin ensuciar el toque */
:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────────────────
   4. Barra superior de teléfono
   En escritorio no existe: ahí el usuario, el costo y "Salir" viven en el pie
   de la barra lateral. En teléfono esa barra pasa abajo y se queda sin pie.
   ─────────────────────────────────────────────────────────────────────────── */
#barra-movil { display: none; }

@media (max-width: 820px) {
  #barra-movil:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    padding-top: calc(9px + env(safe-area-inset-top, 0px));
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    flex: none;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  /* Con la barra propia, el padding del contenedor sobra */
  #content:has(#barra-movil:not([hidden])) { padding-top: 0; }

  .bm-marca {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -.01em;
  }

  .bm-costo {
    font-size: 11px;
    color: var(--sand);
    font-variant-numeric: tabular-nums;
  }

  .bm-usuario {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #barra-movil .btn-logout {
    flex: none;
    min-height: 32px;
    padding: 5px 11px;
  }

  .bm-btn-icon {
    font-size: 16px;
    padding: 4px;
    border-radius: 50%;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bm-btn-icon:active { transform: scale(0.92); }
}

/* ───────────────────────────────────────────────────────────────────────────
   5. Botón de menú (hamburguesa) — solo teléfono
   ─────────────────────────────────────────────────────────────────────────── */
.bm-menu { display: none; }

@media (max-width: 820px) {
  .bm-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-left: -8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bm-menu:active { background: var(--elevated); }

  /* Tres líneas dibujadas con un solo elemento y sus pseudo-elementos */
  .bm-menu-barras,
  .bm-menu-barras::before,
  .bm-menu-barras::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform .22s ease, opacity .18s ease;
  }
  .bm-menu-barras { position: relative; }
  .bm-menu-barras::before,
  .bm-menu-barras::after {
    content: '';
    position: absolute;
    left: 0;
  }
  .bm-menu-barras::before { top: -6px; }
  .bm-menu-barras::after  { top: 6px; }

  /* Abierto: se convierte en una X */
  .bm-menu[aria-expanded="true"] .bm-menu-barras { background: transparent; }
  .bm-menu[aria-expanded="true"] .bm-menu-barras::before { transform: translateY(6px) rotate(45deg); }
  .bm-menu[aria-expanded="true"] .bm-menu-barras::after  { transform: translateY(-6px) rotate(-45deg); }

  /* Con el cajón abierto, el fondo no debe desplazarse */
  body.menu-abierto { overflow: hidden; }
}

/* ───────────────────────────────────────────────────────────────────────────
   6. Botón "ir al último mensaje" del chat
   Aparece solo cuando te fuiste hacia arriba: si estás al final, estorba.
   ─────────────────────────────────────────────────────────────────────────── */
.chat-container { position: relative; }

.btn-bajar {
  position: absolute;
  right: 20px;
  /* Justo encima de la zona de escritura */
  bottom: 86px;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;

  border: 1px solid var(--border-hi);
  border-radius: 50%;
  background: var(--elevated);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .35);

  opacity: 0;
  transform: translateY(8px) scale(.9);
  transition: opacity .18s ease, transform .18s ease, border-color .15s;
  pointer-events: none;
}

.btn-bajar[hidden] { display: none; }

.btn-bajar.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.btn-bajar:hover { border-color: var(--sage); color: var(--sage); }
.btn-bajar:active { transform: scale(.93); }

.btn-bajar-flecha { font-size: 17px; line-height: 1; }

/* Punto cuando el coach escribió mientras mirabas hacia arriba */
.btn-bajar-nuevos {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 9px;
  height: 9px;
  border-radius: 5px;
  background: var(--sage);
  border: 2px solid var(--surface);
}
.btn-bajar-nuevos[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn-bajar { transition: opacity .1s; transform: none; }
  .btn-bajar.visible { transform: none; }
}

@media (max-width: 820px) {
  .btn-bajar {
    right: 14px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    width: 42px;
    height: 42px;
  }
}

/* ── Frase del sidebar en el menu movil ──────────────────
   En escritorio la frase se estira para empujar el pie hacia abajo. En el
   cajon del celular ese `flex: 1` la dejaria pelearse por el alto con siete
   botones de 52px, y en una pantalla chica el texto se corta a la mitad.
   Aca ocupa lo que necesita y ya. */
@media (max-width: 820px) {
  #frase-panel { flex: 0 0 auto; padding: 14px 20px 20px; }
  #frase-texto { font-size: 12.5px; }
}