/* ==========================================================================
   Sobremesa · panel
   El panel se usa de pie detrás de la barra, con una mano: mismas medidas y
   la misma tipografía que la carta pública, y objetivos táctiles de 44px.
   ========================================================================== */

.panel{padding:26px 0}
@media (max-width:519px){.panel{padding:0}}

.sheet{
  width:100%;max-width:460px;margin:0 auto;min-height:100vh;
  background:var(--surface);padding:0 22px calc(90px + env(safe-area-inset-bottom));
}
@media (min-width:520px){
  .sheet{min-height:0;border-radius:var(--r-sheet);box-shadow:var(--shadow-card);padding-bottom:34px}
}

/* --- Barra de navegación ------------------------------------------------- */

.panelNav{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 0 0;
}
.panelNav .tabs{
  display:flex;flex-direction:column;gap:2px;
  font-family:var(--font-display);font-size:17px;line-height:1.35;color:var(--ink-ghost);
}
.panelNav .tabs a[aria-current=page]{color:var(--ink)}
.panelNav .tabs a:hover{color:var(--ink)}
.panelNav .right{
  font-family:var(--font-display);font-size:17px;color:var(--ink-ghost);white-space:nowrap;
}
.panelNav .right[aria-current=page]{color:var(--ink)}
.panelNav .right:hover{color:var(--ink)}

.pageHead{padding:38px 0 0}
.pageHead h1{
  font-family:var(--font-display);font-weight:400;letter-spacing:-.008em;
  font-size:clamp(30px,8.5vw,40px);line-height:1;text-wrap:pretty;
}
.pageHead .sub{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
/* Rótulo suelto sobre el titular: abre el hueco y el titular ya no lo repite */
.pageStatus,.sheet > .eyebrow{display:block;margin-top:38px}
.pageStatus + .pageHead,.sheet > .eyebrow + .pageHead{padding-top:6px}
.pageStatus{
  font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--accent);
}
.pageStatus.faint{color:var(--ink-faint)}

/* Barra de edición: cancelar · título · guardar */
.editBar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 0 0;font-family:var(--font-display);font-size:16px;
}
.editBar .mid{color:var(--ink)}
.editBar .save{color:var(--ok);background:none;border:0;cursor:pointer;padding:6px 0;font:inherit}
.editBar .cancel{color:var(--ink-faint);background:none;border:0;cursor:pointer;padding:6px 0;font:inherit}

/* --- Pestañas de carta --------------------------------------------------- */

.menuBar{
  display:flex;align-items:baseline;gap:14px;overflow-x:auto;
  margin:16px -22px 0;padding:0 22px 10px;
  scrollbar-width:none;
}
.menuBar::-webkit-scrollbar{display:none}
.menuBar a,.menuBar button{
  position:relative;white-space:nowrap;padding:0 0 2px;background:none;border:0;
  font-family:var(--font-display);font-size:20px;line-height:1.2;
  color:#BDB9B3;cursor:pointer;
}
.menuBar .is-active{color:var(--ink);border-bottom:1px solid var(--accent)}
.menuBar .add{color:var(--accent);font-size:17px}
/* Ajustes de la carta activa: pegado a su nombre, no al final de la página */
.menuBar .cfg{
  margin-left:-6px;font-family:var(--font-text);font-size:13px;
  color:var(--accent);border-bottom:0;
}

/* --- Grupos y filas ------------------------------------------------------ */

.group{padding-top:28px}
.groupHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.groupHead .title{
  font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--ink-faint);
}
.groupHead .action{font-size:13px;color:var(--accent);background:none;border:0;cursor:pointer;padding:2px 0}

.row{
  display:flex;align-items:center;gap:14px;
  padding:15px 0;border-bottom:1px solid var(--line-soft);
}
.row .grip{
  flex:0 0 auto;width:16px;color:var(--dots);cursor:grab;touch-action:none;
  display:flex;align-items:center;justify-content:center;
}
.row .grip:active{cursor:grabbing}
.row .body{flex:1 1 auto;min-width:0}
.row .name{
  font-family:var(--font-display);font-size:18px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.row .meta{margin-top:2px;font-size:12.5px;color:var(--ink-faint)}
.row .meta .warn{color:var(--accent)}
.row.is-off{opacity:.5}
.row .action{flex:0 0 auto;font-size:13px;color:var(--accent);background:none;border:0;cursor:pointer;padding:2px 0}
.row .go{flex:0 0 auto;color:var(--ink-ghost);font-size:14px}

.sortable-ghost{opacity:.35}
.sortable-chosen{background:var(--accent-wash);margin:0 -22px;padding-left:22px;padding-right:22px}

.stack{display:grid;gap:9px;margin-top:20px}
.stickyActions{
  position:sticky;bottom:0;z-index:10;
  margin:22px -22px 0;padding:14px 22px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--surface) 62%,transparent);
}

