:root {
  --bg: #f4f2ec;
  --panel: #ffffff;
  --panel-2: #f7f5ef;
  --line: #e7e2d6;
  --text: #1d1b16;
  --muted: #847d70;
  --soft: #4a463d;
  --brand: #211f19;
  --brand-2: #45413a;
  --brand-3: #211f19;
  /* Acento estructural (no tematizable): estados activos, foco, detalles. */
  --accent: #0f6b5c;
  --accent-soft: #e4f0ec;
  --good: #0f766e;
  --warn: #b42318;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 14px 40px rgba(31, 27, 20, .09);
  --shadow-sm: 0 2px 10px rgba(31, 27, 20, .05);
  --font-display: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .brand strong, .metric strong, .receipt h2, .login-card h1 {
  font-family: var(--font-display);
  letter-spacing: -.01em;
}
.metric strong, .total-row strong, .grand strong, .rt-grand, td, .receipt {
  font-variant-numeric: tabular-nums;
}
/* Numeros protagonistas en monoespaciada: se leen alineados como una terminal. */
.metric strong,
.total-row strong, .grand strong, .rt-grand, .rt-row strong,
.clock-pill, .recent-row b, .pay-row strong, .bar > strong,
.cc-kpi strong, .cash-close .cc-row strong, .pie-item strong,
.money-field input, #totGrand, #totSubtotal, #totTax, #totDiscount {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

button, input, select, textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background: #ffffff;
}

.login-card {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.login-card img {
  width: 160px;
  height: 88px;
  object-fit: contain;
  justify-self: center;
}

.login-card h1 {
  margin: 4px 0 0;
  font-size: 32px;
  line-height: 1;
}

.login-error {
  min-height: 20px;
  margin: 0;
  color: var(--warn);
  font-size: 13px;
  font-weight: 800;
}

.app-shell {
  display: grid;
  grid-template-columns: 224px 1fr;
  min-height: 100vh;
  transition: grid-template-columns .18s ease;
}

body.sidebar-collapsed .app-shell {
  grid-template-columns: 84px 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px;
  background: #ffffff;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  z-index: 5;
  transition: width .18s ease, padding .18s ease;
}

.brand {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 9px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

body.sidebar-collapsed .sidebar {
  padding: 14px 12px;
  overflow-x: hidden;
}

body.sidebar-collapsed .brand {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0;
}

body.sidebar-collapsed .brand img {
  width: 54px;
  height: 44px;
}

body.sidebar-collapsed .brand div,
body.sidebar-collapsed .nav-button span,
body.sidebar-collapsed .nav-button i:last-child,
body.sidebar-collapsed .shift-card {
  display: none;
}

.brand img {
  width: 86px;
  height: 58px;
  object-fit: contain;
}

.brand strong {
  display: block;
  font-size: 18px;
  line-height: 1;
  color: var(--text);
}

.sidebar .brand span,
.sidebar .eyebrow,
.sidebar .small {
  color: var(--muted);
}

.brand span, .eyebrow, .small, label, .muted {
  color: var(--muted);
}

#nav {
  display: grid;
  gap: 7px;
  padding: 20px 0;
}

.nav-button {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  color: var(--soft);
  background: transparent;
  text-align: left;
}

body.sidebar-collapsed .nav-button {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 12px 0;
}

.nav-button:hover, .nav-button.active {
  color: var(--text);
  background: #f3f4f6;
}

.nav-button.active {
  box-shadow: inset 3px 0 0 var(--brand);
}

/* Secciones del menu lateral (Operaciones, Comercial, ...). */
.nav-group {
  display: grid;
  gap: 2px;
}
.nav-group + .nav-group {
  margin-top: 12px;
}
body.sidebar-collapsed .nav-group + .nav-group { margin-top: 8px; }

.shift-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  color: var(--text);
}

.main {
  min-width: 0;
  padding: 22px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.topbar h1 {
  margin: 3px 0 0;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1;
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 800;
}

.top-actions, .row, .toolbar, .dialog-actions, .split-actions, .action-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.menu-toggle {
  display: none; /* el toggle vive en el sidebar (junto al nombre); en movil reaparece */
  flex: 0 0 auto;
}

.top-actions {
  justify-content: flex-end;
  max-width: 760px;
}

.action-cluster {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.action-cluster .ghost,
.action-cluster .primary {
  min-height: 36px;
}

.session-pill,
.clock-pill,
.sync-pill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
}

.clock-pill {
  min-width: 196px;
  justify-content: center;
  color: var(--text);
}

.sync-pill {
  color: #166534;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.sync-pill.offline {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
}

.primary, .danger, .ghost, .icon-button, .chip{
  min-height: 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  color: var(--text);
}

.primary {
  background: var(--brand);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(17, 24, 39, .18);
}

.danger {
  background: #991b1b;
  color: #ffffff;
}

.ghost, .icon-button{
  background: #ffffff;
  border: 1px solid var(--line);
}

.icon-button {
  width: 40px;
  padding: 0;
}

.chip {
  min-height: 30px;
  padding: 0 10px;
  background: #f3f4f6;
  color: var(--soft);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
}

.grid {
  display: grid;
  gap: 14px;
}

.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.two-col {
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr);
}

.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel, .metric, .table-wrap, .form-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.panel, .form-panel {
  padding: 16px;
}

.metric {
  padding: 16px;
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  display: block;
  margin-top: 10px;
  font-size: 28px;
  line-height: 1;
}

