/* ArqueoBox · Shared components
   Clear actions, quiet surfaces and compact cash-counting workflows.
   Public class names are shared with the generated app.js views. */

/* Authentication and workspace additions reuse the existing M3 tokens. */
body.auth-pending .app-shell, body.auth-pending .mobile-nav, body.auth-pending .skip-link { display: none; }
body:not([data-role="admin"]) [data-admin], body[data-role="admin"] [data-assigned] { display: none !important; }
body:not([data-role="accountant"]) [data-team] { display: none !important; }
body[data-role="accountant"] [data-go="arqueo"] { display: none !important; }
.users-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.users-flow li { padding: 16px; border: 1px solid var(--m-outline-variant); border-radius: 16px; background: var(--m-surface-container-low); }
.users-flow b, .users-flow span { display: block; }
.users-flow b { font-size: 14px; }
.users-flow span { font-size: 12px; color: var(--m-on-surface-muted); line-height: 1.6; margin-top: 7px; }
.accountant-option small { display: block; font-size: 12px; color: var(--m-on-surface-muted); margin-top: 4px; white-space: normal; }
.accountant-option b { font-weight: 500; }
#access-accountant-help { margin: 0; line-height: 1.6; }
.submission-recipient { grid-column: 1 / -1; margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--m-surface-container-low); }
@media (max-width: 700px) { .users-flow { grid-template-columns: minmax(0, 1fr); } }
.auth-screen { min-height: 100dvh; display: grid; align-items: center; padding: 40px 20px; }
.auth-content { width: min(100%, 460px); margin: auto; display: grid; gap: 28px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 14px; }
.auth-brand b { display: block; font-size: 24px; letter-spacing: -.03em; }
.auth-brand span { display: block; color: var(--m-on-surface-muted); font-size: 13px; }
.auth-content h1 { font-size: 26px; margin-bottom: 12px; }
.auth-description { margin-bottom: 24px; }
.auth-help { margin-top: 20px; }
.auth-foot { text-align: center; overflow-wrap: anywhere; }
#auth-error:not(:empty) { margin: 12px 0; }
.account-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 24px; align-items: start; }
.account-content { display: grid; gap: 24px; }
.settings-access { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.settings-access .card-title { margin-bottom: 8px; }
.settings-access .hint { margin: 0; }
.account-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.account-person { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; background: var(--m-surface-container-low); border-radius: 16px; }
.account-person + .account-person { margin-top: 12px; }
.person-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person-heading > div:last-child { min-width: 0; }
.person-heading b, .person-heading span, .person-heading small { display: block; overflow-wrap: anywhere; }
.person-heading span { color: var(--m-on-surface-muted); font-size: 12px; margin-top: 3px; }
.person-heading small { color: var(--m-on-surface-variant); font-size: 12px; margin-top: 6px; }
.store-membership { border: 0; padding: 0; margin: 24px 0; min-width: 0; }
.store-membership legend { font-size: 13px; font-weight: 500; margin-bottom: 12px; }
.store-membership-list { display: grid; gap: 8px; }
.membership-option { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--m-outline-variant); border-radius: 12px; }
.membership-option:has(input:checked) { background: var(--m-primary-container); color: var(--m-on-primary-container); border-color: var(--m-primary-container); }
.membership-option input, .access-active input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--m-primary); }
.access-active { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 14px; }
.permissions-list { padding-left: 20px; display: grid; gap: 14px; margin: 0 0 24px; color: var(--m-on-surface-variant); font-size: 14px; }
.password-settings { border-top: 1px solid var(--m-outline-variant); margin-top: 24px; padding-top: 18px; }
.password-settings summary { color: var(--m-primary); font-size: 14px; font-weight: 600; min-height: 40px; }
.password-settings[open] summary { margin-bottom: 14px; }
.accent-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.accent-swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; background: var(--m-surface); border: 1px solid var(--m-outline-variant); border-radius: 16px; font-size: 12px; color: var(--m-on-surface-variant); min-height: 80px; }
.accent-swatch > span { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--swatch); }
.accent-swatch[aria-pressed="true"] { outline: 2px solid var(--m-primary); outline-offset: -2px; background: var(--m-filled); color: var(--m-on-primary-container); }
.accent-custom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: stretch; }
.accent-custom .form-row { min-width: 0; margin-bottom: 0; }
.accent-custom .form-row label { flex: 1; }
.picker-trigger.color-trigger { justify-content: space-between; padding: 10px 12px; }
.color-trigger .picker-value { display: none; }
.color-trigger-chip { display: block; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--chosen-color, #b54a0c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }
.color-picker { width: min(336px, calc(100vw - 24px)); max-height: var(--color-picker-height, calc(100dvh - 24px)); overflow: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid var(--m-outline-variant); border-radius: 24px; background: var(--m-surface); color: var(--m-on-surface); box-shadow: var(--el-3); }
.color-picker-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.color-picker-heading h3 { font-size: 16px; font-weight: 600; margin: 0; }
.color-picker-close { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--m-surface-container-low); color: var(--m-on-surface-variant); }
.color-picker-close:hover { background: var(--m-surface-container); }
.color-spectrum { position: relative; height: 156px; overflow: hidden; border-radius: 16px; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--picker-hue, #ff0000)); touch-action: none; user-select: none; cursor: crosshair; }
.color-spectrum-thumb { position: absolute; width: 18px; height: 18px; left: clamp(11px, var(--picker-x), calc(100% - 11px)); top: clamp(11px, var(--picker-y), calc(100% - 11px)); transform: translate(-50%, -50%); pointer-events: none; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1.5px rgb(0 0 0 / 65%); }
.color-hue-field { margin-top: 12px; }
.color-hue-field label, .color-fine label { display: flex; justify-content: space-between; font-size: 12px; color: var(--m-on-surface-variant); }
.color-range { display: block; appearance: none; width: 100%; height: 32px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 999px; cursor: pointer; touch-action: pan-y; }
.color-range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: var(--m-primary-container); }
.color-range::-moz-range-track { height: 10px; border-radius: 999px; background: var(--m-primary-container); }
.color-range.color-hue::-webkit-slider-runnable-track { background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.color-range.color-hue::-moz-range-track { background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.color-range::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -6px; border: 3px solid var(--m-surface); border-radius: 50%; background: var(--chosen-color); box-shadow: 0 0 0 1px var(--m-outline), 0 2px 4px rgb(0 0 0 / 16%); }
.color-range::-moz-range-thumb { box-sizing: border-box; width: 22px; height: 22px; border: 3px solid var(--m-surface); border-radius: 50%; background: var(--chosen-color); box-shadow: 0 0 0 1px var(--m-outline), 0 2px 4px rgb(0 0 0 / 16%); }
.color-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.color-channels .form-row { margin: 0; min-width: 0; }
.color-channels label { font-size: 12px; }
.color-channels .form-row input { appearance: textfield; -moz-appearance: textfield; width: 100%; min-width: 0; min-height: 44px; padding: 10px; text-align: center; }
.color-channels input::-webkit-inner-spin-button, .color-channels input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.color-channels input[aria-invalid="true"] { border-color: var(--m-danger); }
.color-fine { margin-top: 12px; }
.color-fine summary { display: flex; align-items: center; justify-content: space-between; min-height: 36px; border-radius: 8px; list-style: none; font-size: 12px; color: var(--m-on-surface-muted); cursor: pointer; }
.color-fine summary::-webkit-details-marker { display: none; }
.color-fine summary .material-symbols-outlined { font-size: 20px; transition: transform var(--transition); }
.color-fine[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.color-fine > div { padding: 6px 0; }
.color-picker-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--m-outline-variant); }
.color-current { display: flex; align-items: center; gap: 10px; min-width: 0; }
.color-current output { font-size: 13px; font-variant-numeric: tabular-nums; }
.color-picker-footer .btn { min-height: 44px; padding: 10px 20px; }
.accent-preview { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.accent-preview .btn:disabled { opacity: 1; }
.accent-example { padding: 8px 12px; border-radius: 12px; color: var(--m-on-primary-container); background: var(--m-primary-container); font-size: 13px; }
.invitation-result { padding: 20px; margin-top: 20px; background: var(--m-success-container); color: var(--m-success); border-radius: 20px; }
.invitation-result .hint { margin: 10px 0 18px; color: inherit; }
.invitation-result input { color: var(--m-on-surface); background: var(--m-surface); }
.assigned-store + .assigned-store { margin-top: 18px; }
.assigned-store b, .assigned-store span { display: block; }
.assigned-store span { color: var(--m-on-surface-muted); font-size: 13px; margin-top: 4px; overflow-wrap: anywhere; }
.status-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 8px; background: var(--m-surface-container); color: var(--m-on-surface-variant); font-size: 11px; font-weight: 500; margin-top: 6px; }
.status-badge.pending { background: var(--m-warn-container); color: var(--m-warn); }
.status-badge.approved { background: var(--m-success-container); color: var(--m-success); }
.status-badge.observed { background: var(--m-danger-container); color: var(--m-danger); }
.store-switch:disabled { opacity: 1; cursor: default; }
.review-actions .hint { white-space: pre-wrap; }
.status-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.status-filter { padding: 10px 16px; min-height: 44px; border-radius: 999px; border: 1px solid var(--m-outline-variant); background: var(--m-surface); color: var(--m-on-surface-variant); font-size: 13px; }
.status-filter[aria-pressed="true"] { color: var(--m-on-primary-container); background: var(--m-primary-container); border-color: var(--m-primary-container); font-weight: 600; }
.historial-item:has(> .hi-main):not(:has(> .hi-delete)) { grid-template-columns: minmax(0, 1fr); }
.review-actions { display: grid; gap: 14px; margin: 20px 0; }
.record-events { grid-column: 1 / -1; }
.record-events ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.record-events li { border-left: 2px solid var(--m-outline-variant); padding-left: 14px; }
.record-events li b, .record-events li span { display: block; font-size: 13px; }
.record-events li span { color: var(--m-on-surface-muted); margin-top: 3px; }
@media (max-width: 1199px) { .account-layout { grid-template-columns: minmax(0, 1fr); } .settings-access { align-items: flex-start; flex-direction: column; } }
@media (max-width: 599px) {
  .auth-screen { padding: 24px 16px; }
  .auth-content { gap: 20px; }
  .auth-content h1 { font-size: 24px; }
  .account-layout, .account-content { gap: 16px; }
  .account-person { align-items: flex-start; flex-direction: column; padding: 16px; }
  .account-person .account-actions { width: 100%; justify-content: space-between; }
  .account-content > .section-head { align-items: flex-start; flex-direction: column; }
  .settings-account .account-actions { width: 100%; }
  .settings-account .btn { flex: 1; }
  .account-layout > .settings-save { display: flex; flex-wrap: wrap; gap: 12px; }
  .account-layout > .settings-save .btn { flex: 1; }
  .status-filters { gap: 6px; }
  .status-filter { padding-inline: 12px; }
  #view-invite .confirm-actions { flex-wrap: wrap; }
  #view-invite .confirm-actions .btn { flex: 1; }
}

