/* ════════════════════════════════════════════════════════════
   Pekrys Empleados — Waiter Mobile POS
   Optimizado para iPhone / pantalla táctil
   ════════════════════════════════════════════════════════════ */

:root {
  --e-bg:        #0b0d12;
  --e-surface:   #12151e;
  --e-card:      #1a1f2e;
  --e-card-h:    #222840;
  --e-border:    #2a3048;
  --e-border-l:  #374060;
  --e-accent:    #C8102E;
  --e-green:     #16a34a;
  --e-green-h:   #14913f;
  --e-teal:      #0d9488;
  --e-amber:     #f59e0b;
  --e-text:      #f0f3fa;
  --e-text-2:    #8a96b0;
  --e-text-3:    #4e5878;
  --e-combo:     #7c3aed;
  --e-radius:    10px;
  --e-radius-lg: 14px;
  --e-header-h:  54px;
  --e-ease:      0.13s ease;

  /* Category colors */
  --cat-arroz:    #f59e0b;
  --cat-proteina: #ef4444;
  --cat-pescado:  #3b82f6;
  --cat-ensalada: #22c55e;
  --cat-fritura:  #eab308;
  --cat-pasta:    #f97316;
  --cat-caldo:    #ea580c;
  --cat-bebida:   #06b6d4;
  --cat-especial: #a855f7;
}

/* ── Reset ──────────────────────────────────────────────── */
#emp-wrap, #emp-wrap *, #emp-login-wrap, #emp-login-wrap * {
  box-sizing: border-box; margin: 0; padding: 0;
  font-family: -apple-system,'SF Pro Display','Segoe UI',sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#emp-wrap button { cursor: pointer; border: none; background: none; font-family: inherit; }
#emp-wrap input, #emp-wrap textarea {
  font-family: inherit;
  background-color: #1a1f2e !important;
  color: #f0f3fa !important;
  -webkit-text-fill-color: #f0f3fa !important;
  border-color: #2a3048 !important;
}
#emp-wrap input::placeholder, #emp-wrap textarea::placeholder {
  color: #6b7694 !important; -webkit-text-fill-color: #6b7694 !important;
}
#emp-wrap input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1a1f2e inset !important;
  -webkit-text-fill-color: #f0f3fa !important;
}

/* ── Login page ─────────────────────────────────────────── */
#emp-login-wrap {
  min-height: 100vh;
  background: var(--e-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.emp-login-box {
  background: var(--e-surface);
  border: 1px solid var(--e-border);
  border-radius: var(--e-radius-lg);
  padding: 32px 28px;
  width: 100%; max-width: 360px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.emp-login-logo { font-size: 48px; text-align: center; margin-bottom: 12px; }
.emp-login-title {
  font-size: 20px; font-weight: 800; color: var(--e-text);
  text-align: center; margin-bottom: 4px;
}
.emp-login-sub {
  font-size: 13px; color: var(--e-text-2); text-align: center; margin-bottom: 24px;
}
/* WordPress login form styling */
#emp-login-wrap .login-username, #emp-login-wrap .login-password,
#emp-login-wrap .login-remember { margin-bottom: 14px; }
#emp-login-wrap label { font-size: 12px; color: var(--e-text-2); display: block; margin-bottom: 5px; }
#emp-login-wrap input[type="text"],
#emp-login-wrap input[type="password"] {
  width: 100%; padding: 12px 14px;
  background: var(--e-card) !important;
  border: 1px solid var(--e-border) !important;
  border-radius: var(--e-radius) !important;
  color: var(--e-text) !important;
  font-size: 16px !important; /* Prevents iOS zoom */
  outline: none !important;
}
#emp-login-wrap input[type="text"]:focus,
#emp-login-wrap input[type="password"]:focus { border-color: var(--e-accent) !important; }
#emp-login-wrap input[type="submit"] {
  width: 100%; padding: 14px;
  background: var(--e-accent) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: none !important; border-radius: var(--e-radius) !important;
  font-size: 16px !important; font-weight: 700 !important;
  margin-top: 8px; cursor: pointer !important;
}
#emp-login-wrap input[type="checkbox"] { width: auto !important; }
#emp-login-wrap .login-remember label { display: inline; font-size: 13px; color: var(--e-text-2); margin-left: 6px; }

