/* ═══════════════════════════════════════════════════════════════════════
   virtualmenus-theme.css — Tema compartido de VirtualMenus
   ═══════════════════════════════════════════════════════════════════════
   Un solo lugar para la identidad visual (colores, tipografías, componentes
   base) usada en la landing, admin.html, cocina.html, el kit de QR y el
   onboarding. Si cambia la paleta de la landing, se actualiza ACÁ y se
   propaga a todas las pantallas que enlazan este archivo.

   Cada pantalla puede seguir teniendo su propio <style> con reglas
   específicas (layouts particulares, componentes únicos) — este archivo
   solo cubre lo compartido: variables de color, tipografía base, y los
   componentes más comunes (botones, tarjetas, inputs, badges).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Paleta base (idéntica a la landing) */
  --cream:       #EEF3FC;
  --paper:       #FFFFFF;
  --ink:         #0E1830;
  --ink2:        #56637D;
  --accent:      #3358E0;
  --accent-bg:   #E1E9FC;
  --accent-deep: #1E2F73;
  --warm:        #FF7A45;
  --line:        #DCE4F5;

  /* Superficies y tonos derivados, usados en admin/cocina/onboarding */
  --card-soft:   #F7F9FE;
  --line-soft:   #EDF1FB;
  --line-strong: #C7D3EE;

  /* Estados semánticos */
  --success:  #1F9D51;
  --danger:   #D9342B;
  --warning:  #C77800;

  /* Compatibilidad con nombres viejos (admin-style.css, onboarding, etc.)
     — permite enlazar este archivo sin reescribir cada var(--primary) */
  --primary: var(--accent);
  --bg:      var(--cream);
  --card:    var(--paper);
  --text:    var(--ink);
  --border:  var(--line);
}

/* ── Tipografía base ──────────────────────────────────────────────────── */
body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  color: var(--ink);
}

h1, h2, h3, .vm-heading {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
}

/* ── Botones ──────────────────────────────────────────────────────────── */
.vm-btn, .btn-save, .btn-principal, .btn-guardar-master {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.9rem 1.4rem;
  border-radius: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.vm-btn:hover, .btn-save:hover, .btn-principal:hover { opacity: 0.9; }
.vm-btn:disabled, .btn-save:disabled { opacity: 0.5; cursor: default; }

.vm-btn-warm {
  background: var(--warm);
}

.vm-btn-outline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.vm-btn-danger, .btn-lock {
  background: var(--danger);
  color: #fff;
}

/* ── Tarjetas / secciones ─────────────────────────────────────────────── */
.vm-card, .form-section, .cliente-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 4px 20px rgba(14,24,48,0.05);
}

/* ── Inputs ───────────────────────────────────────────────────────────── */
.vm-input, input, select, textarea {
  background: var(--card-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  padding: 12px;
  font-family: 'Inter', sans-serif;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  outline: none;
}

/* ── Badges de estado / tier ──────────────────────────────────────────── */
.vm-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vm-badge-accent  { background: var(--accent); color: #fff; }
.vm-badge-warm    { background: var(--warm);   color: #fff; }
.vm-badge-success { background: var(--success); color: #fff; }
.vm-badge-danger  { background: var(--danger); color: #fff; }

/* Tiers (usado en el Maestro / tarjetas de cliente) */
.card-tier-1 { border-left: 8px solid var(--warning); }
.card-tier-2 { border-left: 8px solid var(--accent); }
.card-tier-3 { border-left: 8px solid var(--accent-deep); }

.status-pill {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
}

/* ── Logo ─────────────────────────────────────────────────────────────── */
.logo-onboarding, .vm-logo {
  height: 60px;
  margin-bottom: 20px;
}