:root {
  --bg: #f7f4ee;
  --surface: #ffffff;
  --surface-2: #faf8f3;
  --surface-cyan: #fff8df;
  --surface-orange: #fff5cc;
  --line: #e3ded4;
  --line-strong: #2a2f35;
  --text: #202124;
  --muted: #676b71;
  --brand-primary: #fdb301;
  --brand-primary-hover: #e6a100;
  --brand-primary-active: #c88a00;
  --brand-primary-soft: #fff5cc;
  --brand-primary-highlight: #ffd65a;
  --brand: var(--brand-primary);
  --brand-deep: #885b00;
  --brand-2: var(--brand-primary);
  --brand-2-deep: #765000;
  --ink: #111317;
  --good: #14744f;
  --warn: #925800;
  --bad: #c33a32;
  --blue: #315f82;
  --radius: 14px;
  --shadow: 0 20px 55px rgba(23, 20, 15, .12);
  --shadow-soft: 0 9px 26px rgba(23, 20, 15, .07);
  --orange-hot: var(--brand-primary-active);
  --orange-light: var(--brand-primary-highlight);
  --carbon: #0d0f12;
  --graphite: #20242a;
}

html { background: var(--carbon); }
body {
  background: var(--bg);
  color: var(--text);
}
body.login-active { background: var(--carbon); }

.boot-screen {
  background: radial-gradient(circle at 50% 22%, rgba(253, 179, 1, .14), transparent 30rem), linear-gradient(145deg, #25292e, #0d0f12);
  color: rgba(255, 255, 255, .7);
}
.boot-platform-logo { width: min(260px, 72vw); filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .38)); }
.boot-screen p { color: var(--orange-light); }

/* Identidad BEER24: negro industrial, dorado de marca y superficies claras. */
.login-layout {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(410px, .82fr);
}
.login-visual {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(34px, 4vw, 62px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(ellipse at 73% 22%, rgba(253, 179, 1, .22), transparent 25%),
    radial-gradient(ellipse at 92% 88%, rgba(200, 138, 0, .12), transparent 29%),
    radial-gradient(circle at 14% 2%, rgba(255, 255, 255, .055), transparent 22%),
    linear-gradient(145deg, #292d32 0, #15181c 48%, #090b0e 100%);
  color: #fff;
}
.login-brand {
  position: relative;
  z-index: 2;
  width: fit-content;
  height: auto;
  min-height: 0;
  padding: 0;
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.login-brand-logo {
  width: clamp(126px, 13vw, 194px);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .3));
}
.login-brand > span {
  width: fit-content;
  margin: 4px 0 0 25px;
  display: block;
  color: rgba(255, 255, 255, .76);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .2em;
}
.login-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 740px;
  margin: 12vh 0 8vh;
}
.ready-kicker {
  display: inline-flex;
  padding: 8px 24px 8px 11px;
  background: linear-gradient(110deg, var(--orange-hot), var(--brand) 58%, var(--orange-light));
  color: var(--carbon);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
  box-shadow: 0 8px 26px rgba(253, 179, 1, .24);
  font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2em;
}
.login-hero-copy h1 {
  max-width: 700px;
  margin: 24px 0 20px;
  color: #fff;
  font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
  font-size: clamp(54px, 6vw, 92px);
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.login-hero-copy h1 em {
  color: var(--brand);
  font-style: normal;
  text-shadow: 0 0 24px rgba(253, 179, 1, .14);
}
.login-hero-copy p {
  max-width: 610px;
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: 16px;
  line-height: 1.65;
}
.login-visual-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, .6);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.login-visual-foot strong { color: #fff; }
.pack-halftone {
  position: absolute;
  z-index: 1;
  right: 2.5%;
  bottom: 4%;
  width: 180px;
  height: 180px;
  opacity: .64;
  background-image: radial-gradient(circle, var(--brand) 0 4px, transparent 4.5px);
  background-size: 20px 20px;
  mask-image: linear-gradient(135deg, transparent 4%, #000 94%);
  transform: rotate(-6deg);
  pointer-events: none;
}
.login-form-side {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 48px clamp(38px, 6vw, 96px);
  display: grid;
  align-content: center;
  background: #faf8f3;
  box-shadow: inset 16px 0 40px rgba(253, 179, 1, .04);
}
.login-form-side::after {
  content: "";
  position: absolute;
  right: -150px;
  bottom: -170px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 179, 1, .11), transparent 68%);
  pointer-events: none;
}
.login-form-side .login-card {
  position: relative;
  z-index: 2;
  align-self: auto;
  width: min(100%, 430px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.login-form-side .login-card::before { display: none; }
.login-card-heading { margin-bottom: 28px; }
.login-card-heading .eyebrow { margin-bottom: 10px; color: var(--brand-deep); }
.login-card-heading h2 {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
  font-size: clamp(38px, 4vw, 52px);
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.login-card-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.login-form-side .field { margin-bottom: 18px; }
.login-form-side .field > span:first-child { color: var(--ink); font-size: 12px; font-weight: 850; }
.login-form-side .field input {
  min-height: 52px;
  border-color: #d8d4cb;
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  box-shadow: none;
}
.login-form-side .field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(253, 179, 1, .14), 0 8px 24px rgba(253, 179, 1, .08);
}
.login-form-side .password-toggle {
  border-left-color: #e3ded4;
  background: transparent;
  color: var(--brand-deep);
}
.login-form-side .password-toggle:hover { background: var(--brand-primary-soft); color: var(--brand-deep); }
.btn.login-submit {
  min-height: 58px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(115deg, var(--orange-hot), var(--brand) 54%, var(--orange-light));
  box-shadow: 0 12px 28px rgba(253, 179, 1, .30), inset 0 1px rgba(255, 255, 255, .5), inset 0 -1px rgba(91, 61, 0, .18);
  color: var(--carbon);
  font-size: 12px;
  letter-spacing: .06em;
  text-shadow: none;
}
.btn.login-submit::before {
  z-index: 0;
  inset: -30% auto -30% -55%;
  width: 36%;
  transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .56), transparent);
}
.btn.login-submit:hover {
  background: linear-gradient(115deg, var(--brand-primary-active), var(--brand-primary-hover) 54%, var(--brand-primary-highlight));
  box-shadow: 0 16px 34px rgba(253, 179, 1, .36), 0 0 22px rgba(253, 179, 1, .14), inset 0 1px rgba(255, 255, 255, .56);
}
.btn.login-submit:hover::before { transform: translateX(500%) skewX(-18deg); }
.btn.login-submit > * { position: relative; z-index: 1; }
.login-arrow { font-size: 20px; }
.login-secure {
  margin: 19px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}
.login-secure i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e6f3ed;
  color: var(--good);
  font-size: 10px;
  font-style: normal;
}
.login-form-side .login-meta {
  margin-top: 22px;
  border-top-color: #e3ded4;
  color: var(--muted);
}
.login-form-side .login-help {
  position: relative;
  z-index: 2;
  width: min(100%, 470px);
  margin: 24px auto 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}
.login-form-side .login-help strong { color: var(--ink); }