/* ── Shell ──────────────────────────────────────────────── */
#emp-wrap {
  position: fixed; inset: 0; z-index: 99990;
  background: var(--e-bg);
  color: var(--e-text);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.admin-bar #emp-wrap { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #emp-wrap { top: 46px; } }

/* ── Header ─────────────────────────────────────────────── */
#emp-header {
  height: var(--e-header-h);
  background: linear-gradient(135deg, #12151e 0%, #1a1f30 100%);
  border-bottom: 1px solid var(--e-border);
  display: flex; align-items: center;
  padding: 0 14px; gap: 10px;
  flex-shrink: 0; user-select: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.emp-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.emp-logo { height: 30px; width: auto; border-radius: 5px; object-fit: contain; }
.emp-brand-name {
  font-size: 15px; font-weight: 800; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emp-clock {
  font-size: 13px; font-weight: 600; color: var(--e-text-2);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.emp-waiter-pill {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 5px 12px; flex-shrink: 0;
}
.emp-waiter-icon { font-size: 13px; }
.emp-waiter-name { font-size: 12px; font-weight: 700; color: var(--e-text); }

/* ── Table selector ─────────────────────────────────────── */
#emp-table-section {
  background: var(--e-surface);
  border-bottom: 1px solid var(--e-border);
  padding: 10px 12px;
  flex-shrink: 0;
}
.emp-section-title {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.emp-section-title > span {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--e-text-2);
}
/* El selector de cantidad de personas se eliminó — los camareros lo dejaban
   siempre en 2 y la cocina lo leía como dato real. */

/* Table grid */
#emp-table-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 3 cols per number: num, A, B */
  gap: 5px;
  /* Actually: 10 numbers × 3 buttons = 30 buttons */
}
/* Use auto-fill but with fixed columns per row */
#emp-table-grid {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.emp-table-btn {
  min-width: 44px; height: 40px; flex-shrink: 0;
  background: var(--e-card); border: 1.5px solid var(--e-border);
  border-radius: 8px;
  color: var(--e-text); font-size: 13px; font-weight: 700;
  transition: all var(--e-ease);
  display: flex; align-items: center; justify-content: center;
}
.emp-table-sub { min-width: 38px; opacity: 0.75; font-size: 12px; }
.emp-table-btn:active { transform: scale(0.93); }
.emp-table-btn.selected {
  background: var(--e-teal);
  border-color: var(--e-teal);
  color: #fff;
  box-shadow: 0 3px 10px rgba(13,148,136,0.4);
  opacity: 1;
}

/* Selected table display */
.emp-table-selected {
  margin-top: 8px; padding: 8px 12px;
  background: rgba(13,148,136,0.12);
  border: 1px solid rgba(13,148,136,0.3);
  border-radius: 8px;
  font-size: 13px; color: var(--e-text);
  display: flex; align-items: center; gap: 6px;
}
.emp-table-selected strong { color: #2dd4bf; font-size: 15px; }
/* Barra special button */
.emp-barra-special-btn {
  background: rgba(200,16,46,0.15) !important;
  border-color: var(--e-accent) !important;
  color: #fca5a5 !important;
  min-width: 70px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}
.emp-barra-special-btn.selected {
  background: var(--e-accent) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(200,16,46,0.4);
}

.emp-table-change-btn {
  margin-left: auto;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--e-border);
  border-radius: 6px;
  color: var(--e-text-2); font-size: 11px; padding: 3px 9px;
}

/* ── Menu section ───────────────────────────────────────── */
#emp-menu-section {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}

/* Combo bar */
#emp-combo-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg,#150d28,#1e1240);
  border-bottom: 1px solid rgba(124,58,237,0.35);
  padding: 8px 12px; gap: 8px; flex-shrink: 0;
}
#emp-combo-bar-label {
  font-size: 12px; color: #c4b5fd; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emp-combo-add-btn {
  background: var(--e-combo); border: none; border-radius: 7px;
  color: #fff; font-size: 12px; font-weight: 800;
  padding: 7px 12px; white-space: nowrap; flex-shrink: 0;
  transition: opacity var(--e-ease);
}
.emp-combo-add-btn:disabled { opacity: 0.35; }
.emp-combo-add-btn:not(:disabled) { animation: emp-pulse 2s ease-in-out infinite; }
@keyframes emp-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,0.4)} 50%{box-shadow:0 0 0 8px rgba(124,58,237,0)} }

