/* ==========================================================================
   LOTUS — estilo limpio (carta + editor)
   Lenguaje visual de Montebello: fondo negro liso, Outfit liviana, líneas finas,
   superficies planas translúcidas, sin brillos ni partículas.
   Paleta de LOTUS: negro + dorado. Se carga DESPUÉS de lotus.css.
   ========================================================================== */
:root {
  --bg: #040404;
  --ink: #f4efe6;
  --muted: rgba(244, 239, 230, .55);
  --gold: #d6b25e;
  --gold-hi: #e8cd85;
  --gold-lo: #b99542;
  --line: rgba(214, 178, 94, .28);
  --line-strong: rgba(214, 178, 94, .5);
  --surface: rgba(255, 255, 255, .04);
  --surface-hover: rgba(214, 178, 94, .1);
  --glass: rgba(255, 255, 255, .04);
  --font-title: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

html { background: var(--bg); }
body {
  background: transparent;
  -webkit-font-smoothing: antialiased;
}
/* Fondo: polvo dorado sobre negro, con capa oscura para que el texto se lea.
   Si /imagenes/carta/fondo-lotus.jpg no existe, queda el negro liso. */
body.clean::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 4, 4, .55) 0%, rgba(4, 4, 4, .82) 35%, rgba(4, 4, 4, .93) 100%),
    url('/imagenes/carta/fondo-lotus.jpg') center top / cover no-repeat;
}
#sparks { display: none; }

/* Títulos: Outfit liviana, sin degradé animado */
.gold-text {
  background: none; animation: none;
  -webkit-text-fill-color: currentColor; color: var(--gold-hi);
}
h1, h2 { font-weight: 200; letter-spacing: .14em; }
h1 { font-size: clamp(2rem, 8vw, 2.7rem); }
h2 { font-size: 1.25rem; letter-spacing: .12em; }
.logo-text { font-weight: 200; letter-spacing: .45em; }
.eyebrow { font-weight: 400; letter-spacing: .3em; font-size: .68rem; }
.divider { background: var(--line-strong); height: 1px; opacity: 1; max-width: 56px; margin: 18px auto; }

/* Tarjeta de acceso */
.pill {
  border-radius: 14px; background: var(--surface); box-shadow: none;
  backdrop-filter: blur(8px); border: 1px solid var(--line);
}