/* Marco oscuro con superficies operativas claras. */
.app-shell { grid-template-columns: 260px minmax(0, 1fr); background: var(--carbon); }
.sidebar {
  border-right: 1px solid rgba(253, 179, 1, .14);
  background:
    radial-gradient(circle at 15% 8%, rgba(253, 179, 1, .07), transparent 24%),
    linear-gradient(180deg, #1a1d22, #0b0d10);
  box-shadow: 16px 0 38px rgba(0, 0, 0, .16);
  color: rgba(255, 255, 255, .72);
}
.sidebar .brand-lockup {
  min-height: 126px;
  padding: 0 8px 18px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.sidebar .brand-mark {
  width: 128px;
  height: 94px;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sidebar .brand-mark img {
  width: 128px;
  height: 94px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .28));
}
.sidebar .brand-copy { display: none; }
.production-badge {
  border-color: rgba(253, 179, 1, .24);
  background: rgba(253, 179, 1, .08);
  color: var(--orange-light);
}
.production-badge i { background: #4ac68b; box-shadow: 0 0 0 4px rgba(74, 198, 139, .1); }
.main-nav { scrollbar-color: rgba(253, 179, 1, .28) transparent; }
.sidebar .nav-button { color: rgba(255, 255, 255, .62); }
.sidebar .nav-button:hover { border-color: rgba(253, 179, 1, .16); background: rgba(253, 179, 1, .075); color: #fff; }
.sidebar .nav-button.active {
  border-color: rgba(253, 179, 1, .18);
  background: linear-gradient(90deg, rgba(253, 179, 1, .28), rgba(253, 179, 1, .055));
  box-shadow: inset 4px 0 var(--brand), 0 8px 20px rgba(0, 0, 0, .14);
  color: #fff;
}
.sidebar .nav-icon, .sidebar .nav-button.active .nav-icon { color: var(--brand); }
.sidebar .avatar {
  border-color: rgba(253, 179, 1, .58);
  background: rgba(253, 179, 1, .12);
  color: var(--orange-light);
}
.sidebar .user-chip b { color: #fff; }
.sidebar .user-chip small { color: rgba(255, 255, 255, .5); }
.sidebar .btn.ghost {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .76);
}
.sidebar .btn.ghost:hover { border-color: rgba(253, 179, 1, .5); background: rgba(253, 179, 1, .1); color: #fff; }
.workspace { min-height: 100vh; background: var(--bg); }
.topbar {
  border-bottom: 1px solid rgba(253, 179, 1, .17);
  background:
    radial-gradient(circle at 78% 0, rgba(253, 179, 1, .09), transparent 26%),
    linear-gradient(105deg, #272c32, #171a1f);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
  color: #fff;
  backdrop-filter: blur(18px);
}
.page-title small { color: rgba(255, 255, 255, .55); }
.page-title h1 { color: #fff; font-family: "Arial Narrow", "Roboto Condensed", sans-serif; text-transform: uppercase; }
.site-control span, .site-chip small { color: rgba(255, 255, 255, .5); }
.site-control select, .site-chip {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .055);
  color: #fff;
}
.site-control select option { color: var(--text); background: #fff; }
.site-chip strong { color: #fff; }
.connection { color: rgba(255, 255, 255, .62); }
.topbar .btn.secondary, .topbar .btn.ghost {
  border-color: rgba(253, 179, 1, .28);
  background: rgba(255, 255, 255, .06);
  color: var(--orange-light);
}
.topbar .btn.secondary:hover, .topbar .btn.ghost:hover { background: rgba(253, 179, 1, .14); }
.topbar-user { border-left-color: rgba(255, 255, 255, .12); }
.topbar-user .avatar {
  border-color: rgba(253, 179, 1, .58);
  background: rgba(253, 179, 1, .12);
  color: var(--orange-light);
}
.topbar-user .user-chip b { color: #fff; }
.topbar-user .user-chip small { color: rgba(255, 255, 255, .5); }
.workspace-content {
  min-height: calc(100vh - 78px);
  background: linear-gradient(180deg, #faf8f3, var(--bg));
}

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 9px;
  background: linear-gradient(115deg, var(--orange-hot), var(--brand) 54%, var(--orange-light));
  box-shadow: 0 9px 22px rgba(253, 179, 1, .23), inset 0 1px rgba(255, 255, 255, .38);
  color: var(--carbon);
}
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35% auto -35% -55%;
  width: 32%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
  transition: left .46s ease;
  pointer-events: none;
}
.btn:hover::after { left: 125%; }
.btn:hover { background: linear-gradient(115deg, var(--brand-primary-active), var(--brand-primary-hover) 54%, var(--brand-primary-highlight)); box-shadow: 0 12px 28px rgba(253, 179, 1, .30), 0 0 16px rgba(253, 179, 1, .09); }
.btn.secondary {
  border-color: #2d333a;
  background: linear-gradient(145deg, #272c32, #111317);
  box-shadow: 0 7px 18px rgba(17, 19, 23, .15);
  color: #fff;
}
.btn.secondary:hover { background: #20242a; box-shadow: 0 10px 22px rgba(17, 19, 23, .2); }
.btn.ghost {
  border-color: #d8d2c8;
  background: #fff;
  box-shadow: none;
  color: var(--ink);
}
.btn.ghost:hover { border-color: rgba(253, 179, 1, .62); background: var(--brand-primary-soft); }
.btn.danger { border-color: #efb6b2; background: #fff2f1; color: var(--bad); }
.btn.good { border-color: #a8dfc5; background: #edfbf4; color: var(--good); }
.btn:focus-visible, .sidebar .nav-button:focus-visible, .mobile-tabbar button:focus-visible, .close-modal:focus-visible {
  outline-color: rgba(253, 179, 1, .45);
}
.field input, .field select, .field textarea, .toolbar input, .toolbar select, .ai-usage-filters input {
  border-color: #d8d2c8;
  background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus, .toolbar input:focus, .toolbar select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(253, 179, 1, .13);
}
.eyebrow { color: var(--brand-deep); }
.metric-card, .panel { border-color: var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-soft); }
.metric-card::before { height: 4px; background: linear-gradient(90deg, var(--orange-hot), var(--brand), var(--orange-light)); }
.metric-card:nth-child(2n)::before { background: var(--good); }
.metric-card:nth-child(3n)::before { background: #315f82; }
.panel-head { border-color: var(--line); }
.badge.blue { border-color: #e5c45f; background: #fff8df; color: var(--brand-deep); }
.data-table th { background: #faf8f3; }
.data-table td { border-bottom-color: #eeeae3; }
.data-table tbody tr:hover { background: #fffdf2; }
.operation-card { border-color: #e5dfd6; background: #fff; box-shadow: 0 5px 17px rgba(25, 21, 16, .045); }
.operation-card:hover { border-color: rgba(253, 179, 1, .45); }
.item-line { border-color: #eee6dc; background: #fff8ef; }
.empty { border-color: #d9c9b5; background: #faf8f3; }
.timeline-row::before { background: #e6c65f; }
.timeline-node { border-color: #fff0ad; background: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.map-frame, .track-map { border-color: var(--line); background: #f3efe8; }
.account-facts div, .detail-items article, .detail-facts div, .option-groups article { border-color: var(--line); background: #faf8f3; }
.option-groups article > div:last-child span { border-color: #e5c45f; background: #fff8df; color: var(--brand-deep); }

/* Estabilización UX: navegación, alertas accionables y listados de operación. */
.nav-group { display: grid; gap: 4px; }
.nav-group + .nav-group { margin-top: 14px; }
.nav-group > h2 {
  margin: 0 10px 3px;
  color: rgba(255, 255, 255, .38);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.sidebar .nav-button { min-height: 44px; }
.workspace-content { font-size: 12px; }
.workspace-content .btn, .workspace-content button:not(.order-view-toggle button) { min-height: 44px; }
.workspace-content .btn.small { min-height: 40px; }
.module-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.module-toolbar .alert { flex: 1; margin: 0; }
.alert.compact { padding-block: 11px; }
.role-dashboard-head {
  min-height: 0;
  height: auto;
  margin: 2px 0 18px;
  padding: 0;
  display: block;
  border: 0;
  background: transparent;
}
.role-dashboard-head h2 { margin: 5px 0 6px; color: var(--ink); font-size: clamp(24px, 3vw, 38px); letter-spacing: -.04em; }
.role-dashboard-head p { max-width: 720px; margin: 0; color: var(--muted); font-size: 13px; }
.attention-list, .card-list { display: grid; gap: 10px; }
.attention-link, .summary-link {
  width: 100%;
  min-height: 72px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #e4ded5;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  text-align: left;
}
.attention-link:hover, .summary-link:hover { border-color: rgba(253, 179, 1, .55); background: #fffdf2; }
.attention-link:focus-visible, .summary-link:focus-visible, .quick-filters button:focus-visible { outline: 3px solid rgba(253, 179, 1, .32); outline-offset: 2px; }
.attention-priority { min-width: 48px; padding: 6px 8px; border-radius: 999px; background: #fff5cc; color: var(--brand-deep); font-size: 10px; font-weight: 900; text-align: center; text-transform: uppercase; }
.priority-alta .attention-priority { background: #fff0ef; color: var(--bad); }
.attention-copy { min-width: 0; display: grid; gap: 4px; }
.attention-copy strong { color: var(--ink); font-size: 13px; line-height: 1.35; }
.attention-copy small { color: var(--muted); font-size: 11px; }
.attention-copy em { color: var(--brand-deep); font-size: 11px; font-style: normal; font-weight: 750; }
.summary-link { grid-template-columns: minmax(0, 1fr) auto; }
.summary-link > span { min-width: 0; display: grid; gap: 4px; }
.summary-link strong { color: var(--ink); font-size: 13px; }
.summary-link small { color: var(--muted); font-size: 11px; }
.summary-link > span:last-child { justify-items: end; }
.list-filters {
  margin: 0 0 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 10px;
  border: 1px solid #e4ded5;
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.list-filters label { min-width: 0; display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.list-filters input, .list-filters select { width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid #d8d2c8; border-radius: 9px; background: #fff; color: var(--ink); font-size: 12px; }
.list-filters input:focus, .list-filters select:focus { border-color: var(--brand); outline: 0; box-shadow: 0 0 0 3px rgba(253, 179, 1, .13); }
.list-filters .toggle-filter { grid-template-columns: auto 1fr; align-items: center; align-self: center; }
.toggle-filter input { width: 20px; min-height: 20px; accent-color: var(--brand); }
.compact-filters { box-shadow: none; }
.quick-filters { display: flex; gap: 7px; overflow-x: auto; margin: 0 0 16px; padding: 1px 1px 5px; scrollbar-width: thin; }
.quick-filters button { min-height: 40px; padding: 8px 13px; flex: 0 0 auto; border: 1px solid #d8d2c8; border-radius: 999px; background: #fff; color: var(--muted); font-size: 11px; font-weight: 850; }
.quick-filters button.active { border-color: var(--brand); background: #fff5cc; color: var(--brand-deep); box-shadow: inset 0 0 0 1px rgba(253, 179, 1, .16); }
.pagination { margin-top: 16px; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.pagination > div { display: flex; gap: 7px; }
.responsive-table { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.responsive-table .data-table { min-width: 720px; }
.data-table th, .data-table td { font-size: 12px; }
.data-table td small { margin-top: 4px; }
.status-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.badge.test-data { border-color: #b7a5d5; background: #f5f0ff; color: #62428e; }
.card-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-title-line h3 { margin: 0; }
.realtime-notice { position: sticky; top: 88px; z-index: 12; margin-bottom: 14px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #e1bd4d; border-radius: 12px; background: #fff8df; box-shadow: 0 10px 30px rgba(30, 20, 8, .12); color: var(--ink); }
.reservations-cards { display: none; }
.compact-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.settings-stack { display: grid; gap: 2px; }
.integration-grid { align-items: start; }
.map-caption { margin: 12px 0 0; }
.kanban-board { align-items: start; }
.kanban-column { min-height: 0; align-self: start; }
.kanban-scroll-hint { margin: -4px 0 10px; color: var(--brand-deep); font-size: 11px; font-weight: 800; text-align: right; }

/* Detalle de pedido completo, con información autorizada por el servidor. */
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.detail-grid .timeline-panel { grid-column: 1 / -1; }
.detail-data { margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.detail-data div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #faf8f3; }
.detail-data dt { margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.detail-data dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 12px; font-weight: 750; }
.delivery-summary { margin-top: 13px; padding: 12px; display: grid; gap: 7px; border-left: 4px solid var(--brand); border-radius: 8px; background: #fff8df; }
.delivery-summary span { color: var(--muted); }
.order-notes { margin-top: 14px; padding: 13px; border-radius: 11px; background: #faf8f3; }
.order-notes span { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.order-notes p { margin: 6px 0 0; line-height: 1.5; }
.totals-list { margin-top: 14px; display: grid; gap: 7px; }
.totals-list > div { display: flex; justify-content: space-between; gap: 12px; }
.totals-list .grand-total { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.detail-payments { display: grid; gap: 9px; }
.detail-payment { padding: 12px; display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 11px; background: #faf8f3; }
.detail-payment > div { display: grid; justify-items: start; gap: 6px; }
.detail-payment > div:last-child { justify-items: end; }
.detail-payment small { color: var(--muted); }
.stage-durations { display: grid; gap: 7px; }
.stage-duration { padding: 10px 11px; display: flex; justify-content: space-between; gap: 12px; border-radius: 9px; background: #faf8f3; }
.stage-duration span { color: var(--muted); }
.detail-actions { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .login-visual { min-height: 350px; padding: 28px 34px; }
  .login-hero-copy { margin: 42px 0 18px; }
  .login-hero-copy h1 { font-size: clamp(44px, 9vw, 66px); }
  .login-form-side { min-height: 560px; padding-block: 42px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid .timeline-panel, .detail-actions { grid-column: auto; }
}

@media (max-width: 620px) {
  .login-visual { min-height: 250px; padding: 18px 22px; }
  .login-brand-logo { width: 88px; }
  .login-brand > span { margin-left: 8px; font-size: 6px; }
  .login-hero-copy { margin: 26px 0 4px; }
  .ready-kicker { padding-block: 6px; font-size: 9px; }
  .login-hero-copy h1 { margin: 11px 0 0; font-size: clamp(33px, 10vw, 46px); line-height: .92; }
  .login-hero-copy p, .login-visual-foot { display: none; }
  .login-form-side { min-height: 0; padding: 28px 20px 34px; }
  .login-card-heading { margin-bottom: 20px; }
  .login-card-heading h2 { font-size: 31px; }
  .list-filters { grid-template-columns: 1fr; padding: 11px; }
  .list-filters .btn { width: 100%; }
  .pagination { align-items: stretch; flex-direction: column; }
  .pagination > div { display: grid; grid-template-columns: 1fr 1fr; }
  .module-toolbar { align-items: stretch; flex-direction: column; }
  .reservations-table { display: none; }
  .reservations-cards { display: grid; gap: 9px; }
  .reservation-card .operation-card-head { display: flex; }
  .realtime-notice { top: 72px; align-items: stretch; flex-direction: column; }
  .detail-data { grid-template-columns: 1fr; }
  .detail-payment { display: grid; }
  .detail-payment > div:last-child { justify-items: start; }
  .attention-link { grid-template-columns: auto minmax(0, 1fr); }
  .attention-link > span:last-child { display: none; }
}

@media (max-width: 390px) {
  .login-visual { min-height: 218px; padding: 14px 18px; }
  .login-brand-logo { width: 76px; }
  .login-hero-copy { margin: 18px 0 0; }
  .login-hero-copy h1 { font-size: 31px; }
  .login-form-side { min-height: 0; padding: 22px 16px 28px; }
  .login-card-heading h2 { font-size: 28px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kanban-board { grid-auto-columns: minmax(258px, 88vw); scroll-snap-type: inline mandatory; }
}

/* Lista / Kanban de pedidos. */
.orders-view-toolbar { align-items: center; justify-content: space-between; gap: 10px; }
.orders-primary-actions { min-width: 0; display: flex; flex: 1 1 680px; align-items: center; gap: 10px; flex-wrap: wrap; }
.orders-filter-cluster { min-width: 0; display: flex; flex: 1 1 500px; align-items: center; gap: 8px; }
.order-filter-toggle { flex: 0 0 auto; gap: 7px; }
.order-filter-toggle > span:first-child { font-size: 17px; line-height: 1; }
.order-scope-filters { min-width: 0; flex: 1 1 auto; margin: 0; padding: 0; }
.order-scope-filters button { min-height: 44px; }
.orders-filters[hidden] { display: none; }
.order-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #d8d2c8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(24, 20, 14, .04);
}
.order-view-toggle button {
  min-height: 36px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.order-view-toggle button:hover { color: var(--brand-deep); background: #fff8df; }
.order-view-toggle button.active {
  background: linear-gradient(115deg, var(--orange-hot), var(--brand), var(--orange-light));
  box-shadow: 0 6px 15px rgba(253, 179, 1, .22), inset 0 1px rgba(255, 255, 255, .45);
  color: var(--carbon);
}
.order-view-toggle button:focus-visible { outline: 3px solid rgba(253, 179, 1, .25); outline-offset: 2px; }
.orders-workspace { overflow: hidden; }
.kanban-board {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 320px);
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-color: var(--brand) #eee9e1;
  align-items: start;
}
.kanban-column {
  min-height: 0;
  align-self: start;
  padding: 10px;
  border: 1px solid #e4ded5;
  border-radius: 12px;
  background: #f8f5ef;
  scroll-snap-align: start;
}
.kanban-column > header {
  height: auto;
  min-height: 42px;
  padding: 0 4px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e4ded5;
  background: transparent;
  color: inherit;
}
.kanban-column > header div { display: flex; align-items: center; gap: 7px; }
.kanban-column > header h3 { margin: 0; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.kanban-column > header strong { min-width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: #fff; color: var(--brand-deep); font-size: 10px; }
.kanban-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(253, 179, 1, .1); }
.kanban-column[data-kanban-column="preparation"] .kanban-dot { background: #315f82; box-shadow: 0 0 0 4px rgba(49, 95, 130, .1); }
.kanban-column[data-kanban-column="route"] .kanban-dot { background: var(--good); box-shadow: 0 0 0 4px rgba(20, 116, 79, .1); }
.kanban-column[data-kanban-column="closed"] .kanban-dot { background: #71757b; box-shadow: 0 0 0 4px rgba(113, 117, 123, .1); }

/* Reservas y KDS interactivos. La hoja heredada styles.css ya no se carga en producción. */
.kitchen-toolbar { align-items: stretch; }
.kitchen-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.kitchen-status-tabs { display: none; }
.kitchen-filters { grid-template-columns: minmax(300px, 2fr) minmax(150px, .6fr) auto auto; }
.kitchen-filters fieldset, .kitchen-assignment fieldset, .deposit-fields {
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.kitchen-filters legend, .kitchen-assignment legend, .deposit-fields legend { padding: 0 5px; color: var(--muted); font-size: 10px; font-weight: 850; }
.station-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.station-choice { position: relative; display: inline-flex; }
.station-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.station-choice span { min-height: 42px; padding: 9px 12px; display: inline-flex; align-items: center; border: 1px solid #d8d2c8; border-radius: 999px; background: #fff; color: var(--muted); font-size: 11px; font-weight: 850; }
.station-choice input:checked + span { border-color: var(--brand); background: #fff5cc; color: var(--brand-deep); box-shadow: inset 0 0 0 1px rgba(253,179,1,.16); }
.station-choice input:focus-visible + span { outline: 3px solid rgba(253,179,1,.3); outline-offset: 2px; }
.kitchen-board { display: grid; grid-template-columns: repeat(4, minmax(270px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 2px 14px; scroll-snap-type: inline proximity; }
.kitchen-lane { min-width: 270px; padding: 9px; border: 1px solid #e3ded4; border-radius: 14px; background: #f1eee8; scroll-snap-align: start; }
.kitchen-lane > header { min-height: 44px; height: auto; padding: 4px 5px 10px; display: flex; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid #ded8ce; background: transparent; color: var(--ink); }
.kitchen-lane > header h2 { margin: 0; color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.kitchen-lane > header span { min-width: 28px; min-height: 28px; padding: 5px; display: grid; place-items: center; border-radius: 8px; background: var(--carbon); color: #fff; font-size: 10px; font-weight: 900; }
.kitchen-lane.is-empty { min-height: 86px; }
.kitchen-lane-empty { margin: 10px 4px 2px; color: var(--muted); font-size: 11px; text-align: center; }
.kitchen-lane-stack { display: grid; gap: 9px; padding-top: 9px; }
.kitchen-ticket { min-width: 0; margin: 0; padding: 14px; border-width: 1px 1px 1px 5px; border-left-color: #315f82; box-shadow: 0 7px 20px rgba(23,20,15,.07); }
.kitchen-ticket.priority-high { border-left-color: var(--warn); background: #fffaf0; }
.kitchen-ticket.priority-late { border-left-color: var(--bad); background: #fff7f6; }
.kitchen-ticket-head { display: flex; align-items: start; justify-content: space-between; gap: 9px; }
.kitchen-ticket-head h2 { margin: 3px 0; color: var(--ink); font-size: 18px; letter-spacing: -.025em; }
.kitchen-ticket-head p { margin: 0; color: var(--muted); font-size: 10px; }
.kitchen-timer { margin: 12px 0 9px; padding: 10px; display: grid; gap: 3px; border-radius: 10px; background: #f4f1eb; }
.kitchen-timer strong { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.kitchen-timer small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.kitchen-progress { position: relative; height: 25px; overflow: hidden; margin-bottom: 10px; border-radius: 8px; background: #e7e2da; }
.kitchen-progress span { position: absolute; inset: 0 auto 0 0; background: #9ed8bc; transition: width .2s ease; }
.kitchen-progress b { position: relative; z-index: 1; height: 100%; display: grid; place-items: center; color: var(--ink); font-size: 9px; }
.kitchen-products { display: grid; gap: 7px; }
.kitchen-product { min-width: 0; padding: 10px; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; border: 1px solid #e7dfd4; border-radius: 10px; background: #fff; }
.kitchen-product.is-ready { border-color: #a8dfc5; background: #f1fbf6; }
.kitchen-quantity { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--carbon); color: var(--orange-light); font-size: 19px; font-weight: 950; }
.kitchen-product-copy { min-width: 0; display: grid; gap: 4px; }
.kitchen-product-copy strong { color: var(--ink); font-size: 13px; line-height: 1.3; }
.kitchen-variants { color: #315f82; font-size: 10px; line-height: 1.45; }
.kitchen-note, .kitchen-order-note { padding: 8px 9px; border-left: 4px solid var(--brand); border-radius: 7px; background: #fff5cc; color: #5d4200; font-size: 10px; line-height: 1.45; }
.kitchen-note b, .kitchen-order-note b { display: block; margin-bottom: 2px; color: var(--brand-deep); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.kitchen-order-note { margin-bottom: 10px; }
.kitchen-order-note p { margin: 3px 0 0; color: inherit; font-size: 11px; }
.kitchen-product-state { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.kitchen-item-ready { min-height: 40px !important; }
.kitchen-actions { position: sticky; bottom: 0; z-index: 2; margin: 12px -4px -4px; padding: 8px 4px 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 18%); }
.kitchen-actions .btn { min-width: 0; min-height: 44px; padding-inline: 8px; font-size: 10px; }
.kitchen-actions .btn:only-child { grid-column: 1 / -1; }
.kitchen-assignment { display: grid; gap: 10px; }
body.kitchen-focus-mode .sidebar, body.kitchen-focus-mode .topbar, body.kitchen-focus-mode .mobile-tabbar { display: none !important; }
body.kitchen-focus-mode .app-shell { display: block; }
body.kitchen-focus-mode .workspace-content { min-height: 100vh; padding: 16px; }
body.kitchen-focus-mode .kitchen-toolbar { position: sticky; top: 0; z-index: 20; padding: 8px; border-radius: 12px; background: rgba(247,244,238,.95); backdrop-filter: blur(14px); }

.reservation-filter-toggle { display: none; }
.calendar-toolbar { align-items: center; }
.calendar-view-toggle { max-width: 100%; overflow-x: auto; }
.calendar-view-toggle button { min-height: 44px; white-space: nowrap; }
.reservation-kpis { grid-template-columns: repeat(4, minmax(135px, 1fr)); }
.reservation-overview { margin-bottom: 14px; }
.reservation-overview > summary { width: fit-content; min-height: 44px; padding: 10px 13px; display: flex; align-items: center; border: 1px solid #d8d2c8; border-radius: 9px; background: #fff; color: var(--ink); cursor: pointer; font-size: 11px; font-weight: 850; }
.reservation-overview[open] > summary { margin-bottom: 12px; }
.reservation-overview .grid-2 { margin-bottom: 0; }
.reservation-workspace { overflow: hidden; }
.month-calendar { min-width: 0; }
.month-weekdays, .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-weekdays span { padding: 8px 4px; color: var(--muted); font-size: 10px; font-weight: 900; text-align: center; text-transform: uppercase; }
.month-grid { gap: 5px; }
.month-day { min-width: 0; min-height: 126px; padding: 9px; display: grid; align-content: start; gap: 6px; border: 1px solid #dfd9cf; border-radius: 10px; background: #fff; color: var(--text); text-align: left; }
.month-day:hover { border-color: var(--brand); background: #fff9f1; }
.month-day:focus-visible, .floor-table:focus-visible, .week-day-head:focus-visible, .week-mobile-tabs button:focus-visible { outline: 3px solid rgba(253,179,1,.38); outline-offset: 2px; }
.month-day.outside { opacity: .52; background: #f3f0eb; }
.month-day.today { box-shadow: inset 0 0 0 2px #315f82; }
.month-day.selected { box-shadow: inset 0 0 0 3px var(--brand); }
.month-day-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f2eee8; color: var(--ink); font-weight: 900; }
.month-day.today .month-day-number { background: #315f82; color: #fff; }
.month-day strong { color: var(--ink); font-size: 16px; }
.month-day strong small, .month-day > span:not(.month-day-number), .month-day em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 650; }
.month-day em { color: var(--bad); }
.month-day i { height: 5px; overflow: hidden; border-radius: 999px; background: #e7e2da; }
.month-day i b { display: block; height: 100%; max-width: 100%; background: var(--brand); }
.reservation-day-summary { margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.reservation-day-summary > span { color: var(--muted); }
.reservation-day-summary .btn { margin-left: auto; }
.modal-reservation-day { padding: 0; place-items: stretch end; }
.modal-reservation-day .modal-card { width: min(520px, 100%); height: 100dvh; max-height: none; border-radius: 22px 0 0 22px; }
.modal-reservation-day .modal-head { position: sticky; top: 0; z-index: 3; }

.reservation-agenda { min-width: 0; display: grid; grid-template-columns: 68px minmax(0, 1fr); }
.agenda-hours, .agenda-track { position: relative; height: calc(var(--agenda-hours) * 72px); min-height: 480px; }
.agenda-hours span { position: absolute; top: calc(var(--hour-index) * 72px - 7px); right: 9px; color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.agenda-track { border-left: 1px solid #d8d2c8; background: linear-gradient(180deg, #fff, #fdfbf7); }
.agenda-line { position: absolute; left: 0; right: 0; top: calc(var(--hour-index) * 72px); height: 1px; background: #e9e4dc; }
.agenda-now { position: absolute; z-index: 6; left: -7px; right: 0; height: 2px; background: var(--bad); }
.agenda-now::before { content: ""; width: 11px; height: 11px; position: absolute; left: 0; top: -5px; border-radius: 50%; background: var(--bad); }
.agenda-now span { position: absolute; right: 5px; top: -16px; color: var(--bad); font-size: 8px; font-weight: 900; }
.agenda-reservation { position: absolute; z-index: 2; top: var(--agenda-top); left: calc(var(--agenda-lane) * (100% / var(--agenda-lanes))); width: calc((100% / var(--agenda-lanes)) - 5px); min-height: 48px; height: max(var(--agenda-height), 48px); overflow: auto; padding: 7px; border: 1px solid #e9bd8d; border-left: 4px solid var(--brand); border-radius: 9px; background: #fff3e5; box-shadow: 0 4px 12px rgba(40,28,15,.08); }
.agenda-reservation.status-confirmed, .agenda-reservation.status-completed { border-left-color: var(--good); background: #f0faf5; }
.agenda-reservation.status-arrived { border-left-color: #315f82; background: #eef6fb; }
.agenda-reservation.status-seated { border-left-color: #6d50a8; background: #f5f0ff; }
.agenda-reservation.status-cancelled, .agenda-reservation.status-no_show { border-left-color: var(--bad); background: #fff2f1; }
.agenda-reservation > button { width: 100%; min-height: 38px; padding: 0; display: grid; gap: 2px; border: 0; background: transparent; color: var(--ink); text-align: left; }
.agenda-reservation strong, .agenda-reservation span, .agenda-reservation small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-reservation span, .agenda-reservation small { color: var(--muted); font-size: 8px; }
.agenda-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.agenda-actions .btn { min-height: 34px !important; padding: 5px 7px; font-size: 8px; }
.agenda-empty { margin: 24px; color: var(--muted); text-align: center; }
.week-agenda { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.week-agenda-day { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.week-day-head { width: 100%; min-height: 54px; padding: 8px; display: grid; justify-items: center; border: 0; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; background: #f7f4ee; color: var(--ink); text-transform: capitalize; }
.week-day-head span { color: var(--brand-deep); font-size: 17px; font-weight: 900; }
.week-agenda .reservation-agenda { grid-template-columns: 0 minmax(0, 1fr); }
.week-agenda .agenda-hours { overflow: hidden; }
.week-agenda .agenda-track { border-left: 0; }
.week-agenda .agenda-reservation { left: 3px; width: calc(100% - 6px); padding: 4px; }
.week-agenda .agenda-reservation strong { font-size: 8px; }
.week-mobile-tabs, .week-mobile-agenda { display: none; }

.floor-query { margin: 0 0 14px; padding: 12px; display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)) auto; align-items: end; gap: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.floor-query label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 850; }
.floor-query input, .floor-query select { width: 100%; min-height: 44px; border: 1px solid #d8d2c8; border-radius: 9px; background: #fff; color: var(--ink); }
.floor-plan-head { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.floor-plan-head strong, .floor-plan-head span { display: block; }
.floor-plan-head span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.floor-legend { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.floor-legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
.floor-legend i { width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 3px; background: #fff; }
.floor-legend-available { color: var(--good) !important; }.floor-legend-reserved,.floor-legend-held { color: var(--warn) !important; }.floor-legend-upcoming,.floor-legend-arrived { color: #315f82 !important; }.floor-legend-occupied { color: #6d50a8 !important; }.floor-legend-blocked,.floor-legend-incompatible { color: #6d7075 !important; }.floor-legend-conflict { color: var(--bad) !important; }
.floor-plan-canvas { position: relative; isolation: isolate; width: 100%; min-height: 610px; aspect-ratio: var(--plan-ratio); overflow: hidden; border: 1px solid #d7cec1; border-radius: 18px; background: radial-gradient(ellipse at 18% 12%, rgba(253,179,1,.08), transparent 28%), linear-gradient(145deg, #fbf8f1, #eee8dd); box-shadow: inset 0 0 50px rgba(48,37,23,.05); }
.floor-table { position: absolute; z-index: 2; left: var(--table-x); top: var(--table-y); width: var(--table-w); height: var(--table-h); min-width: 58px; min-height: 58px; padding: 0; overflow: visible; border: 0; background: transparent; color: var(--ink); transform: rotate(var(--table-rotation)); touch-action: manipulation; }
.floor-table-surface { position: absolute; z-index: 2; inset: 12%; padding: 3px; display: grid; place-content: center; border: 3px solid currentColor; border-radius: 10px; background: #fff; box-shadow: 0 7px 16px rgba(30,24,16,.15); text-align: center; }
.floor-table.shape-round .floor-table-surface { border-radius: 50%; }
.floor-table.shape-rectangle .floor-table-surface { border-radius: 8px; }
.floor-table-surface strong, .floor-table-surface small, .floor-table-surface em { display: block; line-height: 1.15; }
.floor-table-surface strong { font-size: 12px; }
.floor-table-surface small { color: inherit; font-size: 7px; }
.floor-table-surface em { margin-top: 2px; font-size: 6px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.floor-chair { position: absolute; z-index: 1; left: 50%; top: 50%; width: 13px; height: 8px; border: 2px solid currentColor; border-radius: 4px 4px 2px 2px; background: #fff; transform: translate(-50%,-50%) rotate(var(--chair-angle)) translateY(-39px); transform-origin: center; }
.floor-table.state-available { color: var(--good); }.floor-table.state-reserved,.floor-table.state-held { color: var(--warn); }.floor-table.state-upcoming,.floor-table.state-arrived { color: #315f82; }.floor-table.state-occupied { color: #6d50a8; }.floor-table.state-blocked,.floor-table.state-incompatible { color: #6d7075; }.floor-table.state-conflict { color: var(--bad); }
.floor-table.state-blocked .floor-table-surface, .floor-table.state-incompatible .floor-table-surface { background: #e8e6e2; }
.floor-table.state-conflict .floor-table-surface { background: #fff0ef; box-shadow: 0 0 0 4px rgba(195,58,50,.15); }
.floor-help { margin: 10px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.held-table { margin-bottom: 14px; padding: 13px; display: grid; gap: 4px; border: 1px solid #e1bd4d; border-radius: 11px; background: #fff8df; }
.held-table span, .held-table small { color: var(--muted); font-size: 10px; }.held-table strong { color: var(--ink); font-size: 17px; }
.deposit-fields { margin-bottom: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.deposit-fields label { display: grid; gap: 5px; }.deposit-fields small { grid-column: 1 / -1; color: var(--muted); }
.floor-suggestions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.floor-editor { display: grid; gap: 14px; }
.floor-editor-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; }
.floor-editor-toolbar > label:first-child { min-width: 220px; flex: 1; display: grid; gap: 5px; }
.floor-editor-toolbar input { min-height: 44px; border: 1px solid #d8d2c8; border-radius: 9px; }
.floor-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.editor-canvas { min-height: 600px; touch-action: none; }
.editor-table { cursor: grab; touch-action: none; }
.editor-table:active { cursor: grabbing; }
.editor-table.is-selected .floor-table-surface { box-shadow: 0 0 0 5px rgba(253,179,1,.28), 0 8px 18px rgba(30,24,16,.2); }
.floor-editor-inspector { position: sticky; top: 0; padding: 14px; display: grid; gap: 11px; border: 1px solid var(--line); border-radius: 13px; background: #faf8f3; }
.floor-editor-inspector h3 { margin: 0; font-size: 22px; }
.floor-editor-inspector label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 850; }
.floor-editor-inspector input, .floor-editor-inspector select { width: 100%; min-height: 42px; border: 1px solid #d8d2c8; border-radius: 8px; background: #fff; color: var(--ink); }
.floor-editor-inspector input[type="range"] { min-height: 28px; accent-color: var(--brand); }
.floor-editor-inspector output { color: var(--brand-deep); font-size: 10px; }

@media (max-width: 1100px) {
  .kitchen-board { grid-template-columns: repeat(4, 300px); }
  .floor-query { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .month-day { min-height: 112px; }
  .floor-plan-canvas { min-height: 520px; }
}

@media (max-width: 820px) {
  .week-agenda { display: none; }
  .week-mobile-tabs { margin-bottom: 10px; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; }
  .week-mobile-tabs button { min-width: 68px; min-height: 44px; border: 1px solid #d8d2c8; border-radius: 9px; background: #fff; color: var(--muted); text-transform: capitalize; }
  .week-mobile-tabs button.active { border-color: var(--brand); background: #fff5cc; color: var(--brand-deep); font-weight: 900; }
  .week-mobile-agenda { display: block; }
  .floor-editor-layout { grid-template-columns: 1fr; }
  .floor-editor-inspector { position: static; }
  .floor-plan-canvas, .editor-canvas { min-height: 480px; }
  .floor-table { min-width: 50px; min-height: 50px; }
  .floor-chair { width: 11px; height: 7px; transform: translate(-50%,-50%) rotate(var(--chair-angle)) translateY(-33px); }
}

@media (max-width: 620px) {
  .kitchen-toolbar-actions { justify-content: stretch; }
  .kitchen-toolbar-actions .btn { flex: 1 1 45%; }
  .kitchen-status-tabs { margin: 0 0 10px; display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px 6px; }
  .kitchen-status-tabs button { min-width: max-content; min-height: 44px; padding: 8px 11px; border: 1px solid #d8d2c8; border-radius: 999px; background: #fff; color: var(--muted); font-size: 10px; font-weight: 850; }
  .kitchen-status-tabs button span { min-width: 20px; margin-left: 4px; padding: 3px 5px; display: inline-block; border-radius: 999px; background: #eee9e1; }
  .kitchen-status-tabs button.active { border-color: var(--brand); background: #fff5cc; color: var(--brand-deep); }
  .kitchen-filters { display: none; }
  .kitchen-board { display: block; overflow: visible; padding: 0; }
  .kitchen-lane { display: none; width: 100%; min-width: 0; padding: 7px; }
  .kitchen-lane.is-mobile-active { display: block; }
  .kitchen-ticket { padding: 13px; }
  .kitchen-product { grid-template-columns: 42px minmax(0, 1fr); }
  .kitchen-product-state { justify-content: stretch; }
  .kitchen-product-state .btn { flex: 1; }
  .reservation-filter-toggle { margin-bottom: 10px; display: flex; gap: 7px; }
  .reservation-filter-toggle .btn { flex: 1; }
  .reservation-filters { display: none; }
  .reservation-filters.is-open { display: grid; }
  .reservation-kpis { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 7px; }
  .reservation-kpis .metric-card { min-width: 135px; }
  .reservation-overview { display: none; }
  .reservation-workspace { padding: 11px; }
  .reservation-workspace > .panel-head { margin-bottom: 10px; }
  .month-weekdays span { padding: 5px 1px; font-size: 7px; }
  .month-grid { gap: 2px; }
  .month-day { min-height: 68px !important; padding: 4px; gap: 2px; border-radius: 7px; }
  .month-day-number { width: 22px; height: 22px; font-size: 9px; }
  .month-day strong { font-size: 10px; }
  .month-day strong small { display: none; }
  .month-day > span:not(.month-day-number), .month-day em { display: none; }
  .month-day i { height: 3px; }
  .modal-reservation-day { align-items: end; }
  .modal-reservation-day .modal-card { width: 100%; height: min(88dvh, 760px); border-radius: 20px 20px 0 0; }
  .reservation-agenda { grid-template-columns: 51px minmax(0, 1fr); }
  .agenda-hours span { right: 5px; font-size: 8px; }
  .agenda-reservation { left: 3px; width: calc(100% - 6px); }
  .agenda-actions { display: none; }
  .floor-query { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 9px; }
  .floor-query .btn { grid-column: 1 / -1; }
  .floor-plan-head { align-items: stretch; flex-direction: column; }
  .floor-plan-canvas, .editor-canvas { min-height: 390px; border-radius: 12px; overflow: auto; }
  .floor-table { min-width: 44px; min-height: 44px; }
  .floor-table-surface { inset: 8%; border-width: 2px; }
  .floor-table-surface small, .floor-table-surface em { display: none; }
  .floor-chair { width: 9px; height: 6px; transform: translate(-50%,-50%) rotate(var(--chair-angle)) translateY(-27px); }
  .floor-editor-toolbar { align-items: stretch; flex-direction: column; }
  .floor-editor-toolbar > * { width: 100%; }
  .deposit-fields { grid-template-columns: 1fr; }
  .deposit-fields small { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .kitchen-progress span { transition: none; }
}
.kanban-stack { display: grid; gap: 9px; padding-top: 10px; }
.kanban-card { padding: 12px; border-radius: 10px; }
.kanban-card .operation-card-head { display: grid; gap: 8px; }
.kanban-card .operation-card-head .badge { width: fit-content; }
.kanban-card .item-list { margin: 9px 0; }
.kanban-card .item-line { display: grid; gap: 4px; padding: 7px 8px; }
.kanban-card .item-line > span:last-child { font-size: 10px; }
.kanban-card .row-actions { gap: 5px; }
.kanban-card .btn.small { flex: 1 1 auto; padding-inline: 8px; font-size: 9px; }
.kanban-empty { min-height: 100px; display: grid; place-items: center; color: #97938c; font-size: 11px; }

/* Modales y detalle enfocado. */
.modal-layer { background: rgba(7, 8, 10, .72); }
.modal-card { border-color: #d9d3c9; border-radius: 16px; box-shadow: 0 30px 90px rgba(7, 8, 10, .3); }
.close-modal { border-color: #d8d2c8; border-radius: 9px; }
.close-modal:hover { border-color: var(--brand); background: #fff8df; }
.modal-layer.focus-mode { background: var(--bg); }
.focus-mode .modal-card, .focus-mode .modal-card.wide { background: var(--bg); }
.focus-mode .modal-head {
  border-bottom-color: rgba(253, 179, 1, .18);
  background: linear-gradient(105deg, #272c32, #171a1f);
  color: #fff;
}
.focus-mode .modal-head h2 { color: #fff; }
.focus-mode .modal-head .eyebrow { color: var(--orange-light); }
.focus-mode .close-modal { border-color: rgba(253, 179, 1, .32); background: rgba(255, 255, 255, .06); color: #fff; }
.detail-hero {
  border-color: #edc59c;
  background: radial-gradient(circle at 90% 10%, rgba(253, 179, 1, .2), transparent 20rem), linear-gradient(135deg, #fff, #fff8df);
}
.detail-hero.product {
  border-color: #edc59c;
  background: radial-gradient(circle at 88% 12%, rgba(253, 179, 1, .2), transparent 20rem), linear-gradient(135deg, #fff, #fff8df);
}
.detail-hero::after { background: rgba(253, 179, 1, .14); }
.public-track { background: radial-gradient(circle at 82% 14%, rgba(253, 179, 1, .18), transparent 25rem), linear-gradient(145deg, #f8f4ed, #fff8df); }
.public-card .brand-mark {
  width: 78px;
  height: 68px;
  flex-basis: 78px;
  padding: 4px;
  border-radius: 10px;
  background: linear-gradient(145deg, #22262b, #0d0f12);
  box-shadow: 0 9px 22px rgba(13, 15, 18, .16);
}
.public-card .brand-mark img { object-fit: contain; }
.public-card .brand-copy strong { color: var(--ink); }
.public-card .brand-copy small { color: var(--muted); }

/* El asistente conserva superficie clara y adopta la identidad dorada. */
.ai-page { border-color: var(--line); background: #fff; box-shadow: var(--shadow-soft); }
.ai-history { border-color: var(--line); background: #f8f5ef; }
.ai-history-tabs button.active { background: #fff5cc; color: var(--brand-deep); }
.ai-thread.active { border-color: #efbd87; box-shadow: inset 3px 0 var(--brand); }
.ai-chat-head, .ai-composer { background: #fff; }
.ai-admin-panel { background: #faf8f3; }
.ai-admin-grid div, .ai-proposal-fields pre, .ai-usage-filters input, .ai-failures li { background: #fff8df; }
.ai-message.user { background: linear-gradient(145deg, var(--orange-hot), var(--brand)); color: var(--carbon); }
.ai-message.user .ai-message-role { color: rgba(13, 15, 18, .64); }
.ai-orb { color: var(--carbon); background: linear-gradient(145deg, var(--orange-hot), var(--orange-light)); box-shadow: 0 16px 38px rgba(253, 179, 1, .22); }
.ai-suggestions button:hover { border-color: var(--brand); background: #fff8df; }
.ai-sources span { border-color: #e5c45f; background: #fff8df; color: var(--brand-deep); }

/* Flujo enfocado en pedidos: captura multilínea, enrutamiento y despacho. */
.manual-order-form { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 18px; }
.manual-order-customer, .manual-order-builder { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.manual-order-builder { background: #fff; }
.manual-order-submit { grid-column: 1 / -1; min-height: 54px; }
.delivery-order-fields { margin: 4px 0 16px; padding: 14px; border: 1px solid rgba(253, 179, 1, .28); border-radius: 12px; background: var(--surface-orange); }
.delivery-order-fields[hidden] { display: none; }
.delivery-order-fields legend { padding: 0 6px; color: var(--brand-deep); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.manual-order-cart { min-height: 116px; margin-top: 14px; display: grid; gap: 8px; }
.manual-cart-line { padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.manual-cart-line > div { min-width: 0; display: grid; gap: 3px; }
.manual-cart-line > div:last-child { flex: 0 0 auto; justify-items: end; }
.manual-cart-line small { color: var(--muted); line-height: 1.4; }
.manual-cart-total { padding: 13px 2px 2px; display: flex; align-items: center; justify-content: space-between; border-top: 2px solid var(--ink); }
.manual-cart-total strong { color: var(--brand-deep); font-size: 20px; }
.product-station-form { margin-top: 13px; padding-top: 12px; display: flex; align-items: end; gap: 9px; border-top: 1px solid var(--line); }
.product-station-form label { min-width: 0; flex: 1; display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.product-station-form select { width: 100%; min-height: 40px; }
.dispatch-result { display: grid; gap: 14px; }
.dispatch-result code { padding: 5px 8px; border-radius: 7px; background: var(--ink); color: var(--orange-light); font-size: 18px; font-weight: 900; letter-spacing: .12em; }

@media (max-width: 1100px) {
  .login-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, .78fr); }
  .login-visual { padding: 38px; }
}

@media (max-width: 900px) {
  .login-layout { grid-template-columns: 1fr; }
  .login-visual { min-height: 350px; padding: 28px 34px; }
  .login-hero-copy { margin: 42px 0 18px; }
  .login-hero-copy h1 { font-size: clamp(44px, 9vw, 66px); }
  .login-form-side { min-height: 560px; padding-block: 42px; }
}

@media (max-width: 820px) {
  .sidebar { border-right-color: rgba(253, 179, 1, .15); }
  .mobile-backdrop.show { background: rgba(7, 8, 10, .65); }
  .workspace-content { min-height: calc(100vh - 68px); }
  .mobile-tabbar {
    border-color: rgba(253, 179, 1, .25);
    background: rgba(20, 22, 26, .96);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
  }
  .mobile-tabbar button { color: rgba(255, 255, 255, .58); }
  .mobile-tabbar button span { color: var(--brand); }
  .mobile-tabbar button.active { background: linear-gradient(145deg, rgba(253, 179, 1, .26), rgba(253, 179, 1, .08)); box-shadow: inset 0 3px var(--brand); color: #fff; }
  .mobile-tabbar button.active span { color: var(--orange-light); }
  .manual-order-form { grid-template-columns: 1fr; }
  .manual-order-submit { grid-column: auto; }
  body[data-user-role="courier"][data-page="map"] .ai-launcher-wrap,
  body[data-user-role="courier"][data-page="deliveries"] .ai-launcher-wrap { left: max(.75rem, env(safe-area-inset-left)); right: auto; }
}

@media (max-width: 620px) {
  .login-visual { min-height: 250px; padding: 18px 22px; }
  .login-brand-logo { width: 88px; }
  .login-brand > span { margin-left: 8px; font-size: 6px; }
  .login-hero-copy { margin: 26px 0 4px; }
  .login-hero-copy h1 { margin: 11px 0 0; font-size: clamp(33px, 10vw, 46px); line-height: .92; }
  .login-hero-copy p, .login-visual-foot { display: none; }
  .pack-halftone { width: 120px; height: 120px; background-size: 16px 16px; }
  .login-form-side { min-height: 0; padding: 28px 20px 34px; }
  .login-card-heading h2 { font-size: 31px; }
  .orders-view-toolbar { align-items: stretch; }
  .orders-primary-actions { width: 100%; flex-basis: 100%; }
  .orders-primary-actions > [data-action="new-order"] { width: 100%; }
  .orders-filter-cluster { width: 100%; flex-basis: 100%; }
  .order-filter-toggle { flex: 0 0 auto; }
  .order-scope-filters { overflow-x: auto; scrollbar-width: none; }
  .order-scope-filters::-webkit-scrollbar { display: none; }
  .order-view-toggle { width: 100%; }
  .order-view-toggle button { flex: 1; justify-content: center; }
  .orders-workspace { padding: 14px; }
  .kanban-board { grid-auto-columns: minmax(264px, 86vw); }
  .manual-order-customer, .manual-order-builder { padding: 14px; }
  .manual-cart-line { align-items: stretch; flex-direction: column; }
  .manual-cart-line > div:last-child { display: flex; align-items: center; justify-content: space-between; }
  .product-station-form { align-items: stretch; flex-direction: column; }
}

@media (max-width: 390px) {
  .login-visual { min-height: 218px; padding: 14px 18px; }
  .login-brand-logo { width: 76px; }
  .login-hero-copy { margin: 18px 0 0; }
  .ready-kicker { padding-block: 5px; font-size: 8px; }
  .login-hero-copy h1 { font-size: 31px; }
  .login-form-side { min-height: 0; padding: 22px 16px 28px; }
  .login-card-heading h2 { font-size: 28px; }
  .login-form-side .login-meta { display: flex; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kanban-board { grid-auto-columns: minmax(258px, 88vw); scroll-snap-type: inline mandatory; }
}

@media (prefers-reduced-motion: reduce) {
  .btn::after, .btn.login-submit::before { display: none; }
}