/* Mestto / Postech visual system. Loaded only on dev.mestto.cl. */
:root {
  --brand-ink: #092544;
  --brand-deep: #04273d;
  --brand-cyan: #04bee9;
  --brand-cyan-hover: #59d9f5;
  --brand-link: #087da8;
  --brand-muted: #536579;
  --brand-line: #dce7ef;
  --brand-canvas: #f1f6f9;
  --brand-soft: #eef7fc;
  --brand-surface: #fff;
  --brand-shadow: 0 10px 28px rgba(9, 37, 68, .06);
  --state-available: #5d9eae;
  --state-kitchen: #bd7478;
  --state-occupied: #bd9363;
  --state-ready: #659a81;
  --bg: var(--brand-canvas);
  --text: var(--brand-ink);
  --muted: var(--brand-muted);
  --border: var(--brand-line);
  --panel: var(--brand-surface);
  --line: var(--brand-line);
  --accent: var(--brand-link);
  --primary: var(--brand-link);
  --shadow: var(--brand-shadow);
  --radius: 12px;
}

html, body, body.admin-body, body.kitchen-body {
  color: var(--brand-ink);
  background: var(--brand-canvas);
  font-family: Arial, Helvetica, sans-serif !important;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--brand-link); outline-offset: 2px; }

/* Common shell: a restrained header, clear surfaces and quiet borders. */
.mestto-header, .admin-topbar {
  background: #fff;
  color: var(--brand-ink);
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(9, 37, 68, .04);
}
.mestto-header::before { background: var(--brand-cyan); }
.mh-restaurant-name, .mh-restaurant-logo span { color: var(--brand-ink); }
.mh-restaurant-logo, .mh-burger { background: var(--brand-soft); }
.mh-exit, .admin-topbar a { color: var(--brand-link); border-color: var(--brand-line); }
.mh-exit:hover, .mh-burger:hover { background: var(--brand-soft); }

.header, .app-header {
  background: var(--brand-deep);
  color: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 22px rgba(4, 39, 61, .12);
}
.header-title span, .app-kicker, .app-title .app-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.header-title strong, .app-name, .app-title .app-name { font-weight: 600; letter-spacing: -.02em; }

.card, .info-card, .summary-card, .table-card, .kcard, .kitchen-empty,
.context-card, .kpi-card, .panel, .modal-panel, .kn-card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  box-shadow: var(--brand-shadow);
}
.label, .sub, .kitchen-sub, .empty-sub, .korder, .kpi-label,
.kpi-sub, .panel-sub, .context-sub, .mh-context { color: var(--brand-muted); }
.summary-value, .panel-kpi-value, .context-main, .kpi-value,
.kitchen-h1, .kmesa, .empty-title { color: var(--brand-ink); }
.summary-value, .kpi-value, .panel-kpi-value { font-weight: 600; letter-spacing: -.035em; }
.kitchen-h1, .panel-title { font-weight: 600; letter-spacing: -.025em; }

/* Primary actions use Postech's cyan; operational status colours remain distinct. */
.btn, .btn-primary, .kn-btn-primary, .eta-confirm {
  background: var(--brand-cyan);
  color: var(--brand-deep);
  border: 1px solid var(--brand-cyan);
  border-radius: 6px;
  box-shadow: none;
  font-weight: 700;
}
.btn:hover, .btn-primary:hover, .kn-btn-primary:hover, .eta-confirm:hover {
  background: var(--brand-cyan-hover);
}
.btn-secondary, .kitchen-refresh {
  color: var(--brand-ink);
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 6px;
}
.input, input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-color: var(--brand-line);
  border-radius: 6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--brand-link);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-link); }

