/* Guiado: one visual language for cash, accounting and system administration.
   Shared behavior, focus, reduced motion and signature capture remain in styles.css. */
:root { --ui-radius: 20px; --pad-x: 32px; }
body { font-size: 14px; }
h1, h2, h3, h4, b, strong { font-weight: 500; }
.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 350; }
.app-sidebar { background: var(--m-surface); padding: 26px 18px 20px; }
.sidebar-brand { gap: 10px; padding-inline: 5px; }
.sidebar-brand img { width: 32px; height: 36px; flex-basis: 32px; }
.sidebar-brand b { font-size: 18px; font-weight: 500; }
.sidebar-brand small { display: none; }
.sidebar-create { margin: 28px 0 0; border: 1px solid var(--m-outline-variant); background: var(--m-surface); color: var(--m-on-surface); }
body[data-role="store"] .sidebar-create { display: none; }
.desktop-nav { margin-top: 24px; gap: 7px; }
.nav-item { min-height: 46px; border-radius: var(--ui-radius); font-size: 13px; font-weight: 400; padding: 11px 12px; }
.nav-item.active, .nav-item[aria-current="page"] { background: color-mix(in srgb, var(--m-primary) 8%, var(--m-surface)); color: var(--m-on-primary-container); font-weight: 500; }
.nav-item.active .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400; }
.nav-item .material-symbols-outlined { font-size: 21px; }
.sidebar-account { grid-template-columns: 30px minmax(0, 1fr) 36px; gap: 6px; padding: 18px 0 0; border: 0; }
.sidebar-account .icon-btn { width: 36px; min-width: 36px; }
.account-copy b { font-size: 12px; }
.account-copy > span { font-size: 11px; }
.avatar { width: 32px; height: 32px; font-size: 11px; font-weight: 500; background: color-mix(in srgb, var(--m-primary) 8%, var(--m-surface)); color: var(--m-on-primary-container); }
.workspace-bar { min-height: 80px; }
.workspace-section { font-size: 12px; }
.workspace-label .mobile-only { display: none; }
.store-switch { border: 0; background: transparent; padding-inline: 0; font-size: 13px; }
.store-switch:hover { background: transparent; }
.topbar { position: static; padding: 30px 0 24px; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
.topbar:has(> .back-btn) { grid-template-columns: 42px minmax(0, 1fr) auto; }
.topbar > .back-btn { min-width: 40px; width: 40px; min-height: 40px; height: 40px; border-color: transparent; background: transparent; }
.topbar h1, .topbar h2 { font-size: 27px; font-weight: 500; line-height: 1.25; letter-spacing: -.6px; }
.topbar-meta { display: none; }
.page-context { margin-top: 8px; color: var(--m-on-surface-muted); font-size: 12px; line-height: 1.6; }
.btn, .link-btn, .btn-link, .picker-trigger { border-radius: var(--ui-radius); font-weight: 500; }
.btn { min-height: 46px; font-size: 13px; padding: 11px 18px; box-shadow: none; }
.btn-primary, .btn-primary:hover:not(:disabled) { box-shadow: none; }
.btn-outlined { color: var(--m-on-surface); border-color: var(--m-outline-variant); background: var(--m-surface); }
.btn-outlined:hover { background: var(--m-surface-container-low); }
.form-card, .firma-block, .store-card, .resumen-card, .pdf-mock, .confirm-dialog, .field-menu, .date-panel, .color-picker, .ocr-dialog { border-radius: var(--ui-radius); }
.empty, .filter-bar, .share-panel, .pdf-info, .sig-empty { border-radius: var(--ui-radius); }
.historial-item:has(> .hi-main) { border-radius: var(--ui-radius); }
.form-card { padding: 24px; box-shadow: none; }
.form-card .card-title { font-size: 17px; font-weight: 500; gap: 8px; }
.card-title { flex-wrap: wrap; }
.card-title > .material-symbols-outlined { display: none; }
.form-row label, .denom-label { font-weight: 400; font-size: 12px; color: var(--m-on-surface-muted); }
.form-row input, .form-row select, .form-row textarea, .tienda-edit input, .firma-name-row input, .denom-input input, .picker-trigger, .ocr-field-row > input[type="number"] { min-height: 48px; border-radius: var(--ui-radius); border-color: var(--m-outline-variant); }
.form-row input[readonly] { background: var(--m-surface); }
.form-row input:hover, .denom-input input:hover, .picker-trigger:hover { border-color: var(--m-outline); }
.form-row input:focus, .denom-input input:focus { border-color: var(--m-primary); }
.form-row input[aria-invalid="true"], .denom-input input[aria-invalid="true"] { border-color: var(--m-danger); }
.field-help, .hint { line-height: 1.6; }
.section-head { gap: 12px; }
.section-head .card-title { margin: 0; }
.workflow-intro { grid-column: 1 / -1; margin: 0; gap: 12px; }
.workflow-steps { width: auto; gap: 20px; background: transparent; padding: 0; border-radius: 0; }
.workflow-steps li { min-height: 30px; padding: 0; background: transparent; border-radius: 0; font-size: 12px; }
.workflow-steps li[aria-current="step"] { box-shadow: none; background: transparent; color: var(--m-on-surface); }
.workflow-steps li > span { width: 23px; height: 23px; font-size: 11px; }
#view-arqueo .workflow-steps { display: none; }
#view-arqueo .workflow-intro { display: none; }
#discard-draft { margin-left: auto; min-height: 32px; font-size: 12px; padding: 4px 0; }
.arqueo-form { grid-template-columns: minmax(0, 1fr) 250px; gap: 18px 20px; }
.form-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.form-fields > .form-card:not(:first-child) { padding: 24px; }
.responsible-details { grid-column: 1 / -1; color: var(--m-on-surface-muted); }
.responsible-details summary { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 32px; cursor: pointer; list-style: none; font-size: 12px; }
.responsible-details summary::-webkit-details-marker { display: none; }
.responsible-details summary .material-symbols-outlined { font-size: 18px; }
.responsible-details[open] summary { margin-bottom: 14px; }
.responsible-details[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.movement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.movement-grid .form-row { margin: 0; }
.movement-grid .field-help { display: none; }
#egresos-help { display: block; margin-top: 12px; }
.expense-breakdown { margin-top: 12px; border: 0; padding: 0; }
.expense-breakdown summary { font-size: 12px; color: var(--m-on-surface-muted); min-height: 40px; }
.expense-breakdown .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.expense-status { margin-top: 8px; }
.expense-status:empty { display: none; }
.cash-count-card .section-head { margin-bottom: 20px; }
.cash-count-card .counting-grid { gap: 28px; }
.count-panel { min-width: 0; }
.count-panel h4 { margin: 0 0 16px; font-size: 14px; }
.count-tabs { display: none; }
.denom-grid { gap: 0; }
.denom-heading, .denom-row { grid-template-columns: minmax(65px, 1fr) 60px minmax(67px, 1fr); gap: 6px; }
.denom-heading { padding: 0 0 10px; }
.denom-heading > :nth-child(2) { text-align: center; }
.denom-row, .denom-row.filled { background: transparent; border: 0; border-top: 1px solid var(--m-outline-variant); border-radius: 0; padding: 9px 0; }
.denom-label { font-size: 12px; color: var(--m-on-surface); }
.denom-input input { min-height: 40px; padding: 7px 6px; width: 56px; font-size: 15px; }
.denom-input input { appearance: textfield; -moz-appearance: textfield; }
.denom-input input::-webkit-inner-spin-button, .denom-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.denom-row.filled .denom-sub { color: var(--m-on-surface); }
.count-totals { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; margin-top: 18px; border-top: 1px solid var(--m-outline-variant); font-size: 12px; color: var(--m-on-surface-muted); font-variant-numeric: tabular-nums; }
.count-totals b { font-weight: 500; }
.summary-column { position: sticky; top: 24px; }
.summary-column .form-card { padding: 22px; }
.summary-column .card-title { font-size: 15px; margin-bottom: 20px; }
.summary-column .rf-row { padding: 9px 0; border: 0; gap: 10px; }
.summary-column .rf-row > span { color: var(--m-on-surface-muted); font-size: 12px; font-weight: 400; }
.summary-column .rf-row b { font-size: 13px; font-weight: 500; }
.summary-column .rf-row.counted { flex-direction: column; gap: 4px; padding: 0 0 16px; }
.summary-column .counted b { font-size: 29px; letter-spacing: -.5px; }
.summary-column .rf-row.total { flex-direction: row; background: transparent; margin: 0; padding: 9px 0 18px; border-radius: 0; }
.summary-column .rf-row.total b { color: var(--m-on-surface); font-size: 13px; }
.summary-column .rf-row.diferencia { border-top: 1px solid var(--m-outline-variant); padding-top: 18px; margin-top: 0; }
.summary-column .rf-row.diferencia b { font-size: 19px; }
.dif-chip { padding: 0; background: transparent; font-size: 12px; margin-top: 4px; font-weight: 400; }
.dif-chip .material-symbols-outlined { font-size: 17px; }
.dif-chip.ok { color: var(--m-success); background: transparent; }
.dif-chip.over { color: var(--m-warn); background: transparent; }
.dif-chip.bad { color: var(--m-danger); background: transparent; }
.dif-chip.zero { background: transparent; color: var(--m-on-surface-muted); }
.form-actions { margin-top: 22px; gap: 6px; }
.form-actions .btn-ghost { border-color: transparent; font-size: 12px; padding: 7px; min-height: 36px; }
.summary-save-note { margin: 10px 0 0; font-size: 11px; }
.submission-recipient { padding: 0; background: transparent; border-radius: 0; font-size: 12px; }
.ocr-entry { border: 0; padding: 0; background: transparent; }
.ocr-entry .ocr-entry-copy { display: none; }
.ocr-entry .btn { white-space: nowrap; }
.topbar > .ocr-entry { grid-column: auto; }
.store-card { box-shadow: none; background: var(--m-surface); border: 1px solid var(--m-outline-variant); }
.store-card:hover { box-shadow: var(--el-1); }
.home-action-panel { background: var(--m-surface); border: 1px solid var(--m-outline-variant); border-radius: var(--ui-radius); box-shadow: none; }
.home-action-panel .action-mark { background: var(--m-surface-container-low); color: var(--m-on-surface-muted); }
.home-action-panel h3 { color: var(--m-on-surface); }
.action-copy p { color: var(--m-on-surface-muted); }
.metrics { gap: 0; margin-block: 28px; }
.metric { border-radius: 0; border: 0; border-right: 1px solid var(--m-outline-variant); background: transparent; padding: 0 24px; }
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; }
.metric dd { font-weight: 500; }
.metric dd:not(.metric-caption), .hi-tienda, .hi-total { font-weight: 500; }
.recent-panel, .historial-item, .success-card { border-radius: var(--ui-radius); box-shadow: none; }
.historial-item { background: var(--m-surface); }
.historial-item .hi-totales { color: var(--m-on-surface-muted); }
.status-badge, .status-filter, .filter-chip, .membership-option, .store-chip, .accent-swatch, .accent-example, .success-card { border-radius: var(--ui-radius); }
.status-badge { font-weight: 400; }
.status-badge, .hi-dif { font-size: 12px; }
.pdf-mock { box-shadow: none; }
.share-panel { top: 24px; }
.pdf-info { background: var(--m-surface-container-low); }
.pdf-details dt, .pdf-responsible dt { font-size: 11px; letter-spacing: 0; text-transform: none; }
.pdf-mock > h3 { margin: 24px 0 12px; font-size: 17px; }
.pdf-mock > .pdf-info + h3 { margin-top: 0; }
.pdf-tot { margin-top: 0; }
.pdf-tot .row.big { border-color: var(--m-outline-variant); font-weight: 500; }
.pdf-sig > small { font-size: 12px; }
.share-panel .share-btn { border-radius: var(--ui-radius); font-size: 12px; }
.detail-actions > .status-badge { margin-top: 0; }
.detail-actions > .status-badge.approved { margin-bottom: 18px; }
.confirm-dialog { background: var(--m-surface); }
.toast { left: calc(50% + var(--sidebar-width) / 2); }
.field-menu, .date-panel, .color-picker { box-shadow: 0 12px 38px rgb(30 40 30 / 12%); border-color: var(--m-outline-variant); }
.field-option { border-radius: var(--ui-radius); }
.field-option[aria-checked="true"] { background: color-mix(in srgb, var(--m-primary) 8%, var(--m-surface)); color: var(--m-on-primary-container); }
.account-content { gap: 20px; }
#users-list { display: grid; gap: 20px; }
.account-person { margin: 0; border-radius: 0; background: transparent; padding: 20px 0; border-top: 1px solid var(--m-outline-variant); }
.account-person + .account-person { margin-top: 0; }
.user-group + .user-group { margin-top: 22px; }
.user-group > .account-person { border-top: 0; }
.user-children { padding-left: 36px; background: var(--m-surface-container-low); border-radius: var(--ui-radius); padding-right: 18px; }
.user-children .account-person:first-child { border-top: 0; }
.user-children .account-person:last-child { margin-bottom: 0; }
.user-children:empty { display: none; }
.users-help { color: var(--m-on-surface-muted); }
.users-help summary { cursor: pointer; font-size: 13px; min-height: 40px; }
.users-flow { gap: 20px; padding: 10px 0; }
.users-flow li { border: 0; background: transparent; padding: 0; border-radius: 0; }
.settings-content, .signature-grid { gap: 20px; }
.settings-content .form-card, .account-layout .form-card { border-radius: var(--ui-radius); }
.color-picker, .color-spectrum, .ocr-dropzone, .ocr-result, .ocr-notice, .ocr-acknowledge, .ocr-warnings, .ocr-error, .ocr-group-note, .ocr-field-row.needs-review { border-radius: var(--ui-radius); }
.ocr-result { background: var(--m-surface-container-low); }
.ocr-heading, .ocr-dialog-actions { background: var(--m-surface); }
.confirm-dialog:not(.sig-modal) { border-color: var(--m-outline-variant); }
.auth-content .form-card { border-radius: var(--ui-radius); }
.auth-simple { width: min(100%, 420px); gap: 26px; }
.auth-simple .auth-brand { gap: 10px; }
.auth-simple .auth-brand b { font-size: 21px; font-weight: 500; }
.auth-simple .form-card { padding: 32px; }
.auth-simple h1 { font-size: 25px; letter-spacing: -.5px; line-height: 1.3; }
.auth-simple .auth-description { margin-bottom: 26px; }
.auth-simple .auth-help { margin: 20px 0; font-size: 12px; }
.auth-simple .form-row { margin-bottom: 18px; }
.auth-simple .form-row label { color: var(--m-on-surface-variant); font-size: 13px; }
.auth-simple .auth-foot { font-size: 12px; }
.auth-simple .btn-block { margin-top: 14px; }
.password-control { position: relative; }
.password-control input { padding-right: 78px; }
.password-reveal { position: absolute; right: 8px; bottom: 5px; min-height: 38px; padding: 6px 10px; border: 0; border-radius: var(--ui-radius); color: var(--m-on-surface-muted); background: transparent; font-size: 12px; }
.password-reveal:hover { color: var(--m-primary); background: var(--m-surface-container-low); }
.credential-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: -10px 0 10px; }
.credential-actions .btn { min-height: 40px; padding: 6px 0; font-size: 12px; }
.identity-help { margin: -8px 0 18px; }
#create-password-fields > .hint { margin-bottom: 20px; }
#reset-password-fields .btn-outlined { margin: 4px 0 12px; }
@media (max-width: 420px) { .auth-screen { padding: 28px 18px; } .auth-simple .form-card { padding: 24px; } .auth-simple h1 { font-size: 23px; } }
@media (max-width: 1199px) {
  :root { --sidebar-width: 188px; --pad-x: 24px; }
  .arqueo-form { grid-template-columns: minmax(0, 1fr); }
  .summary-column { position: static; }
  .summary-column .form-actions { flex-direction: column-reverse; }
}
@media (max-width: 899px) {
  .app-main { margin-left: 0; }
  .workspace-bar { min-height: 68px; }
  .mobile-nav { gap: 4px; padding-inline: 12px; background: var(--m-surface); }
  .mobile-nav .nav-item { flex: 1; min-width: 0; padding: 8px 3px; font-size: 11px; }
  .mobile-nav .nav-item.active, .mobile-nav .nav-item[aria-current="page"] { background: transparent; color: var(--m-on-primary-container); }
  .mobile-nav .nav-item .material-symbols-outlined { background: transparent; padding: 0; border-radius: 0; }
  .mobile-nav .nav-item.active > .material-symbols-outlined, .mobile-nav .nav-item[aria-current="page"] > .material-symbols-outlined { background: transparent; }
  .mobile-nav [data-go="home"] { display: none; }
  .topbar { padding-top: 26px; }
  .toast { left: 50%; }
}
@media (max-width: 599px) {
  :root { --pad-x: 18px; }
  .topbar { gap: 18px; grid-template-columns: minmax(0, 1fr); padding-bottom: 20px; }
  .topbar:has(> .back-btn) { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .topbar > .back-btn { min-width: 44px; width: 44px; min-height: 44px; height: 44px; }
  .topbar-root .btn { width: fit-content; min-width: 44px; padding: 11px 18px; }
  .topbar-root .btn > span:last-child { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .topbar .ocr-entry { grid-column: 1 / -1; margin-top: 8px; }
  .topbar h1, .topbar h2 { font-size: 25px; }
  .topbar .ocr-entry .btn { width: 100%; }
  .workspace-label { min-width: 0; }
  .workspace-section { display: none; }
  .connection-status { font-size: 11px; }
  .connection-tools #reload-data { min-width: 36px; width: 36px; }
  .form-card, .form-fields > .form-card:not(:first-child), .firma-block, .summary-column .form-card { padding: 20px; border-radius: var(--ui-radius); }
  .form-fields { gap: 18px; }
  #profile-form .form-grid-2, .contador-edit .form-grid-2, .store-dialog .store-staff-fields { grid-template-columns: minmax(0, 1fr); }
  .form-fields .form-row { flex-direction: column; align-items: stretch; }
  .form-fields .form-row:first-child { border: 0; padding-bottom: 0; }
  #view-arqueo .movement-grid .form-row { flex-direction: column; align-items: stretch; justify-content: flex-start; padding-bottom: 0; border-bottom: 0; }
  .movement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .movement-grid .form-row:last-child { grid-column: 1 / -1; }
  .responsible-details .form-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .cash-count-card .section-head { align-items: center; }
  .cash-count-card .section-head .field-help { font-size: 11px; white-space: nowrap; }
  .counting-grid { grid-template-columns: minmax(0, 1fr); }
  .count-tabs { display: flex; gap: 4px; border-radius: var(--ui-radius); padding: 4px; background: var(--m-surface-container-low); margin-bottom: 20px; }
  .count-tabs button { flex: 1; min-height: 44px; border: 0; border-radius: var(--ui-radius); background: transparent; font-size: 13px; }
  .count-tabs button[aria-selected="true"] { color: var(--m-primary); background: var(--m-surface); }
  .count-panel h4 { display: none; }
  .denom-row { padding: 9px 0; }
  .denom-input { justify-content: center; }
  .denom-input input { min-height: 44px; width: 60px; }
  .denom-label { font-size: 13px; }
  .denom-heading, .denom-row { grid-template-columns: minmax(68px, 1fr) 64px minmax(68px, 1fr); }
  .summary-column .rf-row.counted { flex-direction: row; align-items: baseline; }
  .summary-column .counted b { font-size: 26px; }
  .summary-column .rf-row { gap: 14px; }
  .summary-column .rf-row.diferencia { flex-wrap: nowrap; }
  .summary-column .form-actions { margin-top: 20px; }
  body[data-view="arqueo"] .summary-column .form-actions { position: static; inset: auto; width: auto; padding: 0; border: 0; background: transparent; box-shadow: none; z-index: auto; }
  body[data-view="arqueo"] .app-main { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 24px); }
  body[data-view="arqueo"] .mobile-nav { display: grid; }
  .summary-column .form-actions .btn { width: 100%; }
  .summary-column .form-actions .btn-ghost { min-height: 44px; }
  .account-content > .section-head { align-items: stretch; flex-direction: column; }
  .account-person { flex-wrap: wrap; gap: 14px; }
  .account-person > .account-actions { padding-left: 44px; }
  .user-children { padding-left: 14px; padding-right: 12px; }
  .person-heading { align-items: flex-start; }
  .metrics { margin-block: 24px; }
  .metric { padding-inline: 12px; min-width: 0; }
  .metric dd:not(.metric-caption) { font-size: 23px; }
  .metric .metric-caption, .metric dt { font-size: 12px; }
  .hi-meta, .hi-dif { font-size: 12px; }
  #greeting-date { text-transform: none; }
  #greeting-date::first-letter { text-transform: uppercase; }
  .settings-save { justify-content: stretch; }
  .settings-save .btn { flex: 1; }
  .account-layout > .settings-save, .settings-account .account-actions { flex-direction: column; align-items: stretch; }
  .account-layout > .settings-save .btn, .settings-account .account-actions .btn { width: 100%; }
  .password-reveal { min-height: 44px; bottom: 2px; }
  .ocr-field-row { grid-template-columns: 24px minmax(0, 1fr) 96px; }
  .ocr-heading { background: var(--m-surface); }
  .ocr-dialog-actions { background: var(--m-surface); }
}
@media (max-width: 599px), (pointer: coarse) and (max-height: 600px) {
  .store-dialog, .contador-dialog, .ocr-dialog, .ocr-dialog:not(.has-review) { border-radius: 0; }
}
@media (pointer: coarse) {
  .denom-input input, .color-picker-close { min-height: 44px; }
  .color-picker-close { width: 44px; height: 44px; }
  .color-fine summary, .password-settings summary, .users-help summary, .responsible-details summary, #discard-draft { min-height: 44px; }
  .password-reveal { min-height: 44px; bottom: 2px; }
}
@media (max-width: 359px) {
  :root { --pad-x: 14px; }
  .form-card, .form-fields > .form-card:not(:first-child), .summary-column .form-card { padding: 16px; }
  .cash-count-card .section-head { gap: 6px; }
  .cash-count-card .card-title { font-size: 16px; }
  .denom-heading, .denom-row { grid-template-columns: minmax(60px, 1fr) 60px minmax(60px, 1fr); gap: 4px; }
}
@media print { .count-tabs, .responsible-details { display: none; } .count-panel[hidden] { display: block !important; } }