/* ---------------------------------------------------------------------------
   Paleta Don Paco. Sale del logo (design/logo.svg, que no se publica): el marrón
   de la tinta (#6C3E1B), el crema del fondo (#FED990) y el dorado de los detalles
   (#D4A113). Los tres colores que no son del logo están marcados: el verde de
   WhatsApp es de WhatsApp, el verde de "listo" es del estado del pedido y el
   gris de la ayuda de iOS es de sistema.

   Todo el color de la app sale de acá: cambiar un valor cambia la app entera.
--------------------------------------------------------------------------- */
:root {
  --dp-marca: #6C3E1B;           /* marrón del logo: header, botones, texto fuerte */
  --dp-marca-suave: #8A5A2B;     /* marrón para textos secundarios sobre claro */
  --dp-dorado: #D4A113;          /* dorado del logo: focos y bordes activos */
  --dp-crema: #FED990;           /* el crema del logo: acentos suaves */
  --dp-crema-suave: #FFF4DE;     /* tinte de crema para fondos livianos */
  --dp-crema-activa: #F7E3B4;    /* tinte más fuerte (hover y active) */
  --dp-borde: #ECD595;           /* bordes cálidos (avisos, tarjetas) */
  --dp-borde-suave: #E7D9BE;     /* separadores y bordes de bajo contraste */
  --dp-fondo: #FBF4E6;           /* fondo de la app */
  --dp-fondo-chat: #F5E6CB;      /* fondo de la conversación */
  --dp-papel: #FFFDF7;           /* burbujas, panel y tarjetas */
  --dp-blanco: #FFFFFF;          /* texto sobre el marrón */
  --dp-texto-suave: #8A6A48;     /* textos de apoyo */
  --dp-burbuja-usuario: #FBF1DA; /* lo que escribió el cliente (crema suave) */
  --dp-ok: #4C6B4F;              /* pedido cerrado (verde apagado) */
  --dp-ok-suave: #A8C0A8;        /* barrita llena (verde apagado) */
  --dp-wa: #25D366;              /* WhatsApp (marca ajena) */
  --dp-wa-hover: #1FBE5B;
  --dp-wa-oscuro: #128C7E;
  --dp-wa-texto: #05331D;
}

/* Don Paco — chat UI.
   El layout se ancla al *visual viewport* (ver app.ts): cuando se abre el
   teclado del celular la app se achica en vez de scrollear la página, así el
   header nunca se va de pantalla y el último mensaje queda visible. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* #messages/#chips/#inputbar usan display:flex, así que el atributo hidden
   (que es como app.ts muestra la pantalla inicial o el chat) necesita ganarle. */
[hidden] { display: none !important; }

/* ---------- Pantalla de arranque ---------- */
#boot {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--dp-marca);
  font-size: 14px;
}

/* ---------- Pantalla inicial: elegir cómo pedir ---------- */
#picker {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Con el logo la pantalla inicial es más alta: si no entra en un celular
     chico, `safe` la alinea arriba en vez de recortar el logo (donde el
     navegador no lo soporte queda el `center` de arriba, como antes). */
  justify-content: safe center;
  gap: 14px;
  padding: 24px 18px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
/* La pantalla inicial abre con el logo, arriba de la pregunta. El SVG trae el
   fondo crema opaco, así que va sobre una banda del mismo crema (--dp-crema): el
   rectángulo del logo se pierde en la banda y sólo se ve el dibujo. */