:root {
  --m-primary: #b54a0c;
  --m-primary-hover: #913904;
  --m-hero: #ffeadb;
  --m-tonal-hover: #f6ccb0;
  --m-filled: #fff0e5;
  --m-filled-outline: #edc9b1;
  --m-hover-subtle: #fff6ef;
  --m-on-primary: #ffffff;
  --m-primary-container: #ffe4d2;
  --m-on-primary-container: #713000;
  --m-secondary: #705847;
  --m-secondary-container: #f0e0d3;
  --m-tertiary: #49634a;
  --m-tertiary-container: #ddebd8;

  --m-bg: #f6f5f2;
  --m-surface: #ffffff;
  --m-surface-dim: #e9e1db;
  --m-surface-bright: #fffdfa;
  --m-surface-container-lowest: #ffffff;
  --m-surface-container-low: #f8f8f6;
  --m-surface-container: #f0f1ed;
  --m-surface-container-high: #e9ece6;
  --m-surface-container-highest: #e0e5dc;
  --m-on-surface: #282c2a;
  --m-on-surface-variant: #505852;
  --m-on-surface-muted: #666d68;
  --m-outline: #a3aaa2;
  --m-outline-variant: #e0e4dd;
  --m-success: #28643e;
  --m-success-container: #e3f1e5;
  --m-warn: #805800;
  --m-warn-container: #fff0c9;
  --m-danger: #b3261e;
  --m-danger-container: #fce7e3;
  --c-muted: var(--m-on-surface-muted);

  --r-xs: 8px;
  --r-sm: 20px;
  --r-md: 20px;
  --r-lg: 20px;
  --r-xl: 20px;
  --r-full: 999px;
  --el-0: none;
  --el-1: 0 1px 2px rgb(55 36 22 / 5%), 0 2px 6px rgb(55 36 22 / 3%);
  --el-2: 0 2px 5px rgb(55 36 22 / 6%), 0 5px 14px rgb(55 36 22 / 5%);
  --el-3: 0 8px 24px rgb(55 36 22 / 12%);
  --el-4: 0 16px 48px rgb(55 36 22 / 18%);
  --el-primary: 0 2px 6px rgb(117 51 9 / 16%);
  --sidebar-width: 208px;
  --content-max: 1240px;
  --mobile-nav-height: 72px;
  --touch-target: 48px;
  --pad-x: 40px;
  --transition: 160ms cubic-bezier(.2, 0, 0, 1);
}

* { box-sizing: border-box; }
html { min-width: 320px; scrollbar-gutter: stable; scroll-padding-top: 112px; scroll-padding-bottom: 112px; }
/* MotionModal hides overflow while a dialog is open. Preserve the page's width even
   for fullscreen dialogs, where the engine normally removes the reserved gutter. */
html:root[data-motion-cover] { scrollbar-gutter: stable; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--m-on-surface);
  background: var(--m-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea, [tabindex] { scroll-margin-block: 120px; }
button { min-width: 0; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
button:disabled { opacity: .58; box-shadow: none; }
button[aria-busy="true"] { cursor: progress; }
input, select, textarea { min-width: 0; max-width: 100%; }
input, select { width: 100%; }
img, canvas { max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2 { font-weight: 600; letter-spacing: -.025em; line-height: 1.2; text-wrap: pretty; }
h3, h4 { font-weight: 600; line-height: 1.4; }
h3 { font-size: 18px; }
a { color: var(--m-primary); text-underline-offset: 3px; }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--m-primary); outline-offset: 3px; }
.topbar-copy :is(h1, h2)[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--m-primary-container); color: var(--m-on-primary-container); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10001; padding: 12px 20px; background: var(--m-on-surface); color: #fff; border-radius: var(--r-sm); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  user-select: none;
  vertical-align: middle;
  flex-shrink: 0;
}
.material-symbols-outlined.fill { font-variation-settings: "FILL" 1, "wght" 500; }
.material-symbols-outlined.sm { font-size: 18px; }
.material-symbols-outlined.lg { font-size: 32px; }
.material-symbols-outlined.xl { font-size: 48px; }
.mobile-only { display: none; }

/* Workspace shell and navigation */
.app-shell { min-height: 100vh; }
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar-width);
  padding: 28px 16px 16px;
  display: flex;
  flex-direction: column;
  background: var(--m-surface-container-low);
  border-right: 1px solid var(--m-outline-variant);
  overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; text-align: left; padding: 0 8px; min-height: var(--touch-target); border: 0; background: transparent; border-radius: var(--r-sm); }
.sidebar-brand img { flex: 0 0 40px; border-radius: 11px; }
.sidebar-brand b { display: block; font-size: 21px; letter-spacing: -.035em; }
.sidebar-brand small { display: block; margin-top: 1px; color: var(--m-on-surface-muted); font-size: 12px; }
.sidebar-create { margin: 28px 0 16px; width: 100%; background: var(--m-primary-container); color: var(--m-on-primary-container); box-shadow: none; }
.nav-label { color: var(--m-on-surface-muted); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; padding: 0 16px; margin-bottom: 10px; }
.desktop-nav { display: grid; gap: 6px; margin: 12px 0 32px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border-radius: var(--r-full); border: 0; background: transparent; color: var(--m-on-surface-variant); font-size: 14px; font-weight: 500; text-align: left; transition: background var(--transition), color var(--transition); }
.nav-item:hover { background: var(--m-surface-container-high); }
.nav-item.active, .nav-item[aria-current="page"] { background: var(--m-primary-container); color: var(--m-on-primary-container); font-weight: 600; }
.nav-item.active .material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 500; }
.sidebar-account { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; align-items: center; gap: 8px; margin-top: auto; padding: 20px 4px 0; border-top: 1px solid var(--m-outline-variant); }
.sidebar-account .icon-btn { width: 44px; min-width: 44px; }
.account-copy { min-width: 0; }
.account-copy b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.account-copy > span { display: block; color: var(--m-on-surface-muted); font-size: 12px; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: var(--m-primary-container); color: var(--m-on-primary-container); font-size: 13px; font-weight: 700; }
.app-main { margin-left: var(--sidebar-width); min-width: 0; padding: 0 var(--pad-x) 48px; }
.workspace-bar { max-width: var(--content-max); margin: 0 auto; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--m-outline-variant); }
.workspace-label, .connection-tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.workspace-label { color: var(--m-on-surface-muted); font-size: 13px; }
.workspace-label .material-symbols-outlined { font-size: 20px; }
.connection-tools { gap: 4px; }
.connection-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--m-on-surface-muted); white-space: nowrap; }
.connection-status.online, .connection-status[data-state="online"], .connection-status[data-status="online"] { color: var(--m-success); }
.connection-status.error, .connection-status.offline, .connection-status[data-state="offline"], .connection-status[data-status="error"] { color: var(--m-danger); }
.mobile-nav { display: none; }
.view { display: none; width: 100%; max-width: var(--content-max); margin: 0 auto; flex-direction: column; min-width: 0; }
.view.active { display: flex; }
.topbar { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 28px 0 22px; position: sticky; top: 0; z-index: 20; background: var(--m-bg); }
.topbar h1, .topbar h2 { font-size: 28px; }
.topbar-copy { min-width: 0; }
.topbar-copy .eyebrow { margin-bottom: 5px; }
.topbar-root { grid-template-columns: minmax(0, 1fr) auto; padding-top: 36px; }
.topbar-meta { color: var(--m-on-surface-muted); font-size: 13px; }
.eyebrow { color: var(--m-on-surface-muted); text-transform: uppercase; letter-spacing: .095em; font-size: 11px; font-weight: 600; }
.page-description { margin: -6px 0 28px; color: var(--m-on-surface-muted); font-size: 16px; }
.home-content, .splash, .arqueo-form, .firmas-content, .preview-content, .historial-content, .detalle-content, .settings-content { width: 100%; min-width: 0; }

