/* Bootstrap owns component appearance; custom rules only arrange the POS. */
[hidden] { display: none !important; }
.btn, .nav-link, .form-control, .form-select, summary, .form-check { min-height: 44px; }
.btn-close { min-width: 44px; min-height: 44px; }
.form-label { max-width: 100%; }
.form-control, .form-select, fieldset { min-width: 0; }
.brand { font-size: 1.5rem; font-weight: 800; text-decoration: none; letter-spacing: -.06em; }
.brand-dot { color: var(--bs-primary); }
.eyebrow { font-size: .68rem; letter-spacing: .12em; font-weight: 700; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.muted, .empty { color: var(--bs-secondary-color); font-size: .85rem; }
.topbar { display: flex; align-items: center; gap: 1rem; padding: .25rem 1.25rem; }
#connection { margin-left: auto; font-size: .8rem; }
main { min-width: 0; padding: .75rem 1.25rem; }
.welcome, .section-heading, .panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.welcome { margin-bottom: .5rem; min-height: 44px; }
.welcome .eyebrow { display: none; }
.welcome h1 { margin: 0; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.tabs { gap: .3rem; padding: .75rem; }
.tabs button { text-align: left; }
#sale-receipt:empty { display: none; }
#clientes button, #ventas button, .list-item { overflow-wrap: anywhere; }
#app.menu-collapsed main { grid-column: 1 / -1; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.stats .list-item { flex-direction: row; align-items: center; gap: .65rem; padding: .5rem .75rem; }
.stats strong { font-size: 1.5rem; }
.stats .list-item p { margin: 0; }
.dashboard-grid, .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.dashboard-grid { align-items: start; }
.dashboard-grid > .card { padding: .75rem; }
.dashboard-grid .panel-heading { margin-bottom: .4rem; }
.dashboard-grid .panel-heading h2 { margin: 0; }
.dashboard-grid .list-item { padding-block: .5rem; }
.dashboard-grid .empty { margin-bottom: 0; }
.card { min-width: 0; }
.list-item p { margin: .3rem 0; }
.list-item .btn { align-self: flex-start; margin: .2rem .3rem .2rem 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.schedule-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; align-items: center; }
.search { width: min(100%, 300px); }
.history { margin-top: 1.25rem; }
footer { margin-top: 1.5rem; }
.login-card { max-width: 430px; margin: 10vh auto; padding: 2rem; }
.login-card form { margin: 1rem 0; }
.login-card form button { width: 100%; }
#ventas > .card { margin-bottom: 1rem; }
#sale-results { display: grid; gap: .5rem; margin-bottom: 1rem; }
#ventas .list-item { max-width: 100%; }
#ventas form { margin-top: 1rem; }
/* Checkout density keeps three cart lines and cash confirmation in view. */
#app.sales-active .welcome { margin-bottom: .25rem; }
#checkout h2 { font-size: 1.25rem; }
#checkout .quantity-stepper .btn { min-width: 44px; }
#checkout-customer label { display: block; margin-bottom: .5rem; }
#checkout .form-label { margin-bottom: .5rem; }
#checkout .form-check-input { flex-shrink: 0; }
#category-filters { max-height: 108px; overflow-y: auto; }
#category-filters .btn { overflow-wrap: anywhere; max-width: 100%; }
#sale-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; max-height: min(62dvh, 580px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
#sale-products button { text-align: left; overflow-wrap: anywhere; }
.catalog-product { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; padding: .6rem; }
.catalog-product img { width: 100%; height: 110px; object-fit: contain; }
.catalog-product .catalog-price { margin-top: auto; }
.catalog-product-detail { display: grid; gap: .2rem; min-width: 0; }
.catalog-price { flex-shrink: 0; }
.checkout-line { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem; }
.checkout-line-detail { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.checkout-line-detail p { margin: .2rem 0 0; }
.checkout-line-actions { text-align: right; }
.checkout-line > .btn { padding-inline: .3rem; font-size: .8rem; }
.quantity-stepper { width: 138px; }
.quantity-stepper input { text-align: center; padding: .3rem; min-width: 0; appearance: textfield; }
.quantity-stepper input::-webkit-inner-spin-button { appearance: none; }
.line-subtotal { display: block; margin-bottom: .2rem; }
/* The visible total follows the cart; retain the original total for screen readers. */
.cart-total-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#checkout-mode-notice:empty { display: none; }
#checkout-order { scroll-margin-top: 1rem; }
/* Floating notifications reserve no space and let body clicks pass through. */
#notification-area { margin: 0; }
#toast-container, #message { pointer-events: none; }
#message .toast-body { overflow-wrap: anywhere; flex: 1; min-width: 0; }
#message .btn-close { padding: 0; pointer-events: auto; }
/* The modal owns its toast so the focus trap includes keyboard dismissal. */
.modal-body > #toast-container { position: sticky !important; margin-top: 1rem; padding: 0 !important; }
@media (min-width: 992px) {
  #app { display: grid; grid-template-columns: 216px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100dvh; }
  .topbar { grid-column: 1 / -1; }
  #app.sales-active main { padding-top: .25rem; }
  #app.menu-collapsed { grid-template-columns: minmax(0, 1fr); }
  .tabs { position: sticky; top: 0; height: 100dvh; align-content: start; flex-direction: column; flex-wrap: nowrap; }
  .tabs button { width: 100%; }
  #checkout-order { position: sticky; top: 1rem; }
  .checkout-ticket { min-height: 75dvh; }
}
@media (max-width: 1199px) { .dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 991px) {
  .tabs.show { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 480px) {
  main { padding: .8rem; }
  .topbar { padding: .5rem .8rem; gap: .5rem; }
  #connection { font-size: .7rem; }
  .tabs { gap: .25rem; padding: .5rem .8rem; }
  .tabs button { padding: .5rem; }
  .stats { gap: .5rem; }
  .stats .list-item { flex-direction: column; gap: 0; padding: .5rem; }
  .stats p { font-size: .75rem; }
  .product-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .schedule-row { grid-template-columns: 1.05fr .8fr 1fr; gap: .35rem; }
  .schedule-row label { font-size: .75rem; }
  .schedule-row input { padding: .4rem; }
  .login-card { margin: 5vh .8rem; padding: 1.5rem; }
  #sale-products { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 45dvh; }
  .catalog-product img { height: 90px; }
  #checkout .btn-group > .btn { padding-inline: .5rem; }
  .checkout-line { flex-wrap: wrap; }
  .checkout-line-detail { flex-basis: 100%; }
}
/* Stable, contained frames keep product photos from shifting the surrounding UI. */
.product-photo { display: inline-flex; width: 96px; height: 96px; flex-shrink: 0; align-items: center; justify-content: center; background: var(--bg); color: var(--muted); vertical-align: middle; margin: 0 .75rem .5rem 0; border-radius: .5rem; font-size: .8rem; }
.product-photo img, #product-photo-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: .5rem; }
.catalog-product .catalog-product-photo { width: 100%; height: 110px; margin: 0; }
@media (max-width: 767.98px) { .catalog-product .catalog-product-photo { height: 90px; } }
#product-photo-preview { width: 192px; height: 192px; margin: .75rem 0; }
#product-photo-preview .product-photo { width: 192px; height: 192px; }