/* Estilo «Rajola»: el mosaic hidràulic dels bars d'aquí. Fonts autoallotjades (RGPD). */
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/BricolageGrotesque.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/BricolageGrotesque-ext.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; src: url('/fonts/Figtree.woff2') format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; src: url('/fonts/Figtree-ext.woff2') format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --fondo: #f4f2ee; --fondo-2: #ebe7e0; --superficie: #fdf6e3; --tinta: #1f2a44;
  --suave: #5d6478; --linea: #e6e1d6; --tiza: #1f2a44; --amarillo: #e9b949;
  --hoja: #faf8f4;
  --rojo-tiza: #b8432f; --radio: 10px; --font-texto: 'Figtree', system-ui, sans-serif;
  --font-guix: 'Bricolage Grotesque', system-ui, sans-serif;
  --ease-ios: cubic-bezier(.32, .72, 0, 1); --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-hoja: 420ms; --t-entra: 240ms; --t-toque: 120ms;
}
* { box-sizing: border-box; }
html { background: var(--fondo-2); }
body { margin: 0; color: var(--tinta); background: var(--fondo);
  background-image: radial-gradient(circle at 20% 10%, #f4f2ee 0, transparent 60%),
    radial-gradient(circle at 80% 70%, #f4f2ee 0, transparent 55%); font: 16px/1.45 var(--font-texto); }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
.language-screen { position: fixed; z-index: 20; inset: 0; overflow-y: auto; opacity: 1;
  background: var(--fondo); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
.language-screen.is-leaving { opacity: 0; transform: scale(1.02); }
.app.is-entering { opacity: 0; }
.app { transition: opacity 200ms var(--ease-out); }
.language-tile { height: 56px; background: url('/img/rajola.svg') repeat-x left top / 56px 56px; }
.language-content { width: min(100% - 36px, 684px); margin: auto; padding: 24px 0 32px; }
.language-bar-name { min-height: 29px; margin: 0 0 24px; color: var(--tinta);
  font: 800 27px/1.05 var(--font-guix); }
.language-title { display: grid; gap: 1px; margin: 0 0 25px; color: var(--tinta);
  font: 600 16px/1.25 var(--font-texto); }
.language-options { display: grid; gap: 10px; }
.language-option { min-height: 56px; border: 2px solid var(--tinta); border-radius: var(--radio);
  padding: 12px 16px;
  background: var(--superficie); color: var(--tinta); font-weight: 700; text-align: left; }
.language-option.is-suggested { background: var(--tinta); color: #fff; }
.language-option:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.app { width: min(100%, 720px); min-height: 100dvh; margin: auto;
  padding: 0 18px calc(var(--alto-hoja, 104px) + 10px + env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: baseline; justify-content: space-between; padding: 21px 0 0; }
h1 { margin: 0; color: var(--tiza); font: 400 36px/1 var(--font-guix); }
.language-label select { border: 0; background: transparent; color: var(--suave); font-size: .8rem; }
.notice { margin: 5px 0 0; color: #69708a; font-size: .78rem; }
.search-wrap { position: sticky; z-index: 4; top: 0; display: flex; align-items: center; gap: 8px; margin: 13px -4px 0;
  padding: 10px 4px; background: linear-gradient(var(--fondo) 70%, transparent); }
.search-wrap input { width: 100%; min-width: 0; border: 1px solid #d9d3c6; border-radius: 999px; padding: 10px 40px;
  outline: 0; background: #ffffff; color: var(--tinta); }
.search-wrap input:focus { border-color: var(--amarillo); box-shadow: 0 0 0 2px #e9b94966; }
.allergen-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; min-height: 40px;
  border: 1px solid var(--tinta); border-radius: 999px; padding: 0 11px; background: var(--superficie);
  color: var(--tinta); font-size: .78rem; font-weight: 700; }
.allergen-toggle svg { width: 16px; height: 16px; }
.allergen-panel { display: grid; grid-template-rows: 0fr; margin: 0 0 10px; opacity: 0;
  transition: grid-template-rows var(--t-hoja) var(--ease-ios), opacity var(--t-hoja) var(--ease-ios); }
.allergen-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.allergen-panel-inner { overflow: hidden; border: 1px solid var(--linea); border-radius: 10px; padding: 11px 13px;
  background: var(--superficie); }
.allergen-title { display: block; margin-bottom: 8px; color: var(--tinta); font-weight: 700; }
.allergen-chips, .active-allergen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.allergen-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #c9c4b8; border-radius: 999px;
  padding: 6px 9px; background: #fff; color: var(--tinta); font-size: .82rem; }
.allergen-chip.is-active { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.allergen-chip svg { width: 15px; height: 15px; }
.allergen-active { margin: -2px 0 8px; }
.allergen-notice { display: block; margin-bottom: 6px; color: var(--suave); font-size: .74rem; }
.allergen-active .allergen-chip { padding: 3px 7px; font-size: .74rem; }
.search-icon { position: absolute; left: 17px; color: var(--suave); }
svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button, .close-button { display: grid; place-items: center; border: 0; background: transparent; color: var(--suave); }
.icon-button { position: absolute; right: 12px; width: 34px; height: 34px; }
.ai-label { color: var(--amarillo); font: 400 18px var(--font-guix); }
.ai-chip { border: 1px solid var(--amarillo); border-radius: 999px; padding: 1px 8px; color: var(--amarillo); font-size: .78rem; }
.ai-warning { display: block; margin-top: 8px; color: var(--suave); font-size: .82rem; }
.menu { padding-top: 2px; }
.category { margin: 18px 0 0; }
.category h2 { margin: 0 0 2px; color: var(--amarillo); font: 400 25px/1.1 var(--font-guix); }
.dish-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 11px; align-items: start; margin: 0 -18px;
  padding: 10px 18px; border-bottom: 1px solid var(--linea); transition: background-color 200ms ease, opacity 200ms ease; }
.dish-row:focus-visible { outline: 0; background: #ece6d8; }
.highlighted { position: relative; box-shadow: none; }
.highlighted::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--amarillo);
  content: ''; transform: scaleY(0); transform-origin: top; animation: highlight-bar 240ms var(--ease-out) forwards; }
.dish-row img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--superficie); }
.dish-body { min-width: 0; }
.dish-body strong { display: block; color: var(--tiza); font-weight: 700; }
.dish-body p { display: -webkit-box; overflow: hidden; margin: 1px 0 4px; color: var(--suave); font-size: .91rem; line-height: 1.25;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dish-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; color: var(--suave); font-size: .76rem; }
.meta-separator { color: #8a90a2; }
.spice-indicator { display: inline-flex; align-items: center; gap: 2px; color: #b8432f; }
.spice-indicator svg { width: 14px; height: 14px; stroke: #b8432f; stroke-width: 1.7; }
.spice-label { color: var(--suave); }
.diet-tag { border-radius: 999px; padding: 1px 7px; background: #e3efe0; color: #2f5d34; }
.price { white-space: nowrap; padding-left: 6px; color: var(--tiza); font: 400 22px/1 var(--font-guix); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { border: 1px solid #d9d3c6; border-radius: 3px; padding: 0 5px; color: #5d6478; font-size: .72rem; }
.availability { display: block; color: var(--suave); font-size: .76rem; }
mark.match { background: var(--amarillo); color: var(--fondo); }
.highlighted { background: var(--superficie); }
.ai-note { display: flex; align-items: flex-start; gap: 5px; margin-top: 5px; color: var(--amarillo); font-size: .84rem;
  animation: note-enter var(--t-entra) var(--ease-out) both; }
.ai-note svg { width: 16px; height: 16px; flex: 0 0 16px; }
.excluded { opacity: .45; }
.excluded .dish-body strong, .excluded .dish-body p { text-decoration: line-through; text-decoration-color: transparent;
  animation: strike-in 200ms ease forwards; }
.excluded-reason { display: block; margin-top: 3px; color: var(--rojo-tiza); font-size: .8rem; }
.empty-search { margin: 20px 0; border: 1px dashed var(--linea); padding: 14px; color: var(--suave); }
.empty-search button { margin-top: 9px; border: 1px solid var(--amarillo); border-radius: 999px; padding: 6px 10px; background: transparent; color: var(--amarillo); }
.composer { display: flex; gap: 8px; align-items: center; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); }
.starter-questions { display: flex; gap: 6px; overflow-x: auto; padding: 5px 18px 0; scrollbar-width: thin; }
.starter-questions { opacity: 1; transform: none; transition: opacity var(--t-entra) var(--ease-out), transform var(--t-entra) var(--ease-out); }
.starter-questions.starter-leaving { opacity: 0; transform: translateY(4px); }
.starter-questions button { flex: 0 0 auto; border: 1px solid var(--tinta); border-radius: 999px; padding: 6px 9px;
  background: #fff; color: var(--tinta); font-size: .78rem; }
.composer textarea { flex: 1; min-width: 0; resize: none; border: 0; border-radius: 999px; padding: 11px 16px; outline: 0;
  background: #ffffff; color: var(--tinta); }
.composer textarea:focus { box-shadow: inset 0 0 0 1px var(--amarillo); }
.round-button, .talk-button { display: grid; place-items: center; min-width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--amarillo); color: var(--fondo); }
.round-button.secondary { background: #e3e8f2; color: var(--tinta); }
.talk-button { min-width: 80px; border-radius: 999px; color: var(--fondo); font-size: .86rem; }
.dish-dialog { width: min(92vw, 620px); max-height: 92dvh; overflow: auto; border: 0; border-radius: 16px 16px 0 0; padding: 0 0 18px;
  background: var(--fondo); color: var(--tinta); opacity: 0; transform: translateY(100%);
  transition: opacity var(--t-hoja) var(--ease-ios), transform var(--t-hoja) var(--ease-ios); }
.dish-dialog.is-open { opacity: 1; transform: translateY(0); }
.dish-dialog.is-closing { opacity: 0; transform: translateY(100%); }
.dish-dialog::backdrop { background: #1f2a4466; opacity: 0; transition: opacity var(--t-hoja) var(--ease-ios); }
.dish-dialog.is-open::backdrop { opacity: 1; }
.close-button { position: absolute; z-index: 2; top: 10px; right: 10px; width: 42px; height: 42px; border-radius: 50%; background: #f4f2eecc; color: var(--tiza); }
.detail-image { display: block; width: 100%; max-height: 38vh; object-fit: cover; }
#dish-detail { padding-bottom: 8px; }
#dish-detail > :not(.detail-image) { margin-right: 20px; margin-left: 20px; }
.detail-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 15px; }
.detail-title h2 { margin: 0; color: var(--tiza); font: 400 31px/1 var(--font-guix); }
.detail-price { color: var(--tiza); font: 400 24px/1 var(--font-guix); }
.detail-description { color: var(--suave); }
.detail-facts { display: grid; gap: 9px; margin-top: 16px; }
.detail-fact { display: grid; gap: 2px; border-top: 1px solid var(--linea); padding-top: 8px; }
.detail-fact-label { color: var(--tinta); font-weight: 700; }
.detail-fact .spice-indicator { width: fit-content; }
.detail-allergens { border: 1px solid var(--linea); border-radius: 6px; padding: 7px 9px; color: var(--suave); font-size: .86rem; }
.detail-state { display: block; margin-top: 8px; color: var(--rojo-tiza); }
.quick-questions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.quick-questions button { border: 1px solid var(--amarillo); border-radius: 999px; padding: 6px 9px; background: transparent; color: var(--amarillo); font-size: .82rem; }
.dish-question { display: flex; gap: 7px; margin-top: 15px; }
.dish-question input { flex: 1; min-width: 0; border: 1px solid #d9d3c6; border-radius: 999px; padding: 9px 12px; background: #ffffff; outline: 0; }
.dish-question button { display: grid; place-items: center; width: 40px; border: 0; border-radius: 50%; background: var(--amarillo); color: var(--fondo); }
.detail-answer-label { display: block; margin-top: 16px; color: var(--amarillo); font: 400 18px var(--font-guix); }
.photo-credit { display: block; margin-top: 17px; color: #8a90a2; font-size: .72rem; }
.photo-credit a { color: var(--amarillo); }
.is-hidden, [hidden] { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 720px) { .app { padding-right: 0; padding-left: 0; } .dish-row { margin-right: -18px; margin-left: -18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* ── Ajustes propios de Rajola (sobre la base común) ── */
.app::before { content: ''; display: block; height: 56px; margin: 0 -18px;
  background: url('/img/rajola.svg') repeat-x left top / 56px 56px; }
h1 { font: 800 27px/1.05 var(--font-guix); letter-spacing: -.02em; color: var(--tinta); }
.category h2 { font: 800 19px/1.1 var(--font-guix); color: #b8432f; letter-spacing: -.01em; }
.price { font: 700 17px/1.1 var(--font-guix); color: var(--tinta); }
.ai-label { color: #b8432f; font-weight: 800; }
.ai-note { color: #7a5b0b; }
/* Contraste (WCAG): el ocre solo como fondo o borde, nunca como color de texto sobre claro. */
.quick-questions button { color: #1f3a6e; border-color: #e9b949; background: #fdf6e3; }
.talk-button { color: #1f2a44; }
.round-button.send, #send, .send-button { background: #1f3a6e; color: #fff; }
.detail-title h2 { font: 800 27px/1.05 var(--font-guix); letter-spacing: -.02em; }
.detail-title .price, .detail-title strong { font-weight: 700; }
/* Indicador "la IA está respondiendo": tres puntos que laten en azul rajola. */
.thinking { display: inline-flex; align-items: center; gap: 8px; color: #1f3a6e; font-size: .9rem; font-weight: 600; }
.thinking-dots { display: inline-flex; gap: 4px; }
.thinking-dots i { width: 7px; height: 7px; border-radius: 50%; background: #1f3a6e; animation: latido 1.1s ease-in-out infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .18s; background: #b8432f; }
.thinking-dots i:nth-child(3) { animation-delay: .36s; background: #e9b949; }
@keyframes latido { 0%, 80%, 100% { transform: scale(.55); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
.thinking-question { margin: 6px 0 0; color: var(--suave); font-size: .85rem; font-style: italic; }
.composer.is-busy textarea, .composer.is-busy button { opacity: .55; cursor: progress; }
.chat-sheet { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column;
  width: min(100%, 720px); height: 96px; margin: auto; overflow: hidden; contain: layout paint; border: 0;
  border-radius: 22px 22px 0 0; background: var(--hoja);
  box-shadow: 0 -10px 30px rgba(31, 42, 68, .14); transition: height var(--t-hoja) var(--ease-ios); }
.sheet-handle { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; gap: 9px; width: 100%;
  border: 0; background: transparent; color: var(--suave); }
.handle-bar { width: 36px; height: 4px; flex: 0 0 36px; border-radius: 999px; background: var(--linea); }
#handle-summary { overflow: hidden; max-width: 62%; white-space: nowrap; text-overflow: ellipsis; font-size: .78rem; text-align: left;
  transition: opacity var(--t-toque) var(--ease-out); }
.sheet-header { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; gap: 7px; padding: 2px 18px 9px;
  border-bottom: 0; background: var(--hoja); }
.chat-sheet[data-altura='cerrada'] .sheet-header { display: none; }
.sheet-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sheet-avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: url('/img/rajola.svg') center / 60px; }
.sheet-identity-copy { display: grid; gap: 1px; min-width: 0; }
.ai-label { overflow: hidden; color: var(--tinta); font: 600 14px/1.15 var(--font-texto); text-overflow: ellipsis; white-space: nowrap; }
.sheet-subtitle { color: var(--suave); font-size: 12px; line-height: 1.2; }
.sheet-header-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; width: 100%; }
.sheet-undo { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: auto; border: 0;
  background: transparent; color: var(--suave); font-size: 13px; }
.sheet-undo svg { width: 15px; height: 15px; }
.chat-log { display: none; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 12px 18px 4px; }
.chat-sheet[data-altura='media'] .chat-log, .chat-sheet[data-altura='abierta'] .chat-log { display: flex; flex-direction: column; gap: 14px; }
.chat-row { display: flex; align-items: flex-start; gap: 6px; }
.chat-user + .chat-row, .chat-user + .chat-assistant { margin-top: -8px; }
.chat-row .chat-bubble { flex: 0 1 auto; }
.ai-mini-avatar { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: url('/img/rajola.svg') center / 44px; }
.chat-bubble { max-width: 85%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-enter { animation: bubble-enter var(--t-entra) var(--ease-out) both; }
.chat-user.bubble-enter { animation-name: user-bubble-enter; }
.chat-assistant.bubble-enter { animation-name: assistant-bubble-enter; }
.bubble-thinking { transform-origin: left center; }
.chat-user { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--tinta); color: #fff; }
.chat-assistant { align-self: flex-start; border: 1px solid #efe9df; border-radius: 6px 18px 18px 18px; background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(31,42,68,.08); }
.chat-assistant.chat-error { border-color: #e7c5bd; }
.bubble-dish { display: block; margin-bottom: 3px; color: inherit; font-size: .72rem; font-weight: 700; opacity: .78; }
.bubble-dishes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.suggestions button { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--linea); border-radius: 999px; padding: 6px 10px 6px 8px; background: transparent;
  color: var(--tinta); font-size: 13px; text-align: left; }
.suggestions button::before { content: '↩'; margin-right: 5px; font-size: 16px; }
.chip-enter { animation: chip-enter var(--t-entra) var(--ease-out) both; animation-delay: calc(var(--chip-index, 0) * 40ms + var(--chip-offset, 0ms)); }
.suggestions button:disabled, .starter-questions button:disabled { cursor: progress; opacity: .45; }
.dish-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 0; border-radius: 999px; padding: 4px 10px 4px 4px; background: #f4efe6; color: var(--tinta); font-size: 13px; }
.dish-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.dish-chip-name { white-space: nowrap; }
.dish-chip-price { color: var(--suave); }
.chat-bubble .ai-warning { margin-top: 8px; color: var(--suave); }
.chat-thinking { padding: 8px 12px; }
.sheet-listening { align-self: flex-start; margin: 0; color: var(--suave); font-size: .82rem; }
.chat-sheet.is-dragging { transition: none; user-select: none; }
.chat-sheet.is-dragging { will-change: height; }
.chat-sheet.is-dragging .sheet-handle { touch-action: none; }
@media (prefers-reduced-motion: reduce) { .chat-sheet { transition: none; } }
@media (prefers-reduced-motion: reduce) { .thinking-dots i { animation: none; opacity: 1; transform: none; } }

button, .allergen-chip { -webkit-tap-highlight-color: transparent; transition: transform var(--t-toque) ease; }
button:active, .allergen-chip:active { transform: scale(.96); }
@media (hover: hover) {
  .dish-row:hover { background: #ece6d8; }
}

@keyframes bubble-enter { from { opacity: 0; transform: translate(8px, 10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes user-bubble-enter { from { opacity: 0; transform: translate(8px, 10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes assistant-bubble-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes thinking-enter { from { opacity: 0; transform: translateX(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes chip-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes highlight-bar { to { transform: scaleY(1); } }
@keyframes note-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes strike-in { to { text-decoration-color: currentColor; } }
.bubble-thinking { animation-name: thinking-enter; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .language-screen, .app.is-entering, .dish-dialog, .dish-dialog.is-closing { opacity: 1; transform: none; }
  .allergen-panel { grid-template-rows: 0fr; opacity: 0; }
  .allergen-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
}

/* El ocre nunca como texto sobre claro: el enlace del crédito va en tinta. */
.photo-credit a { color: var(--tinta); }

/* Chip de lo entendido: el ocre solo de borde y fondo, el texto en tinta. */
.sheet-header .ai-chip { color: var(--tinta); background: var(--superficie); }
/* El texto de ejemplo cabe en una línea (con elipsis) en móviles estrechos. */
.composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hoja de chat: controles compactos y una sola superficie de escritura. */
.starter-questions { gap: 5px; padding: 5px 18px 0; }
.starter-questions button { min-height: 44px; border: 1px solid var(--linea); padding: 6px 10px; background: transparent; color: var(--tinta); font-size: 13px; }
.composer { gap: 8px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); }
.composer-field { display: flex; align-items: center; flex: 1; min-width: 0; min-height: 48px; border: 1px solid #e6dfd3; border-radius: 999px; background: #fff; }
.composer textarea { min-height: 46px; padding: 12px 14px; background: transparent; }
.composer textarea:focus { box-shadow: none; }
.round-button { width: 44px; min-width: 44px; height: 44px; background: transparent; color: var(--tinta); }
.round-button.secondary { background: transparent; }
#send { display: none; width: 36px; min-width: 36px; height: 36px; margin-right: 5px; background: var(--tinta); color: #fff; }
.composer.has-text #mic { display: none; }
.composer.has-text #send { display: grid; }
.talk-button { width: 48px; min-width: 48px; height: 48px; background: var(--amarillo); color: var(--tinta); }
.talk-button svg { width: 21px; height: 21px; }
.talk-button.is-listening { box-shadow: 0 0 0 4px rgba(233,185,73,.28); animation: conversa-ring 1.35s ease-in-out infinite; }
@keyframes conversa-ring { 50% { box-shadow: 0 0 0 8px rgba(233,185,73,.08); } }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* Ajustes de Claude tras revisar capturas: cerrada = solo lo que ocupa (sin hueco bajo la barra),
   «Deshacer» en la misma línea que la identidad, chips de plato más bajos. */
.sheet-header { flex-wrap: nowrap; }
.sheet-header-controls { width: auto; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
.dish-chip { min-height: 36px; padding: 3px 12px 3px 3px; }
.dish-chip:not(:has(img)) { padding-left: 12px; }
.composer-field textarea { flex: 1; min-width: 0; }
.composer-field #mic, .composer-field #send { flex: 0 0 auto; margin-right: 6px; }

/* Teclado del móvil: la hoja y la ficha se apoyan encima del teclado (ver adjustForKeyboard). */
.chat-sheet { bottom: var(--teclado, 0px); }
.dish-dialog { max-height: min(92dvh, calc(var(--alto-visible, 100dvh) * .92));
  margin-bottom: var(--teclado, 0px); }

/* Zonas de arrastre: el navegador debe saber ANTES del gesto que no son de scroll (si solo se pone
   durante el arrastre, en móvil cancela el gesto y la hoja no se mueve). Asa más alta para el dedo. */
.sheet-handle, .sheet-header { touch-action: none; }
.sheet-handle { flex-basis: 44px; cursor: grab; }
.chat-sheet.is-dragging .sheet-handle { cursor: grabbing; }