/* Category tabs */
#emp-tabs-wrap {
  background: var(--e-surface);
  border-bottom: 1px solid var(--e-border);
  overflow-x: auto; flex-shrink: 0;
  height: 48px; display: flex; align-items: stretch;
  scrollbar-width: none; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
#emp-tabs-wrap::-webkit-scrollbar { display: none; }
#emp-tabs { display: flex; align-items: stretch; padding: 6px 10px; gap: 5px; white-space: nowrap; }
.emp-tab {
  display: flex; align-items: center; gap: 4px;
  background: transparent; border: 1.5px solid transparent;
  border-radius: 8px; padding: 0 13px;
  font-size: 13px; font-weight: 700;
  color: var(--e-text-2); white-space: nowrap;
  transition: all var(--e-ease);
}
.emp-tab:hover  { background: var(--e-card); color: var(--e-text); border-color: var(--e-border); }
.emp-tab.active { background: var(--e-teal); border-color: var(--e-teal); color: #fff; box-shadow: 0 3px 10px rgba(13,148,136,0.4); }
/* Per-view tab colors */
.emp-tab[data-view="combo_standard"].active { background: #d97706; border-color: #d97706; box-shadow: 0 3px 10px rgba(217,119,6,0.4); }
.emp-tab[data-view="combo_especial"].active  { background: #9333ea; border-color: #9333ea; box-shadow: 0 3px 10px rgba(147,51,234,0.4); }
.emp-tab[data-view="combo_fish"].active      { background: #2563eb; border-color: #2563eb; box-shadow: 0 3px 10px rgba(37,99,235,0.4); }
.emp-tab[data-view="combo_pasta"].active     { background: #ea580c; border-color: #ea580c; box-shadow: 0 3px 10px rgba(234,88,12,0.4); }
.emp-tab[data-view="combo_caldo"].active     { background: #c2410c; border-color: #c2410c; }
.emp-tab[data-view="bebidas"].active         { background: #0891b2; border-color: #0891b2; box-shadow: 0 3px 10px rgba(8,145,178,0.4); }
.emp-tab[data-view="adicionales"].active     { background: #ca8a04; border-color: #ca8a04; }

/* Items scroll */
#emp-items-wrap { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; }
#emp-view-content { display: flex; flex-direction: column; gap: 16px; }

/* Sub-headers */
.emp-sub-header {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 0 7px; border-bottom: 2px solid var(--e-border); margin-bottom: 2px;
}
.emp-sub-icon  { font-size: 14px; }
.emp-sub-label { font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-text-2); }
.emp-sub-arroz    { border-bottom-color: var(--cat-arroz); }   .emp-sub-arroz    .emp-sub-label { color: var(--cat-arroz); }
.emp-sub-proteina { border-bottom-color: var(--cat-proteina); } .emp-sub-proteina .emp-sub-label { color: var(--cat-proteina); }
.emp-sub-pescado  { border-bottom-color: var(--cat-pescado); }  .emp-sub-pescado  .emp-sub-label { color: var(--cat-pescado); }
.emp-sub-ensalada { border-bottom-color: var(--cat-ensalada); } .emp-sub-ensalada .emp-sub-label { color: var(--cat-ensalada); }
.emp-sub-fritura  { border-bottom-color: var(--cat-fritura); }  .emp-sub-fritura  .emp-sub-label { color: var(--cat-fritura); }
.emp-sub-pasta    { border-bottom-color: var(--cat-pasta); }    .emp-sub-pasta    .emp-sub-label { color: var(--cat-pasta); }
.emp-sub-caldo    { border-bottom-color: var(--cat-caldo); }    .emp-sub-caldo    .emp-sub-label { color: var(--cat-caldo); }
.emp-sub-bebida   { border-bottom-color: var(--cat-bebida); }   .emp-sub-bebida   .emp-sub-label { color: var(--cat-bebida); }
.emp-sub-especial { border-bottom-color: var(--cat-especial); } .emp-sub-especial .emp-sub-label { color: var(--cat-especial); }

/* Items grid — larger for touch */
.emp-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 9px;
}
.emp-item-card {
  background: var(--e-card);
  border: 1.5px solid var(--e-border);
  border-radius: var(--e-radius-lg);
  border-top-width: 3px;
  padding: 14px 12px 11px;
  cursor: pointer; user-select: none;
  display: flex; flex-direction: column; gap: 7px;
  position: relative; min-height: 82px;
  transition: all var(--e-ease);
  -webkit-touch-callout: none;
}
.emp-item-card:active { transform: scale(0.94); }

/* Category bg tints */
.emp-item-card[data-cat="arroz"]    { border-top-color: var(--cat-arroz);    background: rgba(245,158,11,.12); }
.emp-item-card[data-cat="proteina"] { border-top-color: var(--cat-proteina); background: rgba(239,68,68,.12);  }
.emp-item-card[data-cat="pescado"]  { border-top-color: var(--cat-pescado);  background: rgba(59,130,246,.12); }
.emp-item-card[data-cat="ensalada"] { border-top-color: var(--cat-ensalada); background: rgba(34,197,94,.12);  }
.emp-item-card[data-cat="fritura"]  { border-top-color: var(--cat-fritura);  background: rgba(234,179,8,.12);  }
.emp-item-card[data-cat="pasta"]    { border-top-color: var(--cat-pasta);    background: rgba(249,115,22,.12); }
.emp-item-card[data-cat="caldo"]    { border-top-color: var(--cat-caldo);    background: rgba(234,88,12,.12);  }
.emp-item-card[data-cat="bebida"]   { border-top-color: var(--cat-bebida);   background: rgba(6,182,212,.12);  }
.emp-item-card[data-cat="especial"] { border-top-color: var(--cat-especial); background: rgba(168,85,247,.12); }

.emp-item-card.in-cart {
  border-color: var(--e-teal) !important;
  box-shadow: 0 0 0 1px var(--e-teal);
}
.emp-item-card.staged {
  border-color: var(--e-combo) !important;
  box-shadow: 0 0 0 1px var(--e-combo);
}
.emp-item-card.staged::after {
  content: '✓'; position: absolute; top: 6px; right: 8px;
  color: #a78bfa; font-size: 14px; font-weight: 900;
}

.emp-item-name {
  font-size: 14px !important; font-weight: 700 !important;
  color: #f0f3fa !important; line-height: 1.3;
}
.emp-item-price {
  font-size: 15px !important; font-weight: 900 !important;
  color: #f0a500 !important; margin-top: auto;
}
.emp-item-card[data-cat="arroz"]    .emp-item-price { color: var(--cat-arroz)    !important; }
.emp-item-card[data-cat="proteina"] .emp-item-price { color: var(--cat-proteina) !important; }
.emp-item-card[data-cat="pescado"]  .emp-item-price { color: var(--cat-pescado)  !important; }
.emp-item-card[data-cat="ensalada"] .emp-item-price { color: var(--cat-ensalada) !important; }
.emp-item-card[data-cat="fritura"]  .emp-item-price { color: var(--cat-fritura)  !important; }
.emp-item-card[data-cat="pasta"]    .emp-item-price { color: var(--cat-pasta)    !important; }
.emp-item-card[data-cat="caldo"]    .emp-item-price { color: var(--cat-caldo)    !important; }
.emp-item-card[data-cat="bebida"]   .emp-item-price { color: var(--cat-bebida)   !important; }
.emp-item-card[data-cat="especial"] .emp-item-price { color: var(--cat-especial) !important; }
.emp-item-included { font-size: 11px !important; color: var(--e-text-3) !important; text-transform: uppercase; letter-spacing: 0.04em; margin-top: auto; }

.emp-qty-badge {
  position: absolute; top: -7px; right: -7px;
  background: var(--e-teal); color: #fff;
  font-size: 11px; font-weight: 900;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--e-bg);
  box-shadow: 0 2px 8px rgba(13,148,136,0.5);
}

#emp-loading, #emp-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 120px;
  color: var(--e-text-3); gap: 8px; font-size: 13px; text-align: center;
}
.emp-spinner {
  width: 26px; height: 26px;
  border: 3px solid var(--e-border); border-top-color: var(--e-teal);
  border-radius: 50%; animation: emp-spin 0.65s linear infinite;
}
@keyframes emp-spin { to { transform: rotate(360deg); } }

/* ── Cart bottom ─────────────────────────────────────────── */
#emp-cart-bar {
  background: var(--e-surface);
  border-top: 1px solid var(--e-border);
  flex-shrink: 0;
  max-height: 55vh;
  display: flex; flex-direction: column;
}

/* Cart items list (collapsible) */
#emp-cart-summary {
  overflow-y: auto;
  border-bottom: 1px solid var(--e-border);
  max-height: 25vh;
}
.emp-cart-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(42,48,72,.5);
}
.emp-cart-row:last-child { border-bottom: none; }
.emp-cart-row-name {
  flex: 1; font-size: 12px; font-weight: 500; color: #f0f3fa;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emp-cart-row-price { font-size: 12px; font-weight: 700; color: #f0a500; white-space: nowrap; min-width: 55px; text-align: right; }
.emp-qty-ctrl {
  display: flex; align-items: center;
  border: 1px solid var(--e-border); border-radius: 6px; overflow: hidden; flex-shrink: 0;
}
.emp-qty-btn {
  background: var(--e-card); color: var(--e-text-2);
  font-size: 15px; font-weight: 700;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}
.emp-qty-btn:active { background: var(--e-border-l); }
.emp-qty-minus:active { background: rgba(239,68,68,.2); color: #ef4444; }
.emp-qty-num {
  background: var(--e-card); color: #f0f3fa;
  font-size: 12px; font-weight: 700;
  width: 26px; text-align: center; line-height: 26px;
  border-left: 1px solid var(--e-border); border-right: 1px solid var(--e-border);
}

/* Cart footer */
.emp-cart-footer { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.emp-cart-fields { display: flex; flex-direction: column; gap: 6px; }
.emp-cart-fields input, .emp-cart-fields textarea {
  width: 100%; padding: 9px 12px;
  background: var(--e-card) !important; border: 1px solid var(--e-border) !important;
  border-radius: var(--e-radius) !important; color: #f0f3fa !important;
  font-size: 15px !important; /* prevent iOS zoom */ resize: none; outline: none !important;
}
.emp-cart-fields input:focus, .emp-cart-fields textarea:focus { border-color: var(--e-teal) !important; }

.emp-cart-totals { display: flex; align-items: center; justify-content: space-between; }
#emp-cart-count { font-size: 12px; color: var(--e-text-2); }
.emp-total-amount { font-size: 20px; font-weight: 900; color: #fbbf24; }

/* Send button */
.emp-send-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--e-teal) 0%, #0f766e 100%);
  border: none; border-radius: var(--e-radius-lg);
  color: #fff; font-size: 17px; font-weight: 900;
  padding: 16px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 4px 16px rgba(13,148,136,0.45);
  transition: all var(--e-ease);
}
.emp-send-btn:active:not(:disabled) { transform: scale(0.98); box-shadow: 0 2px 8px rgba(13,148,136,0.3); }
.emp-send-btn:disabled {
  background: var(--e-card) !important; color: var(--e-text-3) !important;
  cursor: not-allowed; box-shadow: none; border: 1px solid var(--e-border);
}
.emp-send-btn.loading { opacity: 0.65; pointer-events: none; }
.emp-send-icon { font-size: 20px; }
.emp-send-btn:disabled .emp-send-icon { display: none; }

/* ── Toast ──────────────────────────────────────────────── */
.emp-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 99999;
}
.emp-toast-inner {
  background: #17212f; border: 1px solid #2a3d55;
  border-radius: 14px; padding: 12px 20px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  min-width: 260px; max-width: 360px;
}
.emp-toast-icon { font-size: 22px; flex-shrink: 0; }
.emp-toast-inner strong { display: block; font-size: 14px; font-weight: 800; color: #f0f3fa; }
.emp-toast-inner small  { display: block; font-size: 12px; color: var(--e-text-2); margin-top: 1px; }