/* =============================================
   PASTELERIA POS - Stylesheet v2
   ============================================= */

:root {
  --primary: #8B5E34;
  --primary-dark: #4B2E1B;
  --primary-light: #FFF7ED;
  --brand-gold: #C78A2C;
  --brand-cream: #FBF7F1;
  --brand-soft: #F4E7D5;
  --secondary: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;
  --info: #3B82F6;
  --dark: #1F1713;
  --gray-50: #FFFCF7;
  --gray-100: #F7EFE3;
  --gray-200: #EADCCB;
  --gray-300: #D8C4AD;
  --gray-500: #7C6F63;
  --gray-700: #4B4038;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(75,46,27,.08), 0 8px 22px rgba(75,46,27,.06);
  --shadow-lg: 0 18px 48px rgba(75,46,27,.13);
  --transition: all .2s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--gray-100);
  color: var(--dark);
  min-height: 100vh;
  font-size: 14px;
}

/* ---- NAVBAR ---- */
.navbar-custom {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
  padding: .6rem 0;
  z-index: 1030;
}
.brand-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--primary), #818CF8);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem;
  flex-shrink: 0;
}
.brand-name { font-weight: 700; font-size: .95rem; color: var(--dark); line-height: 1.2; }
.brand-sub  { font-size: .7rem; color: var(--gray-500); }

.navbar-custom .nav-link {
  font-weight: 500; font-size: .85rem;
  color: var(--gray-700); border-radius: var(--radius-sm);
  padding: .45rem .8rem; transition: var(--transition);
  display: flex; align-items: center; gap: 5px;
}
.navbar-custom .nav-link:hover { background: var(--primary-light); color: var(--primary); }
.navbar-custom .nav-link.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.nav-sell { background: var(--primary) !important; color: #fff !important; }
.nav-sell:hover { background: var(--primary-dark) !important; }

.user-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--gray-100); border-radius: 50px;
  padding: .35rem .8rem; font-size: .82rem; font-weight: 500;
}
.badge-rol {
  background: var(--primary-light); color: var(--primary);
  border-radius: 20px; padding: 1px 8px; font-size: .7rem; font-weight: 600;
}
.btn-logout {
  display: flex; align-items: center; gap: 5px;
  color: var(--danger); font-weight: 500; font-size: .85rem;
  text-decoration: none; border-radius: var(--radius-sm);
  padding: .4rem .7rem; transition: var(--transition);
}
.btn-logout:hover { background: #FEF2F2; color: #B91C1C; }

/* ---- MAIN ---- */
.main-content { padding: 1.5rem; }

/* ---- CARDS ---- */
.card-pos {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow);
  transition: var(--transition);
  overflow: hidden;
}
.card-pos:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }

.stat-card {
  background: #fff; border-radius: var(--radius);
  border: 1px solid var(--gray-200); box-shadow: var(--shadow);
  padding: 1.5rem; transition: var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.stat-label { font-size: .78rem; font-weight: 500; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--dark); margin: .3rem 0 0; line-height: 1; }
.stat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}

/* ---- TABLES ---- */
.table-pos { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-pos th {
  background: var(--gray-50); color: var(--gray-500);
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: .75rem 1rem; border-bottom: 1px solid var(--gray-200);
}
.table-pos td { padding: .8rem 1rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; font-size: .88rem; }
.table-pos tbody tr { transition: var(--transition); }
.table-pos tbody tr:hover { background: var(--gray-50); }
.table-pos tbody tr:last-child td { border-bottom: none; }

/* ---- FORMS ---- */
.form-control-pos, .form-select-pos {
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: .6rem .9rem; font-size: .88rem; font-family: inherit;
  transition: var(--transition); background: #fff; width: 100%;
  outline: none; color: var(--dark);
}
.form-control-pos:focus, .form-select-pos:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}

