/* Hojas inferiores: una lámina que sube desde abajo, sin esquinas redondeadas */

.sheet {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(35, 32, 26, .42);
  animation: fadein .18s ease-out;
}

.sheet__panel {
  background: var(--paper-sheet);
  border-top: 1px solid var(--rule-45);
  padding: var(--sp-16) var(--sp-18) var(--sp-22);
  max-height: 78%;
  overflow-y: auto;
  animation: upsheet .22s ease-out;
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sheet__caption {
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--track-wide);
  color: var(--ink-55);
}

.sheet__close {
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-60);
  padding: 0 0 0 var(--sp-10);
}

.sheet__rule { margin-top: var(--sp-3); background: var(--rule-25); }

.sheet__body { margin-top: var(--sp-14); }

.sheet__hero {
  display: flex;
  gap: var(--sp-14);
  align-items: flex-start;
}

.sheet__slot {
  width: 64px;
  height: 80px;
  flex: none;
  border: 1px solid var(--rule-30);
  background: var(--paper-slot);
}

.sheet__slot--large { width: 78px; height: 98px; }

.sheet__heading { flex: 1; min-width: 0; }

.sheet__title {
  margin: 0;
  font-size: var(--size-sheet);
  font-weight: 400;
  line-height: 1.1;
}

.sheet__detail {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: var(--mono-detail);
  color: var(--ink-55);
}

.sheet__note {
  margin: var(--sp-14) 0 0;
  font-family: var(--mono);
  font-size: var(--mono-meta);
  line-height: 1.6;
  color: var(--ink-50);
}

/* Paso de porción ----------------------------------------------------------- */

.stepper {
  margin-top: var(--sp-18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--rule-28);
  padding: var(--sp-10) var(--sp-12);
}

.stepper__label {
  font-family: var(--mono);
  font-size: var(--mono-meta);
  letter-spacing: var(--track-kicker);
  color: var(--ink-60);
}

.stepper__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}

.stepper__button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--rule-35);
  background: transparent;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
}

.stepper__button:disabled { color: var(--ink-40); border-color: var(--rule-20); cursor: default; }

.stepper__value {
  font-size: var(--size-stepper);
  min-width: 44px;
  text-align: center;
}

.stepper__caption {
  margin-top: var(--sp-6);
  font-family: var(--mono);
  font-size: var(--mono-meta);
  color: var(--ink-50);
  text-align: right;
}

.sheet__body .button--block { margin-top: var(--sp-14); }
.sheet__body .button--outline.button--block { margin-top: var(--sp-10); }

/* Motivos de sustitución ---------------------------------------------------- */

.reasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-14);
}

.reason {
  border: 1px solid var(--rule-35);
  background: transparent;
  color: var(--ink-70);
  font-family: var(--mono);
  font-size: var(--mono-sm);
  letter-spacing: var(--track-tight);
  padding: var(--sp-7) var(--sp-10);
}

.reason.is-active {
  background: var(--ink);
  color: var(--paper);
}

/* Opciones de sustituto ----------------------------------------------------- */

.options {
  margin-top: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.option {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  border: 1px solid var(--rule-28);
  background: var(--paper-slot);
  padding: 13px var(--sp-14);
  text-align: left;
  font-family: var(--serif);
  transition: border-color .14s ease-out, background .14s ease-out;
}

.option:hover, .option:active {
  border-color: var(--ink);
  background: var(--paper-nav);
}

.option__slot {
  width: 36px;
  height: 44px;
  flex: none;
  border: 1px solid var(--rule-22);
  background: var(--paper-thumb);
}

.option__body { flex: 1; min-width: 0; }

.option__line {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  flex-wrap: wrap;
}

.option__name { font-size: var(--size-option); }

.option__tag {
  font-family: var(--mono);
  font-size: var(--mono-tag);
  letter-spacing: var(--track-nav);
  border: 1px solid var(--rule-35);
  color: var(--ink-65);
  padding: 2px 5px;
}

.option__detail {
  font-family: var(--mono);
  font-size: var(--mono-detail);
  color: var(--ink-55);
  margin-top: var(--sp-3);
}

.option__pick {
  font-family: var(--mono);
  font-size: var(--mono-md);
  color: var(--green);
  flex: none;
}

/* Resultados de búsqueda, foto y dictado ------------------------------------ */

.results {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-12);
}

.result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-10);
  padding: var(--sp-12) 2px;
  border: 0;
  border-bottom: 1px dotted var(--rule-25);
  background: transparent;
  text-align: left;
  font-family: var(--serif);
}

.result:hover, .result:active { background: rgba(35, 32, 26, .04); }

.result__name { font-size: var(--size-food); }

.result__meta {
  font-family: var(--mono);
  font-size: var(--mono-detail);
  color: var(--ink-55);
  flex: none;
}

.result--stacked { align-items: flex-start; }

.result__body { flex: 1; min-width: 0; }

/* A qué equivale un platillo compuesto, dicho en palabras */
.result__equivalence {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: var(--mono-kicker);
  letter-spacing: var(--track-tight);
  color: var(--rust-dark);
}

/* Foto ---------------------------------------------------------------------- */

.photo-frame {
  margin-top: var(--sp-14);
  border: 1px solid var(--rule-35);
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: repeating-linear-gradient(38deg, rgba(35, 32, 26, .16) 0 1px, transparent 1px 7px);
}

.photo-frame__label {
  font-family: var(--mono);
  font-size: var(--mono-meta);
  letter-spacing: var(--track-kicker);
  color: var(--ink-60);
  background: var(--paper-sheet);
  padding: 5px var(--sp-9);
}

.photo-frame__image { width: 100%; height: 100%; object-fit: cover; }

.photo-manual { margin-top: var(--sp-12); }

/* Dictado ------------------------------------------------------------------- */

.dictation {
  margin-top: var(--sp-22);
  display: flex;
  align-items: center;
  gap: var(--sp-14);
}

.dictation__mic {
  width: 52px;
  height: 52px;
  flex: none;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dictation__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rust);
}

.dictation__mic.is-listening .dictation__dot { animation: pulse 1s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.dictation__transcript {
  font-size: 20px;
  color: var(--ink-55);
}

.dictation__transcript.is-heard {
  font-style: italic;
  color: var(--ink-75);
}

.dictation__fallback { margin-top: var(--sp-18); }