/* Capa final de layout: jerarquia, densidad y uso consistente del espacio. */
:root {
  --layout-width: 1240px;
  --layout-gap: 14px;
  --layout-radius: 15px;
  --layout-line: rgba(52, 68, 57, .12);
  --layout-shadow: 0 9px 28px rgba(48, 60, 50, .055);
}

html { scroll-padding-top: 76px; }
body { font-size: 14px; }

body > header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 58px;
  padding: 5px max(18px, calc((100vw - var(--layout-width)) / 2));
  background: rgba(255, 253, 248, .96);
  box-shadow: 0 1px 0 var(--layout-line), 0 8px 24px rgba(48, 60, 50, .04);
}

body > header > div { gap: 9px; }
body > header .brand-logo { width: 78px; max-height: 48px; }
body > header nav { gap: 2px; padding: 3px; border: 0; background: #f1f2ec; }
body > header nav button { min-height: 34px; padding: 6px 11px; font-size: 12px; }
.global-search-open { min-height: 32px; padding: 5px 8px; border-color: transparent; background: transparent; box-shadow: none; }

main {
  width: min(var(--layout-width), calc(100vw - 32px));
  margin: 18px auto 78px;
}

.view.active {
  display: grid;
  align-content: start;
  gap: var(--layout-gap);
}

.view.active > * { min-width: 0; margin-block: 0; }

.view > .title-row {
  min-height: 42px;
  margin: 0;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--layout-line);
}

.view > .title-row > div:first-child { display: flex; align-items: baseline; gap: 9px; }
.view > .title-row .eyebrow { display: block; margin: 0; font-size: 9px; }
.view > .title-row h2 { margin: 0; font-size: clamp(22px, 2.3vw, 29px); letter-spacing: -.025em; }
.title-actions { margin-left: auto; }
.title-actions select, .title-actions input { min-height: 34px; }

.card,
details.card,
.home-card,
.visual-card,
.visual-section-card {
  border-color: var(--layout-line);
  border-radius: var(--layout-radius);
  background: rgba(255, 253, 248, .96);
  box-shadow: var(--layout-shadow);
}

.card,
details.card,
form.card { padding: 16px; }
.card:hover { border-color: rgba(39, 125, 128, .2); box-shadow: var(--layout-shadow); transform: none; }

.section-head { min-height: 34px; margin: 0 0 12px; }
.section-head h3, .card > h3 { margin: 0; font-size: 16px; letter-spacing: -.012em; }
.section-head .eyebrow { margin-bottom: 2px; font-size: 9px; }
.section-head p.muted, .card > p.muted { margin-top: 4px; }

.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-gap); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--layout-gap); }

.home-grid { gap: var(--layout-gap); }
.home-card { padding: 16px; }
.home-card h3 { font-size: 18px; }
.daily-focus-card { grid-column: span 7; }
.game-card { grid-column: span 5; }
.home-mps-card, .public-sales-card, .work-hours-card { grid-column: span 6; }
.home-metrics { gap: 7px; }
.home-metrics span { min-height: 50px; padding: 8px 10px; }

.operation-hub { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.operation-hub button { min-height: 66px; padding: 11px 12px; }
.operation-hub button span { font-size: 15px; }

form.card,
#saleForm,
#purchaseForm,
#mpsLoadForm { width: 100%; max-width: none; }

.form { gap: 10px 12px; margin: 0; }
.form-intro { padding-bottom: 10px; }
.form label, .mini-form label { font-size: 10px; }
input, select, textarea { min-height: 38px; padding: 8px 10px; }
button, .file-btn { min-height: 36px; padding: 7px 11px; }
.form > button[type="submit"] { justify-self: start; min-width: 190px; }
.form-actions { min-height: 38px; }

.workspace-tabs,
.mps-section-nav {
  display: inline-flex;
  width: fit-content;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--layout-line);
  border-radius: 10px;
  background: #eeefe9;
}

.workspace-tabs button,
.mps-section-nav button { min-height: 31px; border: 0; box-shadow: none; }
.workspace-tabs button.active,
.mps-section-nav button.active { box-shadow: 0 2px 7px rgba(45, 58, 48, .10); }

details.card { overflow: clip; }
details.card > summary { margin: -16px; padding: 14px 16px; }
details.card[open] > summary { margin-bottom: 14px; border-bottom: 1px solid var(--layout-line); }
details.card > :not(summary) { max-width: 100%; }

.table-wrap,
.mps-load-table-wrap,
.mps-purchase-table-wrap,
.price-adjustment-table-wrap {
  max-width: 100%;
  overflow: auto;
  border-color: var(--layout-line);
  border-radius: 10px;
}

