/* Menús completos (tarea 13c): herramientas de la lista, editor con vista previa de la hoja, importador y catálogo.
   Usa los mismos tokens de estilos.css. La vista previa imita la hoja impresa: siempre papel claro, también en oscuro. */

.menus-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; }
.menus-herramientas .btn { flex: 1 1 200px; }
.nota-lectura { flex: 1 1 100%; margin: 0; padding: 10px 14px; border-radius: var(--r-m); background: var(--tinte); color: var(--gris); font-size: 14px; }

.btn-icono { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--fondo); color: var(--petroleo); cursor: pointer; transition: background var(--dur) var(--curva), border-color var(--dur) var(--curva); }
.btn-icono:hover { background: var(--tinte); border-color: var(--linea-campo); }
.btn-icono:active { transform: translateY(1px); }
.btn-icono .icono { width: 18px; height: 18px; }

/* ---------- editor ---------- */
.editor { display: grid; gap: 16px; min-width: 0; }
.editor-forma { min-width: 0; }
.editor-forma > * + * { margin-top: 16px; }
.editor-tiempo .bloque-cuerpo > * + * { margin-top: 12px; }
.editor-platos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: plato; }
.editor-plato { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--papel); animation: sube var(--dur) var(--curva); }
.editor-plato.movido { animation: emerge var(--dur) var(--curva); }
.editor-plato-campos { display: grid; gap: 8px; min-width: 0; }
.editor-plato-campos input, .editor-plato-campos textarea, .imp-plato input, .imp-plato textarea, .imp-menu-datos input, .catalogo-fila input, .catalogo-fila textarea, .campo-buscar input {
  display: block; width: 100%; min-height: 44px; font: 400 16px/1.4 var(--sans); color: var(--tinta); background: var(--fondo);
  border: 1px solid var(--linea-campo); border-radius: var(--r-m); padding: 9px 12px; transition: border-color var(--dur) var(--curva), box-shadow var(--dur) var(--curva); }
.editor-plato-campos textarea, .imp-plato textarea, .catalogo-fila textarea { resize: vertical; min-height: 64px; }
.editor-plato-campos :focus, .imp-plato :focus, .imp-menu-datos input:focus, .catalogo-fila :focus, .campo-buscar input:focus { outline: none; border-color: var(--salvia); box-shadow: 0 0 0 3px var(--anillo); }
.editor-plato-acciones { display: flex; gap: 6px; justify-content: flex-end; }
.editor-agregar { width: 100%; }

.editor-previa { min-width: 0; }
.editor-previa-titulo { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.editor-previa.sola { max-width: 560px; }

/* hoja: papel A4 aproximado, centrado, con la jerarquía del PDF */
/* aspect-ratio con overflow visible deja crecer la hoja si el contenido no cabe (nunca recorta el precio) */
.pv-hoja { aspect-ratio: 210 / 297; background: #f6f3ec; color: #2f2e2e; border-radius: var(--r-s); box-shadow: var(--sombra-2); padding: 7% 8%; text-align: center; font-family: var(--sans); animation: aparece var(--dur-l) ease-out; }
.pv-logo { display: block; width: 32%; height: auto; margin: 0 auto 6%; }
.pv-titulo { font: 400 clamp(18px, 4.2vw, 24px)/1.25 var(--serif); font-style: normal; color: #2b4546; margin: 0; }
.pv-adorno { display: block; width: 36px; height: 1px; background: #c9b083; margin: 10px auto 4px; }
.pv-tiempo { margin-top: 18px; }
.pv-etiqueta { margin: 0; font: 500 14px/1.3 var(--sans); color: #2f2e2e; }
.pv-nota { margin: 2px 0 0; font-size: 12px; font-style: italic; color: #5f5d5c; }
.pv-plato { margin-top: 10px; }
.pv-nombre { margin: 0; font-size: 13px; letter-spacing: .04em; color: #2f2e2e; }
.pv-desc { margin: 1px 0 0; font-size: 11.5px; line-height: 1.45; color: #5f5d5c; }
.pv-vacia { margin: 24px 0; font-size: 13px; color: #5f5d5c; }
.pv-precio { margin: 26px 0 0; font-size: 13.5px; color: #2b4546; }
.pv-precio strong { font-weight: 500; }

/* ---------- importador ---------- */
.imp-estado:empty { display: none; }
.imp-estado { margin: 0 0 14px; }
.imp-leyendo { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--petroleo); animation: aparece var(--dur) ease-out; }
.giro { width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .8s linear infinite; }
.imp-cuerpo > * + * { margin-top: 16px; }
.imp-resumen h2 { padding: 16px 0 6px; }
.imp-resumen h2:focus { outline: none; }
.imp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--gris); }
.imp-avisos { margin: 0 0 10px; padding: 10px 14px 10px 30px; }
.imp-avisos li + li { margin-top: 4px; }
.imp-propuesta { display: grid; gap: 14px; }
.imp-menu { padding: 16px 18px; }
.imp-menu-datos { display: grid; gap: 10px; }
.imp-tiempo h4 { margin: 14px 0 6px; font: 500 14px/1.3 var(--sans); color: var(--salvia); letter-spacing: .04em; text-transform: uppercase; }
.imp-platos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.imp-plato { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.imp-menu .btn-texto-peligro { margin-top: 12px; }
.imp-guardar .chips-opciones { margin: 0 0 6px; }

/* ---------- catálogo ---------- */
.catalogo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.catalogo-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; padding: 12px 14px; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r-m); animation: sube var(--dur) var(--curva); }
.catalogo-fila .campo { grid-column: 1 / -1; }
.catalogo-fila .campo > label { margin-bottom: 4px; font-size: 13px; }
.catalogo-fila .cat-precio { grid-column: 1; }
.catalogo-fila > .btn-icono { grid-column: 2; grid-row: 4; }
.cat-etiquetas { grid-column: 1 / -1; display: flex; gap: 6px; margin: 0; }
.catalogo-item { padding: 12px 14px; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--r-m); }
.cat-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; }
.cat-cabeza strong { font-weight: 500; color: var(--petroleo); }
.cat-seccion-chip { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--salvia); }
.cat-monto { margin-left: auto; font-variant-numeric: tabular-nums; }
.cat-texto { margin: 4px 0 0; font-size: 14px; color: var(--gris); }
.campo-buscar { position: relative; margin: 0 0 14px; max-width: 420px; }
.campo-buscar .icono { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--gris); pointer-events: none; }
.campo-buscar input { padding-left: 38px; }

@media (min-width: 600px) {
  .menus-herramientas .btn { flex: 0 1 auto; }
  .editor-plato { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .editor-plato-acciones { flex-direction: column; }
  .editor-agregar { width: auto; }
  .imp-menu-datos { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .catalogo-fila { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.8fr) minmax(0, 2.6fr) minmax(0, 1.2fr) auto; }
  .catalogo-fila .cat-etiquetas { order: 10; }
  .catalogo-fila .campo, .catalogo-fila .cat-precio { grid-column: auto; }
  .catalogo-fila > .btn-icono { grid-column: auto; grid-row: auto; }
}

@media (min-width: 1100px) {
  .editor { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); align-items: start; }
  .editor-previa { position: sticky; top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .editor-plato, .editor-plato.movido, .catalogo-fila, .pv-hoja, .imp-leyendo { animation: none; }
  .giro { animation-duration: 2.4s; }
}