.picker-hero {
  align-self: stretch;
  background: var(--dp-crema);
  border-radius: 18px;
  padding: 12px 16px;
  box-shadow: 0 2px 12px rgba(108, 62, 27, .16);
}
.picker-hero img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
}
.picker-lead {
  margin: 0 0 2px;
  text-align: center;
  color: var(--dp-marca);
  font-size: 15px;
  font-weight: 600;
}
.mode-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--dp-papel);
  border: 1px solid var(--dp-borde-suave);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.mode-btn:active { transform: scale(.98); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.mode-btn .mode-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mode-btn .mode-txt b { font-size: 16px; color: var(--dp-marca); }
.mode-btn .mode-txt small { font-size: 13px; color: var(--dp-texto-suave); line-height: 1.35; }

/* ---------- Badge del modo activo (vuelve a la pantalla inicial) ---------- */
.mode-badge {
  background: var(--dp-crema-suave);
  color: var(--dp-marca-suave);
  border: 1px solid var(--dp-borde-suave);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.mode-badge:active { background: var(--dp-crema-activa); }

/* Aviso de "estamos cerrados" en la pantalla inicial. */
#picker-note {
  margin: 0 0 2px;
  text-align: center;
  font-size: 13px;
  color: var(--dp-marca-suave);
  background: var(--dp-crema-suave);
  border: 1px solid var(--dp-borde);
  border-radius: 10px;
  padding: 9px 12px;
}

/* Fuera de horario no se puede pedir de la vitrina. */
.mode-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.mode-btn:disabled:active { transform: none; }

/* Instagram del local, abajo de los dos botones (ver `renderInstagram` en
   app.ts). Sólo aparece si la fila `Instagram` de `Configuracion` tiene algo. */
.picker-ig {
  align-self: center;
  width: fit-content;
  margin-top: 2px;
  padding: 8px 14px;
  border: 1px solid var(--dp-borde-suave);
  border-radius: 999px;
  background: var(--dp-papel);
  color: var(--dp-marca);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  transition: transform .12s ease, background .12s ease;
}
.picker-ig:hover { background: var(--dp-crema-suave); }
.picker-ig:active { transform: scale(.97); }

/* ---------------------------------------------------------------------------
   Barrita de progreso del pedido: cuántos datos faltan, siempre a la vista
   (en el celular el panel del pedido no se ve, y esto sí).
--------------------------------------------------------------------------- */
#progreso {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--dp-fondo);
  border-bottom: 1px solid var(--dp-borde-suave);
}
#progreso .pg-barra {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--dp-crema-suave);
  overflow: hidden;
}
#progreso .pg-barra i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--dp-marca-suave);   /* marrón apagado, sin saltos de color */
  transition: width .25s ease;
}
/* Cuando ya está todo, la barrita se aclara un poco (nada de verde brillante). */
#progreso[data-nivel="lleno"] .pg-barra i { background: var(--dp-ok); }
#progreso .pg-texto {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--dp-texto-suave);
  white-space: nowrap;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;            /* nada scrollea salvo #messages */
  overscroll-behavior: none;
  background: var(--dp-fondo-chat);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

#app {
  position: fixed;
  top: var(--vv-top, 0px);
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 720px;
  height: var(--vv-h, 100dvh);
  display: flex;
  flex-direction: column;
  background: var(--dp-fondo);
  box-shadow: 0 0 24px rgba(0, 0, 0, .12);
}

/* ---------- Header ---------- */
/* En la pantalla inicial la barra de arriba no va: el logo ya dice de quién es la
   app y esa franja le robaba alto. Vuelve apenas el cliente entra al chat (ver
   `mostrarBarra` en app.ts). El aire del notch pasa a la pantalla inicial. */
body.en-inicio header { display: none; }
body.en-inicio #picker { padding-top: calc(24px + env(safe-area-inset-top)); }

header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--dp-papel);
  color: var(--dp-marca);
  border-bottom: 1px solid var(--dp-borde-suave);
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  z-index: 5;
}
body.kb-open header { padding-top: 10px; }   /* con teclado no hay notch visible */
header h1 { flex: 1; margin: 0; font-size: 17px; font-weight: 600; }
.icon-btn {
  background: transparent;
  color: var(--dp-marca-suave);
  border: 1px solid var(--dp-borde-suave);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
}
.icon-btn:active { background: var(--dp-crema-suave); }

/* ---------- Mensajes ---------- */
#messages {
  flex: 1 1 auto;
  min-height: 0;               /* imprescindible para que el scroll viva acá */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}
.row { display: flex; width: 100%; }
.row.user { justify-content: flex-end; }
.row.bot { justify-content: flex-start; }
.bubble {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  animation: pop .18s ease-out;
}
.bubble.user { background: var(--dp-burbuja-usuario); border-bottom-right-radius: 3px; }
.bubble.bot { background: var(--dp-papel); border-bottom-left-radius: 3px; }
.bubble b { font-weight: 600; }
.bubble a { color: var(--dp-marca); }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }

.bubble.typing { padding: 14px 18px; }
.bubble.typing span {
  display: inline-block; width: 8px; height: 8px; margin: 0 2px;
  border-radius: 50%; background: var(--dp-texto-suave);
  animation: typing 1.2s infinite ease-in-out;
}
.bubble.typing span:nth-child(2) { animation-delay: .2s; }
.bubble.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Chips ---------- */
#chips {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: var(--dp-papel);
  border-top: 1px solid var(--dp-fondo-chat);
  overflow-x: auto;            /* una sola fila: ahorra alto con el teclado */
  scrollbar-width: none;
}
#chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  background: var(--dp-crema-suave);
  border: 1px solid var(--dp-borde);
  color: var(--dp-marca);
  border-radius: 16px;
  padding: 7px 13px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.chip:active { background: var(--dp-crema-activa); }