table { font-size: 11px; }
table thead { position: sticky; top: 0; z-index: 2; }
table thead th, th { padding: 7px 8px; background: #f0f1eb; font-size: 9px; }
td { padding: 6px 8px; line-height: 1.25; }
tbody tr:nth-child(even) { background: rgba(244, 245, 239, .46); }
tbody tr:hover, tbody tr:focus-within { background: #edf4f1; }

.product-state-card { overflow: hidden; }
.product-state-card .table-wrap { max-height: min(64vh, 690px); }
.product-state-table { min-width: 980px; }
.product-state-table td:first-child, .product-state-table th:first-child { position: sticky; left: 0; z-index: 1; background: inherit; }
.product-state-table th:first-child { z-index: 3; background: #f0f1eb; }

#inventory.active { gap: var(--layout-gap); }
#inventory > .title-row { order: 0; }
#inventory > #stockVisualInsights { order: 1; }
#inventory > .product-state-card { order: 2; }
#inventory > .bag-stock-card { order: 3; }
#inventory > .guided-stock-card { order: 4; }
#inventory > .stock-adjustment-details { order: 5; }
#inventory > .expiry-stock-card { order: 6; }

.guided-stock-card { gap: 10px; }
.guided-stock-form { grid-template-columns: minmax(240px, 1.2fr) minmax(150px, .55fr) minmax(220px, 1fr); }
.bag-stock-card { display: grid; grid-template-columns: minmax(170px, .35fr) 1fr; gap: 18px; }

#work.active > .work-today-card,
#work.active > .work-summary-card { margin: 0; }
.work-summary-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.work-summary-kpis > div { min-height: 64px; }

.sales-workspace-pane:not([hidden]) { display: grid; gap: var(--layout-gap); }
.sales-insight-layout { grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); }
.sale-card-list { gap: 9px; }

#finances.active .daily-close-card,
#finances.active .finance-movement-card { margin: 0; }
.daily-close-rows, .daily-close-grid { gap: 7px; }
.finance-movement-forms { max-width: none; }
.finance-movement-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.finance-movement-form .span { grid-column: 1 / -1; }

#prices.active .price-adjustment-card,
#purchases.active #purchaseForm,
#mps.active .mps-load-form { width: 100%; }
.price-adjustment-table { min-width: 1160px; }
.mps-load-table { min-width: 1040px; }

#data.active > .section-entry-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
#data .section-entry-card .section-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
.data-toolbox > summary.section-head { min-height: 48px; }
.diagnostic-kpis { gap: 8px; }

.list { border-top: 1px solid var(--layout-line); }
.row, .row.compact-row { min-height: 38px; padding: 7px 4px; }
.row:last-child { border-bottom: 0; }

.card.mps-work-timer {
  bottom: 10px;
  width: min(430px, calc(100vw - 24px));
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(37, 51, 41, .16);
}

@media (max-width: 980px) {
  :root { --layout-gap: 11px; }
  main { width: min(100% - 22px, var(--layout-width)); }
  .operation-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-focus-card, .game-card, .home-mps-card, .public-sales-card, .work-hours-card { grid-column: 1 / -1; }
  .sales-insight-layout { grid-template-columns: 1fr; }
  .finance-movement-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guided-stock-form { grid-template-columns: 1fr 1fr; }
  .guided-stock-current { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 62px; }
  body > header { padding-inline: 10px; }
  main { width: calc(100vw - 14px); margin-top: 10px; }
  .view.active { gap: 9px; }
  .view > .title-row { align-items: center; flex-direction: row; min-height: 38px; padding: 0 3px 7px; }
  .view > .title-row > div:first-child { display: block; }
  .view > .title-row .eyebrow { display: none; }
  .view > .title-row h2 { font-size: 21px; }
  .card, details.card, form.card, .home-card { padding: 12px; }
  details.card > summary { margin: -12px; padding: 12px; }
  details.card[open] > summary { margin-bottom: 12px; }
  .grid.two, .grid.three, .finance-movement-form, .guided-stock-form, .bag-stock-card { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .form .span { grid-column: 1; }
  .form > button[type="submit"] { width: 100%; }
  .operation-hub { gap: 7px; }
  .operation-hub button { min-height: 58px; }
  .workspace-tabs, .mps-section-nav { width: 100%; overflow-x: auto; }
  .workspace-tabs button, .mps-section-nav button { flex: 1 0 auto; }
  .work-summary-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head { align-items: flex-start; }
  .section-head .title-actions { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}