/* M3 filled, tonal, outlined, text and icon buttons */
.btn, .link-btn, .btn-link { min-height: var(--touch-target); display: inline-flex; justify-content: center; align-items: center; gap: 8px; border-radius: var(--r-full); padding: 11px 20px; border: 1px solid transparent; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; transition: background var(--transition), box-shadow var(--transition); }
.btn-primary { background: var(--m-primary); color: var(--m-on-primary); box-shadow: var(--el-primary); }
.btn-primary:hover:not(:disabled) { background: var(--m-primary-hover); box-shadow: var(--el-2); }
.btn-primary:active:not(:disabled) { box-shadow: none; }
.btn-tonal { background: var(--m-primary-container); color: var(--m-on-primary-container); }
.btn-tonal:hover { background: var(--m-tonal-hover); }
.btn-outlined { background: transparent; color: var(--m-primary); border-color: var(--m-outline); }
.btn-outlined:hover { background: var(--m-primary-container); }
.btn-ghost { background: transparent; color: var(--m-on-surface-variant); border-color: var(--m-outline-variant); }
.btn-ghost:hover { background: var(--m-surface-container); }
.btn-text, .link-btn, .btn-link { padding-inline: 14px; background: transparent; color: var(--m-primary); }
.btn-text:hover, .link-btn:hover, .btn-link:hover { background: var(--m-primary-container); }
.btn-block { display: flex; width: 100%; }
.btn-danger { background: var(--m-danger-container); color: var(--m-danger); border: 1px solid transparent; }
.btn-danger:hover { background: var(--m-danger); color: #fff; }
.back-btn, .icon-btn, .hi-delete { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: var(--touch-target); min-height: var(--touch-target); width: var(--touch-target); height: var(--touch-target); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--m-on-surface-variant); transition: background var(--transition), color var(--transition); }
.back-btn:hover, .icon-btn:hover { background: var(--m-surface-container-high); }
.back-btn { border: 1px solid var(--m-outline-variant); background: var(--m-surface); }
.btn .material-symbols-outlined, .link-btn .material-symbols-outlined, .btn-link .material-symbols-outlined { font-size: 20px; }