/* --- Formularios --------------------------------------------------------- */

.formSection{padding-top:26px}
.formSection > .eyebrow{display:block;text-align:center;margin-bottom:14px}
.dualRow{display:flex;gap:12px;align-items:center}
.dualRow > *{min-width:0}
.dualRow .input{flex:1 1 0;min-width:0}
/* Los dos campos ya traen su propio filete: la fila no añade ninguno */
.priceRow{display:flex;align-items:center;gap:12px;padding:2px 0}
.priceRow .lab{flex:1 1 auto}
.priceRow span.lab{font-family:var(--font-display);font-size:17px}
.priceRow .amt{flex:0 0 96px;text-align:right}
.priceRow .del{flex:0 0 auto;color:var(--ink-ghost);background:none;border:0;cursor:pointer;padding:6px}
.inlineAdd{
  margin-top:11px;font-family:var(--font-display);font-style:italic;font-size:13.5px;
  color:var(--accent);background:none;border:0;cursor:pointer;padding:4px 0;
}

/* Editor de color: paleta, muestra viva y hex a mano */
.colorPicker{display:grid;gap:16px}
.swatches{display:flex;flex-wrap:wrap;gap:12px}
.swatch{
  position:relative;flex:0 0 auto;width:34px;height:34px;padding:0;
  border:0;border-radius:50%;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(23,22,20,.14);
}
.swatch.is-on::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--ink);
}
.swatch:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.colorHex{display:flex;align-items:center;gap:12px}
.colorHex .live{
  flex:0 0 auto;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:none;cursor:pointer;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(23,22,20,.14);
}
.colorHex .live::-webkit-color-swatch-wrapper{padding:0}
.colorHex .live::-webkit-color-swatch{border:0;border-radius:50%}
.colorHex .live::-moz-color-swatch{border:0;border-radius:50%}
.colorHex .input{
  flex:1 1 auto;text-transform:uppercase;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}

.thumbField{display:flex;align-items:flex-start;gap:14px}
.thumb{
  flex:0 0 auto;width:92px;height:92px;overflow:hidden;
  background:var(--fill);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-faint);font-family:var(--font-display);font-style:italic;
  font-size:12.5px;text-align:center;cursor:pointer;
}
.thumb img{width:100%;height:100%;object-fit:cover}
/* Traducción del plato: un bloque por idioma activo */
.langBlock .textarea{margin-top:6px;min-height:64px}

/* Botón de quitar foto y aviso de que se aplica al guardar */
.thumbActions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px}
.thumbActions .hint{margin:0}
.thumbActions .linkish{
  font:inherit;color:var(--accent);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;
}

/* Fila etiqueta · cifra, con guía de puntos como en la carta */
.detailRow,.statRow{
  background-image:linear-gradient(to right,var(--dots) 0 1px,transparent 1px 5px);
  background-repeat:repeat-x;background-size:5px 1px;
  background-position:0 calc(100% - 7px);
}
.detailRow > *,.statRow > *{background:var(--surface)}
.detailRow{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:5px 0;font-family:var(--font-display);font-size:17px;
}

/* Franjas horarias del día */
.dayRow{padding:16px 0;border-top:1px solid var(--line-soft)}
.dayRow:last-child{border-bottom:1px solid var(--line-soft)}
.dayTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dayTop .name{font-family:var(--font-display);font-size:19px}
.daySlots{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px}
.slot{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:14px;font-variant-numeric:tabular-nums;
}
.slot input{
  width:50px;border:0;background:transparent;text-align:center;
  font:inherit;font-variant-numeric:tabular-nums;padding:0;
}
.slot input:focus{outline:none;color:var(--accent)}
.slot .x{background:none;border:0;color:var(--ink-ghost);cursor:pointer;padding:0 0 0 2px;line-height:1}
.slot.add{border-style:dashed;color:var(--ink-faint);cursor:pointer;background:none;padding:7px 13px}
.dayRow.is-off{opacity:.5}
.dayRow.is-off .daySlots{display:none}

/* --- Analítica ----------------------------------------------------------- */

