@import url('ux.css');
.button, .primary, .secondary, button { border: 0; border-radius: var(--radius-sm); min-height: 44px; padding: 10px 15px; font-weight: 750; }
.button, .primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.primary { background: var(--primary); color: #fff; }.primary:hover { filter: brightness(.94); }.secondary { background: var(--surface-soft); color: var(--text); }.full { width: 100%; }
.panel, .metrics article, .period-cards article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.metrics, .period-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 auto 18px; max-width: var(--content-max); }
.metrics span, .metrics small, .period-cards span, .period-cards small { display: block; color: var(--muted); }.metrics strong, .period-cards strong { display: block; margin: 7px 0; font-size: 25px; }
.search { max-width: var(--content-max); margin: 0 auto 14px; }.search input { width: 100%; min-height: 50px; }
.table-wrap { width: 100%; max-width: var(--content-max); margin: auto; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; } th, td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } td strong, td small { display: block; } td small { color: var(--muted); margin-top: 3px; }
.form { display: flex; flex-direction: column; gap: 15px; }.form label { color: #514a47; font-size: 13px; font-weight: 750; }.form input, .form select, .form textarea { display: block; width: 100%; margin-top: 6px; }.form textarea { min-height: 88px; resize: vertical; }.grid-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }.checks { display: flex; align-items: center; gap: 8px; min-height: 44px; }.checks input { width: auto; min-height: 0; margin: 0; }.form-actions { display: flex; justify-content: flex-end; gap: 9px; }.input-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; }.input-actions button:last-child { grid-column: 1 / -1; }
.split { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: var(--content-max); margin: auto; }.inline { display: flex; gap: 6px; }.inline input { min-width: 110px; }.list-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--border); }.list-card span { color: var(--muted); }
.empty-state { grid-column: 1 / -1; display: flex; min-height: 180px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); text-align: center; }.empty-state .icon { width: 38px; height: 38px; }.empty { text-align: center; color: var(--muted); padding: 40px 15px; }
.badge { display: inline-flex; width: max-content; padding: 4px 8px; border-radius: 99px; background: var(--surface-soft); font-size: 11px; }.badge.completed { background: #def4e9; color: #126c4b; }.negative { color: var(--danger); }.positive, .online { color: var(--success); }.offline { color: var(--danger); }.warning-row { background: #fff9ec; }
.toast { position: fixed; top: calc(var(--header-height) + 10px); left: 50%; z-index: 100; max-width: calc(100% - 28px); transform: translate(-50%, -12px); border-radius: 12px; padding: 12px 16px; background: var(--secondary); color: #fff; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: .2s; }.toast.show { transform: translate(-50%, 0); opacity: 1; }.toast.error { background: var(--danger); }
.icon-button { display: inline-grid; width: 44px; height: 44px; min-height: 44px; place-items: center; padding: 0; border: 0; background: transparent; border-radius: 50%; }.icon-button:hover { background: var(--surface-soft); }
.product-image-preview { width: min(100%,320px); aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }.product-image-preview img { width: 100%; height: 100%; object-fit: cover; }.product-image-preview img[hidden] { display: none; }
.fullscreen-gate { display: none; }
dialog { width: min(92vw, 520px); max-height: 92dvh; border: 0; border-radius: var(--radius-lg); padding: 18px; background: var(--surface); box-shadow: 0 30px 90px rgba(20,15,13,.35); } dialog::backdrop { background: rgba(30,24,22,.48); backdrop-filter: blur(2px); } dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.scanner-dialog video { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius); background: #161616; }.scanner-dialog input { width: 100%; margin: 8px 0; }
.bottom-sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: none; margin: 0; border-radius: 26px 26px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .22s ease-out; }.bottom-sheet.open { transform: translateY(0); }.sheet-handle { width: 44px; height: 5px; margin: -5px auto 13px; border-radius: 99px; background: #d5ceca; }.bottom-sheet header small, .bottom-sheet header strong { display: block; }.bottom-sheet header small { color: var(--muted); }.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0; }.sheet-grid > * { display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 12px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius); text-align: left; }.sheet-grid > * > .icon { color: var(--primary); }.sheet-grid span, .sheet-grid small { display: block; }.sheet-grid small { margin-top: 2px; color: var(--muted); font-size: 11px; }.sheet-logout { width: 100%; color: var(--danger); background: #fff0f1; }
.login-page { overflow: auto; background: var(--secondary); }.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }.login-card { width: min(100%, 410px); padding: 28px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 30px 90px rgba(0,0,0,.28); }.login-logo { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: var(--primary); color: #fff; font-size: 30px; font-weight: 900; }.login-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }.login-card label { font-weight: 700; }.login-card input { width: 100%; margin-top: 6px; }
.section-title { display: flex; flex-direction: column; gap: 10px; }.section-title p { color: var(--muted); }.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0; }.filter-row label { font-size: 12px; font-weight: 700; }.filter-row input { width: 100%; margin-top: 5px; }.filter-row button { grid-column: 1 / -1; }.report-total { display: grid; gap: 1px; margin: 14px 0; overflow: hidden; border-radius: var(--radius); background: var(--border); }.report-total div { padding: 12px; background: var(--surface-soft); }.report-total span, .report-total strong { display: block; }.report-total span { color: var(--muted); font-size: 11px; }.sale-list > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--border); }.sale-list small { display: block; max-width: 58vw; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.bars { height: 220px; display: flex; align-items: flex-end; gap: 12px; }.bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }.bars span { width: min(45px,80%); min-height: 4px; border-radius: 9px 9px 2px 2px; background: var(--primary); }.bars small { color: var(--muted); font-size: 10px; }
.integration-form,.section-gap,.smart-filter,.integrity-banner,.permission-list { max-width: var(--content-max); margin: 0 auto 16px; }.integration-status,.integrity-banner { display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:var(--radius); background:var(--surface-soft); }.integration-status.connected,.integrity-banner.ok { background:#def4e9; color:#126c4b; }.integrity-banner.danger { background:#fff0f1; color:var(--danger); }.field-help { color:var(--muted); font-size:12px; }.smart-filter { padding:10px 14px; }.filter-toggle { display:flex; align-items:center; gap:8px; background:transparent; }.filter-fields { display:none; grid-template-columns:2fr 1fr 1fr auto; gap:10px; align-items:end; padding-top:10px; }.smart-filter.expanded .filter-fields { display:grid; }.filter-fields label { color:var(--muted); font-size:12px; font-weight:700; }.filter-fields input { width:100%; margin-top:5px; }.permission-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }.permission-row span { display:block; color:var(--muted); }.permission-row form { display:flex; align-items:center; gap:8px; }
@media(max-width:767px){.filter-fields{grid-template-columns:1fr 1fr}.filter-fields label:first-child,.filter-fields button{grid-column:1/-1}.permission-row{align-items:flex-start;flex-direction:column}}