/* ---------- Barra de entrada ---------- */
#inputbar {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--dp-fondo);
  border-top: 1px solid var(--dp-borde-suave);
}
body.kb-open #inputbar { padding-bottom: 10px; }
#input {
  flex: 1;
  min-width: 0;
  padding: 12px 15px;
  font-size: 16px;             /* 16px evita el zoom automático en iOS */
  border: 1px solid var(--dp-borde-suave);
  border-radius: 24px;
  outline: none;
  background: var(--dp-papel);
}
#input:focus { border-color: var(--dp-marca-suave); }
#send {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: var(--dp-marca); color: var(--dp-blanco);
  font-size: 18px; cursor: pointer;
}
#send:disabled { opacity: .5; }

/* ---------- Hint de instalación en iOS ---------- */
#ios-hint {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 20;
  background: #333; color: var(--dp-blanco);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}
#ios-hint button {
  margin-left: 8px; border: 0; border-radius: 8px;
  background: var(--dp-papel); color: #333; padding: 5px 10px; cursor: pointer;
}
/* ---------------------------------------------------------------------------
   Stickers: los botones que van pegados a cada respuesta del bot.
   Viven en el flujo de la conversación (no en una barra fija), así que sólo el
   último mensaje los tiene y desaparecen solos cuando el cliente contesta.
--------------------------------------------------------------------------- */
.stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 12px 10px;
}

.sticker {
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  padding: 7px 12px;
  border: 1px solid var(--dp-borde);
  border-radius: 999px;
  background: var(--dp-papel);
  color: var(--dp-marca);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transition: transform .12s ease, background .12s ease;
}

.sticker:hover { background: var(--dp-crema-suave); }
.sticker:active { transform: scale(.96); background: var(--dp-crema-activa); }

/* ---------------------------------------------------------------------------
   Mapa de la entrega: el iframe de OpenStreetMap con el pin, para que el
   cliente confirme la ubicación antes de cerrar el pedido (ver app.ts).
   Va entre la burbuja y los botones, con el mismo ancho que ellos.
--------------------------------------------------------------------------- */
.map-card {
  flex: 0 0 auto;              /* que no se achique en la columna del chat */
  margin: 2px 12px 8px;
  border: 1px solid var(--dp-borde-suave);
  border-radius: 12px;
  overflow: hidden;
  background: var(--dp-papel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  max-width: 420px;
}
.map-frame {
  display: block;
  width: 100%;
  height: 190px;
  border: 0;
}
.map-info {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.map-estado {
  align-self: flex-start;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dp-marca-suave);
}
.map-dir {
  margin: 0;
  font-size: 14px;
  color: var(--dp-marca);
  overflow-wrap: anywhere;
}
.map-link {
  font-size: 13px;
  color: var(--dp-marca);
  text-decoration: none;
  border-bottom: 1px solid rgba(123, 63, 0, .3);
  align-self: flex-start;
}
.map-link:hover { border-bottom-color: var(--dp-marca); }

/* Un sticker que es un link (ej. coordinar por WhatsApp): mismo look, sin
   subrayado, y en verde cuando es WhatsApp para que se reconozca de una. */
a.sticker { text-decoration: none; display: inline-block; }
a.sticker.wa {
  background: var(--dp-wa);
  border-color: var(--dp-wa-oscuro);
  color: var(--dp-wa-texto);
  font-weight: 600;
}
a.sticker.wa:hover { background: var(--dp-wa-hover); }
a.sticker.wa:active { background: var(--dp-wa-oscuro); transform: scale(.96); }

/* La barra de abajo queda sólo con los atajos: si no hay ninguno, no ocupa. */
#chips:empty { display: none; }

/* ---------------------------------------------------------------------------
   Pantalla grande: el chat a la izquierda y el pedido a la derecha.
   En el celular #pedido no se ve y #chat ocupa todo, como siempre.
--------------------------------------------------------------------------- */
/* #app es una columna (header + #main) y #main es la que se da vuelta: columna
   en el celular, fila en la compu (chat a la izquierda, pedido a la derecha). */
#main {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Adentro, #chat vuelve a ser columna con sus tres bloques: mensajes (el único
   que scrollea), chips y barra de entrada. El `min-height: 0` es imprescindible:
   sin él la columna se estira con el contenido, se pierde el scroll y la barra
   de entrada queda empujada fuera de pantalla. El `min-width: 0` es lo que deja
   que el chat se achique cuando entra el panel del pedido. */