.metric small {
  color: var(--soft);
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.section-title h2, .section-title h3 {
  margin: 0;
  font-size: 19px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.field-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.info-strip strong,
.info-strip span {
  display: block;
}

.info-strip span {
  color: var(--muted);
  font-size: 13px;
}

.field {
  display: grid;
  gap: 6px;
}

label {
  font-size: 12px;
  font-weight: 800;
}

input, select, textarea {
  width: 100%;
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  padding: 10px 11px;
  outline: none;
}

textarea {
  resize: vertical;
  min-height: 78px;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, .12);
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.inventory-table {
  min-width: 880px;
}

.inventory-table td:first-child {
  min-width: 200px;
}

th, td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

tr:hover td {
  background: #f9fafb;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  max-height: 570px;
  overflow: auto;
  padding-right: 4px;
}

.product-tile {
  min-height: 118px;
  padding: 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
  display: grid;
  align-content: space-between;
}

.product-tile strong {
  line-height: 1.15;
}

.product-tile span {
  color: var(--muted);
  font-size: 12px;
}

.brand-preview {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.brand-preview img {
  width: 96px;
  height: 70px;
  object-fit: contain;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
}

.logo-placeholder {
  width: 96px;
  min-height: 70px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.brand-preview strong,
.brand-preview span {
  display: block;
}

.brand-preview strong {
  font-size: 20px;
}

.brand-preview span {
  color: var(--muted);
  margin-top: 4px;
}

.cart {
  position: sticky;
  top: 20px;
}

.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qty button {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--line);
}

.totals {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.payment-box {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  background: #fff1f2;
  color: var(--warn);
  font-weight: 800;
  font-size: 13px;
}

.total-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.total-row.discount-row { align-items: center; }
.total-row.discount-row label { color: var(--muted); }
.total-row.discount-row input {
  width: 130px;
  text-align: right;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
}

.grand {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 22px;
  font-weight: 900;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.bar-chart {
  display: grid;
  gap: 10px;
}

.bar {
  display: grid;
  grid-template-columns: 130px 1fr 92px;
  align-items: center;
  gap: 10px;
}

.bar-track {
  height: 13px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand-3));
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 9px;
  border: 1px solid var(--line);
  color: var(--soft);
  font-size: 12px;
  font-weight: 800;
}

.low {
  color: var(--warn);
}

.receipt-dialog {
  width: min(620px, 96vw);
  max-height: 92vh;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  background: var(--panel);
  color: var(--text);
  overflow: auto;
}

.receipt-dialog::backdrop {
  background: rgba(0, 0, 0, .72);
}

.receipt {
  width: min(100%, 440px);
  margin: 0;
  padding: 28px;
  color: #111827;
  background: #ffffff;
  font-size: 15px;
  line-height: 1.32;
}

.receipt h2, .receipt p {
  margin: 0;
}

.receipt h2 {
  font-size: 24px;
  line-height: 1.15;
}

.receipt-header,
.receipt-note,
.receipt-meta{
  text-align: center;
}

.receipt-meta{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.receipt-separator {
  border-top: 1px dashed #9ca3af;
  margin: 12px 0;
}

.receipt-code-box {
  color: #000;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  text-align: center;
  word-break: break-word;
}

.receipt-label-box {
  color: #000;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
  margin-top: 8px;
  text-align: center;
  text-transform: uppercase;
  word-break: break-word;
}

/* Recibo mejorado: encabezado, badge fiscal y filas de totales limpias. */
.receipt-header h2 { letter-spacing: .5px; }
.receipt-slogan { font-style: italic; color: #6b7280; margin-bottom: 4px; }
.receipt-fiscal-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border: 1.5px solid #111827;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.receipt-void-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 2px solid #b91c1c;
  border-radius: 8px;
  color: #b91c1c;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
}
.receipt-void-banner span { font-weight: 600; letter-spacing: 0; font-size: 12px; }
.receipt-voided { opacity: .92; }
.receipt .rt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 3px 0;
  text-align: left;
}
.receipt .rt-row span { color: #6b7280; }
.receipt .rt-row b { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.receipt .rt-grand {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 2px solid #111827;
  font-size: 19px;
}
.receipt .rt-grand span { color: #111827; font-weight: 800; }
.receipt-note { margin: 2px 0; color: #6b7280; font-size: 13px; }

/* Check de facturacion fiscal (CAI) en el POS. */
.fiscal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.fiscal-check input { width: 16px; height: 16px; cursor: pointer; }

.order-draft {
  display: grid;
  gap: 8px;
}

.order-draft-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.order-draft-line span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.order-channel {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 32px;
  margin: 0 0 10px;
  padding: 0 12px;
  border-radius: 8px;
  background: #111827;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: .4px;
}

.order-card {
  position: relative;
}

.kitchen-order-card {
  background: var(--order-bg, #f7f8fa);
  border-color: rgba(17, 24, 39, .18);
}

.kitchen-order-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  border-radius: 8px 0 0 8px;
  background: var(--order-accent, #dbeafe);
}

.kitchen-order-card > * {
  position: relative;
}

.order-highlight-wrap {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 12px;
  border: 2px solid #111827;
  border-radius: 8px;
  background: #fff7ed;
}

.order-code-box,
.order-label-box {
  color: #000;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  word-break: break-word;
}

.order-code-box {
  font-size: clamp(34px, 7vw, 62px);
  line-height: .95;
}

.order-label-box {
  font-size: clamp(30px, 6vw, 54px);
  line-height: 1;
}

.receipt .receipt-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}

.receipt .receipt-line span {
  color: #4b5563;
}

.receipt .receipt-line strong {
  flex: 1 1 100%;
  max-width: 100%;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.receipt .receipt-line span + strong {
  flex-basis: 58%;
}

.report-chart {
  margin: 14px 0;
}

.pie-layout {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 18px;
  align-items: center;
}

.pie-chart {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.receipt-total {
  margin-top: 8px;
  padding-top: 9px !important;
  border-top: 1px solid #111827;
  font-size: 18px;
}

.receipt-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 auto;
}

.receipt-table th,
.receipt-table td {
  padding: 7px 4px;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
  font-size: 14px;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.receipt-table th {
  color: #4b5563;
  font-size: 12px;
}

.receipt-table th:first-child,
.receipt-table td:first-child {
  width: 13%;
  text-align: left;
}

.receipt-table th:nth-child(2),
.receipt-table td:nth-child(2) {
  width: 58%;
  text-align: left;
}

.receipt-table th:last-child,
.receipt-table td:last-child {
  width: 29%;
  text-align: right;
}

.dialog-actions {
  justify-content: flex-end;
  padding: 12px;
}

.empty {
  padding: 30px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.search-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  margin-bottom: 14px;
}

.mobile-only {
  display: none;
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  body.sidebar-collapsed .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    transform: translateX(-105%);
    transition: transform .2s ease;
    width: 286px;
  }

  body.sidebar-collapsed .sidebar {
    padding: 18px;
  }

  body.sidebar-collapsed .brand {
    grid-template-columns: 86px 1fr;
    justify-items: stretch;
    gap: 12px;
  }

  body.sidebar-collapsed .brand img {
    width: 86px;
    height: 58px;
  }

  body.sidebar-collapsed .brand div,
  body.sidebar-collapsed .nav-button span,
  body.sidebar-collapsed .nav-button i:last-child,
  body.sidebar-collapsed .shift-card {
    display: block;
  }

  body.sidebar-collapsed .nav-button {
    grid-template-columns: 22px 1fr auto;
    justify-items: stretch;
    padding: 11px 12px;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .menu-toggle {
    display: inline-flex;
  }

  .kpi-grid, .three-col, .two-col {
    grid-template-columns: 1fr;
  }

  .cart {
    position: static;
  }
}

@media (max-width: 680px) {
  .main {
    padding: 14px;
  }

  .topbar {
    align-items: flex-start;
  }

  .top-actions {
    display: grid;
    width: 100%;
    justify-content: stretch;
  }

  .topbar {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .top-actions {
    grid-column: 1 / -1;
  }

  .action-cluster {
    width: 100%;
  }

  .action-cluster button,
  .top-actions > button,
  .session-pill,
  .clock-pill {
    width: 100%;
  }

  .session-pill,
  .clock-pill {
    justify-content: center;
  }

  .field-grid, .field-grid.three, .search-row {
    grid-template-columns: 1fr;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-only {
    display: inline-flex;
  }
}

@media print {
  @page {
    size: 100mm 148mm;
    margin: 0;
  }

  html,
  body {
    width: 100mm;
    min-height: 148mm;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  body.printing-receipt * {
    visibility: hidden !important;
    box-shadow: none !important;
  }

  body.printing-receipt #receiptContent,
  body.printing-receipt #receiptContent * {
    visibility: visible !important;
  }

  body.printing-receipt .receipt-dialog {
    position: static !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body.printing-receipt #receiptContent {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  body.printing-receipt .receipt {
    width: 82mm !important;
    margin: 0 !important;
    padding: 4mm 7mm 4mm 3mm !important;
    color: #000000 !important;
    background: #ffffff !important;
    font-size: 10pt !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
  }

  body.printing-receipt .dialog-actions {
    display: none !important;
  }
}

/* ===========================================================================
   Animaciones e interacciones fluidas (capa aditiva). Respeta reduce-motion.
   =========================================================================== */
/* Animaciones leves: desplazamientos minimos y escalas muy cercanas a 1. */
@keyframes sf-fade-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes sf-pop-in { from { opacity: 0; transform: scale(.99); } to { opacity: 1; transform: none; } }
@keyframes sf-slide-in { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }
@keyframes sf-backdrop { from { opacity: 0; } to { opacity: 1; } }

/* Botones: hover con elevacion sutil y press tactil leve. */
.primary, .danger, .ghost, .icon-button, button, [data-view], [data-checkout], [data-add-cart] {
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease,
    border-color .18s ease, color .15s ease, opacity .15s ease;
}
.primary:hover, .danger:hover, .ghost:hover, .icon-button:hover{ transform: translateY(-1px); }
.primary:hover { box-shadow: 0 16px 30px rgba(17, 24, 39, .18); }
.ghost:hover, .icon-button:hover{ border-color: var(--brand); }
.primary:active, .danger:active, .ghost:active, .icon-button:active,
button:active { transform: translateY(0) scale(.985); }
button:disabled, .primary:disabled { transform: none; opacity: .55; cursor: not-allowed; }

/* Navegacion lateral: leve desplazamiento al pasar el cursor. */
.nav-button { transition: background-color .16s ease, color .16s ease, transform .14s ease, box-shadow .16s ease; }
.nav-button:hover { transform: translateX(2px); }
.nav-button.active { transform: none; }

/* Tarjetas y tiles: elevacion sutil al pasar el cursor. */
.product-tile { transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
.product-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 18px rgba(17, 24, 39, .09); border-color: var(--brand); }
.product-tile:active { transform: translateY(0) scale(.99); }
.metric, .order-card { transition: transform .16s ease, box-shadow .18s ease; }
.metric:hover, .order-card:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(17, 24, 39, .08); }

/* Inputs: anillo de foco suave. */
input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(17, 24, 39, .1); }
.fiscal-check { transition: border-color .15s ease, background-color .15s ease; }
.fiscal-check:hover { border-color: var(--brand); }

/* Filas de tabla: resaltado suave. */
tbody tr { transition: background-color .14s ease; }
tbody tr:hover { background: rgba(17, 24, 39, .03); }

/* Entrada del panel al navegar (se dispara desde render() con .view-enter). */
#app.view-enter > * { animation: sf-fade-up .24s cubic-bezier(.22, .61, .36, 1) both; }
#app.view-enter .kpi-grid > * { animation: sf-pop-in .26s ease both; }
#app.view-enter .kpi-grid > *:nth-child(2) { animation-delay: .04s; }
#app.view-enter .kpi-grid > *:nth-child(3) { animation-delay: .08s; }
#app.view-enter .kpi-grid > *:nth-child(4) { animation-delay: .12s; }

/* Ordenes (cocina/mesas): entrada suave. El carrito NO se anima por linea para
   que agregar productos rapido se sienta instantaneo, no agitado. */
.order-card { animation: sf-fade-up .22s ease both; }

/* Dialogo del recibo: aparece con leve escala + fundido del fondo. */
.receipt-dialog[open] { animation: sf-pop-in .2s cubic-bezier(.22, .61, .36, 1) both; }
.receipt-dialog[open]::backdrop { animation: sf-backdrop .2s ease both; }

/* Pantalla de acceso y app: fundido leve al entrar. */
.login-card { animation: sf-fade-up .26s ease both; }
.app-shell:not([hidden]) .main { animation: sf-fade-up .24s ease both; }

/* Pildora de sincronizacion: latido al guardar correctamente. */
.sync-pill:not(.offline) { transition: background-color .2s ease, color .2s ease; }

/* Accesibilidad: si el usuario pidio menos movimiento, se desactiva todo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ===========================================================================
   REDISEÑO 2026: identidad cálida-premium. Acordeon de modulos + componentes.
   Capa de refinamiento (sobrescribe por orden de fuente).
   =========================================================================== */
body { background:
  radial-gradient(1200px 480px at 12% -8%, rgba(15,107,92,.05), transparent 60%),
  radial-gradient(900px 420px at 105% 0%, rgba(33,31,25,.045), transparent 55%),
  var(--bg);
  background-attachment: fixed;
}

/* --- Barra lateral --- */
.sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, var(--bg)) , var(--panel));
  border-right: 1px solid var(--line);
  padding: 16px 14px;
}
.brand { padding-bottom: 14px; }
.brand strong { font-size: 17px; letter-spacing: -.02em; }
.brand img { border-radius: 10px; }

#nav { gap: 1px; padding: 12px 0 8px; }

/* Inicio (Panel) como item principal aparte (no es un modulo colapsable). */
.nav-home {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 3px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-weight: 700;
  text-align: left;
  transition: background-color .16s ease, color .16s ease;
}
.nav-home i {
  width: 30px; height: 30px; padding: 6px; border-radius: 9px; box-sizing: border-box;
  background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--soft);
}
.nav-home:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nav-home.active { background: var(--accent-soft); color: var(--accent); }
.nav-home.active i { background: var(--accent); color: #fff; }
body.sidebar-collapsed .nav-home { grid-template-columns: 1fr; justify-items: center; }
body.sidebar-collapsed .nav-home span { display: none; }

/* Modulo (categoria colapsable) */
.nav-module + .nav-module { margin-top: 0; }
.nav-module-head {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background-color .16s ease, color .16s ease;
}
.nav-module-head:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.nav-mod-icon {
  width: 30px; height: 30px; padding: 6px; border-radius: 9px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--soft); display: inline-flex; box-sizing: border-box;
}
.nav-module.has-active .nav-mod-icon { background: var(--accent); color: #fff; }
.nav-mod-name { font-weight: 700; font-size: 13.5px; letter-spacing: .2px; }
.nav-mod-caret { width: 16px; height: 16px; color: var(--muted); transition: transform .24s ease; }
.nav-module.open .nav-mod-caret { transform: rotate(180deg); }

/* Contenedor colapsable (animacion suave de alto) */
.nav-module-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.22,.61,.36,1); }
.nav-module.open .nav-module-items { grid-template-rows: 1fr; }
.nav-module-inner { overflow: hidden; display: grid; gap: 2px; padding: 3px 0 4px; }

/* Items dentro del modulo */
.nav-module .nav-button {
  grid-template-columns: 20px 1fr;
  gap: 11px;
  margin-left: 14px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13.5px;
  position: relative;
}
.nav-module .nav-button::before {
  content: ""; position: absolute; left: -2px; top: 50%; width: 3px; height: 0;
  background: var(--accent); border-radius: 3px; transform: translateY(-50%); transition: height .18s ease;
}
.nav-module .nav-button i { width: 18px; height: 18px; }
.nav-module .nav-button:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); transform: none; }
.nav-module .nav-button.active {
  background: var(--accent-soft); color: var(--accent); font-weight: 700; box-shadow: none;
}
.nav-module .nav-button.active::before { height: 18px; }

/* Sidebar colapsada: mostrar iconos, sin acordeon */
body.sidebar-collapsed .nav-module-items { grid-template-rows: 1fr; }
body.sidebar-collapsed .nav-mod-name,
body.sidebar-collapsed .nav-mod-caret { display: none; }
body.sidebar-collapsed .nav-module-head { grid-template-columns: 1fr; justify-items: center; }
body.sidebar-collapsed .nav-module .nav-button { margin-left: 0; grid-template-columns: 1fr; justify-items: center; }

/* --- Barra superior --- */
.topbar { padding: 16px 22px; gap: 14px; }
.topbar h1 { font-size: 30px; line-height: 1.05; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.clock-pill, .sync-pill, .session-pill {
  border-radius: 999px; font-weight: 700; font-size: 12.5px;
}

/* --- Tarjetas y paneles --- */
.panel, .form-panel, .table-wrap, .metric {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.panel:hover, .form-panel:hover { box-shadow: var(--shadow-sm); }
.section-title h2 { font-size: 18px; letter-spacing: -.01em; }

/* --- KPIs --- */
.metric { padding: 18px 18px 16px; position: relative; overflow: hidden; }
.metric::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px;
  border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 70%); opacity: .7;
}
.metric span { font-size: 12px; font-weight: 600; letter-spacing: .2px; }
.metric strong { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; }
.metric small { font-size: 12px; }

/* --- Botones --- */
.primary, .danger, .ghost, .icon-button, .chip {
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.primary { background: var(--brand); box-shadow: 0 10px 24px rgba(31,27,20,.18); }
.primary:hover { box-shadow: 0 14px 30px rgba(31,27,20,.24); }
.chip { border-radius: 999px; }

/* --- Campos --- */
input, select, textarea {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 10px 12px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) !important;
  background: var(--panel);
}
label { font-size: 12.5px; font-weight: 600; }

/* --- Tablas --- */
table { border-collapse: separate; border-spacing: 0; }
thead th {
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line);
}
tbody td { padding: 11px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.status { border-radius: 999px; font-weight: 700; font-size: 12px; padding: 3px 10px; }

/* --- Login --- */
.login-screen {
  background:
    radial-gradient(900px 500px at 20% 0%, var(--accent-soft), transparent 55%),
    radial-gradient(800px 480px at 100% 100%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 55%),
    var(--bg);
}
.login-card { border-radius: 20px; padding: 30px; box-shadow: var(--shadow); }
.login-card h1 { font-size: 30px; letter-spacing: -.02em; }

/* Pildora de modo soporte ya existente: solo redondeo coherente */
#supportBanner { font-family: var(--font-body); }

/* ===========================================================================
   INTERFAZ COMPACTA: escala global (todo mas pequeño). Se compensan las
   alturas en vh para que las columnas sigan llenando la pantalla.
   =========================================================================== */
:root { --ui-scale: .85; }
.app-shell, .login-screen { zoom: var(--ui-scale); }
.app-shell, .login-screen { min-height: calc(100vh / var(--ui-scale)); }
.sidebar { height: calc(100vh / var(--ui-scale)); }

/* ===========================================================================
   PANEL + REPORTES (rediseño): aprovechar espacio, claridad y animaciones.
   =========================================================================== */
/* Panel: dos columnas que se apilan para no desperdiciar alto. */
.dash-main { grid-template-columns: minmax(0, 1.5fr) minmax(290px, .92fr); align-items: start; margin-top: 14px; }
.dash-col { display: grid; gap: 14px; align-content: start; }
.dash-actions { margin-top: 14px; }
.dash-col .panel, .dash-actions .panel { transition: transform .18s ease, box-shadow .2s ease; }
.dash-col .panel:hover, .dash-actions .panel:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* Ventas recientes */
.recent-list { display: grid; }
.recent-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 9px 4px; border-radius: 10px; transition: background-color .14s ease; }
.recent-row:hover { background: var(--panel-2); }
.recent-row + .recent-row { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.recent-row.voided { opacity: .55; }
.recent-row.voided b, .recent-row.voided .recent-main strong { text-decoration: line-through; }
.recent-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.recent-ico[data-m="Tarjeta"] { background: #f3ece1; color: #b2752a; }
.recent-ico[data-m="Transferencia"] { background: #eee9f3; color: #6f56a0; }
.recent-ico i { width: 17px; height: 17px; }
.recent-main { display: grid; gap: 1px; min-width: 0; }
.recent-main strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-main span { font-size: 11.5px; color: var(--muted); }
.recent-row b { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 14.5px; }

/* Pagos del dia */
.pay-break { display: grid; gap: 13px; padding-top: 2px; }
.pay-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 11px; }
.pay-row > span { font-size: 13px; font-weight: 600; }
.pay-row .bar-track { height: 9px; }
.pay-row .bar-fill { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #6fcfb4)); }
.pay-row strong { font-variant-numeric: tabular-nums; font-size: 13.5px; }

/* Barras (panel y reportes) mas limpias */
.bar-chart { gap: 13px; }
.bar { grid-template-columns: 124px 1fr 96px; gap: 12px; }
.bar > span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 10px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.bar > strong { text-align: right; font-variant-numeric: tabular-nums; }

/* Cascada de entrada del Panel (mas agradable al entrar). */
#app.view-enter > .dash-main, #app.view-enter > .dash-actions { animation: none; }
#app.view-enter .dash-col > *,
#app.view-enter .dash-actions > * { animation: sf-fade-up .46s cubic-bezier(.22, .61, .36, 1) both; }
#app.view-enter .dash-col:nth-child(1) > *:nth-child(1) { animation-delay: .12s; }
#app.view-enter .dash-col:nth-child(1) > *:nth-child(2) { animation-delay: .20s; }
#app.view-enter .dash-col:nth-child(2) > *:nth-child(1) { animation-delay: .16s; }
#app.view-enter .dash-col:nth-child(2) > *:nth-child(2) { animation-delay: .24s; }
#app.view-enter .dash-col:nth-child(2) > *:nth-child(3) { animation-delay: .32s; }
#app.view-enter .dash-actions > *:nth-child(1) { animation-delay: .30s; }
#app.view-enter .dash-actions > *:nth-child(2) { animation-delay: .36s; }
#app.view-enter .dash-actions > *:nth-child(3) { animation-delay: .42s; }

/* Reportes: barra de filtros como tarjeta cohesiva. */
.report-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow-sm);
}
.report-toolbar > * { flex: 0 0 auto; width: auto; min-height: 38px; }
.report-toolbar select { min-width: 158px; }
.report-toolbar input[type="date"] { min-width: 148px; }
.report-toolbar .ghost { background: var(--panel-2); }

/* Graficas mas claras */
.report-chart { margin: 16px 0 6px; }
.pie-chart {
  border: none; box-shadow: var(--shadow-sm);
  -webkit-mask: radial-gradient(circle at center, transparent 40%, #000 41%);
  mask: radial-gradient(circle at center, transparent 40%, #000 41%);
}
.pie-layout .total-row { padding: 7px 2px; }

/* Apilar el panel en pantallas angostas. */
@media (max-width: 1080px) {
  .dash-main { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Botón de menú junto al nombre + paneles del tablero plegables + sidebar angosto
   =========================================================================== */
/* Sidebar mas angosto (menos espacio desperdiciado). */
.sidebar { padding: 14px 10px; }
.brand strong { font-size: 14.5px; }
.brand img { width: 40px; height: 34px; }

/* Boton de mostrar/ocultar menu, a la izquierda del nombre del negocio. */
.brand-toggle {
  width: 32px; height: 32px; min-height: 32px; padding: 0;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--soft);
}
.brand-toggle:hover { color: var(--text); border-color: var(--accent); }
.brand-toggle i { width: 17px; height: 17px; }

/* Sidebar colapsada: el boton y el logo quedan centrados y visibles. */
body.sidebar-collapsed .brand { grid-template-columns: 1fr; justify-items: center; gap: 8px; }

/* Acciones del encabezado de un panel (boton ojo + extras). */
.section-actions { display: inline-flex; align-items: center; gap: 8px; }
.dash-toggle { width: 34px; min-height: 34px; padding: 0; }

/* Paneles del tablero plegables (ocultos por defecto). */
.dash-panel > .section-title { margin: 0; }
.dash-panel .dash-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.22, .61, .36, 1); }
.dash-panel.open .dash-collapse { grid-template-rows: 1fr; }
.dash-collapse-inner { overflow: hidden; min-height: 0; }
.dash-panel.open .dash-collapse-inner { padding-top: 13px; }

/* Ocultar la hamburguesa del topbar en escritorio (gana a .icon-button por orden);
   en movil reaparece para abrir el cajon. */
.menu-toggle { display: none; }
@media (max-width: 1080px) { .menu-toggle { display: inline-flex; } }

/* ===========================================================================
   Modo embebido (panel flotante dentro del master) + modales del master.
   =========================================================================== */
body.embed .sidebar { display: none; }
body.embed .app-shell { grid-template-columns: 1fr; }
body.embed .topbar .top-actions, body.embed .menu-toggle { display: none; }
body.embed .main { padding: 14px 18px; }

/* Modales del Panel Maestro */
.m-modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 24px; background: rgba(31, 27, 20, .42); backdrop-filter: blur(3px);
  animation: sf-backdrop .18s ease both;
}
.m-modal-card {
  width: min(640px, 100%); max-height: 90vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow); padding: 22px;
  animation: sf-pop-in .22s cubic-bezier(.22, .61, .36, 1) both;
}
/* Panel del negocio (Permisos/Personalizar) a PANTALLA COMPLETA, no un cuadrito. */
.m-modal.m-modal-wide { padding: 0; }
.m-modal-wide .m-modal-card { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; border: 0; padding: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.m-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.m-modal-head h2 { margin: 2px 0 0; }
.m-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--soft); margin-bottom: 12px; }
.m-detail-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 14px; }
.m-detail-link span { font-size: 12.5px; word-break: break-all; flex: 1; min-width: 160px; }
.m-detail-link input { flex: 1; min-width: 180px; }
.m-detail-kpis { grid-template-columns: repeat(3, 1fr); margin-bottom: 6px; }
.m-section { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.m-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.m-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.m-panel-head strong { font-family: var(--font-display); font-size: 16px; }
.m-panel-frame { width: 100%; height: 100%; border: 0; background: var(--bg); }

/* Campo de dinero con prefijo de moneda (L). */
.money-field {
  display: inline-flex; align-items: stretch; max-width: 190px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); overflow: hidden;
}
.money-field span {
  display: flex; align-items: center; padding: 0 11px;
  font-weight: 800; color: var(--muted);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-right: 1px solid var(--line);
}
.money-field input {
  border: 0 !important; background: transparent !important;
  box-shadow: none !important; border-radius: 0 !important;
  width: 100%; min-width: 0;
}
.money-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