/* Store selection is a workspace, not a landing page */
.store-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.store-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 28px; border: 1px solid var(--m-outline-variant); border-radius: var(--r-xl); background: var(--m-surface); color: var(--m-on-surface); text-align: left; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.store-card:hover { border-color: var(--m-primary); background: var(--m-surface-bright); box-shadow: var(--el-2); }
.store-card-top, .store-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.store-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; background: var(--m-primary-container); color: var(--m-on-primary-container); }
.store-icon .material-symbols-outlined { font-size: 28px; }
.store-number { color: var(--m-outline-variant); font-size: 40px; line-height: 1; font-weight: 500; letter-spacing: -.06em; }
.store-info { display: block; min-width: 0; padding: 24px 0; }
.store-name { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
.store-meta { display: block; margin-top: 6px; color: var(--m-on-surface-muted); font-size: 14px; overflow-wrap: anywhere; }
.store-card-bottom { border-top: 1px solid var(--m-outline-variant); padding-top: 18px; color: var(--m-primary); font-size: 14px; font-weight: 600; }
.store-arrow { font-size: 22px; }
.splash-foot { margin-top: 20px; display: flex; justify-content: flex-end; }
.splash-foot p { display: flex; align-items: center; gap: 8px; color: var(--m-on-surface-muted); font-size: 13px; }
.splash-foot .material-symbols-outlined { font-size: 18px; }

/* Home: primary action, latest totals and recent history */
.greeting { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 0 24px; color: var(--m-on-surface-muted); font-size: 13px; }
.greeting-text h3 { font-size: 24px; font-weight: 500; letter-spacing: -.02em; margin-top: 5px; }
.greeting-text > p:last-child { color: var(--m-on-surface-muted); font-size: 14px; margin-top: 7px; }
.store-context { display: block; width: 100%; color: var(--m-on-surface-muted); font-size: 12px; overflow-wrap: anywhere; }
.store-context > span:last-child { overflow-wrap: anywhere; }
.store-context .material-symbols-outlined { font-size: 20px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 32px; padding: 0; }
.metric { min-width: 0; padding: 22px 24px; background: var(--m-surface); border: 1px solid var(--m-outline-variant); border-radius: 20px; }
.metric + .metric { border-left: 1px solid var(--m-outline-variant); }
.metric dt { color: var(--m-on-surface-variant); font-size: 13px; font-weight: 500; }
.metric dd:not(.metric-caption) { margin: 8px 0 4px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metric .metric-caption { margin: 0; color: var(--m-on-surface-muted); font-size: 12px; }
.home-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 24px; align-items: start; }
.recent-panel { min-width: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.section-head .hint { margin-top: 4px; }
.section-head > .link-btn { flex-shrink: 0; }
.home-action-panel { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 24px; padding: 28px; border-radius: var(--r-xl); background: var(--m-hero); }
.home-action-panel h3 { margin: 0 0 6px; font-size: clamp(19px, 1.8vw, 25px); letter-spacing: -.025em; color: var(--m-on-primary-container); }
.home-action-panel > p { color: var(--m-on-surface-variant); font-size: 14px; }
.task-outline { margin: 24px 0; padding-left: 22px; font-size: 13px; color: var(--m-on-surface-variant); }
.task-outline li { padding: 5px 0 5px 4px; }
.task-outline li::marker { color: var(--m-primary); font-weight: 600; }
.cta-primary { min-height: 52px; padding-inline: 24px; margin: 0; }

/* History rows: generated markup retains all existing hooks */
.historial-list { display: grid; gap: 10px; min-width: 0; }
.historial-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 48px; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--m-outline-variant); border-radius: 20px; background: var(--m-surface); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.historial-item:hover { border-color: var(--m-outline); background: var(--m-surface-bright); }
.historial-item:has(> .hi-main) { grid-template-columns: minmax(0, 1fr) 48px; cursor: default; }
.hi-main { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-width: 0; min-height: var(--touch-target); padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; text-align: left; }
.hi-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--m-surface-container); color: var(--m-on-surface-variant); }
.historial-item[data-tienda="Tienda 1"] .hi-icon { background: var(--m-primary-container); color: var(--m-on-primary-container); }
.historial-item[data-tienda="Tienda 2"] .hi-icon { background: var(--m-secondary-container); color: var(--m-secondary); }
.hi-body { min-width: 0; }
.hi-tienda { display: block; font-size: 15px; font-weight: 600; }
.hi-meta { display: block; margin-top: 5px; color: var(--m-on-surface-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.hi-meta .material-symbols-outlined { font-size: 14px; }
.hi-totales { text-align: right; min-width: 0; }
.hi-total { display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hi-dif { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 5px; padding: 4px 8px; border-radius: var(--r-xs); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hi-dif .material-symbols-outlined { font-size: 14px; }
.hi-dif.ok, .dif-chip.ok { background: var(--m-success-container); color: var(--m-success); }
.hi-dif.bad, .dif-chip.bad { background: var(--m-danger-container); color: var(--m-danger); }
.hi-dif.zero, .dif-chip.zero { background: var(--m-surface-container); color: var(--m-on-surface-variant); }
.hi-delete { color: var(--m-on-surface-muted); }
.hi-delete:hover { background: var(--m-danger-container); color: var(--m-danger); }
.hi-delete .material-symbols-outlined { font-size: 20px; }
.filter-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 16px; padding: 20px; border: 1px solid var(--m-outline-variant); border-radius: 24px; background: var(--m-surface); margin-bottom: 24px; }
.filter-bar .form-row { margin-bottom: 0; }
/* Filtros del historial: campo, menú y calendario propios (popovers del motor) */
.picker-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 14px; font-size: 16px; line-height: 1.5; text-align: left; border: 1px solid var(--m-outline); border-radius: 12px; color: var(--m-on-surface); background: var(--m-surface); transition: border-color var(--transition), box-shadow var(--transition); }
.picker-trigger:hover { border-color: var(--m-on-surface); }
.picker-trigger[aria-expanded="true"] { border-color: var(--m-primary); }
.picker-trigger .material-symbols-outlined { flex-shrink: 0; font-size: 22px; color: var(--m-on-surface-variant); }
.picker-trigger [data-motion-shared="filtro-fecha-icono"] { color: var(--m-primary); }
.picker-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-value.is-placeholder { color: var(--m-on-surface-muted); }
.field-menu, .date-panel { box-sizing: border-box; padding: 8px; border: 1px solid var(--m-outline-variant); border-radius: 20px; color: var(--m-on-surface); background: var(--m-surface); box-shadow: var(--el-3); }
.field-menu { min-width: 220px; max-width: min(420px, calc(100vw - 20px)); }
.field-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 14px; background: transparent; color: inherit; font-size: 15px; text-align: left; transition: background var(--transition); }
.field-option > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.field-option:hover, .field-option:focus-visible { background: var(--m-primary-container); }
.field-option:focus-visible { outline-offset: -3px; }
.field-option[aria-checked="true"] { font-weight: 600; color: var(--m-on-primary-container); }
.field-option .material-symbols-outlined { font-size: 20px; color: var(--m-primary); opacity: 0; }
.field-option[aria-checked="true"] .material-symbols-outlined { opacity: 1; }
.date-panel { width: min(336px, calc(100vw - 20px)); padding: 16px; }
.cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.cal-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 16px; }
.cal-title strong { font-weight: 600; letter-spacing: -.01em; }
.cal-title .material-symbols-outlined { flex-shrink: 0; font-size: 22px; color: var(--m-primary); }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-week { margin-bottom: 4px; text-align: center; color: var(--m-on-surface-muted); font-size: 12px; font-weight: 600; }
.cal-day { aspect-ratio: 1; min-height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 14px; font-variant-numeric: tabular-nums; transition: background var(--transition); }
.cal-day:hover { background: var(--m-primary-container); }
.cal-day[aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--m-primary); }
.cal-day[aria-pressed="true"] { background: var(--m-primary); color: var(--m-on-primary); font-weight: 600; }
.cal-day:focus-visible { outline-offset: 1px; }
.cal-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--m-outline-variant); }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 26px; padding: 2px 8px; border-radius: var(--r-xs); background: var(--m-surface-container-high); color: var(--m-on-surface-variant); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Forms and calculation workspace */
.arqueo-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.workflow-intro { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 2px; }
.workflow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: min(100%, 480px); list-style: none; padding: 5px; margin: 0; background: var(--m-surface-container); border-radius: var(--r-full); }
.workflow-steps li { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: var(--r-full); font-size: 13px; font-weight: 500; color: var(--m-on-surface-muted); }
.workflow-steps li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; background: var(--m-surface-container-high); color: var(--m-on-surface-variant); }
.workflow-steps li[aria-current="step"] { color: var(--m-on-primary-container); background: var(--m-surface); box-shadow: var(--el-1); }
.workflow-steps li[aria-current="step"] > span { background: var(--m-primary); color: var(--m-on-primary); }
.workflow-steps li.complete > span { background: var(--m-primary-container); color: var(--m-on-primary-container); font-size: 16px; }
.form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; min-width: 0; }
.form-card { min-width: 0; background: var(--m-surface); border: 1px solid var(--m-outline-variant); border-radius: 24px; padding: 24px; }
.card-title { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 20px; }
.card-title > .material-symbols-outlined { font-size: 22px; color: var(--m-primary); }
.badge { display: inline-block; margin-left: auto; padding: 4px 8px; border-radius: 6px; background: var(--m-surface-container-low); color: var(--m-on-surface-muted); font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.form-grid-2 > * { min-width: 0; }
.form-row { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-bottom: 18px; }
.form-row:last-child, .form-grid-2 .form-row { margin-bottom: 0; }
.form-grid-2 + .form-row { margin-top: 20px; }
.form-row label, .denom-label { color: var(--m-on-surface-variant); font-size: 13px; font-weight: 500; }
.required-label { color: var(--m-on-surface-muted); font-weight: 400; font-size: 11px; }
.field-unit { float: right; margin-left: 8px; color: var(--m-on-surface-muted); font-weight: 400; }
.field-help { color: var(--m-on-surface-muted); font-size: 12px; }
.form-row input, .form-row select, .form-row textarea, .tienda-edit input, .firma-name-row input, .denom-input input { display: block; width: 100%; min-height: 52px; padding: 12px 14px; font-size: 16px; line-height: 1.5; border: 1px solid var(--m-outline); border-radius: 12px; color: var(--m-on-surface); background: var(--m-surface); transition: border-color var(--transition), box-shadow var(--transition); }
input::placeholder { color: var(--m-on-surface-muted); opacity: 1; }
.form-row input:hover, .form-row select:hover, .denom-input input:hover { border-color: var(--m-on-surface); }
.form-row input:focus, .form-row select:focus, .firma-name-row input:focus, .denom-input input:focus { border-color: var(--m-primary); }
.form-row input[readonly] { background: var(--m-surface-container-low); color: var(--m-on-surface-muted); border-color: var(--m-outline-variant); }
input[type="number"] { font-variant-numeric: tabular-nums; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--m-danger); background: #fff9f8; }
.field-error, .form-error { color: var(--m-danger); font-size: 13px; }
.hint { font-size: 13px; color: var(--m-on-surface-muted); line-height: 1.6; }
.card-description { margin: -10px 0 24px; }
.counting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; gap: 20px; min-width: 0; }
.count-hint { margin: -12px 0 18px; }
.denom-grid { display: grid; gap: 6px; }
.denom-row, .denom-heading { display: grid; grid-template-columns: 62px minmax(56px, 1fr) minmax(68px, 1fr); align-items: center; gap: 8px; min-width: 0; }
.denom-heading { padding: 0 4px 10px; font-size: 11px; color: var(--m-on-surface-muted); }
.denom-heading > :last-child { text-align: right; }
.denom-row { padding: 4px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--m-surface-container-low); }
.denom-row.filled { background: var(--m-filled); border-color: var(--m-filled-outline); }
.denom-label { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.denom-input { display: flex; align-items: center; min-width: 0; }
.denom-input > span { display: none; }
.denom-input input { min-height: var(--touch-target); padding: 10px 6px; text-align: center; font-variant-numeric: tabular-nums; }
.denom-sub { text-align: right; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.denom-row.filled .denom-sub { color: var(--m-on-primary-container); }
.subtotal, .total-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--m-outline-variant); font-size: 12px; color: var(--m-on-surface-muted); }
.subtotal b, .total-line b { color: var(--m-on-surface); font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.total-line.big { font-size: 18px; }
.summary-column { position: sticky; top: 124px; min-width: 0; }
.form-card.highlight { background: var(--m-surface); border-color: var(--m-outline-variant); box-shadow: none; }
.summary-column .card-title { margin-bottom: 8px; }
.resumen-final { display: flex; flex-direction: column; }
.rf-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--m-outline-variant); }
.rf-row > span { color: var(--m-on-surface-variant); font-size: 13px; }
.rf-row b { font-size: 16px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rf-row.total { flex-direction: column; gap: 4px; padding: 16px; margin: 8px -8px; background: var(--m-primary-container); border: 0; border-radius: 16px; }
.rf-row.total > span { color: var(--m-on-surface); font-weight: 500; }
.rf-row.total b { font-size: 28px; color: var(--m-on-primary-container); letter-spacing: -.025em; }
.rf-row.diferencia { flex-wrap: wrap; border: 0; padding-top: 20px; }
.rf-row.diferencia > span { font-weight: 600; }
.rf-row.diferencia b { font-size: 24px; }
.rf-row.diferencia.pos b, #arqueo-diferencia.pos { color: var(--m-success); }
.rf-row.diferencia.neg b, #arqueo-diferencia.neg { color: var(--m-danger); }
.dif-chip { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 12px; border-radius: var(--r-sm); font-size: 12px; line-height: 1.6; font-weight: 500; }
.dif-chip .material-symbols-outlined { font-size: 20px; }
.summary-note { margin-top: 16px; color: var(--m-on-surface-muted); font-size: 12px; }
.form-actions { display: flex; flex-direction: column-reverse; gap: 12px; margin-top: 20px; }
.form-actions .btn { width: 100%; }
.summary-save-note { margin: 14px 12px 0; font-size: 12px; text-align: center; }

/* Signature review and capture */
.firmas-content { display: grid; gap: 24px; }
.resumen-card { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; padding: 20px 24px; min-width: 0; background: var(--m-surface-container-low); border: 1px solid var(--m-outline-variant); border-radius: 20px; }
.resumen-card:empty { display: none; }
.ri { display: flex; flex-direction: column; min-width: 0; }
.ri > span { color: var(--m-on-surface-muted); font-size: 12px; font-weight: 400; }
.ri > b { margin-top: 6px; font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.signature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
.firma-block { min-width: 0; padding: 24px; background: var(--m-surface); border: 1px solid var(--m-outline-variant); border-radius: 24px; }
.firma-block.signed { border-color: var(--m-success); }
.firma-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.firma-head h3 { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.firma-head .num { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--m-surface-container); color: var(--m-on-surface-variant); font-size: 12px; }
.firma-tag { padding: 5px 8px; border-radius: 6px; background: var(--m-primary-container); color: var(--m-on-primary-container); font-size: 10px; font-weight: 500; }
.firma-tag.tienda { background: var(--m-secondary-container); color: var(--m-secondary); white-space: nowrap; }
.firma-name-row { display: grid; grid-template-columns: minmax(0, 1fr) 136px; gap: 12px; margin-bottom: 20px; }
.firma-name-row > * { min-width: 0; }
.firma-name-row .form-row { margin: 0; }
.canvas-wrap { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border: 1px dashed var(--m-outline); border-radius: var(--r-sm); background: var(--m-surface-container-low); cursor: pointer; touch-action: manipulation; transition: border-color var(--transition), background var(--transition); }
.canvas-wrap:hover { background: var(--m-hover-subtle); border-color: var(--m-primary); }
.canvas-wrap.igned { border-style: solid; border-color: var(--m-success); background: #fff; }
.sig-canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.canvas-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; color: var(--m-on-surface-muted); font-size: 14px; pointer-events: none; }
.canvas-hint .material-symbols-outlined { font-size: 28px; color: var(--m-primary); }
.canvas-wrap.igned .canvas-hint { opacity: 0; }
.firma-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.firma-actions-row { display: flex; justify-content: flex-end; gap: 12px; padding: 8px 0; }
.sig-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  flex-direction: column;
  min-height: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  border: 0;
  color: inherit;
  background: var(--m-surface-container);
}
.sig-modal[open] { display: flex; }
.sig-modal-header { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; flex-shrink: 0; padding: 16px 24px; border-bottom: 1px solid var(--m-outline-variant); background: var(--m-surface); }
.sig-modal-header h2 { font-size: 20px; letter-spacing: -.015em; }
.sig-modal-instructions { padding: 16px 24px; font-size: 13px; color: var(--m-on-surface-variant); text-align: center; }
.sig-modal-canvas-wrap { position: relative; flex: 0 0 auto; margin: auto; width: min(calc(100% - 48px), calc(150dvh - 336px), 960px); aspect-ratio: 3 / 2; border: 1px dashed var(--m-outline); border-radius: var(--r-sm); background: var(--m-surface); overflow: hidden; touch-action: none; box-shadow: var(--el-1); }
.sig-modal-canvas { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; touch-action: none; }
.sig-modal-canvas-wrap.igned { border-style: solid; border-color: var(--m-primary); }
.sig-modal-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; pointer-events: none; color: var(--m-on-surface-muted); font-size: 16px; }
.sig-modal-hint .material-symbols-outlined { font-size: 32px; color: var(--m-primary); }
.sig-modal-canvas-wrap.igned .sig-modal-hint { opacity: 0; }
.sig-modal-actions { display: flex; justify-content: flex-end; gap: 12px; flex-shrink: 0; padding: 16px 24px; margin-top: 20px; border-top: 1px solid var(--m-outline-variant); background: var(--m-surface); }
.sig-modal-actions .btn { min-width: 160px; }

