/* ============================================================
   Panadería Focaccia — CSS Principal
   Breakpoints:
     móvil:  < 480px
     tablet: 480px – 768px
     laptop: 768px – 1024px
     desktop: > 1024px
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
  --pan-cafe:     #4A2C0A;
  --pan-cafe-m:   #7B4B1A;
  --pan-dorado:   #D4860A;
  --pan-miel:     #F5A623;
  --pan-crema:    #FFF8ED;
  --pan-claro:    #FEF3DC;
  --pan-beige:    #E8D5B0;
  --pan-acento:   #E05A00;
  --pan-verde:    #3D7A3A;
  --pan-error:    #D32F2F;

  --radius:    12px;
  --radius-lg: 20px;
  --shadow:    0 4px 20px rgba(74,44,10,.15);
  --shadow-lg: 0 8px 40px rgba(74,44,10,.25);

  --font-display: 'Playfair Display', serif;
  --font-body:    'DM Sans', sans-serif;

  --topbar-h: 56px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* evita zoom horizontal en móvil */
  overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  background: var(--pan-crema);
  color: var(--pan-cafe);
  min-height: 100vh;
  overflow-x: hidden;
}
img, video, iframe { max-width: 100%; height: auto; }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pan-claro); }
::-webkit-scrollbar-thumb { background: var(--pan-beige); border-radius: 4px; }

/* ── Botones ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem 1.4rem; border: none; border-radius: var(--radius);
  font-family: var(--font-body); font-size: .92rem; font-weight: 600;
  cursor: pointer; transition: all .2s; text-decoration: none;
  white-space: nowrap; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary   { background: var(--pan-dorado); color: #fff; }
.btn-primary:hover  { background: var(--pan-acento); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-secondary { background: var(--pan-cafe); color: #fff; }
.btn-secondary:hover{ background: var(--pan-cafe-m); }
.btn-danger    { background: var(--pan-error); color: #fff; }
.btn-danger:hover   { opacity: .9; }
.btn-outline   { background: transparent; border: 2px solid var(--pan-dorado); color: var(--pan-dorado); }
.btn-outline:hover  { background: var(--pan-dorado); color: #fff; }
.btn-success   { background: var(--pan-verde); color: #fff; }
.btn-sm  { padding: .4rem .9rem; font-size: .82rem; }
.btn-lg  { padding: .85rem 2rem; font-size: 1rem; }
.btn-full{ width: 100%; }

/* Toque más grande en móvil */
@media (max-width: 768px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
}