/* Inventario: cada producto es una fila clicable que despliega su editor debajo. */
.prod-row { cursor: pointer; transition: background .12s ease; }
.prod-row:hover { background: var(--surface-2, rgba(15,107,92,.05)); }
.prod-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.prod-row.open { background: var(--surface-2, rgba(15,107,92,.08)); }
.prod-row.open td { border-bottom-color: transparent; }
.prod-row .stock-low { color: var(--danger, #c0392b); font-weight: 700; }
.prod-edit-row > td { padding: 0; background: var(--surface-2, rgba(15,107,92,.04)); }
.prod-editor { padding: 16px 18px; display: grid; gap: 12px; animation: sf-fade-up .18s ease both; }
.prod-editor-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.prod-editor-actions .danger { margin-left: auto; }

/* Campo de codigo de barras con boton de escaneo por camara. */
.scan-field { display: flex; gap: 8px; align-items: stretch; }
.scan-field > input { flex: 1; min-width: 0; }
.scan-field .scan-btn { flex: 0 0 auto; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; }
.scan-field .scan-btn i { margin: 0; }

/* Modal de escaneo por camara (overlay a pantalla completa). */
.scan-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 18, 16, .82);
  display: flex; align-items: center; justify-content: center;
  animation: sf-backdrop .18s ease both;
}
.scan-box {
  position: relative; width: min(92vw, 460px);
  background: var(--surface, #fff); border-radius: var(--radius, 16px);
  padding: 16px; display: grid; gap: 12px; justify-items: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: sf-pop-in .2s ease both;
}
.scan-video {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px; background: #000;
}
.scan-frame {
  position: absolute; top: 16px; left: 16px; right: 16px;
  height: calc(100% * 3 / 4 * 0 + 0px); /* placeholder, marco dibujado abajo */
  pointer-events: none;
}
.scan-box .scan-frame {
  top: 50%; left: 50%; transform: translate(-50%, -56%);
  width: 70%; height: 32%;
  border: 3px solid var(--accent, #0f6b5c); border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.04);
}
.scan-hint { margin: 0; color: var(--muted, #667); font-size: 14px; text-align: center; }
.scan-cancel { width: 100%; justify-content: center; }

/* Formulario compacto de producto: grilla densa que acomoda los campos en
   tantas columnas como quepan, en vez de una fila por par de campos. */
.compact-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 10px 12px;
  align-items: end;
}
.compact-form .span-2 { grid-column: span 2; }
.compact-form .full { grid-column: 1 / -1; margin-top: 2px; }
.prod-editor.compact-form { padding: 16px 18px; }
@media (max-width: 560px) {
  .compact-form { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .compact-form .span-2 { grid-column: 1 / -1; }
}

/* Gestor de listas y catalogos (Configuracion). */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.catalog-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 11px);
  padding: 14px;
  background: var(--panel-2, #f7f5ef);
  display: grid;
  gap: 10px;
  align-content: start;
}
.catalog-block h3 { margin: 0; font-size: 14px; }
.catalog-items { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.catalog-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--panel, #fff); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
}
.catalog-chip.locked { opacity: .7; }
.catalog-chip button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; min-height: 0; padding: 0;
  border-radius: 999px; font-size: 14px; line-height: 1;
  background: transparent; color: var(--warn, #b42318); border: 0;
}
.catalog-chip button:hover { background: var(--warn, #b42318); color: #fff; }
.catalog-add { display: flex; gap: 6px; }
.catalog-add input { flex: 1; min-width: 0; min-height: 36px; }
.catalog-add button { flex: 0 0 auto; min-height: 36px; white-space: nowrap; }

/* Paneles de Configuracion plegables (clic en el titulo). */
.section-title.collapsible { cursor: pointer; user-select: none; }
.section-title .collapse-icon { margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.form-panel.collapsed .section-title { margin-bottom: 0; }
.form-panel.collapsed .collapse-icon { transform: rotate(-90deg); }
.form-panel.collapsed > *:not(.section-title) { display: none; }

/* Master: editar el codigo/URL de un negocio en el modal de detalles. */
.m-slug-edit { display: flex; gap: 8px; margin: 4px 0 2px; }
.m-slug-edit input { flex: 1; min-width: 0; min-height: 38px; }
.m-slug-edit button { flex: 0 0 auto; min-height: 38px; white-space: nowrap; }

/* Permisos: grilla de tarjetas de modulos con submodulos desplegables. */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.perm-card { border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2, #f7f5ef); padding: 12px 14px; transition: border-color .15s, background .15s; }
.perm-card.on { border-color: var(--accent, #0f6b5c); background: var(--panel, #fff); }
.perm-head { display: flex; align-items: center; gap: 8px; }
.perm-check { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; font-weight: 700; }
.perm-check input { width: 20px; height: 20px; flex: 0 0 auto; }
.perm-check strong { font-weight: 700; }
.perm-exp { flex: 0 0 auto; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 9px; background: var(--panel, #fff); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; }
.perm-exp i { transition: transform .2s ease; }
.perm-card.open .perm-exp i { transform: rotate(180deg); }
.perm-items { display: none; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.perm-card.open .perm-items { display: flex; }
.perm-item { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--soft, #4a463d); cursor: pointer; }
.perm-item input { width: 18px; height: 18px; flex: 0 0 auto; }

/* Ventana flotante de la app (crear usuario / rol / administrar roles). */
.app-modal { width: min(760px, 94vw); max-height: 90vh; border: 0; border-radius: 18px; padding: 0; background: var(--panel); box-shadow: var(--shadow); color: var(--text); overflow: hidden; }
.app-modal::backdrop { background: rgba(31, 27, 20, .45); backdrop-filter: blur(3px); }
.app-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.app-modal-head strong { font-family: var(--font-display); font-size: 18px; }
.app-modal-head .ghost { width: 38px; min-height: 38px; padding: 0; }
#appModalBody { padding: 18px; overflow: auto; max-height: calc(90vh - 62px); }
/* Acordeon por rol en "Administrar roles". */
.perm-role { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.perm-role-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; background: var(--panel-2); user-select: none; }
.perm-role-head strong { flex: 1; }
.perm-role-exp { transition: transform .2s ease; color: var(--muted); }
.perm-role.open .perm-role-exp { transform: rotate(180deg); }
.role-del { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 8px; background: transparent; border: 1px solid var(--line); color: var(--warn); display: inline-flex; align-items: center; justify-content: center; }
.perm-role-body { display: none; padding: 14px; }
.perm-role.open .perm-role-body { display: block; }

/* Listas y catalogos: titulo con icono de ayuda (?) y globo flotante. */
.catalog-block .catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.catalog-block .catalog-head h3 { margin: 0; }
.help-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--muted, #847d70); cursor: help; outline: none; }
.help-tip i { width: 17px; height: 17px; }
.help-tip:hover, .help-tip:focus-visible { color: var(--accent, #0f6b5c); }
.help-bubble {
  position: absolute; top: calc(100% + 7px); right: 0; width: 230px;
  background: var(--text, #1d1b16); color: #fff; font-size: 12px; font-weight: 500;
  line-height: 1.45; text-align: left; padding: 9px 11px; border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28); z-index: 30;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease;
}
.help-bubble::after { content: ""; position: absolute; bottom: 100%; right: 6px; border: 6px solid transparent; border-bottom-color: var(--text, #1d1b16); }
.help-tip:hover .help-bubble, .help-tip:focus .help-bubble, .help-tip:focus-within .help-bubble { opacity: 1; visibility: visible; transform: translateY(0); }

/* Modal de detalles del negocio mas grande (tiene muchas secciones). */
.m-modal-lg .m-modal-card { width: min(920px, 96vw); }

/* Branding por negocio: logo en login y en el recibo. */
#loginLogo { max-width: 160px; max-height: 90px; object-fit: contain; margin: 0 auto 4px; display: block; }
.receipt-logo { max-width: 150px; max-height: 70px; object-fit: contain; display: block; margin: 0 auto 6px; }

/* Cobros: filas expandibles con el ciclo de facturacion. */
.billing-row { cursor: pointer; }
.billing-row:hover { background: var(--panel-2, #f3efe6); }
.bill-caret { transition: transform .15s ease; width: 18px; height: 18px; color: var(--muted); }
.billing-detail > td { background: var(--panel-2, #f7f4ec); padding: 14px 16px; }
.billing-panel { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.billing-panel .bill-kpis { display: flex; gap: 24px; flex-wrap: wrap; }
.billing-panel .row { flex-wrap: wrap; gap: 8px; align-items: center; }
.pay-history { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.pay-history .pay-row { display: flex; gap: 10px; align-items: baseline; }

/* Bitacora del negocio (panel maestro). */
.events-box { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.event-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px dashed var(--line, #e7e2d6); }
.event-row i { width: 15px; height: 15px; color: var(--brand, #0f6b5c); flex: none; }
.event-row .event-when { color: var(--muted, #847d70); min-width: 96px; font-variant-numeric: tabular-nums; }

/* Cobranza pendiente (tablero del master): info a la izquierda, acciones a la derecha. */
.cob-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 4px; border-radius: 10px; transition: background-color .14s ease; }
.cob-row:hover { background: var(--panel-2); }
.cob-row + .cob-row { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.cob-info { min-width: 0; flex: 1 1 240px; }
.cob-info strong { font-size: 14px; display: block; }
.cob-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--muted); }
.cob-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* Reportes: pestañas por grupo (Ventas, Caja, Inventario, ...). */
.report-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--line, #e7e2d6); padding-bottom: 0; }
.report-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted, #847d70); font-weight: 600; font-size: 14px; padding: 9px 14px; cursor: pointer; border-radius: 8px 8px 0 0; transition: color .14s, background-color .14s, border-color .14s; }
.report-tab:hover { color: var(--text, #1d1b16); background: var(--panel-2, #f3efe6); }
.report-tab.active { color: var(--accent, #0f6b5c); border-bottom-color: var(--accent, #0f6b5c); }

/* Reportes: etiqueta del rango de fechas (Desde / Hasta). */
.report-range { display: inline-flex; flex-direction: column; gap: 2px; }
.report-range > span { font-size: 11px; font-weight: 600; color: var(--muted, #847d70); letter-spacing: .02em; }

/* Modulo Almacen: mapa de ubicaciones con drag & drop. */
.layout-wrap { display: flex; gap: 14px; align-items: flex-start; }
.layout-canvas { position: relative; flex: 1; min-height: 540px; background: var(--panel-2, #f3efe6); background-image: radial-gradient(circle, rgba(0,0,0,.06) 1px, transparent 1px); background-size: 24px 24px; border: 1px solid var(--line, #e7e2d6); border-radius: 14px; overflow: hidden; }
.layout-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted, #847d70); text-align: center; }
.layout-empty i { width: 40px; height: 40px; opacity: .6; }
.loc-box { position: absolute; background: color-mix(in srgb, var(--loc) 14%, #fff); border: 2px solid var(--loc); border-radius: 10px; padding: 8px 10px; cursor: grab; user-select: none; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: box-shadow .12s, transform .05s; touch-action: none; display: flex; flex-direction: column; justify-content: space-between; }
.loc-box.dragging { cursor: grabbing; box-shadow: 0 10px 26px rgba(0,0,0,.22); z-index: 5; }
.loc-box.selected { outline: 3px solid color-mix(in srgb, var(--loc) 45%, transparent); }
.loc-box.match { box-shadow: 0 0 0 3px #16a34a, 0 8px 22px rgba(22,163,74,.35); z-index: 6; }
.loc-box.dim { opacity: .35; }
.loc-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.loc-name { font-weight: 800; font-size: 13px; color: var(--loc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-edit { background: transparent; border: 0; color: var(--loc); cursor: pointer; padding: 2px; border-radius: 6px; }
.loc-edit i { width: 14px; height: 14px; }
.loc-meta { font-size: 11px; color: var(--muted, #847d70); }
.layout-editor { width: 320px; flex: none; background: var(--panel, #fff); border: 1px solid var(--line, #e7e2d6); border-radius: 14px; padding: 16px; }
.layout-editor .field { margin-bottom: 10px; }
.loc-prod-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.loc-prod-add { text-align: left; background: var(--panel-2, #f3efe6); border: 1px solid var(--line, #e7e2d6); border-radius: 8px; padding: 7px 9px; cursor: pointer; font-size: 13px; }
.loc-prod-add:hover { border-color: var(--accent, #0f6b5c); }
.loc-prod-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-height: 240px; overflow-y: auto; }
.loc-prod { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-bottom: 1px dashed var(--line, #e7e2d6); font-size: 13px; }
@media (max-width: 900px) { .layout-wrap { flex-direction: column; } .layout-editor { width: 100%; } }

/* Master: funciones personalizadas por negocio (interruptores). */
.features-box { display: flex; flex-direction: column; gap: 8px; }
.feature-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, #e7e2d6); border-radius: 10px; cursor: pointer; }
.feature-row input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

/* Detalle del negocio: Exportar e Importar van juntos (estan relacionados). */
.m-action-group { display: inline-flex; gap: 4px; padding: 3px; border: 1px dashed var(--line, #e7e2d6); border-radius: 11px; }

/* Almacen jerarquico: migas, resultados de busqueda y botones de cada ubicacion. */
.layout-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.layout-crumbs .crumb { background: var(--panel-2, #f3efe6); border: 1px solid var(--line, #e7e2d6); border-radius: 8px; padding: 5px 11px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text, #1d1b16); }
.layout-crumbs .crumb.active { background: var(--accent, #0f6b5c); color: #fff; border-color: var(--accent, #0f6b5c); }
.layout-crumbs .crumb-sep { color: var(--muted, #847d70); }
.layout-results { display: none; flex-direction: column; gap: 6px; margin: 4px 0 8px; max-height: 240px; overflow-y: auto; }
.layout-results.show { display: flex; }
.layout-result { display: flex; align-items: flex-start; gap: 9px; text-align: left; background: #eaf5f1; border: 1px solid color-mix(in srgb, var(--accent, #0f6b5c) 30%, transparent); border-radius: 10px; padding: 9px 11px; cursor: pointer; }
.layout-result:hover { background: color-mix(in srgb, var(--accent, #0f6b5c) 16%, #fff); }
.layout-result i { width: 16px; height: 16px; color: var(--accent, #0f6b5c); flex: none; margin-top: 2px; }
.loc-btns { display: inline-flex; gap: 2px; }
.loc-open { background: transparent; border: 0; color: var(--loc); cursor: pointer; padding: 2px; border-radius: 6px; }
.loc-open i { width: 14px; height: 14px; }

/* Muebles tipo estante: se ven como estantes (baldas) y muestran sus productos. */
.loc-shelf { background: #fff; border: 2px solid var(--loc); border-radius: 8px; }
.loc-shelf .loc-shelf-body { flex: 1; overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 6px; background:
  repeating-linear-gradient(to bottom, transparent 0, transparent 26px, color-mix(in srgb, var(--loc) 28%, transparent) 26px, color-mix(in srgb, var(--loc) 28%, transparent) 28px); }
.loc-chip { background: color-mix(in srgb, var(--loc) 16%, #fff); border: 1px solid color-mix(in srgb, var(--loc) 40%, transparent); color: var(--text, #1d1b16); border-radius: 6px; padding: 2px 7px; font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: fit-content; }
.loc-chip.more { background: var(--loc); color: #fff; font-weight: 700; }
.loc-shelf-empty { font-size: 11px; color: var(--muted, #847d70); padding: 4px; }
.loc-add { background: transparent; border: 0; color: var(--loc); cursor: pointer; padding: 2px; border-radius: 6px; }
.loc-add i { width: 15px; height: 15px; }
/* Contenedores (pasillos/zonas) con un look mas de "area". */
.loc-container { background: color-mix(in srgb, var(--loc) 10%, #fff); border-style: dashed; }

/* --- Cierre de caja: resumen del dia con impresion/PDF --- */
.cash-close { display: flex; flex-direction: column; gap: 14px; }
.cash-close .cc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cash-close .cc-kpi { background: var(--panel2, #f7f5ef); border: 1px solid var(--line, #e7e2d6); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.cash-close .cc-kpi span { font-size: 11px; color: var(--muted, #847d70); text-transform: uppercase; letter-spacing: .03em; }
.cash-close .cc-kpi strong { font-size: 18px; color: var(--text, #1d1b16); }
.cash-close .cc-kpi.cc-ok { border-color: #16653455; }
.cash-close .cc-kpi.cc-ok strong { color: #166534; }
.cash-close .cc-kpi.cc-low { border-color: #b91c1c55; }
.cash-close .cc-kpi.cc-low strong { color: #b91c1c; }
.cash-close .cc-kpi.cc-warn { border-color: #b4530955; }
.cash-close .cc-kpi.cc-warn strong { color: #b45309; }
.cash-close .cc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cash-close .cc-block { border: 1px solid var(--line, #e7e2d6); border-radius: 12px; padding: 10px 12px; }
.cash-close .cc-block h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--brand, #0f6b5c); }
.cash-close .cc-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--line, #eee); }
.cash-close .cc-row:last-child { border-bottom: 0; }
.cash-close .cc-row.muted span { color: var(--muted, #847d70); }
.cash-close .cc-row.cc-total { font-weight: 700; border-top: 2px solid var(--brand, #0f6b5c); border-bottom: 0; margin-top: 2px; padding-top: 8px; }
.cash-close .cc-arqueo { background: var(--panel2, #f7f5ef); border-radius: 12px; padding: 8px 14px; }
.cash-close .cc-arqueo .cc-row { border-bottom: 1px dashed var(--line, #e7e2d6); }
.cash-close .cc-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 640px) {
  .cash-close .cc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cash-close .cc-cols { grid-template-columns: 1fr; }
  .cash-close .cc-actions { justify-content: stretch; }
  .cash-close .cc-actions button { flex: 1; justify-content: center; }
}

/* --- Graficas de reportes: linea SVG, pastel con % y barras con % --- */
.bar-pct { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted, #847d70); font-style: normal; margin-top: 1px; }
.report-chart.line-chart { width: 100%; background: var(--panel2, #f7f5ef); border: 1px solid var(--line, #e7e2d6); border-radius: 14px; padding: 10px 12px; }
.report-chart.line-chart svg { width: 100%; height: auto; display: block; }
.report-chart.line-chart .lc-grid { stroke: color-mix(in srgb, var(--text, #1d1b16) 10%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.report-chart.line-chart .lc-ytick { fill: var(--muted, #847d70); font-size: 10px; text-anchor: end; font-variant-numeric: tabular-nums; }
.report-chart.line-chart .lc-xtick { fill: var(--muted, #847d70); font-size: 10px; text-anchor: middle; }
.report-chart.line-chart .lc-dot { fill: #fff; stroke: var(--brand, #0f6b5c); stroke-width: 2; }
.pie-layout .pie-wrap { display: flex; align-items: center; justify-content: center; }
.pie-layout .pie-chart { max-width: 210px; box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--panel, #fff) 80%, transparent); }
.pie-legend { display: flex; flex-direction: column; gap: 4px; }
.pie-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line, #eee); font-size: 13px; }
.pie-item:last-child { border-bottom: 0; }
.pie-item .pie-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.pie-item .pie-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-item .pie-pct { color: var(--muted, #847d70); font-variant-numeric: tabular-nums; font-size: 12px; }
.pie-item strong { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .pie-layout { grid-template-columns: 1fr; }
  .pie-layout .pie-wrap .pie-chart { max-width: 170px; margin: 0 auto; }
  .bar { grid-template-columns: 96px 1fr 84px; gap: 8px; }
}

/* ============================================================
   Panel Maestro: chips tintados + responsive (telefonos) + estetica
   (styles.css es compartido; estos ajustes mejoran ambas apps)
   ============================================================ */

/* Chips de estado con fondo tintado derivado de su propio color (currentColor).
   STATUS_CHIP fija el color inline; el fondo/borde se tintan solos. */
.status {
  background: color-mix(in srgb, currentColor 13%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 999px;
}

/* KPIs a 2 columnas en telefono (evita columna unica larguisima con 6 metricas) */
@media (max-width: 680px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-detail-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .metric strong { font-size: 20px; }
}

/* Tablas densas: scroll horizontal contenido (la pagina nunca desborda) con inercia */
.table-wrap { -webkit-overflow-scrolling: touch; }
@media (max-width: 680px) {
  .table-wrap table { min-width: 620px; }
  .table-wrap { border-radius: 12px; }
}

/* Modales del master: en telefono ocupan casi toda la pantalla, sin padding que ahogue */
@media (max-width: 680px) {
  .m-modal { padding: 10px; align-items: flex-start; }
  .m-modal-card { width: 100%; max-height: 92vh; padding: 16px; }
  .m-modal-lg .m-modal-card { width: 100%; }
  .m-modal-head h2 { font-size: 18px; }
  .toolbar { gap: 8px; }
  .toolbar > input, .toolbar > select { width: 100%; min-width: 0; }
}

/* Cuotas (billing): mini-tarjetas para los KPIs en vez de lista plana */
.billing-panel .bill-kpis { gap: 10px; }
.billing-panel .bill-kpis > * { background: var(--panel2, #f7f5ef); border: 1px solid var(--line, #e7e2d6); border-radius: 10px; padding: 8px 12px; }
@media (max-width: 640px) {
  .cob-row { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Panel Maestro · Cobros: bloque de cobro simplificado (un solo Guardar)
   ============================================================ */
.billing-panel { display: flex; flex-direction: column; gap: 16px; padding: 4px 2px; }
.bill-summary { display: flex; flex-wrap: wrap; gap: 10px; }
.bill-summary .bs-item { flex: 1; min-width: 120px; background: var(--panel2, #f7f5ef); border: 1px solid var(--line, #e7e2d6); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.bill-summary .bs-item span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #847d70); font-weight: 700; }
.bill-summary .bs-item b { font-size: 16px; }
.bill-summary .bs-item b.num { font-family: var(--font-num); }
.bill-pay { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bill-pay .primary { font-size: 15px; padding: 12px 20px; }
.bill-config { background: var(--card, #fff); border: 1px solid var(--line, #e7e2d6); border-radius: 14px; padding: 16px; }
.bill-config .bc-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.bc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bc-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted, #847d70); text-transform: none; letter-spacing: 0; }
.bc-grid input, .bc-grid select { font-family: inherit; }
.bc-grid .money-field { margin: 0; }
.bc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.bc-actions .bc-hint { flex: 1; min-width: 180px; }
.primary-soft { background: color-mix(in srgb, var(--brand, #0f6b5c) 12%, #fff); color: var(--brand, #0f6b5c); border: 1px solid color-mix(in srgb, var(--brand, #0f6b5c) 35%, transparent); border-radius: 10px; padding: 10px 18px; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .14s; }
.primary-soft:hover { background: color-mix(in srgb, var(--brand, #0f6b5c) 20%, #fff); }
.bill-history { border-top: 1px dashed var(--line, #e7e2d6); padding-top: 10px; }
@media (max-width: 720px) { .bc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .bc-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Panel Maestro · Navegacion siempre visible (secciones expandidas)
   ============================================================ */
.nav-section { margin-top: 14px; }
.nav-section-title { display: flex; align-items: center; gap: 8px; padding: 4px 10px 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #847d70); }
.nav-section-title i { width: 14px; height: 14px; opacity: .8; }
.nav-section .nav-button { width: 100%; }
body.sidebar-collapsed .nav-section-title span { display: none; }
body.sidebar-collapsed .nav-section-title { justify-content: center; padding: 4px 0 6px; }

/* --- Facturacion con CAI (config fiscal + estado) --- */
.fiscal-status { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; margin-bottom: 12px; }
.fiscal-status i { width: 17px; height: 17px; flex: none; }
.fiscal-status.fs-ok { background: color-mix(in srgb, #166534 12%, #fff); color: #166534; border: 1px solid color-mix(in srgb, #166534 28%, transparent); }
.fiscal-status.fs-warn { background: color-mix(in srgb, #b45309 12%, #fff); color: #b45309; border: 1px solid color-mix(in srgb, #b45309 28%, transparent); }
.fiscal-status.fs-bad { background: color-mix(in srgb, #b91c1c 12%, #fff); color: #b91c1c; border: 1px solid color-mix(in srgb, #b91c1c 28%, transparent); }
.fiscal-status.fs-off { background: var(--panel2, #f7f5ef); color: var(--muted, #847d70); border: 1px solid var(--line, #e7e2d6); }
.fiscal-toggle { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; padding: 4px 0 6px; cursor: pointer; }
.fiscal-toggle input { width: 17px; height: 17px; }
.fiscal-warn-inline { color: #b45309; font-size: 12px; font-weight: 600; display: block; margin-top: 2px; }
.fiscal-check-off { opacity: .8; cursor: not-allowed; }
.fiscal-check-off input { cursor: not-allowed; }
.receipt-fiscal-foot { font-size: 11px; text-align: center; color: var(--text, #1d1b16); }
.receipt-fiscal-foot p { margin: 2px 0; }
.receipt-fiscal-foot .receipt-letras { font-weight: 700; }
.receipt-fiscal-foot .receipt-legal { font-style: italic; margin-top: 6px; }

/* --- Onboarding / primeros pasos del negocio nuevo --- */
.onboard { background: linear-gradient(135deg, color-mix(in srgb, var(--brand, #0f6b5c) 8%, #fff), var(--card, #fff)); border: 1px solid color-mix(in srgb, var(--brand, #0f6b5c) 22%, var(--line, #e7e2d6)); border-radius: 18px; padding: 20px 22px; margin-bottom: 16px; }
.onboard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.onboard-head h2 { margin: 2px 0 4px; font-family: var(--font-display); }
.onboard-head .eyebrow { color: var(--brand, #0f6b5c); }
.onboard-steps { display: grid; gap: 8px; }
.onboard-step { display: flex; align-items: center; gap: 12px; background: var(--card, #fff); border: 1px solid var(--line, #e7e2d6); border-radius: 12px; padding: 10px 14px; }
.onboard-step .os-check { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--panel2, #f7f5ef); color: var(--muted, #847d70); border: 1px solid var(--line, #e7e2d6); }
.onboard-step .os-check i { width: 15px; height: 15px; }
.onboard-step.done .os-check { background: var(--brand, #0f6b5c); color: #fff; border-color: var(--brand, #0f6b5c); }
.onboard-step .os-label { flex: 1; font-weight: 600; }
.onboard-step.done .os-label { color: var(--muted, #847d70); text-decoration: line-through; }
.onboard-step .os-done { color: #166534; font-weight: 700; font-size: 13px; }
@media (max-width: 640px) { .onboard-head .primary { width: 100%; justify-content: center; } .onboard-step { flex-wrap: wrap; } }
.link-button { background: none; border: 0; color: var(--brand, #0f6b5c); font-weight: 600; font-size: 14px; cursor: pointer; padding: 4px; margin-top: 2px; text-decoration: underline; text-underline-offset: 2px; }
.link-button:hover { color: var(--brand-2, #0c5447); }

/* --- Animaciones de entrada de las gráficas de reportes --- */
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lc-draw { to { stroke-dashoffset: 0; } }
@keyframes lc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pie-in { from { transform: scale(.6) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dot-pop { from { transform: scale(0); } to { transform: scale(1); } }
.bar-chart .bar-fill { transform-origin: left center; animation: bar-grow .7s cubic-bezier(.2,.8,.2,1) both; }
.bar-chart .bar:nth-child(2) .bar-fill { animation-delay: .05s; }
.bar-chart .bar:nth-child(3) .bar-fill { animation-delay: .1s; }
.bar-chart .bar:nth-child(4) .bar-fill { animation-delay: .15s; }
.bar-chart .bar:nth-child(5) .bar-fill { animation-delay: .2s; }
.bar-chart .bar:nth-child(n+6) .bar-fill { animation-delay: .25s; }
.report-chart.line-chart path[stroke] { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: lc-draw 1.3s ease forwards; }
.report-chart.line-chart path[fill^="url"] { animation: lc-fade 1.1s ease .3s both; }
.report-chart.line-chart .lc-dot { animation: dot-pop .3s ease both; transform-origin: center; }
.report-chart.pie-layout .pie-chart { animation: pie-in .6s cubic-bezier(.2,.9,.3,1.2) both; }
@media (prefers-reduced-motion: reduce) { .bar-chart .bar-fill, .report-chart.line-chart path[stroke], .report-chart.line-chart path[fill^="url"], .report-chart.line-chart .lc-dot, .report-chart.pie-layout .pie-chart { animation: none !important; stroke-dashoffset: 0 !important; } }