/* Botones: planos */
.btn {
  border-radius: 10px; font-weight: 400; letter-spacing: .16em; box-shadow: none;
  color: #120d02; background: var(--gold);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-1px); background: var(--gold-hi); box-shadow: none; }
.btn:active { transform: scale(.985); }
.btn.ghost { background: transparent; color: var(--gold-hi); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.btn.danger { background: transparent; color: #e08a8a; border: 1px solid rgba(224, 138, 138, .4); }
.btn.danger:hover { background: rgba(224, 138, 138, .12); }

/* Campos */
input, select, textarea {
  border-radius: 10px; background: rgba(255, 255, 255, .04);
  border-color: var(--line); font-weight: 300;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: none; }
label { font-weight: 400; letter-spacing: .2em; }

/* Toast */
.toast { background: #0c0c0c; border-radius: 10px; color: var(--gold-hi); }

/* ===================== CARTA DIGITAL ===================== */
.carta-head { padding: 30px 16px 6px; }
.carta-head h1 { font-size: clamp(2rem, 8vw, 2.7rem); letter-spacing: .5em; padding-left: .5em; font-weight: 200; }
.carta-head .eyebrow { margin-top: 10px; letter-spacing: .4em; }

.carta-nav { background: linear-gradient(var(--bg) 82%, transparent); }
.sec-tabs { gap: 10px; }
.sec-tab {
  border-radius: 10px; letter-spacing: .22em; font-weight: 400;
  background: var(--surface); border-color: var(--line);
}
.sec-tab:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.sec-tab.active { background: var(--gold); color: #120d02; box-shadow: none; border-color: var(--gold); }

.chip { border-radius: 10px; background: var(--surface); border-color: var(--line); font-weight: 300; }
.chip:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.chip.active { background: var(--surface-hover); border-color: var(--gold); color: var(--gold-hi); }
.search-wrap input { border-radius: 10px; text-align: left; padding: 12px 16px; }

.cat-title { font-weight: 200; letter-spacing: .16em; font-size: 1.7rem; color: var(--ink); }
.cat-rule { max-width: 56px; opacity: 1; background: var(--line-strong); }
.group-title { font-weight: 400; letter-spacing: .3em; color: var(--gold); }

.dish { border-bottom: 1px solid var(--line); padding: 16px 2px; }
.dish-name { font-weight: 400; letter-spacing: .1em; }
.dish-dots { border-bottom: 1px solid rgba(214, 178, 94, .18); }
.dish-price { font-weight: 400; color: var(--gold-hi); }
.dish-desc { color: var(--muted); font-weight: 300; }
.dish-cepa { color: var(--gold); }
.dish-nota { color: var(--gold-lo); }
.carta-foot .eyebrow { letter-spacing: .5em; }
.carta-edit-link {
  display: inline-block; margin-top: 14px; padding: 7px 16px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--muted); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none; transition: .25s var(--ease);
}
.carta-edit-link:hover { color: var(--gold-hi); border-color: var(--line-strong); background: var(--surface-hover); }

/* ===================== EDITOR ===================== */
.ed-top { border-bottom: 1px solid var(--line); }
.ed-brand { font-weight: 200; letter-spacing: .5em; font-size: 1.3rem; color: var(--gold-hi); }
.ed-nav { background: linear-gradient(var(--bg) 85%, transparent); }
.tab { border-radius: 10px; background: var(--surface); font-weight: 400; letter-spacing: .2em; }
.tab:hover { border-color: var(--line-strong); }
.tab.active { background: var(--gold); color: #120d02; border-color: var(--gold); }
.cat-title-input { font-weight: 200; letter-spacing: .1em; }
.search-row input { border-radius: 10px; }
.item { border-radius: 12px; background: var(--surface); border-color: var(--line); }
.item.is-new { box-shadow: none; border-color: var(--gold); }
.item-name { font-weight: 400; letter-spacing: .08em; }
.item textarea { border-radius: 10px; background: rgba(255, 255, 255, .04); }
.price-wrap input { font-weight: 400; }
.icon-btn { border-radius: 10px; }
.icon-btn:hover:not(:disabled) { background: var(--gold); color: #120d02; }
.save-bar { background: rgba(4, 4, 4, .94); border-top: 1px solid var(--line); }
.save-bar.dirty { box-shadow: none; border-top-color: var(--gold); }

/* ===================== CENTRADO ===================== */
/* El letter-spacing agrega espacio tras la última letra y corre el texto a la izquierda:
   se compensa con un padding-left igual. */
.logo-text { letter-spacing: .45em; padding-left: .45em; text-align: center; }
.eyebrow { padding-left: .3em; }
.carta-head .eyebrow { padding-left: .4em; }
.carta-head, .carta-head h1, .carta-logo { text-align: center; margin-left: auto; margin-right: auto; }
.carta-head h1 { padding-left: .5em; }
.ed-title .eyebrow { padding-left: 0; }
.chips { justify-content: safe center; }
.sec-tabs { justify-content: center; }

/* ===================== ARRASTRAR Y SOLTAR (editor) ===================== */
.item { grid-template-columns: auto 1fr auto; align-items: start; }
.item-actions { grid-column: 1 / -1; }
.drag-handle, .drag-handle-bodega {
  display: flex; align-items: center; justify-content: center; align-self: stretch;
  min-width: 28px; padding: 0 6px; color: var(--muted); font-size: 1.1rem; letter-spacing: -.15em;
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; transition: color .2s;
}
.drag-handle:hover, .drag-handle-bodega:hover { color: var(--gold-hi); }
.drag-handle:active, .drag-handle-bodega:active { cursor: grabbing; }
.group-head .drag-handle-bodega { align-self: center; min-width: 32px; min-height: 40px; }
.sortable-ghost { opacity: .35; border: 1px dashed var(--line-strong) !important; background: var(--surface); }
.sortable-drag { background: #0c0c0c; border: 1px solid var(--gold) !important; box-shadow: 0 12px 28px rgba(0,0,0,.65); cursor: grabbing !important; }
.chip, .tab { -webkit-touch-callout: none; }

/* ===================== MÓVIL ===================== */
@media (max-width: 560px) {
  .carta-head { padding-top: 22px; }
  .carta-head h1 { letter-spacing: .4em; padding-left: .4em; }
  .cat-title { font-size: 1.45rem; }
  .dish-name { font-size: .95rem; letter-spacing: .06em; }
  .dish-desc { max-width: 100%; font-size: .85rem; }
  .ed-top { flex-wrap: wrap; }
  .ed-top-actions { width: 100%; }
  .ed-top-actions .btn { flex: 1; }
  .item { padding: 12px 10px; gap: 8px 6px; }
  .price-wrap { width: 92px; }
}
/* La capa de fondo cubre bien pantallas altas (celular) y anchas (escritorio) */
body.clean::before { min-height: 100lvh; }
@media (min-width: 900px) {
  body.clean::before {
    background:
      linear-gradient(180deg, rgba(4, 4, 4, .6) 0%, rgba(4, 4, 4, .85) 40%, rgba(4, 4, 4, .94) 100%),
      url('/imagenes/carta/fondo-lotus.jpg') center / cover no-repeat;
  }
}

/* Sin banda negra sobre la imagen de fondo.
   Carta: la barra de secciones deja de ser fija y queda transparente.
   Editor: queda fija pero translúcida (vidrio) para poder navegar listas largas. */
.carta-nav { position: static; background: transparent; padding-top: 6px; }
.ed-nav { background: rgba(4, 4, 4, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }