/* =====================================================
   GALLETAS GABRIEL - ESTILOS LIMPIOS MD3
   Versión consolidada: base + componentes + header dropdown + POS
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');

/* -------------------------
   Variables Material Design 3
------------------------- */
:root {
  --md-sys-color-primary: #7C4D00;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFDDB5;
  --md-sys-color-on-primary-container: #2A1800;

  --md-sys-color-secondary: #6B5B3F;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #F5E0BB;
  --md-sys-color-on-secondary-container: #241A04;

  --md-sys-color-tertiary: #4E6543;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #D0E8C0;
  --md-sys-color-on-tertiary-container: #0D1F05;

  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-background: #FFFBFF;
  --md-sys-color-surface: #FFFBFF;
  --md-sys-color-surface-variant: #F0E0CF;
  --md-sys-color-surface-container-low: #F7F1E8;
  --md-sys-color-surface-container-high: #EEE8DF;
  --md-sys-color-on-surface: #1F1B16;
  --md-sys-color-on-surface-variant: #4F4539;

  --md-sys-color-outline: #817567;
  --md-sys-color-outline-variant: #D2C4B4;

  --gg-color-cocina: #8B6F47;
  --gg-color-mostrador: #6B8E5E;
  --gg-color-venta: #2E7D32;
  --gg-color-costo: #C62828;

  --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.18);
  --md-sys-elevation-2: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
  --md-sys-elevation-3: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10);

  --md-sys-shape-small: 4px;
  --md-sys-shape-medium: 8px;
  --md-sys-shape-large: 12px;
  --md-sys-shape-extra-large: 16px;

  --md-sys-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* -------------------------
   Reset / Base
------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--md-sys-font-family);
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-surface);
  line-height: 1.5;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  vertical-align: middle;
}

/* -------------------------
   Layout / Utilidades
------------------------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 16px;
}

.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* -------------------------
   Tipografía
------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: 400;
  line-height: 1.2;
  color: var(--md-sys-color-on-surface);
}

h1 { font-size: 2rem; letter-spacing: -0.015em; }
h2 { font-size: 1.75rem; letter-spacing: -0.01em; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; font-weight: 500; }
h5 { font-size: 1.125rem; font-weight: 500; }
h6 { font-size: 1rem; font-weight: 500; }

p {
  font-size: 1rem;
  color: var(--md-sys-color-on-surface-variant);
}

/* -------------------------
   Cards
------------------------- */
.card,
.card-filled,
.card-outlined {
  border-radius: var(--md-sys-shape-extra-large);
  padding: 24px;
  margin-bottom: 16px;
}

.card {
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-1);
}

.card-filled {
  background: var(--md-sys-color-surface-variant);
}

.card-outlined {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}

/* -------------------------
   Buttons
------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 24px;
  border: none;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-1);
}

.btn-primary:hover {
  background: #6B4200;
  box-shadow: var(--md-sys-elevation-2);
}

.btn-secondary {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.btn-tertiary {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.btn-outline {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}

.btn-outline:hover {
  background: rgba(124, 77, 0, 0.08);
}

.btn-danger {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.btn-small {
  min-height: 32px;
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 0.8125rem;
}

.btn-large {
  min-height: 48px;
  padding: 14px 32px;
  border-radius: 24px;
  font-size: 1rem;
}

.btn-block {
  width: 100%;
}

.btn-icon {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.btn-icon:hover {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  transform: translateY(-1px);
}

.btn-icon .material-symbols-rounded,
.btn .material-symbols-rounded {
  font-size: 21px;
}

/* -------------------------
   Formularios
------------------------- */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
}

.form-control {
  width: 100%;
  padding: 16px 12px;
  border: none;
  border-bottom: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-small) var(--md-sys-shape-small) 0 0;
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface);
  font-size: 1rem;
  transition: border-color .2s ease, background .2s ease;
}

.form-control:focus {
  outline: none;
  border-bottom: 2px solid var(--md-sys-color-primary);
  background: #E8DCC8;
}

.form-control::placeholder {
  color: var(--md-sys-color-outline);
}

select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23817567'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* -------------------------
   Chips / Badges
------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
  font-weight: 500;
}

.chip-primary {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: none;
}

.chip-secondary {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border: none;
}

.chip-tertiary {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  border: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.badge-admin { background: #E0E0E0; color: #333; }
.badge-cocina { background: #FFE0B2; color: #B56000; }
.badge-cajero { background: #E1F5FE; color: #0288D1; }

.badge-stock-cocina {
  background: #F5E0BB;
  color: #6B5B3F;
  border: 1px solid var(--md-sys-color-secondary);
}

.badge-stock-mostrador {
  background: #D0E8C0;
  color: #4E6543;
  border: 1px solid var(--md-sys-color-tertiary);
}

/* -------------------------
   Tablas legacy
   Mantener mientras exista algún módulo viejo con .data-table
------------------------- */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 16px;
}

.data-table thead th {
  padding: 16px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.data-table tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
  font-size: 0.9375rem;
}

.data-table tbody tr:hover {
  background: rgba(124, 77, 0, 0.04);
}

/* -------------------------
   Header agrupado con dropdowns
------------------------- */
.md3-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--md-sys-elevation-1);
  overflow: visible;
}

.header-container {
  max-width: 1440px;
  min-height: 64px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--md-sys-color-on-surface);
}

