:root{
  --bg:#fff;
  --text:#111;
  --muted:#6b7280;
  --line:#e5e7eb;

  --green:#22c55e;
  --orange:#f59e0b;
  --red:#ef4444;
  --blue:#3b82f6;

  --radius:16px;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Header */
.ml-header{
  padding:14px;
  border-bottom:1px solid var(--line);
}
.ml-brand{
  display:flex;
  gap:10px;
  align-items:center;
}
.ml-logo{
  width:36px;height:36px;
  border-radius:10px;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.ml-brand span{
  display:block;
  font-size:12px;
  color:var(--muted);
}

/* Status */
.ml-status{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:14px;
}
.ml-stat{
  padding:10px;
  border-radius:var(--radius);
  text-align:center;
  font-size:12px;
}
.ml-stat strong{
  display:block;
  font-size:20px;
}
.ml-stat.good{background:#ecfdf5;color:var(--green)}
.ml-stat.warn{background:#fffbeb;color:var(--orange)}
.ml-stat.off{background:#fef2f2;color:var(--red)}

/* Filters */
.ml-filters{
  display:flex;
  gap:8px;
  padding:0 14px 14px;
  overflow-x:auto;
}
.ml-filters button{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:700;
  white-space:nowrap;
}

/* List */
.ml-list{
  padding:0 14px 20px;
}

/* Venue */
.ml-venue{
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.ml-venue h3{
  margin:0;
  font-size:17px;
}
.ml-venue .meta{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
}
.ml-venue .info{
  display:flex;
  gap:12px;
  margin-top:8px;
  font-size:13px;
}
.ml-venue .info span{
  font-weight:700;
}
.open{color:var(--green)}
.paused{color:var(--orange)}
.closed{color:var(--red)}

.ml-venue a{
  display:inline-block;
  margin-top:10px;
  color:var(--blue);
  font-weight:700;
}

/* ===== Bloques asistente (se agregan al estilo actual) ===== */
.ml-block{padding:0 14px 14px}
.ml-block__head h2{margin:0;font-size:16px;font-weight:900}
.ml-block__head p{margin:6px 0 0;color:var(--muted);font-size:13px}

.ml-pill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}

.ml-pill.active{
  border-color:var(--blue);
  background:rgba(59,130,246,.08);
}
.ml-pill--ghost{background:transparent}

.ml-quick,.ml-filters{
  display:flex; gap:8px; overflow-x:auto;
  padding-top:10px;
}

.ml-mini{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:#f9fafb;
  border:1px solid var(--line);
  color:#374151;
  font-size:13px;
}

.ml-rec{display:grid; gap:10px; margin-top:10px}
.ml-recitem{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:#fff;
}
.ml-recitem strong{display:block;font-size:14px}
.ml-recitem span{display:block;margin-top:3px;color:var(--muted);font-size:12.5px}
.ml-recitem a{display:inline-block;margin-top:8px;color:#3b82f6;font-weight:800}

.ml-list{padding:0 14px 16px}
.ml-list__head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin:10px 0}
.ml-list__title{font-size:18px;font-weight:900}
.ml-list__sub{font-size:13px;color:var(--muted);margin-top:4px}

.ml-banner{
  display:flex; gap:12px; align-items:flex-start;
  margin:6px 14px 14px;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,#fff7ed,#eff6ff);
}
.ml-banner__emoji{font-size:22px;line-height:1}
.ml-banner__title{font-weight:900}
.ml-banner__sub{margin-top:4px;color:var(--muted);font-size:13.5px;line-height:1.3}

.ml-benefits{display:grid;gap:8px;margin-top:10px}
.ml-b{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  font-weight:700;
  font-size:13px;
}

.ml-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px;
}
.ml-step{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:10px;
  text-align:center;
}
.ml-step strong{
  display:inline-flex;
  width:26px;height:26px;
  border-radius:10px;
  align-items:center;justify-content:center;
  background:#111;color:#fff;
  font-size:13px;
}
.ml-step span{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);font-weight:700}

.ml-cta{
  display:block;
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px dashed #7c3aed;
  background:rgba(124,58,237,.06);
  font-weight:900;
  color:#111;
}

/* ===== Header con isologo ===== */
.ml-header{
  border-bottom:1px solid var(--line);
  background:#fff;
}

.ml-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px;
  gap:12px;
}

.ml-title{
  display:block;
  font-size:18px;
  font-weight:900;
  line-height:1.1;
}

.ml-sub{
  display:block;
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
  font-weight:600;
}

.ml-isologo{
  height:128px;       /* 👈 lo que pediste */
  width:auto;
  object-fit:contain;
}

/* ===== Preferencias (¿Con qué tenés ganas de comer?) ===== */
.ml-preferences{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:10px;
}
.ml-pref{
  padding:14px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}
.ml-pref.active{
  background:#111;
  color:#fff;
  border-color:#111;
}


/* ===== Reserva / Form ===== */

.ml-formhead{margin-bottom:10px}
.ml-h3{margin:0;font-size:16px;font-weight:900}
.ml-sub{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.35}

.ml-grid{display:grid;gap:10px;margin-top:10px}
.ml-field{display:flex;flex-direction:column;gap:6px}
.ml-label{font-size:13px;font-weight:800}
.ml-input{
  width:100%;
  box-sizing:border-box;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  font-size:14px;
  outline:none;
}
.ml-input:focus{
  border-color:#111;
  box-shadow:0 0 0 3px rgba(17,17,17,0.08);
}

.ml-help{font-size:12.5px;color:var(--muted);line-height:1.35}

.ml-btn{
  width:100%;
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  cursor:pointer;
}
.ml-btn:disabled{opacity:.6;cursor:not-allowed}

.ml-btn--primary{
  background:#111;
  color:#fff;
  border-color:#111;
}

.ml-msg{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  color:var(--muted);
}
.ml-msg.ok{color:var(--green);font-weight:800}
.ml-msg.err{color:var(--red);font-weight:800}


/* Header actions (avoid overlap) */
.ml-header__actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Compact header button on the right */
.ml-mini--top{
  margin-top:0;
  padding:10px 12px;
  line-height:1;
}

/* Back button (venue page) */
.ml-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:#111827;
  font-weight:900;
  text-decoration:none;
}

/* Cards on detail pages */
.ml-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  box-shadow:0 1px 0 rgba(17,24,39,.04);
  margin:12px 14px;
}

/* Make reserve button full-width on mobile */
#btnJoin{
  width:100%;
}

/* Form spacing inside cards */
.ml-form{
  margin-top:10px;
}
.ml-field + .ml-field{
  margin-top:12px;
}