.statLead{
  font-size:17px;line-height:1.32;letter-spacing:.005em;text-transform:uppercase;
  color:var(--ink);text-align:center;text-wrap:balance;margin:12px 0 26px;
}
.statLead b{font-weight:400;color:var(--accent)}
.dotChart{margin:6px 0 10px}
.dotChart .cols{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.dotChart .cols + .cols{margin-top:3px}
.dotChart .head{
  font-family:var(--font-display);font-style:italic;font-size:12px;
  color:var(--ink-faint);padding-bottom:8px;
}
.dotChart .cell{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;height:auto;background:var(--chart-wash);
}
.dotChart .dot{border-radius:50%;background:var(--accent)}
.statRow{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:5px 0;font-family:var(--font-display);font-size:18px;
}
.statRow .n{font-variant-numeric:tabular-nums;color:var(--ink)}
.rangeTabs{
  display:flex;align-items:baseline;gap:16px;overflow-x:auto;scrollbar-width:none;
  font-family:var(--font-display);font-size:clamp(24px,7vw,30px);line-height:1.05;
}
.rangeTabs::-webkit-scrollbar{display:none}
.rangeTabs a{color:#BDB9B3;white-space:nowrap}
.rangeTabs a.is-active{color:var(--ink)}

/* --- QR ------------------------------------------------------------------ */

.qrBox{
  margin:26px 0 0;display:flex;align-items:center;justify-content:center;
}
.qrBox svg{width:100%;max-width:200px;height:auto}
.printGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.printCard{
  text-align:center;font-family:var(--font-display);font-size:14px;color:var(--ink);
}
.printCard .prev{
  aspect-ratio:.71;background:var(--paper);margin-bottom:9px;
  display:flex;align-items:center;justify-content:center;
}
.printCard .prev svg{width:52%;height:auto}
.printCard.is-dark .prev{background:var(--accent)}

/* --- Onboarding ---------------------------------------------------------- */

.wizardTop{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0 0;font-family:var(--font-display);font-style:italic;
  font-size:14px;color:var(--ink-faint);
}
.wizardTop .brand{font-style:normal;font-size:17px;color:var(--ink)}
.optionList{display:grid;gap:0;margin-top:22px}
.optionBtn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:15px 0;text-align:left;cursor:pointer;
  border:0;border-bottom:1px solid var(--line-soft);border-radius:0;background:none;
  font-family:var(--font-display);font-size:18px;color:var(--ink);
  transition:color .15s ease,background-color .15s ease;
}
.optionBtn.is-on,.optionBtn:has(input:checked){
  color:var(--accent);background:var(--accent-wash);
  margin:0 -14px;padding-left:14px;padding-right:14px;border-radius:8px;
}
.optionBtn .note{
  display:block;font-family:var(--font-text);font-size:12.5px;color:var(--ink-faint);margin-top:3px;
}

/* Sugerencias de dirección */
.suggests{margin-top:16px}
.suggests li + li{border-top:1px solid var(--line-soft)}
.suggests button{
  display:block;width:100%;text-align:left;padding:13px 0;
  background:none;border:0;cursor:pointer;
  font-family:var(--font-display);font-size:17px;line-height:1.3;
}
.suggests button:hover{color:var(--accent)}
.suggests .sec{
  display:block;font-family:var(--font-text);font-size:12px;color:var(--ink-faint);margin-top:3px;
}

/* --- Planes -------------------------------------------------------------- */

.planCard{padding:16px 0;border-bottom:1px solid var(--line-soft)}
.planCard .top{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-family:var(--font-display);font-size:22px;
  background-image:linear-gradient(to right,var(--dots) 0 1px,transparent 1px 5px);
  background-repeat:repeat-x;background-size:5px 1px;background-position:0 calc(100% - 8px);
}
.planCard .top > *{background:var(--surface)}
.planCard .price{font-variant-numeric:tabular-nums;white-space:nowrap}
.planCard ul{margin-top:7px;display:grid;gap:3px;font-size:12.5px;line-height:1.5;color:var(--ink-faint)}
.planCard.is-current .top{color:var(--accent)}

.upsell{
  margin-top:16px;padding:14px 16px;border-radius:var(--r-field);
  background:var(--accent-wash);font-size:13.2px;line-height:1.5;
}
.upsell a{color:var(--accent)}

/* --- Diálogo ------------------------------------------------------------- */

dialog.sheetDialog{
  width:min(440px,calc(100vw - 28px));padding:0;border:0;border-radius:var(--r-sheet);
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop);
}
dialog.sheetDialog::backdrop{background:rgba(23,22,20,.5)}
dialog.sheetDialog .inner{padding:24px}
dialog.sheetDialog h2{font-family:var(--font-display);font-size:26px;font-weight:400;margin-bottom:12px}

.toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translate(-50%,12px);z-index:90;
  padding:12px 20px;border-radius:999px;
  background:var(--ink);color:var(--surface);
  font-family:var(--font-display);font-size:15px;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}