#chat {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#pedido {
  display: none;               /* en el celular no existe */
}

#pedido h2 {
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dp-marca);
}

#pedido .p-vacio { color: var(--dp-texto-suave); font-size: 14px; line-height: 1.5; }

/* ---------- Lo que tiene que saltar a la vista ---------- */
/* Quién recibe el pedido: es lo primero que se busca. */
#pedido .p-destacado {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--dp-crema-suave);
  border: 1px solid var(--dp-borde);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
#pedido .p-dest-label {
  flex: 0 0 auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dp-marca-suave);
  font-weight: 600;
}
#pedido .p-dest-nombre {
  flex: 1 1 auto;
  font-size: 20px;
  font-weight: 700;
  color: var(--dp-marca);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
/* El Nº de pedido, cuando ya está confirmado. */
#pedido .p-nro {
  flex: 0 0 auto;
  background: var(--dp-marca);
  color: var(--dp-blanco);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

#pedido .p-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--dp-borde-suave);
  font-size: 14px;
}
#pedido .p-item .p-cant { flex: 0 0 auto; color: var(--dp-texto-suave); }
#pedido .p-item .p-nom { flex: 1 1 auto; }
#pedido .p-item .p-precio { flex: 0 0 auto; font-weight: 600; }
#pedido .p-item .p-lead { flex: 0 0 auto; color: var(--dp-marca-suave); font-size: 12px; }

#pedido .p-datos { margin: 14px 0 0; font-size: 14px; }
#pedido .p-datos div { display: flex; gap: 8px; padding: 3px 0; }
#pedido .p-datos dt { flex: 0 0 84px; color: var(--dp-texto-suave); margin: 0; }
#pedido .p-datos dd { flex: 1 1 auto; margin: 0; }

#pedido .p-falta {
  margin-top: 14px;
  font-size: 13px;
  color: var(--dp-marca-suave);
  background: var(--dp-crema-suave);
  border: 1px solid var(--dp-borde);
  border-radius: 10px;
  padding: 9px 11px;
  line-height: 1.4;
}

#pedido .p-total {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 2px solid var(--dp-borde-suave);
  font-size: 15px;
}
#pedido .p-total div { display: flex; justify-content: space-between; padding: 2px 0; }
#pedido .p-total .p-min { color: var(--dp-texto-suave); font-size: 13px; }
/* El total: grande y con fondo, es lo otro que se busca de un vistazo. */
#pedido .p-total .p-grande {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--dp-crema-suave);
  border: 1px solid var(--dp-borde);
  color: var(--dp-marca);
  font-size: 20px;
  font-weight: 700;
}

/* El botón del panel: arranca el checkout sin tener que tocar un botón del chat
   (el del chat sigue estando). */
#pedido .p-btn {
  width: 100%;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid var(--dp-marca);
  border-radius: 10px;
  background: var(--dp-papel);
  color: var(--dp-marca);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease;
}
#pedido .p-btn:hover { background: var(--dp-crema-suave); }
#pedido .p-btn:active { background: var(--dp-crema-activa); }

/* Pedido ya cerrado: en el panel queda el detalle, el Nº y el total. */
#pedido .p-cerrado p {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--dp-ok);
  font-weight: 600;
}
#pedido .p-cerrado .p-grande {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--dp-crema-suave);
  border: 1px solid var(--dp-borde);
  color: var(--dp-marca);
  font-size: 20px;
  font-weight: 700;
}
#pedido .p-cerrado .p-aviso {
  margin-top: 10px;
  font-size: 13px;
  color: var(--dp-marca-suave);
  line-height: 1.4;
}

/* Ancho suficiente: entra la columna del pedido. */
@media (min-width: 980px) {
  #app { max-width: 1180px; }

  /* La pantalla inicial no necesita el ancho del panel del pedido: se queda con
     el ancho de un celular y se centra. Antes se estiraba a los 1180px y los dos
     botones quedaban enormes, con el texto perdido en el medio. */
  #picker {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    align-self: center;
  }

  /* El chat a la izquierda (se achica si hace falta) y el pedido a la derecha,
     con su propio scroll: el pedido ya no se arma abajo del chat. */
  #main { flex-direction: row; }
  #pedido {
    display: block;
    flex: 0 0 360px;
    max-width: 420px;
    min-height: 0;
    overflow-y: auto;
    background: var(--dp-papel);
    border-left: 1px solid var(--dp-fondo-chat);
    padding: 16px 14px;
  }

}