/* Egresos: total independiente y desglose opcional. */
.expense-breakdown { border: 1px solid var(--m-outline-variant); border-radius: 16px; padding: 0 16px; margin-top: 16px; }
.expense-breakdown summary { display: flex; align-items: center; gap: 10px; min-height: 56px; cursor: pointer; list-style: none; font-weight: 500; }
.expense-breakdown summary::-webkit-details-marker { display: none; }
.expense-breakdown summary .material-symbols-outlined { margin-left: auto; transition: transform .2s; }
.expense-breakdown[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.expense-breakdown[open] { padding-bottom: 16px; }
.expense-breakdown > p { margin: 0 0 16px; }
.expense-breakdown .form-row { margin-bottom: 0; }
.expense-status { margin-top: 14px; }
.ocr-expense-breakdown { margin: 12px 0 0; padding: 0 12px; }
@media (prefers-reduced-motion: reduce) { .expense-breakdown summary .material-symbols-outlined { transition: none; } }

/* PDF preview and record detail */
.preview-content { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 24px; align-items: start; }
.success-card { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: var(--r-md); background: var(--m-success-container); color: var(--m-success); }
.success-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--m-success); color: #fff; }
.success-card h3 { font-size: 16px; }
.success-card p { margin-top: 3px; font-size: 13px; }
.pdf-mock { min-width: 0; padding: 32px; border: 1px solid var(--m-outline-variant); border-radius: var(--r-sm); background: var(--m-surface); box-shadow: var(--el-2); overflow-wrap: anywhere; }
.pdf-mock h2 { font-size: 21px; line-height: 1.4; margin-bottom: 20px; }
.pdf-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, .48fr); gap: 20px; padding: 16px; margin-bottom: 24px; border: 1px solid var(--m-outline-variant); border-radius: 10px; background: #faf8f5; }
.pdf-store-info { min-width: 0; }
.pdf-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pdf-identity b { font-size: 16px; }
.pdf-identity span { flex: 1 1 80px; font-size: 13px; color: var(--m-on-surface-muted); }
.pdf-details { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; margin: 0; padding-left: 20px; border-left: 1px solid var(--m-outline-variant); }
.pdf-details dt, .pdf-responsible dt { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; color: var(--m-on-surface-muted); }
.pdf-details dd, .pdf-responsible dd { margin: 0; font-size: 13px; }
.pdf-responsible { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 16px 0 0; }
@media (max-width: 700px) {
  .pdf-info { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pdf-details { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--m-outline-variant); gap: 6px; }
}
.pdf-mock table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.pdf-mock th, .pdf-mock td { border-bottom: 1px solid var(--m-outline-variant); padding: 12px 8px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.pdf-mock th { font-weight: 500; color: var(--m-on-surface-variant); }
.pdf-mock td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pdf-tot { margin-top: 12px; }
.pdf-tot .row { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; font-size: 13px; }
.pdf-tot .row > span { color: var(--m-on-surface-variant); }
.pdf-tot .row b { text-align: right; font-variant-numeric: tabular-nums; }
.pdf-tot .row.big { padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--m-outline); font-size: 15px; font-weight: 600; }
.pdf-sigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.pdf-sig { min-width: 0; border-top: 1px solid var(--m-outline); padding-top: 16px; color: var(--m-on-surface-variant); font-size: 12px; text-align: center; }
.pdf-sig img { display: block; width: 100%; height: 112px; object-fit: contain; margin: 0 auto 12px; }
.pdf-sig b { display: block; color: var(--m-on-surface); font-size: 13px; }
.pdf-sig > span, .pdf-sig > small { display: block; margin-top: 4px; }
.sig-empty { display: flex; justify-content: center; align-items: center; min-height: 112px; padding: 16px; margin-bottom: 12px; border-radius: var(--r-xs); background: var(--m-surface-container-low); color: var(--m-on-surface-muted); font-size: 12px; text-align: center; }
.share-panel { grid-column: 2; grid-row: 2; position: sticky; top: 112px; min-width: 0; padding: 24px; border-radius: 24px; background: var(--m-surface); border: 1px solid var(--m-outline-variant); }
.share-panel h3 { font-size: 16px; margin-bottom: 16px; }
.share-panel > .hint { margin-bottom: 20px; }
.share-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.share-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 80px; padding: 16px 8px; border: 1px solid var(--m-outline-variant); border-radius: var(--r-sm); background: var(--m-surface); color: var(--m-on-surface-variant); font-size: 12px; transition: background var(--transition), border-color var(--transition); }
.share-btn:hover { border-color: var(--m-primary); background: var(--m-hover-subtle); }
.share-btn b { font-weight: 500; }
.icon-circle { display: grid; place-items: center; color: var(--m-primary); }
.share-btn.whatsapp .icon-circle { color: var(--m-success); }
.share-panel .share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.share-panel .share-btn { flex-direction: column; justify-content: center; min-height: 76px; padding: 10px 4px; gap: 8px; font-size: 11px; border: 0; border-radius: 16px; background: var(--m-surface-container-low); }
.detalle-content { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 24px; align-items: start; }
.detalle-content > .resumen-card { grid-column: 1 / -1; }
.detalle-content > .pdf-mock { grid-column: 1; grid-row: 1; }
.detalle-content > .share-grid { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; border-radius: var(--r-md); background: var(--m-surface-container-low); }
.detalle-content > .btn-danger { grid-column: 2; }
.detalle-content > .empty { grid-column: 1 / -1; }

