/* Mercado del Sabor · base con la identidad oficial de la marca.
   Paleta del logo: bordó (#600c18), verde esmeralda (#0c8448), terracota (#c0480c).
   El esmeralda es el color de acción (botones, precios); el bordó es el color de
   marca (hero, pie, secciones); la terracota es el acento.
   Tipografía: Archivo (títulos) + Mulish (cuerpo), self-hosted. */
@font-face{font-family:Archivo;src:url('fonts/Archivo.ttf') format('truetype-variations');font-weight:300 800;font-display:swap}
@font-face{font-family:Mulish;src:url('fonts/Mulish.ttf') format('truetype-variations');font-weight:300 800;font-display:swap}
:root{
  --bg:#f7f4ee; --surface:#ffffff; --surface-2:#f1ece2;
  --ink:#1d1512; --muted:#6a5f57; --faint:#978a7f;
  --line:#e7ded0; --line-2:#efe9dd;
  /* esmeralda = acción */
  --brand:#0f8a4b; --brand-bright:#17a659; --brand-2:#0b6e3b; --brand-ink:#ffffff; --brand-soft:#e2f2e8;
  /* bordó = marca */
  --bordo:#6d1524; --bordo-2:#571019; --bordo-ink:#ffffff; --bordo-soft:#f6e7e9;
  /* terracota = acento */
  --accent:#c1531c; --accent-2:#a54514; --accent-ink:#ffffff; --accent-soft:#f9ebe0;
  --ink-dark:#1a1210;
  --ok:#0f8a4b; --ok-bg:#e2f2e8;
  --warn:#b06a12; --warn-bg:#faf0df;
  --bad:#c0392b; --bad-bg:#fbe9e7;
  --info:#2f6f8d; --info-bg:#e6f1f5;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(29,21,18,.05), 0 14px 34px -22px rgba(29,21,18,.35);
  --wa:#25d366;
  color-scheme:light;
}

/* ---- modo oscuro (data-theme="dark") ---- */
:root[data-theme="dark"]{
  --bg:#17120f; --surface:#211a15; --surface-2:#2b231d;
  --ink:#f4ede5; --muted:#b4a89c; --faint:#8b8074;
  --line:#352b23; --line-2:#2b231d;
  --brand:#26bd6a; --brand-bright:#33d17c; --brand-2:#1ea25a; --brand-ink:#08170e; --brand-soft:#16321f;
  --bordo:#c74a5e; --bordo-2:#a5364a; --bordo-ink:#ffffff; --bordo-soft:#3a1a20;
  --accent:#e2703a; --accent-2:#c25a24; --accent-ink:#1a0f07; --accent-soft:#3a2418;
  --ink-dark:#f4ede5;
  --ok:#26bd6a; --ok-bg:#16321f;
  --warn:#e0a94a; --warn-bg:#33280f;
  --bad:#e5675a; --bad-bg:#3a1e1b;
  --info:#5aa9c9; --info-bg:#152a33;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -24px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:400 15px/1.55 Mulish,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 .4em; line-height:1.14; font-family:Archivo,sans-serif; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 .8em}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
small{color:var(--muted)}
hr{border:0; border-top:1px solid var(--line); margin:16px 0}

/* botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 14px/1 inherit; cursor:pointer;
  padding:10px 16px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  transition:background-color .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2.5px solid var(--brand); outline-offset:2px}
.btn--primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.btn--primary:hover{filter:brightness(1.05); background:var(--brand)}
.btn--ghost{background:transparent}
.btn--wa{background:var(--wa); border-color:var(--wa); color:#053d1c}
.btn--danger{color:var(--bad); border-color:var(--bad)}
.btn--sm{padding:7px 11px; font-size:13px}
.btn--block{width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* formularios */
label{display:block; font-weight:600; font-size:13px; margin:0 0 5px; color:var(--muted)}
input,select,textarea{
  width:100%; font:400 14px/1.4 inherit; color:var(--ink);
  padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand); outline-offset:0; border-color:var(--brand)}
textarea{resize:vertical; min-height:72px}
.field{margin-bottom:14px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){.grid-2{grid-template-columns:1fr}}

/* superficies */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.pad{padding:16px}

/* chips de estado */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:650;
  padding:4px 9px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted)}
.chip--ok{background:var(--ok-bg); color:var(--ok); border-color:transparent}
.chip--warn{background:var(--warn-bg); color:var(--warn); border-color:transparent}
.chip--bad{background:var(--bad-bg); color:var(--bad); border-color:transparent}
.chip--info{background:var(--info-bg); color:var(--info); border-color:transparent}
.chip .dot{width:7px; height:7px; border-radius:50%; background:currentColor}

/* tablas */
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--faint); font-weight:650; padding:10px 12px; border-bottom:1px solid var(--line)}
td{padding:11px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}

/* aviso demo */
.aviso-demo{
  font-size:13px; color:var(--warn); background:var(--warn-bg);
  border:1px solid transparent; border-radius:var(--radius-sm); padding:8px 12px; margin:0 0 14px;
}

/* utilidades */
.row{display:flex; align-items:center; gap:10px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.spacer{flex:1}
.muted{color:var(--muted)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.hidden{display:none !important}
.stack>*+*{margin-top:10px}

/* modal / drawer */
.overlay{position:fixed; inset:0; background:rgba(15,23,32,.45); display:none; z-index:80}
.overlay.on{display:block}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(460px,94vw);
  background:var(--surface); border-left:1px solid var(--line); box-shadow:-24px 0 60px -30px rgba(0,0,0,.4);
  transform:translateX(100%); transition:transform .25s ease; z-index:90; display:flex; flex-direction:column;
}
.drawer.on{transform:none}
.drawer__head{padding:16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.drawer__body{padding:16px; overflow:auto; flex:1}
.drawer__foot{padding:14px 16px; border-top:1px solid var(--line)}
.iconbtn{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-sm);
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px}
.iconbtn:hover{background:var(--surface-2)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}