/* ---- BUTTONS ---- */
.btn-pos {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .55rem 1.1rem; border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 600; cursor: pointer;
  border: none; transition: var(--transition); text-decoration: none;
  white-space: nowrap;
}
.btn-pos:active { transform: scale(.97); }
.btn-primary-pos { background: var(--primary); color: #fff; }
.btn-primary-pos:hover { background: var(--primary-dark); color: #fff; }
.btn-success-pos { background: var(--secondary); color: #fff; }
.btn-success-pos:hover { background: #059669; color: #fff; }
.btn-danger-pos { background: var(--danger); color: #fff; }
.btn-danger-pos:hover { background: #DC2626; color: #fff; }
.btn-outline-pos { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline-pos:hover { background: var(--primary-light); }
.btn-warning-pos { background: var(--warning); color: #fff; }
.btn-warning-pos:hover { background: #D97706; color: #fff; }
.btn-dark-pos { background: var(--dark); color: #fff; }
.btn-dark-pos:hover { background: #1F2937; color: #fff; }

/* ---- BADGE ---- */
.badge-pos {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 600;
}
.badge-green { background: #D1FAE5; color: #065F46; }
.badge-red   { background: #FEE2E2; color: #991B1B; }
.badge-blue  { background: #DBEAFE; color: #1D4ED8; }
.badge-orange{ background: #FEF3C7; color: #92400E; }
.badge-gray  { background: var(--gray-100); color: var(--gray-700); }

/* ---- SECTION HEADER ---- */
.section-header { margin-bottom: 1.5rem; }
.section-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); margin-bottom: .3rem; }
.section-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin: 0; line-height: 1.2; }

/* ---- LOGIN ---- */
.login-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: #fff; border-radius: 20px;
  padding: 2.5rem; width: 100%; max-width: 420px;
  box-shadow: 0 25px 80px rgba(0,0,0,.3);
  animation: slideUp .4s ease;
}
.login-logo {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--primary), #818CF8);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #fff; margin: 0 auto 1.2rem;
}

/* ---- POS VENTA ---- */
.pos-wrapper { display: grid; grid-template-columns: 1fr 360px; gap: 1.2rem; }
.pos-total-bar {
  background: var(--dark); color: #fff;
  border-radius: var(--radius); padding: 1.2rem 1.5rem;
  margin-top: .5rem;
}
.total-amount { font-size: 2.2rem; font-weight: 800; }
.vuelto-amount { font-size: 1.5rem; font-weight: 700; color: #86EFAC; }

.qty-btn {
  width: 28px; height: 28px; border-radius: 8px;
  border: none; cursor: pointer; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition); font-size: 1rem;
}
.qty-minus { background: #FEE2E2; color: var(--danger); }
.qty-minus:hover { background: var(--danger); color: #fff; }
.qty-plus  { background: #D1FAE5; color: #059669; }
.qty-plus:hover  { background: #059669; color: #fff; }
.qty-del   { background: var(--gray-100); color: var(--gray-500); }
.qty-del:hover   { background: var(--danger); color: #fff; }

/* ---- RECEIPT ---- */
.receipt-modal .receipt-body {
  font-family: 'Courier New', monospace; font-size: .82rem;
  background: #fff; padding: 1.2rem; border-radius: 8px;
  border: 1px solid var(--gray-200); max-width: 300px; margin: 0 auto;
}
.receipt-divider { border-top: 1px dashed #999; margin: .5rem 0; }

/* ---- TOASTS ---- */
.toast-success { background: #065F46 !important; color: #fff; }
.toast-error   { background: #991B1B !important; color: #fff; }

/* ---- STOCK-LOW ---- */
.stock-alert-row td { background: #FFF7ED; }

/* ---- ANIMATIONS ---- */
@keyframes slideUp {
  from { opacity:0; transform: translateY(24px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
.animate-in { animation: slideUp .35s ease both; }
.animate-fade { animation: fadeIn .3s ease both; }

/* ---- CAJA ---- */
.caja-status-open  { background: #D1FAE5; color: #065F46; }
.caja-status-closed{ background: #FEE2E2; color: #991B1B; }

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
  .pos-wrapper { grid-template-columns: 1fr; }
  .main-content { padding: 1rem; }
}

/* ---- PRINT ---- */
@media print {
  body { background: #fff; font-family: 'Courier New', monospace; }
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  nav, .sidebar { display: none !important; }
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

/* ---- PARIIS SABOREE THEME ---- */
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(199,138,44,.10), transparent 28%),
    radial-gradient(circle at 100% 12%, rgba(16,185,129,.06), transparent 22%),
    linear-gradient(180deg, #FFFCF7 0%, #F7EFE3 100%);
  color: var(--dark);
}

.navbar-custom {
  background: rgba(255,252,247,.93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(234,220,203,.88);
  box-shadow: 0 10px 28px rgba(75,46,27,.08);
}

.brand-icon.brand-logo-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(75,46,27,.16);
}

.brand-icon.brand-logo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.brand-name {
  color: var(--dark);
  font-weight: 900;
  letter-spacing: -.01em;
}

.brand-sub {
  color: var(--gray-500);
  font-weight: 700;
}

.navbar-custom .nav-link {
  font-weight: 700;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
  background: var(--primary-light);
  color: var(--primary);
}

.nav-sell {
  background: linear-gradient(135deg, var(--primary), var(--brand-gold)) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(139,94,52,.22);
}

.nav-sell:hover,
.nav-sell.active {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
  color: #fff !important;
}

.user-pill {
  background: #FFF7ED;
  border: 1px solid var(--gray-200);
  color: var(--dark);
}

.badge-rol {
  background: var(--brand-soft);
  color: var(--primary-dark);
}

.card-pos,
.stat-card {
  border-color: rgba(234,220,203,.92);
  box-shadow: var(--shadow);
}

.card-pos:hover,
.stat-card:hover {
  box-shadow: var(--shadow-lg);
}

.table-pos th {
  background: #FFFBF5;
  color: var(--gray-500);
}

.table-pos tbody tr:hover {
  background: #FFF7ED;
}

.form-control-pos:focus,
.form-select-pos:focus {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(199,138,44,.14);
}

.btn-primary-pos {
  background: linear-gradient(135deg, var(--primary), var(--brand-gold));
  color: #fff;
  box-shadow: 0 8px 18px rgba(139,94,52,.18);
}

.btn-primary-pos:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline-pos {
  color: var(--primary);
  border-color: var(--primary);
  background: #fff;
}

.btn-outline-pos:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.section-tag {
  color: var(--primary) !important;
}

.pos-total-bar {
  background: linear-gradient(135deg, #1F1713, #4B2E1B) !important;
  box-shadow: 0 16px 34px rgba(75,46,27,.18) !important;
}

.metodo-btn.active,
.chip-cat.active,
.chip-cat:hover {
  background: linear-gradient(135deg, var(--primary), var(--brand-gold)) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(139,94,52,.18) !important;
}

.metodo-btn:hover,
.chip-monto:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: var(--primary-light) !important;
}

.dni-lookup-btn {
  border-color: var(--primary) !important;
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

.dni-lookup-btn:hover {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(139,94,52,.24) !important;
}

.cart-count-badge {
  background: #FFF7ED !important;
  color: var(--primary) !important;
}

.salon-stat.total i,
.search-dropdown-item div[style*="#7C3AED"] {
  color: var(--primary) !important;
}

.mesa-card.selected {
  outline-color: rgba(139,94,52,.16) !important;
  border-color: var(--primary) !important;
}

.swal2-popup {
  border-radius: 18px !important;
}

.swal2-confirm {
  background: linear-gradient(135deg, var(--primary), var(--brand-gold)) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
}