/* Settings: editable account, stores, staff and explicit save */
.settings-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.settings-content > .page-description { grid-column: 1 / -1; margin: 0; }
.settings-staff, .settings-save, .danger-zone { grid-column: 1 / -1; }
.tienda-edit { min-width: 0; padding-top: 18px; border-top: 1px solid var(--m-outline-variant); }
.tienda-edit + .tienda-edit { margin-top: 24px; }
.tienda-nombre-fijo { display: inline-block; margin-bottom: 14px; color: var(--m-on-primary-container); font-size: 14px; font-weight: 600; }
.encargados-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.encargado-edit { min-width: 0; padding: 20px; background: var(--m-surface-container-low); border-radius: var(--r-sm); }
.encargado-head { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 14px; }
.encargado-head .material-symbols-outlined { color: var(--m-primary); font-size: 20px; }
/* Contabilidad: one card per accountant with the stores each one manages */
.contador-edit { min-width: 0; margin-top: 18px; padding: 20px; border-radius: var(--r-sm); background: var(--m-surface-container-low); }
.contador-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 14px; }
.contador-head b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.contador-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--m-primary-container); color: var(--m-on-primary-container); font-size: 13px; font-weight: 600; }
.contador-stores-label { margin: 2px 0 12px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.store-chip { min-height: var(--touch-target); padding: 8px 16px; border: 1px solid var(--m-outline); border-radius: var(--r-full); background: var(--m-surface); color: var(--m-on-surface-variant); font-size: 13px; font-weight: 500; }
.store-chip[aria-pressed="true"] { border-color: var(--m-primary); background: var(--m-primary-container); color: var(--m-on-primary-container); }
.store-chip:hover:not(:disabled) { border-color: var(--m-primary); }
.store-chip:disabled { opacity: .55; }
.empty-contadores { margin: 4px 0 0; }
.settings-save { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 8px; }
.settings-save .btn { flex-shrink: 0; }
.danger-zone { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; border-color: #e9c5be; background: #fff9f7; margin-top: 8px; box-shadow: none; }
.danger-zone .card-title { margin-bottom: 0; font-size: 15px; }
.danger-zone .card-title .material-symbols-outlined { color: var(--m-danger); }
.danger-zone .hint { grid-column: 1; margin: 0; }
.danger-zone > .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* Dialogs, status, empty and loading states */
.confirm-dialog { width: calc(100% - 48px); max-width: 440px; max-height: calc(100dvh - 48px); overscroll-behavior: contain; overflow-y: auto; padding: 28px; border: 0; color: inherit; background: var(--m-surface-container-low); border-radius: var(--r-xl); box-shadow: var(--el-4); }
dialog.motion-modal[data-motion-backdrop="dim"]::backdrop { background: rgb(41 34 29 / 48%); }
.confirm-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%; background: var(--m-danger-container); color: var(--m-danger); }
.confirm-title { font-size: 24px; margin-bottom: 12px; letter-spacing: -.02em; }
.confirm-message { color: var(--m-on-surface-variant); font-size: 14px; line-height: 1.65; margin-bottom: 28px; overflow-wrap: anywhere; }
.confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.toast { position: fixed; inset: auto auto 24px calc(50% + 120px); margin: 0; border: 0; overflow: visible; z-index: 3000; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 40px)); padding: 14px 20px; border-radius: var(--r-sm); background: var(--m-on-surface); color: #fff; font-size: 14px; line-height: 1.5; box-shadow: var(--el-3); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity var(--transition), transform var(--transition); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .material-symbols-outlined { font-size: 22px; }
.toast.error { background: var(--m-danger); }
.toast.success { background: var(--m-success); }
#toast-msg { min-width: 0; overflow-wrap: anywhere; }
.empty { padding: 40px 24px; border: 1px solid var(--m-outline-variant); border-radius: 24px; background: var(--m-surface); text-align: center; color: var(--m-on-surface-muted); }
.empty > .material-symbols-outlined { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; background: var(--m-surface-container-low); color: var(--m-on-surface-muted); font-size: 28px; margin-bottom: 16px; }
.empty h3 { margin-bottom: 8px; color: var(--m-on-surface); font-size: 17px; }
.empty p { font-size: 14px; max-width: 48ch; margin: 0 auto; line-height: 1.65; }
.empty .btn { margin-top: 20px; }
.loading-state { background: var(--m-surface-container-low); }
.app-loader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: var(--m-bg); transition: opacity 180ms; }
.app-loader.hide { opacity: 0; pointer-events: none; }
.app-loader-mark { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 4px; }
.app-loader h2 { font-size: 24px; }
.app-loader-text { color: var(--m-on-surface-muted); font-size: 14px; text-align: center; }
.loading-meter { width: 184px; height: 4px; margin-top: 14px; border-radius: var(--r-full); background: var(--m-primary-container); overflow: hidden; }
.loading-meter > span { display: block; width: 45%; height: 100%; background: var(--m-primary); border-radius: inherit; animation: loading-progress 1.2s ease-in-out infinite alternate; }
@keyframes loading-progress { from { transform: translateX(-60%); } to { transform: translateX(190%); } }
.noscript-note { position: fixed; inset: 0; z-index: 10000; display: grid; place-content: center; padding: 32px; background: var(--m-bg); color: var(--m-on-surface); text-align: center; }