/* ── Cards ─────────────────────────────────────────────── */
.card {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.card-header {
  padding: 1rem 1.4rem;
  background: var(--pan-claro);
  border-bottom: 1px solid var(--pan-beige);
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
  color: var(--pan-cafe);
}
.card-body { padding: 1.4rem; }

/* ── Badges ────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: .18rem .6rem; border-radius: 20px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.badge-popular  { background:#FFF3CD; color:#856404; }
.badge-nuevo    { background:#D1FAE5; color:#065F46; }
.badge-especial { background:#FEE2E2; color:#991B1B; }
.badge-temp     { background:#EDE9FE; color:#4C1D95; }
.badge-pend     { background:#FEF9C3; color:#713F12; }
.badge-listo    { background:#D1FAE5; color:#065F46; }
.badge-cancel   { background:#FEE2E2; color:#991B1B; }
.badge-pagado   { background:#DBEAFE; color:#1E40AF; }

/* ── Forms ─────────────────────────────────────────────── */
.form-group { margin-bottom: 1.1rem; }
.form-label {
  display: block; margin-bottom: .35rem;
  font-size: .85rem; font-weight: 600; color: var(--pan-cafe-m);
}
.form-control {
  width: 100%; padding: .7rem 1rem;
  border: 1.5px solid var(--pan-beige); border-radius: var(--radius);
  font-family: var(--font-body); font-size: .95rem; color: var(--pan-cafe);
  background: var(--pan-crema); transition: border-color .2s; outline: none;
  -webkit-appearance: none; appearance: none;
}
.form-control:focus { border-color: var(--pan-dorado); background: #fff; }
.form-control::placeholder { color: #B5A590; }
@media (max-width: 768px) {
  .form-control { font-size: 16px; /* evita zoom en iOS al enfocar */ }
}

/* ── Alerts ────────────────────────────────────────────── */
.alert {
  padding: .8rem 1.2rem; border-radius: var(--radius);
  font-size: .9rem; margin-bottom: 1rem;
}
.alert-success { background: #D1FAE5; color: #065F46; }
.alert-error   { background: #FEE2E2; color: #991B1B; }
.alert-info    { background: #DBEAFE; color: #1E40AF; }

/* ── Modales ───────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(74,44,10,.5); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: var(--radius-lg);
  padding: 1.5rem; width: 100%; max-width: 500px;
  box-shadow: var(--shadow-lg); animation: modalIn .25s ease;
  max-height: 90vh; overflow-y: auto;
}
@keyframes modalIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
.modal-title {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  color: var(--pan-cafe); margin-bottom: 1rem;
}

/* ── TOPBAR ────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center;
  padding: .75rem 1.5rem; height: var(--topbar-h);
  background: var(--pan-cafe);
  box-shadow: 0 2px 12px rgba(74,44,10,.35);
}
.topbar-actions { display:flex; align-items:center; margin-left:auto; }
.topbar-brand {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  color: var(--pan-miel); text-decoration: none; flex-shrink: 0;
}
.topbar-brand .logo-icon { font-size: 1.5rem; }
.topbar-brand .brand-logo {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  display: block; background: #101b2a;
}
.topbar-nav {
  display: flex; align-items: center; gap: .35rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.topbar-nav a, .topbar-nav button {
  display: flex; align-items: center; gap: .35rem;
  padding: .4rem .75rem; border-radius: 8px; border: none;
  font-family: var(--font-body); font-size: .85rem; font-weight: 500;
  color: var(--pan-beige); background: transparent; cursor: pointer;
  text-decoration: none; transition: all .2s; white-space: nowrap;
  flex-shrink: 0;
}
.topbar-nav a:hover, .topbar-nav button:hover,
.topbar-nav a.active { background: rgba(212,134,10,.25); color: var(--pan-miel); }
.topbar-user {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .75rem; border-radius: 8px;
  background: rgba(255,255,255,.1);
  color: var(--pan-miel); font-size: .82rem; font-weight: 600;
  flex-shrink: 0; white-space: nowrap;
}
.topbar-user-name { color:var(--pan-miel); }

/* Topbar tablet/móvil */
@media (max-width: 768px) {
  .topbar { padding: .6rem 1rem; }
  .topbar-brand { font-size: 1rem; }
  .topbar-brand .logo-icon { font-size: 1.3rem; }
  .topbar-brand .brand-logo { width: 36px; height: 36px; }
  .topbar-nav a span.nav-label { display: none; } /* solo iconos */
  .topbar-user small { display: none; }
  .topbar-user { padding: .35rem .6rem; font-size: .78rem; }
}
@media (max-width: 480px) {
  .topbar-user .user-name { display: none; }
  .topbar-user-name, .topbar-user small { display: none; }
}

/* ── SIDEBAR + LAYOUT ──────────────────────────────────── */
.layout { display: flex; min-height: calc(100vh - var(--topbar-h)); }

/* Desktop sidebar vertical */
.sidebar {
  width: 230px; min-height: 100%; flex-shrink: 0;
  background: var(--pan-cafe); padding: 1.2rem 0;
  display: flex; flex-direction: column; gap: .1rem;
}
.sidebar-profile {
  display:flex; align-items:center; gap:.65rem; margin:0 .75rem .7rem; padding:.7rem;
  border-radius:10px; background:rgba(255,255,255,.07); color:var(--pan-miel);
}
.sidebar-avatar {
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:50%; background:rgba(212,134,10,.3); flex-shrink:0;
}
.sidebar-profile strong, .sidebar-profile small { display:block; }
.sidebar-profile strong { font-size:.78rem; color:var(--pan-crema); }
.sidebar-profile small { margin-top:.12rem; font-size:.68rem; color:var(--pan-beige); }
.topbar-menu-toggle {
  width: 36px; height: 36px; margin-left: .8rem; border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px; background: rgba(255,255,255,.08); color: var(--pan-miel);
  font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background .2s;
}
.topbar-menu-toggle:hover { background: rgba(212,134,10,.35); }
.sidebar a {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1.4rem; color: var(--pan-beige);
  font-size: .88rem; font-weight: 500; text-decoration: none;
  transition: all .2s; border-left: 3px solid transparent;
  white-space: nowrap;
}
.sidebar a:hover { background: rgba(255,255,255,.07); color: var(--pan-miel); }
.sidebar a.active { background: rgba(212,134,10,.2); color: var(--pan-miel); border-left-color: var(--pan-dorado); }
.sidebar-section {
  padding: .5rem 1.4rem .2rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #7B6350; margin-top: .5rem;
}
@media (min-width: 769px) {
  .sidebar.is-collapsed { width: 62px; align-items: center; }
  .sidebar.is-collapsed .sidebar-section,
  .sidebar.is-collapsed .side-label { display: none; }
  .sidebar.is-collapsed .sidebar-profile { justify-content:center; margin:.1rem .35rem .7rem; padding:.55rem; }
  .sidebar.is-collapsed a { width: 100%; justify-content: center; padding: .8rem .3rem; }
  .sidebar.is-collapsed .side-icon { font-size: 1.2rem; }
}

.main-content { flex: 1; padding: 1.5rem; overflow: auto; min-width: 0; }

/* Tablet: sidebar horizontal en la parte superior */
@media (max-width: 900px) {
  .sidebar { width: 210px; }
}
@media (max-width: 768px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%; min-height: auto; flex-direction: row;
    padding: .4rem .75rem; overflow-x: auto; gap: 0;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar a {
    padding: .55rem .85rem; font-size: .8rem;
    border-left: none; border-bottom: 3px solid transparent;
    flex-shrink: 0;
  }
  .sidebar a.active { border-left-color: transparent; border-bottom-color: var(--pan-dorado); }
  .sidebar-section { display: none; }
  .sidebar-profile { display: none; }
  .sidebar.is-collapsed { display: none; }
  .main-content { padding: 1rem; }
}
@media (max-width: 480px) {
  .main-content { padding: .75rem; }
}

/* ── TABLAS ────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 540px; }
thead th {
  padding: .7rem 1rem; background: var(--pan-cafe);
  color: var(--pan-miel); font-weight: 600; text-align: left;
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--pan-beige); transition: background .15s; }
tbody tr:hover { background: var(--pan-claro); }
tbody td { padding: .65rem 1rem; }
@media (max-width: 480px) {
  table { font-size: .8rem; min-width: 420px; }
  thead th, tbody td { padding: .5rem .7rem; }
}

/* ── STATS GRID (dashboard) ────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.stat-card {
  background: #fff; border-radius: var(--radius-lg); padding: 1.2rem;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: .9rem;
}
.stat-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.stat-icon.cafe   { background: #FEF3DC; }
.stat-icon.dorado { background: #FFFBEB; }
.stat-icon.verde  { background: #D1FAE5; }
.stat-icon.azul   { background: #DBEAFE; }
.stat-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; color: var(--pan-cafe); line-height: 1; }
.stat-label { font-size: .78rem; color: #8B7355; font-weight: 500; margin-top: .2rem; }

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .stat-card  { padding: .9rem; gap: .65rem; }
  .stat-icon  { width: 42px; height: 42px; font-size: 1.2rem; border-radius: 10px; }
  .stat-value { font-size: 1.25rem; }
}

/* ── LOGIN ─────────────────────────────────────────────── */
.login-wrap {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh;
}
.login-left {
  background: linear-gradient(160deg, var(--pan-cafe) 0%, var(--pan-cafe-m) 60%, var(--pan-dorado) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem 2rem; text-align: center; position: relative; overflow: hidden;
}
.login-left::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.login-logo    { font-size: 5rem; position: relative; }
.login-brand-logo {
  width: 128px; height: 128px; border-radius: 50%; object-fit: cover;
  display: block; background: #101b2a;
}
.login-title   {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 900;
  color: var(--pan-miel); line-height: 1.1; margin: 1rem 0 .75rem; position: relative;
}
.login-subtitle { color: var(--pan-beige); font-size: 1rem; position: relative; }
.login-right {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.5rem; background: var(--pan-crema);
}
.login-form { width: 100%; max-width: 380px; }
.login-form h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--pan-cafe); margin-bottom: .3rem; }
.login-form p  { color: #8B7355; font-size: .9rem; margin-bottom: 1.6rem; }
.app-footer {
  padding: 1rem 1.25rem; text-align: center; background: var(--pan-crema);
  color: #8B7355; font-size: .78rem;
}
.app-footer a { color: var(--pan-dorado); font-weight: 700; text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }
.pos-footer { background: #fff; border-top: 1px solid var(--pan-beige); }

/* Tablet login: columnas reducidas */
@media (max-width: 900px) {
  .login-left { padding: 2rem 1.5rem; }
  .login-logo { font-size: 3.5rem; }
  .login-brand-logo { width: 96px; height: 96px; }
  .login-title { font-size: 2rem; }
}
/* Móvil login: apila verticalmente */
@media (max-width: 640px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-left { min-height: 180px; padding: 1.5rem 1rem; }
  .login-logo { font-size: 2.5rem; }
  .login-brand-logo { width: 76px; height: 76px; }
  .login-title { font-size: 1.6rem; margin: .5rem 0; }
  .login-left .login-icons { display: none; } /* oculta iconos decorativos en móvil */
  .login-right { padding: 1.5rem 1rem; align-items: flex-start; }
  .login-form h2 { font-size: 1.5rem; }
}

/* ── POS LAYOUT ────────────────────────────────────────── */
/* Desktop: productos | carrito lado a lado */
.pos-grid {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 0;
  height: calc(100vh - var(--topbar-h));
}
.pos-products {
  overflow-y: auto; background: var(--pan-crema); padding: 1rem;
  -webkit-overflow-scrolling: touch;
}
.pos-cart {
  background: var(--pan-cafe); color: var(--pan-crema);
  display: flex; flex-direction: column; overflow: hidden;
}

/* Tablet POS: carrito abajo */
@media (max-width: 900px) {
  .pos-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    height: auto;
    min-height: calc(100vh - var(--topbar-h));
  }
  .pos-cart { max-height: 50vh; }
}
/* Móvil POS: carrito como panel deslizante (bottom sheet) */
@media (max-width: 640px) {
  .pos-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: calc(100vh - var(--topbar-h) - 60px); /* espacio para botón flotante */
  }
  .pos-cart {
    position: fixed; bottom: 0; left: 0; right: 0;
    max-height: 70vh; border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    z-index: 200; box-shadow: 0 -8px 30px rgba(74,44,10,.3);
  }
  .pos-cart.open { transform: translateY(0); }
  /* Botón flotante para abrir carrito */
  .cart-fab {
    display: flex !important;
  }
}
/* Oculta fab en pantallas grandes */
.cart-fab {
  display: none;
  position: fixed; bottom: 1rem; right: 1rem; z-index: 150;
  background: var(--pan-dorado); color: #fff; border: none;
  border-radius: 50px; padding: .85rem 1.4rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  box-shadow: var(--shadow-lg); cursor: pointer;
  align-items: center; gap: .5rem;
  touch-action: manipulation;
}

/* POS responsive */
.pos-grid, .pos-products { min-width: 0; }
.pos-products .form-group { max-width: 100%; }
#metodo-btns { max-width: 100%; }
.pos-grid { max-width: 100%; }

/* Evita que el contenido flexible amplíe la página en Safari móvil. */
body:has(.pos-grid) { overflow-x: hidden; }
.pos-sale-details, .pos-sale-details > * { min-width: 0; }
.pos-mobile-menu-toggle, .pos-mobile-menu { display: none; }

@media (max-width: 900px) {
  .pos-topbar { gap: .45rem; }
  .pos-topbar #clock { display: none; }
  .pos-topbar .topbar-nav { margin-left: auto; }
  .pos-topbar .topbar-user { max-width: 160px; overflow: hidden; }
}

@media (max-width: 640px) {
  .pos-topbar { height: 58px; min-height: 58px; padding: .5rem .75rem; gap: .35rem; justify-content: flex-start; }
  .pos-topbar .topbar-brand { gap: .45rem; font-size: 1rem; min-width: 0; flex: 1 1 auto; }
  .pos-topbar .topbar-brand .logo-icon { font-size: 1.25rem; }
  .pos-topbar .topbar-brand .brand-logo { width: 38px; height: 38px; }
  .pos-topbar .pos-brand-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pos-topbar .pos-desktop-link, .pos-topbar .topbar-user, .pos-topbar .pos-logout { display: none; }
  .pos-topbar .topbar-nav { gap: .15rem; overflow: visible; flex: 0 0 auto; }
  .pos-topbar .topbar-nav a, .pos-topbar .topbar-nav button, .pos-topbar .topbar-user { width: 38px; min-width: 38px; min-height: 38px; padding: .35rem .45rem; justify-content: center; overflow: hidden; }
  .pos-mobile-menu-toggle { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: rgba(255,255,255,.11); color: var(--pan-miel); font-size: 1.25rem; cursor: pointer; }
  .pos-mobile-menu { display: none; position: fixed; z-index: 450; top: 64px; right: .75rem; width: min(280px, calc(100vw - 1.5rem)); padding: .55rem; border: 1px solid var(--pan-beige); border-radius: 14px; background: #fffdf9; box-shadow: 0 14px 34px rgba(54,29,4,.25); }
  .pos-mobile-menu.open { display: block; }
  .pos-mobile-menu-user { display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem .75rem; border-bottom: 1px solid #f0e2ca; color: var(--pan-cafe); }
  .pos-mobile-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pan-dorado); color: #fff; font-size: .9rem; font-weight: 800; }
  .pos-mobile-menu-user strong, .pos-mobile-menu-user small { display: block; }
  .pos-mobile-menu-user small { margin-top: .1rem; color: #98775b; text-transform: capitalize; }
  .pos-topbar .pos-mobile-menu a { display: flex; align-items: center; gap: .7rem; width: 100%; min-width: 0; min-height: 0; padding: .75rem; border-radius: 9px; color: var(--pan-cafe); font-weight: 700; text-decoration: none; overflow: visible; box-sizing: border-box; }
  .pos-mobile-menu-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .pos-topbar .pos-mobile-menu a:hover { background: #fff2d7; }
  .pos-mobile-menu .pos-mobile-menu-exit { color: #b42318; }
  .pos-grid { display: block; height: auto; min-height: calc(100vh - 58px); }
  .pos-products { width: 100%; padding: .8rem; padding-bottom: 5.75rem; overflow: visible; }
  .pos-sale-details { display: block !important; margin-bottom: .85rem !important; }
  .pos-sale-details .form-group { min-width: 0 !important; width: 100%; }
  .pos-sale-details .form-group + .form-group { margin-top: .85rem !important; }
  #metodo-btns { width: 100%; max-width: 100%; overscroll-behavior-x: contain; }
  .metodo-btn { flex: 0 0 auto; min-height: 48px; }
  .pos-tabs { margin: 0 -.8rem 1rem; padding: 0 .8rem; scroll-snap-type: x proximity; }
  .pos-tab-btn { min-height: 48px; padding: .6rem .9rem; scroll-snap-align: start; }
  .search-box { min-height: 52px; }
  .cat-tabs { margin-left: -.1rem; margin-right: -.1rem; }
  .cat-tab { min-height: 44px; padding: .45rem .8rem; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .product-card { min-width: 0; min-height: 150px; padding: .75rem .5rem; }
  .product-name { overflow-wrap: anywhere; }
  .cart-fab { bottom: max(1rem, env(safe-area-inset-bottom)); right: .8rem; left: .8rem; justify-content: center; }
  .pos-cart { padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 380px) {
  .pos-topbar .pos-brand-title span { display: none; }
  .pos-topbar .pos-brand-title { max-width: 160px; }
  .products-grid { gap: .5rem; }
  .product-card { min-height: 138px; }
}

/* ── CATEGORÍAS (tabs filtro) ──────────────────────────── */
.cat-tabs {
  display: flex; gap: .4rem; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: .4rem; margin-bottom: 1rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  padding: .4rem .9rem; border-radius: 20px; border: 2px solid var(--pan-beige);
  background: #fff; font-size: .83rem; font-weight: 600; cursor: pointer;
  color: var(--pan-cafe-m); transition: all .2s; flex-shrink: 0;
  white-space: nowrap; touch-action: manipulation;
}
.cat-tab.active, .cat-tab:hover {
  background: var(--pan-dorado); border-color: var(--pan-dorado); color: #fff;
}

/* ── GRID DE PRODUCTOS ─────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: .75rem;
}
/* Tablet */
@media (max-width: 900px) and (min-width: 641px) {
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
/* Móvil: 2 columnas */
@media (max-width: 640px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
}
/* Móvil muy pequeño */
@media (max-width: 360px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: .45rem; }
}

.product-card {
  background: #fff; border-radius: var(--radius); padding: .85rem .75rem;
  cursor: pointer; transition: all .25s; border: 2px solid transparent;
  text-align: center; position: relative;
  box-shadow: 0 2px 8px rgba(74,44,10,.08);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.product-card:hover  { border-color: var(--pan-dorado); transform: translateY(-2px); box-shadow: var(--shadow); }
.product-card:active { transform: scale(.96); }
.product-emoji { font-size: 2rem; margin-bottom: .35rem; display: block; }
.product-name  { font-size: .82rem; font-weight: 700; color: var(--pan-cafe); margin-bottom: .2rem; line-height: 1.25; }
.product-price { font-size: .95rem; font-weight: 800; color: var(--pan-dorado); }
.product-badge { position: absolute; top: .35rem; left: .35rem; font-size: .62rem; }

@media (max-width: 480px) {
  .product-card  { padding: .75rem .6rem; }
  .product-emoji { font-size: 1.7rem; }
  .product-name  { font-size: .78rem; }
  .product-price { font-size: .88rem; }
}

/* ── CARRITO ───────────────────────────────────────────── */
.cart-header {
  padding: .9rem 1.1rem;
  background: rgba(0,0,0,.2);
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  color: var(--pan-miel);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
/* Handle drag en móvil */
.cart-handle {
  display: none; width: 40px; height: 5px; background: rgba(255,255,255,.3);
  border-radius: 3px; margin: .6rem auto 0; cursor: grab;
}
@media (max-width: 640px) { .cart-handle { display: block; } }

.cart-items { flex: 1; overflow-y: auto; padding: .6rem; -webkit-overflow-scrolling: touch; }
.cart-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem; background: rgba(255,255,255,.07);
  border-radius: 8px; margin-bottom: .45rem;
}
.cart-item-emoji { font-size: 1.3rem; flex-shrink: 0; }
.cart-item-info  { flex: 1; min-width: 0; }
.cart-item-name  { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-price { font-size: .75rem; color: var(--pan-beige); }
.cart-qty { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.cart-qty button {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  cursor: pointer; font-weight: 700; font-size: .9rem; transition: all .15s;
  touch-action: manipulation;
}
.cart-qty .minus { background: rgba(208,80,0,.7); color: #fff; }
.cart-qty .minus:hover { background: var(--pan-acento); }
.cart-qty .plus  { background: rgba(212,134,10,.7); color: #fff; }
.cart-qty .plus:hover  { background: var(--pan-dorado); }
.cart-qty span { min-width: 22px; text-align: center; font-weight: 700; font-size: .88rem; }

.cart-footer { padding: .85rem 1rem; border-top: 1px solid rgba(255,255,255,.15); flex-shrink: 0; }
.cart-totals { margin-bottom: .7rem; }
.cart-row {
  display: flex; justify-content: space-between;
  font-size: .82rem; color: var(--pan-beige); margin-bottom: .2rem;
}
.cart-total-big {
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 900;
  color: var(--pan-miel); padding-top: .45rem;
  border-top: 1px solid rgba(255,255,255,.2);
}
.cart-actions { display: flex; flex-direction: column; gap: .45rem; }

.cart-empty { text-align: center; padding: 2rem 1rem; color: var(--pan-beige); }
.cart-empty .icon { font-size: 2.8rem; margin-bottom: .5rem; }

/* Qty display */
.qty-display {
  font-size: 1.7rem; font-weight: 900; text-align: center;
  color: var(--pan-miel); min-width: 38px;
}

/* ── POS Tabs (Venta / Pedidos) ────────────────────────── */
.pos-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--pan-beige); margin-bottom: 1rem; overflow-x: auto; }
.pos-tab-btn {
  padding: .55rem 1.2rem; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: .87rem; font-weight: 600;
  color: var(--pan-cafe-m); border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: all .2s; white-space: nowrap; flex-shrink: 0;
  touch-action: manipulation;
}
.pos-tab-btn.active { color: var(--pan-dorado); border-bottom-color: var(--pan-dorado); }
.pos-tab-btn:hover  { color: var(--pan-cafe); }
.pos-tab-content    { display: none; }
.pos-tab-content.active { display: block; }

/* Info pedido en POS */
.pos-order-info {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; margin-bottom: 1rem;
}
@media (max-width: 900px) {
  .pos-order-info { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .pos-order-info { grid-template-columns: 1fr; }
}

/* ── Buscador ──────────────────────────────────────────── */
.search-box {
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 1.5px solid var(--pan-beige);
  border-radius: 10px; padding: .5rem .9rem; margin-bottom: 1rem;
}
.search-box input {
  flex: 1; border: none; outline: none; font-family: var(--font-body);
  font-size: 16px; background: transparent; color: var(--pan-cafe);
}

/* ── Pedidos card ──────────────────────────────────────── */
.pedido-card {
  background: #fff; border-radius: var(--radius); padding: .9rem;
  margin-bottom: .75rem; box-shadow: 0 2px 8px rgba(74,44,10,.1);
  border-left: 4px solid var(--pan-dorado);
}
.pedido-card.pendiente  { border-left-color: #F59E0B; }
.pedido-card.pagado     { border-left-color: #3B82F6; }
.pedido-card.listo      { border-left-color: #10B981; }
.pedido-card.cancelado  { border-left-color: var(--pan-error); }

/* ── Portal cliente ────────────────────────────────────── */
.client-header {
  background: var(--pan-cafe); color: var(--pan-crema);
  padding: .85rem 1.2rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .5rem;
  position: sticky; top: 0; z-index: 100;
}
.client-hero {
  background: linear-gradient(135deg, var(--pan-cafe) 0%, var(--pan-cafe-m) 50%, var(--pan-dorado) 100%);
  padding: 2.5rem 1.5rem; text-align: center; color: #fff;
}
.client-hero h1 { font-family: var(--font-display); font-size: 1.8rem; color: var(--pan-miel); margin-bottom: .4rem; }
.client-hero p  { color: var(--pan-beige); font-size: .9rem; }

@media (max-width: 640px) {
  .client-hero { padding: 1.5rem 1rem; }
  .client-hero h1 { font-size: 1.4rem; }
}

/* Carrito flotante cliente */
#cart-panel {
  width: 320px !important;
}
@media (max-width: 480px) {
  #cart-panel {
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    bottom: 0 !important; right: 0 !important;
    max-height: 80vh !important;
  }
}

/* ── SPEI upload ───────────────────────────────────────── */
.upload-area {
  border: 2px dashed var(--pan-beige); border-radius: var(--radius);
  padding: 1.5rem; text-align: center; cursor: pointer;
  color: #8B7355; transition: all .2s;
}
.upload-area:hover, .upload-area.drag-over {
  border-color: var(--pan-dorado); background: var(--pan-claro);
}
.upload-area input[type=file] { display: none; }

/* ── Dashboard gráfica + top ───────────────────────────── */
.dashboard-main-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
  .dashboard-main-grid { grid-template-columns: 1fr; }
}

/* ── Admin grid forms ──────────────────────────────────── */
.admin-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
}
@media (max-width: 540px) {
  .admin-form-grid { grid-template-columns: 1fr; }
}

/* ── Utilidades ────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: #8B7355; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.d-flex { display: flex; }
.gap-1  { gap: .5rem; }
.gap-2  { gap: 1rem; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-100 { width: 100%; }

/* Ocultar/mostrar por breakpoint */
.hide-mobile  { }
.show-mobile  { display: none; }
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

/* ── Print ─────────────────────────────────────────────── */
/* ============================================================
   ADMIN SHELL — navegación lateral unificada
============================================================ */
:root {
  --admin-sidebar-w: 264px;
  --admin-sidebar-compact: 76px;
  --admin-topbar-h: 72px;
  --admin-cocoa: #3f240d;
  --admin-cocoa-2: #553114;
  --admin-gold: #e39a13;
  --admin-paper: #fbf8f2;
}

body.admin-shell { background:#f8f5ee; }

.admin-shell .app-sidebar {
  position:fixed; inset:0 auto 0 0; z-index:300;
  width:var(--admin-sidebar-w); min-height:100vh; padding:0;
  background:linear-gradient(180deg, var(--admin-cocoa) 0%, #321b09 100%);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:8px 0 28px rgba(63,36,13,.12);
  transition:width .24s ease, transform .24s ease;
}

.sidebar-brand {
  min-height:var(--admin-topbar-h); padding:0 1.35rem;
  display:flex; align-items:center; gap:.8rem; flex-shrink:0;
  color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand-mark {
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #f0ae35, #c87308);
  box-shadow:0 7px 18px rgba(227,154,19,.28); font-size:1.2rem;
}
.sidebar-brand strong { display:block; font:700 1.08rem/1.1 var(--font-display); color:#fff; }
.sidebar-brand small {
  display:block; margin-top:.3rem; color:#d9b98c;
  font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}

.sidebar-nav {
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:1rem 0 .6rem; scrollbar-width:thin;
}
.nav-group { margin:.15rem 0; }
.nav-group-toggle {
  width:100%; height:46px; padding:0 1.25rem;
  display:flex; align-items:center; gap:.75rem;
  border:0; background:transparent; color:#cbb293;
  font:700 .72rem var(--font-body); letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; transition:background .18s, color .18s;
}
.nav-group-toggle:hover { background:rgba(255,255,255,.055); color:#fff; }
.nav-group-icon, .side-icon {
  width:24px; flex:0 0 24px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem; color:#e8b14b;
}
.nav-group-title { text-align:left; flex:1; }
.nav-group-chevron { font-size:1rem; transition:transform .2s ease; }
.nav-group.open .nav-group-chevron { transform:rotate(180deg); }

.nav-group-panel {
  display:flex; flex-direction:column; max-height:0; overflow:hidden;
  transition:max-height .22s ease;
}
.nav-group.open .nav-group-panel { max-height:240px; }
.admin-shell .app-sidebar .nav-group-panel a,
.admin-shell .app-sidebar .sidebar-logout {
  min-height:44px; padding:.6rem 1.25rem .6rem 1.55rem;
  display:flex; align-items:center; gap:.65rem;
  border:0; border-left:3px solid transparent;
  color:#eadbc8; text-decoration:none; font-size:.86rem; font-weight:600;
  transition:background .16s, color .16s, border-color .16s;
}
.admin-shell .app-sidebar .nav-group-panel a:hover,
.admin-shell .app-sidebar .sidebar-logout:hover {
  background:rgba(255,255,255,.07); color:#fff;
}
.admin-shell .app-sidebar .nav-group-panel a.active {
  background:linear-gradient(90deg, rgba(227,154,19,.23), rgba(227,154,19,.05));
  border-left-color:var(--admin-gold); color:#ffd98d;
}
.admin-shell .app-sidebar .nav-group-panel a.active .side-icon { color:#ffc95e; }

.sidebar-logout {
  margin-top:auto; flex-shrink:0; border-top:1px solid rgba(255,255,255,.08) !important;
  color:#ff9f99 !important;
}

.admin-shell .app-topbar {
  position:sticky; top:0; z-index:200;
  width:calc(100% - var(--admin-sidebar-w)); height:var(--admin-topbar-h);
  margin-left:var(--admin-sidebar-w); padding:0 1.6rem;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,.96); border-bottom:1px solid #eadfce;
  box-shadow:0 3px 16px rgba(74,44,10,.07);
  transition:width .24s ease, margin-left .24s ease;
}
.app-topbar-heading { display:flex; align-items:center; gap:1rem; min-width:0; }
.admin-shell .topbar-menu-toggle {
  width:40px; height:40px; margin:0; flex-shrink:0;
  border:1px solid #e5d7c3; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fffaf2; color:var(--admin-cocoa); box-shadow:none;
}
.admin-shell .topbar-menu-toggle:hover { background:#f7ead4; }
.app-topbar-eyebrow {
  display:block; margin-bottom:.1rem; color:#9a8166;
  font-size:.63rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.app-topbar-title {
  display:block; color:var(--admin-cocoa); font:700 1.23rem var(--font-display);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app-topbar-actions { display:flex; align-items:center; gap:.7rem; }
.app-user-avatar {
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; color:#fff; background:linear-gradient(135deg, #d98b0b, #8b4b0a);
  font-weight:800; box-shadow:0 5px 14px rgba(139,75,10,.2);
}
.app-user-copy strong, .app-user-copy small { display:block; }
.app-user-copy strong { color:#4b2b11; font-size:.82rem; }
.app-user-copy small { margin-top:.15rem; color:#a28466; font-size:.68rem; text-transform:capitalize; }

.admin-shell .layout {
  margin-left:var(--admin-sidebar-w); min-height:calc(100vh - var(--admin-topbar-h));
  transition:margin-left .24s ease;
}
.admin-shell .main-content { width:100%; padding:1.65rem 1.8rem 2.5rem; }

.sidebar-backdrop { display:none; }

body.sidebar-hidden .app-sidebar { transform:translateX(-104%); }
body.sidebar-hidden .app-topbar {
  width:100%;
  margin-left:0;
}
body.sidebar-hidden .layout { margin-left:0; }

@media (max-width: 900px) {
  .admin-shell .app-sidebar {
    width:280px; transform:translateX(-102%);
    box-shadow:14px 0 38px rgba(30,15,4,.26);
  }
  body.sidebar-mobile-open .app-sidebar { transform:translateX(0); }
  .admin-shell .app-topbar {
    width:100%; margin-left:0; padding:0 1rem;
  }
  .admin-shell .layout {
    margin-left:0; min-height:calc(100vh - var(--admin-topbar-h));
    flex-direction:row;
  }
  .admin-shell .main-content { padding:1.15rem 1rem 2rem; }
  .sidebar-backdrop {
    position:fixed; inset:0; z-index:250; border:0;
    background:rgba(31,17,7,.48); backdrop-filter:blur(2px);
  }
  body.sidebar-mobile-open .sidebar-backdrop { display:block; }
}

@media (max-width: 560px) {
  .app-topbar-eyebrow, .app-user-copy { display:none; }
  .app-topbar-title { font-size:1.05rem; }
  .app-user-avatar { width:34px; height:34px; }
}

@media print {
  .topbar, .sidebar, .no-print { display: none !important; }
  .main-content { padding: 0; }
  .card { box-shadow: none; }
}

@media (max-width: 640px) {
  .pos-products .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}