.brand-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-icon .material-symbols-rounded {
  font-size: 24px;
}

.header-brand h1 {
  margin: 0;
  color: var(--md-sys-color-primary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: visible !important;
}

.nav-link,
.nav-dropdown-trigger {
  min-height: 40px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.nav-link:hover,
.nav-dropdown-trigger:hover {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}

.nav-link.active,
.nav-dropdown-trigger.active {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.nav-link.logout {
  color: var(--md-sys-color-error);
}

.nav-link .material-symbols-rounded,
.nav-dropdown-trigger .material-symbols-rounded {
  font-size: 20px;
}

.nav-dropdown {
  position: relative;
  display: inline-flex;
  overflow: visible;
}

/* Área invisible que une el botón padre con el menú hijo */
.nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  z-index: 9998;
}

.nav-dropdown-trigger .dropdown-chevron {
  font-size: 18px;
  transition: transform .15s ease;
}

.nav-dropdown:hover .dropdown-chevron,
.nav-dropdown:focus-within .dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 9999;
  min-width: 230px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
  box-shadow: 0 12px 28px rgba(0,0,0,.16);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}


.dropdown-item {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background .15s ease;
}

.dropdown-item:hover,
.dropdown-item.active {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.dropdown-item .material-symbols-rounded {
  font-size: 21px;
  color: var(--md-sys-color-primary);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.user-name {
  max-width: 110px;
  overflow: hidden;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-toggle {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* -------------------------
   Drawer mobile
------------------------- */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: min(360px, 86vw);
  height: 100vh;
  background: var(--md-sys-color-surface);
  box-shadow: -16px 0 36px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .2s ease;
  display: flex;
  flex-direction: column;
}

.drawer.open {
  transform: translateX(0);
}

.drawer-header {
  min-height: 64px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.drawer-header h3 {
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-close {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--md-sys-color-surface-container-high);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.drawer-nav {
  padding: 12px;
  overflow-y: auto;
}

.drawer-section {
  margin-bottom: 14px;
}

.drawer-section-title {
  padding: 8px 12px 6px;
  color: var(--md-sys-color-outline);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.drawer-nav a {
  min-height: 46px;
  padding: 8px 12px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  font-weight: 600;
}

.drawer-nav a:hover,
.drawer-nav a.active {
  background: var(--md-sys-color-primary-container);
}

.drawer-nav a.logout {
  color: var(--md-sys-color-error);
}

/* -------------------------
   Bottom nav mobile
------------------------- */
.bottom-nav {
  display: none;
}

/* -------------------------
   Login
------------------------- */
.login-page {
  min-height: 100vh;
  padding: 16px;
  background: linear-gradient(135deg, #FFFBFF 0%, #F5E0BB 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 40px 32px;
  border-radius: var(--md-sys-shape-extra-large);
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-3);
  text-align: center;
}

.login-card .brand-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 20px;
  background: var(--md-sys-color-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------
   Snackbar / Loading
------------------------- */
.snackbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 1500;
  max-width: 90%;
  min-width: 280px;
  padding: 14px 24px;
  border-radius: 8px;
  background: #322F2A;
  color: #F5E0BB;
  box-shadow: var(--md-sys-elevation-3);
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-50%) translateY(100px);
  transition: opacity .3s ease, transform .3s ease;
}

.snackbar.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.snackbar.error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.snackbar.success {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* -------------------------
   POS
------------------------- */
.pos-grid {
  min-height: 0;
  max-height: calc((128px * 2) + 10px);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  grid-auto-rows: 128px;
  align-content: start;
  gap: 10px;
  padding: 2px;
}

.pos-item-card {
  height: 128px;
  min-height: 128px;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: var(--md-sys-color-surface);
  cursor: pointer;
  user-select: none;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 3px;
  align-items: center;
  justify-items: center;
  text-align: center;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

.pos-item-card:hover {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
}

.pos-item-card:active {
  transform: scale(.97);
}

.pos-product-icon .material-symbols-rounded {
  font-size: 30px;
  color: var(--md-sys-color-primary);
}

.pos-name {
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.15;
}

.pos-price {
  color: var(--md-sys-color-primary);
  font-weight: 800;
}

.pos-stock {
  color: var(--md-sys-color-on-surface-variant);
  font-size: .75rem;
}

.cart-panel {
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-extra-large);
  box-shadow: var(--md-sys-elevation-2);
  padding: 24px;
}

.cart-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-total {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: right;
}

/* -------------------------
   Animaciones / Scrollbar
------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn .3s ease forwards;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--md-sys-color-surface-variant);
}

::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline);
  border-radius: 4px;
}

/* -------------------------
   Responsive
------------------------- */
@media (max-width: 1100px) {
  .header-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .header-container {
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 72px;
  }

  .container {
    padding: 16px 12px 84px;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .card,
  .card-filled,
  .card-outlined {
    padding: 20px 16px;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }

  .user-name,
  .user-info .chip {
    display: none;
  }

  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 520;
    height: 68px;
    padding: 4px 6px 6px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface);
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .bottom-nav a {
    border-radius: 18px;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  .bottom-nav a.active {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
  }

  .bottom-nav .material-symbols-rounded {
    font-size: 22px;
  }

  .pos-grid {
    grid-template-columns: repeat(2, 1fr);
    max-height: none;
  }

  .login-card {
    padding: 32px 24px;
  }
}

@media (max-width: 480px) {
  .pos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}