/* Context and focused actions */
.store-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--m-outline-variant); border-radius: var(--r-full); background: var(--m-surface); font-size: 13px; font-weight: 500; }
.store-switch:hover { background: var(--m-primary-container); }
.workspace-section { font-size: 13px; }
body:not([data-view="splash"]) .workspace-section { display: none; }
body[data-view="splash"] .store-switch, body[data-view="splash"] .sidebar-create { display: none; }
body[data-view="splash"] .desktop-nav { margin-top: 36px; }
.connection-status::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.connection-status[data-state="error"] { color: var(--m-danger); }
.store-meta:empty { display: none; }
.store-name, .encargado-head b, .tienda-edit label { overflow-wrap: anywhere; }
.store-card[data-tone="1"] .store-icon { background: var(--m-tertiary-container); color: var(--m-tertiary); }
.store-card[data-tone="2"] .store-icon { background: #e6e4fa; color: #545077; }
.workspace-label { flex: 1; }
.store-switch { max-width: min(100%, 360px); }
.store-switch [data-current-store] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.firma-tag.tienda { max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
.store-settings-heading, .store-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.store-settings-heading .card-title { margin: 0; }
.store-settings-heading .btn { padding-inline: 12px; }
.store-dialog, .contador-dialog { max-width: 520px; }
/* Con un dedo (app.js pone data-motion-position="css") MotionModal deja la caja de estos diálogos al CSS. Al escribir,
   app.js les pone data-fit y fija --dlg-top (posición en pantalla) y --dlg-max (alto); al ser propiedades registradas se
   animan, y el diálogo se desliza y se encoge a la vez que sube el teclado en lugar de saltar. --vvt, lo que Safari
   desplaza el área visible, se suma sin animar: así el diálogo no se mueve cuando Safari hace su propio ajuste. */
@property --dlg-top { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }
@property --dlg-max { syntax: "<length>"; inherits: false; initial-value: 0px; }
.store-dialog[data-motion-position="css"][data-fit], .contador-dialog[data-motion-position="css"][data-fit] {
  top: calc(var(--dlg-top) + var(--vvt, 0px)); bottom: auto; margin-block: 0; max-height: var(--dlg-max);
  transition: --dlg-top .3s cubic-bezier(.2, .8, .2, 1), --dlg-max .3s cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .store-dialog[data-motion-position="css"][data-fit], .contador-dialog[data-motion-position="css"][data-fit] { transition: none; }
}
.store-dialog-heading h2 { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 24px; }
.store-dialog-heading h2 .material-symbols-outlined { color: var(--m-primary); }
/* Cierre de las ventanas: botón tonal redondo; el aspa gira un cuarto de vuelta al pasar el ratón y el botón se hunde al pulsarlo. */
.store-dialog-heading .icon-btn {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  background: var(--m-surface-container-high); color: var(--m-on-surface-variant);
  transition: background var(--transition), color var(--transition), transform .2s cubic-bezier(.2, .8, .2, 1);
}
.store-dialog-heading .icon-btn .material-symbols-outlined { font-size: 22px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.store-dialog-heading .icon-btn:hover { background: var(--m-surface-container-highest); color: var(--m-on-surface); }
.store-dialog-heading .icon-btn:active { background: var(--m-outline-variant); transform: scale(.92); }
@media (hover: hover) {
  .store-dialog-heading .icon-btn:hover .material-symbols-outlined { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .store-dialog-heading .icon-btn, .store-dialog-heading .icon-btn .material-symbols-outlined { transition: none; }
  .store-dialog-heading .icon-btn:hover .material-symbols-outlined, .store-dialog-heading .icon-btn:active { transform: none; }
}
.picker-dialog { max-width: 480px; }
.picker-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.picker-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 16px 12px 12px; border: 1px solid var(--m-outline-variant); border-radius: 20px; background: var(--m-surface); color: var(--m-on-surface); text-align: left; transition: border-color var(--transition), background var(--transition); }
.picker-item:hover { border-color: var(--m-primary); background: var(--m-surface-bright); }
.picker-item[aria-current="true"] { border-color: var(--m-primary); box-shadow: inset 0 0 0 1px var(--m-primary); }
.picker-item .store-icon { width: 44px; height: 44px; border-radius: 14px; }
.picker-item .store-icon .material-symbols-outlined { font-size: 24px; }
.picker-name { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.picker-item .store-meta { margin-top: 2px; font-size: 13px; }
.picker-check { color: var(--m-primary); }
.store-staff-fields { grid-template-columns: minmax(0, 1fr) 140px; margin-bottom: 24px; }
.optional-label { color: var(--m-on-surface-muted); font-weight: 400; font-size: 11px; }
.store-error { margin-bottom: 20px; }
@media (max-width: 599px) {
  .store-staff-fields { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .store-settings-heading { gap: 8px; }
}
.hi-dif.over, .dif-chip.over { background: var(--m-warn-container); color: var(--m-warn); }
.rf-row.diferencia.pos b { color: var(--m-warn); }
.store-card[data-store="Tienda 2"] .store-icon { background: var(--m-tertiary-container); color: var(--m-tertiary); }
.store-card:hover { transform: translateY(-2px); }
.store-arrow { display: grid; place-items: center; width: 40px; height: 40px; background: var(--m-surface-container-low); border-radius: 50%; }
#home-greeting { font-size: 15px; color: var(--m-on-surface); font-weight: 500; }
#greeting-date { margin-left: auto; }
.action-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; background: var(--m-surface); color: var(--m-primary); }
.action-mark .material-symbols-outlined { font-size: 36px; }
.action-copy p { color: var(--m-on-primary-container); font-size: 14px; }
.metric[data-result="exact"] dd:not(.metric-caption) { color: var(--m-success); }
.metric[data-result="short"] dd:not(.metric-caption) { color: var(--m-danger); }
.metric[data-result="over"] dd:not(.metric-caption) { color: var(--m-warn); }
.form-fields > .form-card:first-child { grid-column: 1 / -1; }
.form-fields > .form-card:not(:first-child) { padding: 20px; }
.form-fields > .form-card:not(:first-child) .form-grid-2 { grid-template-columns: minmax(0, 1fr); }
.form-fields > .form-card:nth-child(3) .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.counting-grid .form-card { padding: 20px; }
.firma-state { color: var(--m-on-surface-muted); font-size: 12px; }
.firma-block.signed { border-color: #b8d5bd; }
.firma-block.signed .firma-state { color: var(--m-success); }
.firma-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.signature-progress { color: var(--m-on-surface-muted); font-size: 12px; }
.signature-progress[data-complete="true"] { color: var(--m-success); }
.canvas-wrap { max-width: 340px; margin-inline: auto; }
.share-label { margin: 24px 0 10px; font-size: 12px; color: var(--m-on-surface-muted); }
.preview-content > .pdf-mock { grid-column: 1; grid-row: 2; }
.detail-actions { grid-row: 1; }
.detail-actions .btn-danger { margin-top: 20px; width: 100%; background: transparent; border-top: 1px solid var(--m-outline-variant); border-radius: 0; }
.settings-save { justify-content: flex-end; }
.tienda-edit { padding-top: 0; }
.success-card { border-radius: 20px; }

@media (min-width: 900px) and (max-width: 1199px) {
  :root { --pad-x: 24px; }
  .arqueo-form { grid-template-columns: minmax(0, 1fr); }
  .summary-column { position: static; }
  .form-actions { flex-direction: row; }
  .home-action-panel { grid-template-columns: 60px minmax(0, 1fr); gap: 16px; }
  .home-action-panel .cta-primary { grid-column: 1 / -1; justify-self: start; }
  .metrics { gap: 12px; }
  .metric { padding: 18px; }
  .signature-grid, .settings-content { grid-template-columns: minmax(0, 1fr); }
  .preview-content, .detalle-content { grid-template-columns: minmax(0, 1fr); }
  .share-panel { position: static; grid-column: 1; grid-row: 2; }
  .detail-actions { grid-row: 1; }
  .preview-content > .pdf-mock { grid-row: 3; }
  .detalle-content > .pdf-mock { grid-row: 2; }
}

@media (max-width: 899px) {
  :root { --pad-x: 24px; }
  .app-sidebar, .desktop-only { display: none; }
  .mobile-only { display: block; }
  .app-main { margin-left: 0; padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 24px); }
  .workspace-bar { min-height: 64px; }
  .workspace-label { color: var(--m-on-surface); }
  .workspace-label .mobile-only { display: none; }
  body[data-view="splash"] .workspace-label .mobile-only { display: block; }
  .workspace-section { display: none; }
  .store-switch { padding-inline: 10px; font-size: 12px; }
  .store-switch .material-symbols-outlined { font-size: 18px; }
  .connection-status { font-size: 11px; }
  .connection-tools .icon-btn { min-width: 44px; width: 44px; }
  .topbar { padding-block: 20px; gap: 10px; }
  .topbar h1, .topbar h2 { font-size: 26px; }
  .topbar-meta { font-size: 11px; }
  .mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-top: 1px solid var(--m-outline-variant); background: var(--m-surface-container-low); }
  .mobile-nav .nav-item { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: 2px 0; border-radius: var(--r-sm); font-size: 11px; text-align: center; }
  .mobile-nav .nav-item > .material-symbols-outlined { display: grid; place-items: center; min-width: 60px; height: 30px; font-size: 23px; border-radius: var(--r-full); }
  .mobile-nav .nav-item.active, .mobile-nav .nav-item[aria-current="page"] { background: transparent; }
  .mobile-nav .nav-item.active > .material-symbols-outlined, .mobile-nav .nav-item[aria-current="page"] > .material-symbols-outlined { background: var(--m-primary-container); }
  .arqueo-form { grid-template-columns: minmax(0, 1fr); }
  .summary-column { position: static; }
  .signature-grid, .settings-content { grid-template-columns: minmax(0, 1fr); }
  .resumen-card { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .preview-content, .detalle-content { grid-template-columns: minmax(0, 1fr); }
  .share-panel { position: static; grid-column: 1; grid-row: 2; }
  .preview-content > .pdf-mock { grid-row: 3; }
  .detail-actions { grid-row: 1; }
  .detalle-content > .pdf-mock { grid-row: 2; }
  .toast { left: 50%; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 16px); width: max-content; }
  body[data-view="arqueo"] .mobile-nav, body[data-view="firmas"] .mobile-nav { display: none; }
  body[data-view="arqueo"] .app-main, body[data-view="firmas"] .app-main { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  .form-actions, .firma-actions-row { position: fixed; inset: auto 0 0; z-index: 60; margin: 0; display: flex; flex-direction: row; gap: 10px; padding: 12px var(--pad-x) calc(12px + env(safe-area-inset-bottom)); background: var(--m-surface); border-top: 1px solid var(--m-outline-variant); box-shadow: 0 -4px 20px rgb(55 36 22 / 4%); }
  .form-actions .btn, .firma-actions-row .btn { min-height: 52px; }
  .form-actions .btn-ghost, .firma-actions-row .btn-ghost { width: auto; flex: 0 0 auto; padding-inline: 18px; border: 0; }
  .form-actions .btn-primary, .firma-actions-row .btn-primary { flex: 1; width: auto; }
  body:has(.sig-modal[open]) .toast { bottom: calc(104px + env(safe-area-inset-bottom)); }
  /* Con el teclado abierto, lo fijo queda tapado o flotando a media pantalla: la barra de acciones pasa al final
     del formulario y la cabecera deja de ser pegajosa para no restar altura útil. */
  html[data-keyboard] .form-actions, html[data-keyboard] .firma-actions-row { position: static; box-shadow: none; }
  html[data-keyboard] .topbar { position: static; }
}

@media (max-width: 599px) {
  :root { --pad-x: 16px; }
  .topbar { grid-template-columns: 44px minmax(0, 1fr) auto; padding-block: 18px; }
  .topbar .back-btn { min-width: 44px; width: 44px; height: 44px; min-height: 44px; }
  .topbar h1, .topbar h2 { font-size: 24px; }
  .topbar-root { grid-template-columns: minmax(0, 1fr) 48px; padding-top: 28px; }
  .topbar-root h1 { font-size: 30px; }
  .topbar-root .btn { width: 48px; padding: 0; }
  .topbar-root .btn > span:last-child, .topbar-create > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .topbar-create { padding: 0; width: 48px; }
  .topbar-meta { display: none; }
  .page-description { font-size: 15px; margin-bottom: 24px; }
  .store-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .store-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) 36px; align-items: center; gap: 16px; padding: 24px 20px; }
  .store-card-top { display: contents; }
  .store-icon { width: 56px; height: 56px; border-radius: 18px; }
  .store-number { display: none; }
  .store-info { padding: 0; }
  .store-name { font-size: 20px; }
  .store-meta { font-size: 12px; margin-top: 4px; }
  .store-card-bottom { display: contents; }
  .store-card-bottom > span:first-child { display: none; }
  .store-arrow { width: 36px; height: 36px; font-size: 20px; }
  .greeting { gap: 4px 12px; padding-bottom: 20px; }
  #greeting-date { font-size: 12px; text-transform: capitalize; }
  .home-action-panel { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 22px; margin-bottom: 16px; border-radius: 24px; }
  .action-mark { width: 48px; height: 48px; border-radius: 16px; }
  .action-mark .material-symbols-outlined { font-size: 28px; }
  .home-action-panel h3 { font-size: 19px; line-height: 1.3; }
  .action-copy p { font-size: 13px; }
  .home-action-panel .cta-primary { grid-column: 1 / -1; width: 100%; }
  .metrics { grid-template-columns: .7fr 1fr 1fr; gap: 8px; margin-bottom: 24px; }
  .metric { padding: 16px 10px; border-radius: 16px; }
  .metric dt { font-size: 11px; line-height: 1.4; min-height: 30px; }
  .metric dd:not(.metric-caption) { font-size: 18px; line-height: 1.3; margin: 4px 0 8px; }
  .metric .metric-caption { font-size: 10px; }
  .section-head h3 { font-size: 17px; }
  .historial-item:has(> .hi-main) { grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; padding: 14px 12px; border-radius: 16px; }
  .hi-main { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .hi-icon { display: none; }
  .hi-tienda, .hi-total { font-size: 14px; }
  .hi-meta { font-size: 11px; }
  .hi-dif { font-size: 10px; }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; border-radius: 20px; }
  .filter-bar .btn-link { grid-column: 1 / -1; justify-self: end; padding-block: 4px; min-height: 44px; }
  .filter-bar .form-row input, .filter-bar .form-row select { padding-inline: 10px; font-size: 14px; }
  .arqueo-form, .form-fields, .firmas-content, .signature-grid, .counting-grid, .settings-content { gap: 16px; }
  .form-fields { grid-template-columns: minmax(0, 1fr); }
  .form-card, .firma-block, .form-fields > .form-card:not(:first-child), .counting-grid .form-card { padding: 20px; border-radius: 20px; }
  .form-fields > .form-card:not(:first-child) .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-fields > .form-card:first-child .form-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .form-fields > .form-card:first-child .form-row:first-child { flex-direction: row; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--m-outline-variant); }
  #arqueo-fecha { width: auto; max-width: 78%; min-height: 32px; font-size: 12px; text-align: right; border: 0; background: transparent; padding: 0; }
  .card-title { margin-bottom: 16px; font-size: 15px; }
  .card-title .material-symbols-outlined { font-size: 20px; }
  .form-grid-2 { gap: 14px; }
  .counting-grid { grid-template-columns: minmax(0, 1fr); }
  .form-row label { font-size: 12px; }
  .form-row input { padding: 12px; }
  .field-help { font-size: 11px; }
  .workflow-steps li { gap: 6px; font-size: 12px; min-height: 38px; }
  .workflow-steps li > span { width: 24px; height: 24px; }
  .signature-progress { margin-left: auto; }
  .resumen-card { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px; gap: 16px 12px; }
  .resumen-card .ri:nth-child(2) { grid-column: span 2; }
  .ri > b { font-size: 13px; }
  .ri > span { font-size: 11px; }
  .firma-head { gap: 8px; margin-bottom: 16px; }
  .firma-head h3 { font-size: 14px; }
  .firma-name-row { grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; }
  .firma-name-row input { font-size: 15px; padding-inline: 10px; }
  .firma-tag { font-size: 10px; }
  .sig-modal-header { padding: 8px 12px; gap: 8px; }
  .sig-modal-header h2 { font-size: 16px; }
  .sig-modal-header .btn-link { padding-inline: 10px; font-size: 12px; }
  .sig-modal-header .btn-link .material-symbols-outlined { display: none; }
  .sig-modal-instructions { padding: 12px 20px; font-size: 12px; }
  .sig-modal-canvas-wrap { width: min(calc(100% - 32px), calc(150dvh - 324px)); }
  .sig-modal-actions { gap: 10px; padding: 16px; }
  .sig-modal-actions .btn { flex: 1; min-width: 0; padding-inline: 14px; }
  .success-card { padding: 18px; gap: 12px; }
  .success-card p { font-size: 12px; }
  .pdf-mock { padding: 20px; }
  .pdf-mock h2 { font-size: 18px; }
  .pdf-tot .row { gap: 12px; font-size: 12px; }
  .pdf-tot .row.big { font-size: 14px; }
  .pdf-sigs { gap: 16px; }
  .pdf-sig { font-size: 11px; }
  .pdf-sig img, .sig-empty { height: 84px; min-height: 84px; }
  .share-panel { padding: 20px; border-radius: 20px; }
  .encargados-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-save { align-items: stretch; }
  .settings-save .btn { width: 100%; }
  .danger-zone { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .danger-zone > .btn { grid-column: 1; grid-row: auto; }
  .confirm-dialog { width: calc(100% - 40px); padding: 24px; }
  .confirm-title { font-size: 22px; }
  .confirm-actions .btn { flex: 1; padding-inline: 14px; }
  .empty { padding: 32px 20px; }
}

@media (max-width: 359px) {
  :root { --pad-x: 12px; }
  .home-action-panel { padding: 18px; gap: 12px; }
  .home-action-panel h3 { font-size: 18px; }
  .metric { padding-inline: 8px; }
  .metric dd:not(.metric-caption) { font-size: 16px; }
  .form-card, .firma-block, .pdf-mock, .form-fields > .form-card:not(:first-child), .counting-grid .form-card { padding: 16px; }
  .form-actions, .firma-actions-row { gap: 4px; }
  .form-actions .btn-ghost, .firma-actions-row .btn-ghost { padding-inline: 12px; }
  .form-actions .btn-primary { padding-inline: 12px; }
}

/* Teléfono (ancho de hasta 599 px, o apaisado y bajo): los formularios de los diálogos van a pantalla completa. El propio
   diálogo hace scroll; la cabecera y las acciones quedan pegadas arriba y abajo. Con el teclado abierto app.js le da el
   alto visible (data-fit), así que «Crear» sigue sobre el teclado. */
@media (max-width: 599px), (pointer: coarse) and (max-height: 600px) {
  .store-dialog, .contador-dialog {
    --sheet-pad: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
    inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0 var(--sheet-pad);
    border-radius: 0; box-shadow: none;
  }
  .store-dialog form, .contador-dialog form { display: flex; flex-direction: column; min-height: 100%; }
  .store-dialog .store-dialog-heading, .contador-dialog .store-dialog-heading {
    position: sticky; top: 0; z-index: 2; margin: 0 calc(-1 * var(--sheet-pad)) 20px;
    padding: calc(12px + env(safe-area-inset-top)) var(--sheet-pad) 12px;
    border-bottom: 1px solid var(--m-outline-variant); background: var(--m-surface-container-low);
  }
  .store-dialog .confirm-actions, .contador-dialog .confirm-actions {
    position: sticky; bottom: 0; z-index: 2; margin: auto calc(-1 * var(--sheet-pad)) 0;
    padding: 12px var(--sheet-pad) calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--m-outline-variant); background: var(--m-surface-container-low);
  }
  .store-dialog .confirm-actions .btn, .contador-dialog .confirm-actions .btn { flex: 1; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .sig-modal-header { padding-block: 8px; }
  .sig-modal-instructions { display: none; }
  .sig-modal-canvas-wrap { width: min(calc(100% - 48px), calc(150dvh - 240px), 960px); }
  .sig-modal-actions { padding-block: 8px; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .loading-meter > span { animation: none; width: 100%; opacity: .7; }
}
@media (forced-colors: active) {
  .nav-item.active, .nav-item[aria-current="page"], .btn-primary { outline: 2px solid ButtonText; }
  .canvas-wrap, .sig-modal-canvas-wrap { border: 2px solid CanvasText; }
}
@media print {
  .app-sidebar, .workspace-bar, .topbar, .mobile-nav, .toast, .app-loader, .share-panel, .share-grid, .btn { display: none !important; }
  .app-main { margin: 0; padding: 0; }
  .preview-content, .detalle-content { display: block; }
  .pdf-mock, .resumen-card { box-shadow: none; border: 0; padding: 12px; }
  body { background: #fff; color: #000; }
}