/* Mesero: quiet operational colours with distinct hues and legible labels. */
.table-card.mine { border-color: var(--brand-link); }
.table-card::after { border-radius: 3px; }
.table-card.status-blue::after { background: var(--state-available); }
.table-card.status-red::after { background: var(--state-kitchen); }
.table-card.status-orange::after { background: var(--state-occupied); }
.table-card.status-green::after { background: var(--state-ready); }
.status-blue .table-state { color: #457985; }
.status-red .table-state, .timer.kitchen { color: #99565c; }
.status-red.preparing .table-state, .timer.preparing { color: #99565c; }
.status-orange .table-state { color: #866039; }
.status-green .table-state { color: #44745a; }
.summary-main-card.summary-inline .summary-num { color: var(--brand-ink); }
.summary-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 0; vertical-align: -3px; }
.summary-icon::before { content: ''; display: block; width: 12px; height: 12px; border-radius: 3px; background: currentColor; }
.summary-icon-tables { color: var(--brand-link); }
.summary-icon-tables::before { width: 16px; height: 16px; border-radius: 0; background: currentColor; -webkit-mask: url('/assets/icons/branding/table.svg') center/contain no-repeat; mask: url('/assets/icons/branding/table.svg') center/contain no-repeat; }
.summary-icon-occupied { color: var(--state-occupied); }
.summary-icon-available { color: var(--state-available); }
.sector-chip { color: var(--brand-ink); border-color: var(--brand-line); background: #fff; box-shadow: none; font-weight: 600; }
.sector-chip.active { color: #07566b; background: #e3f2f5; border-color: #93c9d4; box-shadow: inset 0 0 0 1px #93c9d4; }
.sector-chip.active:hover { background: #d3eaf0; }
.mh-exit, .kitchen-tabs .tab.active { color: var(--brand-link); }
.kitchen-tabs .tab.active { border-color: var(--brand-cyan); }
.btn-delivery, .btn-customer { color: #07566b; background: #eaf5f7; border-color: #a9d2dc; }
.btn-delivery:hover, .btn-customer:hover { background: #dceff3; }
.table-card .close-action { color: #745734; background: #f7f0e6; border: 1px solid #e1ccb0; border-radius: 6px; font-weight: 700; }
.table-card .close-action:hover { background: #f0e4d3; text-decoration: none; }
.info-user { background: var(--brand-soft); border-color: var(--brand-line); }
.info-user::before { background: var(--brand-cyan); }

/* Mesero product picker and its primary actions. */
.category-btn { color: var(--brand-ink); background: #fff; border-color: var(--brand-line); font-weight: 600; }
.category-btn.active { color: #07566b; background: #e3f2f5; border-color: #93c9d4; }
.btn-plus { color: #07566b; background: #dceff3; border: 1px solid #a9d2dc; border-radius: 6px; font-weight: 600; }
.btn-plus:hover { background: #cbe7ec; }
.btn-info { color: var(--brand-link); }
.product-item { background: #f7fafb; }

/* A single stroke icon family replaces platform emoji on operational controls. */
.table-kind-icon, .timer-icon, .table-state-icon {
  display: inline-flex;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0;
  color: var(--brand-link);
}
.table-kind-icon::before, .timer-icon::before {
  content: '';
  width: 18px;
  height: 18px;
  display: block;
  background: currentColor;
  -webkit-mask: url('/assets/icons/branding/table.svg') center/contain no-repeat;
  mask: url('/assets/icons/branding/table.svg') center/contain no-repeat;
}
.table-type-customer .table-kind-icon::before { -webkit-mask-image: url('/assets/icons/branding/user.svg'); mask-image: url('/assets/icons/branding/user.svg'); }
.table-type-delivery .table-kind-icon::before { -webkit-mask-image: url('/assets/icons/branding/delivery.svg'); mask-image: url('/assets/icons/branding/delivery.svg'); }
.timer-icon { color: var(--brand-muted); }
.timer-icon::before { -webkit-mask-image: url('/assets/icons/branding/clock.svg'); mask-image: url('/assets/icons/branding/clock.svg'); }
.timer.kitchen .timer-icon { color: var(--state-kitchen); }
.table-state-icon { flex-basis: 10px; width: 10px; height: 10px; }
.table-state-icon::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.table-card .table-actions-row .table-union-btn,
.table-card .table-actions-row .edit-order-btn { color: var(--brand-link) !important; font-size: 0 !important; line-height: 0 !important; opacity: 1; }
.table-card .table-actions-row .table-union-btn::before,
.table-card .table-actions-row .edit-order-btn::before { content: ''; width: 20px; height: 20px; display: block; background: currentColor; -webkit-mask: url('/assets/icons/branding/link.svg') center/contain no-repeat; mask: url('/assets/icons/branding/link.svg') center/contain no-repeat; }
.table-card .table-actions-row .edit-order-btn::before { -webkit-mask-image: url('/assets/icons/branding/pencil.svg'); mask-image: url('/assets/icons/branding/pencil.svg'); }
.table-card .table-actions-row :is(.table-union-btn, .edit-order-btn):focus-visible { outline: 2px solid var(--brand-link); outline-offset: 3px; }

/* Cocina: corresponding pastel status and restrained action buttons. */
.kitchen-tabs .tab { font-weight: 600; color: var(--brand-muted); }
.kitchen-tabs .tab.active { color: var(--brand-link); }
.kitchen-icon, .kitchen-refresh { box-shadow: none; }
.kcard-foot { border-color: var(--brand-line); }
.kitchen-foot { background: rgba(241, 246, 249, .95); border-color: var(--brand-line); }
.kbadge.red { background: #f8e9e9; border-color: #ddb1b3; color: #934d52; }
.kbadge.orange { background: #f7efe5; border-color: #dfc39e; color: #785630; }
.kbadge.green { background: #eaf4ed; border-color: #b5d4c1; color: #356b4d; }
.kaction.orange { color: #68471e; background: #f2e4cd; border: 1px solid #d9bb91; }
.kaction.orange:hover { background: #ead8b8; }
.kaction.green { color: #245b42; background: #deeee4; border: 1px solid #a7ceb6; }
.kaction.green:hover { background: #cce4d5; }
.kaction { border-radius: 7px; font-weight: 700; }
.kbadge { font-weight: 700; }
.kmesa-icon, .operational-emoji { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; font-size: 0; vertical-align: -3px; }
.kmesa-icon::before, .operational-emoji::before { content: ''; display: block; width: 17px; height: 17px; background: currentColor; -webkit-mask: url('/assets/icons/branding/table.svg') center/contain no-repeat; mask: url('/assets/icons/branding/table.svg') center/contain no-repeat; }
.kmesa-icon { color: var(--brand-link); }
.kmesa-icon.type-customer::before { -webkit-mask-image: url('/assets/icons/branding/user.svg'); mask-image: url('/assets/icons/branding/user.svg'); }
.kmesa-icon.type-delivery::before { -webkit-mask-image: url('/assets/icons/branding/delivery.svg'); mask-image: url('/assets/icons/branding/delivery.svg'); }
.kbadge .operational-emoji { width: 10px; height: 10px; vertical-align: 0; }
.kbadge .operational-emoji::before { width: 8px; height: 8px; border-radius: 50%; -webkit-mask: none; mask: none; }
.kclock .operational-emoji { color: var(--brand-muted); }
.kclock .operational-emoji::before { -webkit-mask-image: url('/assets/icons/branding/clock.svg'); mask-image: url('/assets/icons/branding/clock.svg'); }
.kaction .operational-emoji { width: 20px; height: 20px; margin-right: 4px; }
.kaction .operational-emoji::before { width: 20px; height: 20px; }
.kaction.orange .operational-emoji::before { -webkit-mask-image: url('/assets/icons/branding/play.svg'); mask-image: url('/assets/icons/branding/play.svg'); }
.kaction.green .operational-emoji::before { -webkit-mask-image: url('/assets/icons/branding/check.svg'); mask-image: url('/assets/icons/branding/check.svg'); }

/* Admin: consistent headings, dashboard, data tables and controls. */
body.admin-body { --accent: var(--brand-link); }
.panel-title { color: var(--brand-ink); }
.admin-table th { background: var(--brand-soft); color: var(--brand-muted); }
.admin-table td, .admin-table th { border-color: var(--brand-line); }
.admin-table tbody tr:hover { background: var(--brand-soft); }
.admin-table input[type="checkbox"] { accent-color: var(--brand-link); }
.admin-categories-page .admin-table input:focus { border-color: var(--brand-link); }
.shift-selector, .shift-context, .panel-kpi-highlight { border-color: var(--brand-line); }

/* The login and role chooser use inline CSS; override only their visual tokens. */
body:has(.brand-hero) { background: linear-gradient(180deg, #fff, var(--brand-canvas)) !important; }
body:has(.brand-hero) :where(.brand-tagline, label) { color: var(--brand-muted); }
body:has(.brand-hero) .brand-tagline strong { color: var(--brand-ink); }
body:has(.brand-hero) .card h1 { color: var(--brand-ink); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
body:has(.brand-hero) .btn { text-transform: none; letter-spacing: 0; font-size: 14px; }
body:has(.brand-hero) :where(.wrap, .brand-hero, .brand-tagline, .card, .card *, label) {
  font-family: Arial, Helvetica, sans-serif !important;
}
.role-select-page, .role-select-page * { font-family: Arial, Helvetica, sans-serif !important; }
.role-card { background: #fff; border-color: var(--brand-line); border-radius: 12px; box-shadow: var(--brand-shadow); }
.role-title { color: var(--brand-ink); font-weight: 600; letter-spacing: -.025em; }
.role-subtitle, .role-btn span { color: var(--brand-muted); }
.role-btn { color: var(--brand-ink); background: #fff; border-color: var(--brand-line); border-radius: 6px; }
.role-btn:hover { background: var(--brand-soft); border-color: var(--brand-cyan); }
.role-icon { background: var(--brand-deep); border-radius: 6px; }
.role-icon { font-size: 0; }
.role-icon::before { content: ''; width: 18px; height: 18px; background: #fff; -webkit-mask: url('/assets/icons/branding/user.svg') center/contain no-repeat; mask: url('/assets/icons/branding/user.svg') center/contain no-repeat; }
.role-administrador .role-icon::before { -webkit-mask-image: url('/assets/icons/branding/settings.svg'); mask-image: url('/assets/icons/branding/settings.svg'); }
.role-mesero .role-icon::before { -webkit-mask-image: url('/assets/icons/branding/table.svg'); mask-image: url('/assets/icons/branding/table.svg'); }
.role-cocina .role-icon::before { -webkit-mask-image: url('/assets/icons/branding/kitchen.svg'); mask-image: url('/assets/icons/branding/kitchen.svg'); }
.role-delivery .role-icon::before { -webkit-mask-image: url('/assets/icons/branding/delivery.svg'); mask-image: url('/assets/icons/branding/delivery.svg'); }
.mh-notify { color: var(--brand-link); font-size: 0; }
.mh-notify::before { content: ''; display: block; width: 19px; height: 19px; background: currentColor; -webkit-mask: url('/assets/icons/branding/bell.svg') center/contain no-repeat; mask: url('/assets/icons/branding/bell.svg') center/contain no-repeat; }
.kitchen-icon { color: var(--brand-link); font-size: 0; }
.kitchen-icon::before { content: ''; width: 23px; height: 23px; background: currentColor; -webkit-mask: url('/assets/icons/branding/kitchen.svg') center/contain no-repeat; mask: url('/assets/icons/branding/kitchen.svg') center/contain no-repeat; }

.admin-drawer { border: 1px solid var(--brand-line); border-radius: 12px; box-shadow: var(--brand-shadow); }
.admin-drawer a, .admin-drawer button { color: var(--brand-ink); border-radius: 6px; }
.admin-drawer a:hover { background: var(--brand-soft); }

.mestto-footer { display: none !important; }
body { --footer-h: 0px; }
.footer-logo { background: var(--brand-deep); border-radius: 6px; }
.footer-center, .footer-right { color: var(--brand-muted); }
.role-switch-btn { color: var(--brand-link); border-color: var(--brand-line); box-shadow: var(--brand-shadow); bottom: calc(14px + env(safe-area-inset-bottom)); width: 48px; height: 48px; opacity: 1; }
.role-switch-btn .role-switch-icon { display: none; }
.role-switch-btn::before { content: ''; display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: url('/assets/icons/branding/switch.svg') center/contain no-repeat; mask: url('/assets/icons/branding/switch.svg') center/contain no-repeat; }
.role-switch-item { color: var(--brand-ink); background: #fff; border-color: var(--brand-line); border-radius: 6px; }
.role-switch-item:hover { background: var(--brand-soft); border-color: var(--brand-cyan); }
.role-switch-cancel { color: var(--brand-muted); border-color: var(--brand-line); border-radius: 6px; }
.kn-btn-primary { background: var(--brand-cyan); color: var(--brand-deep); }

.kitchen-view-body > header { background: var(--brand-deep); }
.kitchen-view-body .order-card { border: 1px solid var(--brand-line); border-radius: 12px; box-shadow: var(--brand-shadow); }
.kitchen-view-body .order-time { color: var(--brand-muted); }
.kitchen-view-body .order-btn { border-radius: 6px; }

@media (max-width: 600px) {
  .mestto-header { border-radius: 8px; }
  .card, .info-card, .summary-card, .table-card, .kcard, .panel { border-radius: 10px; }
}