/* ================================================================
   TABOR COFFEE — style.css
   Diseño artesanal alineado con el logo: montañas, taza, granos
   Paleta: beige #F0EBE3, café oscuro #5C3317, dorado #B8956A
   ================================================================ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400&family=Lato:wght@300;400;700&display=swap');

/* ── Tokens de Color ──────────────────────────────────────────── */
:root {
  --tabor-paper:   #FAF6EE;
  --tabor-cream:   #F5EDE0;
  --tabor-beige:   #EFE4D2;
  --tabor-logo-bg: #F0EBE3;

  --tabor-dark:    #5C3317;
  --tabor-medium:  #8B6143;
  --tabor-light:   #A67C52;
  --tabor-accent:  #B8956A;
  --tabor-muted:   #9C8B7A;
  --tabor-border:  #E3D4BC;
  --tabor-text:    #3D1F0A;

  /* estados pedido */
  --status-nuevo:      #DC2626;
  --status-preparando: #D97706;
  --status-listo:      #059669;
  --status-entregado:  #6B7280;
  --status-cancelado:  #9CA3AF;

  /* Bootstrap overrides */
  --bs-body-bg:     var(--tabor-paper);
  --bs-body-color:  var(--tabor-text);
  --bs-border-color: var(--tabor-border);
  --bs-card-border-color: var(--tabor-border);
}

/* Login estable: tarjeta vertical en cualquier pantalla */
body.login-bg {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: clamp(1rem, 4vw, 2.5rem);
  overflow-x: hidden;
}
body.login-bg .login-card {
  width: min(100%, 480px);
  max-width: 480px;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  border-radius: 26px;
  overflow: hidden;
}
body.login-bg .login-hero {
  display: block;
  width: 100%;
  padding: 2rem 2rem 1.6rem;
  grid-row: auto;
}
body.login-bg .login-logo-wrap {
  width: min(230px, 75%);
  height: auto;
  margin: 0 auto 1.1rem;
}
body.login-bg .login-logo-wrap img { width: 100%; height: auto; padding: 3px; }
body.login-bg .login-hero h1 { color: #fff8ea; font-size: clamp(1.9rem, 6vw, 2.45rem); }
body.login-bg .login-hero .brand-tagline { color: #efc778; font-size: .72rem; line-height: 1.5; }
body.login-bg .login-hero-copy { color: #f7e7ce; opacity: 1; font-size: .91rem; line-height: 1.55; }
body.login-bg .login-body { width: 100%; padding: 2rem 2.25rem 1.6rem; background: #fff; }
body.login-bg .login-footer { width: 100%; padding: 1.15rem 2.25rem 1.25rem; grid-column: auto; }
body.login-bg .login-copyright { margin: .9rem 0 0; text-align: center; color: var(--tabor-muted); font-size: .7rem; }
body.login-bg .input-group { flex-wrap: nowrap; }
body.login-bg .input-group .form-control { min-width: 0; }

@media (max-width: 520px) {
  body.login-bg { padding: 0; justify-content: flex-start; background: #fff; }
  body.login-bg .login-card { width: 100%; max-width: none; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  body.login-bg .login-hero { padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem 1.25rem; }
  body.login-bg .login-logo-wrap { width: 155px; height: auto; margin-bottom: .75rem; border-radius: 16px; }
  body.login-bg .login-hero-copy { display: none; }
  body.login-bg .login-hero .ornament { display: none; }
  body.login-bg .login-body { padding: 1.5rem 1.25rem 1.2rem; }
  body.login-bg .login-footer { margin-top: auto; padding: 1rem 1.25rem max(1.2rem, env(safe-area-inset-bottom)); }
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Lato', system-ui, sans-serif;
  background-color: var(--tabor-paper);
  color: var(--tabor-text);
  font-size: 14px;
  line-height: 1.6;
}

h1, h2, h3, h4, .display-font {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ── Scrollbars ───────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--tabor-cream); }
::-webkit-scrollbar-thumb  { background: var(--tabor-medium); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--tabor-dark); }

/* ── Selection ────────────────────────────────────────────────── */
::selection {
  background: rgba(184,149,106,.28);
  color: var(--tabor-dark);
}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar-coffeebar {
  background: linear-gradient(135deg, #3D1F0A 0%, var(--tabor-dark) 60%, #7B4A2C 100%);
  border-bottom: 2px solid var(--tabor-accent);
  box-shadow: 0 2px 16px rgba(61,31,10,.35);
  padding: .5rem 1.5rem;
}

/* Logo container en navbar */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}

.navbar-brand .brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 2px solid var(--tabor-accent);
  background: var(--tabor-logo-bg);
  object-fit: contain;
  padding: 2px;
  flex-shrink: 0;
}

.navbar-brand .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.navbar-brand .brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: .06em;
  color: var(--tabor-logo-bg);
}

.navbar-brand .brand-sub {
  font-size: .62rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--tabor-accent);
  font-weight: 600;
  margin-top: 1px;
}

.navbar-coffeebar .nav-link {
  color: rgba(240,235,227,.82) !important;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .45rem .85rem !important;
  border-radius: 8px;
  transition: background .18s, color .18s;
}

.navbar-coffeebar .nav-link:hover,
.navbar-coffeebar .nav-link.active {
  color: var(--tabor-logo-bg) !important;
  background: rgba(184,149,106,.22);
}

.navbar-coffeebar .nav-link .bi { margin-right: .3rem; }

.navbar-coffeebar .navbar-toggler {
  border: none;
  color: var(--tabor-logo-bg);
}

/* ── Pill de usuario logueado ─────────────────────────────────── */
.user-pill {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(184,149,106,.18);
  border: 1px solid rgba(184,149,106,.35);
  border-radius: 99px;
  padding: .3rem .9rem;
  font-size: .78rem;
  color: var(--tabor-logo-bg);
  font-weight: 600;
}

.user-pill .rol-badge {
  background: var(--tabor-accent);
  color: var(--tabor-dark);
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .15rem .45rem;
  border-radius: 99px;
}

/* ── Botón Salir ──────────────────────────────────────────────── */
.btn-logout {
  border: 1px solid rgba(240,235,227,.4);
  color: var(--tabor-logo-bg);
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  padding: .35rem .9rem;
  transition: background .18s, border-color .18s;
  background: transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.btn-logout:hover {
  background: rgba(220,38,38,.22);
  border-color: rgba(220,38,38,.5);
  color: #fecaca;
}

/* ================================================================
   LAYOUT
   ================================================================ */
.container-fluid.py-3 {
  background-color: var(--tabor-paper);
  min-height: calc(100vh - 64px - 60px);
}

/* ── Páginas de sección ───────────────────────────────────────── */
.page-header {
  margin-bottom: 1.5rem;
}

.page-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 1.55rem;
  color: var(--tabor-dark);
  letter-spacing: .02em;
}

.page-subtitle {
  font-size: .8rem;
  color: var(--tabor-muted);
  font-weight: 400;
  margin-top: .15rem;
}

/* ================================================================
   CARDS — estilo artesanal
   ================================================================ */
.coffee-card {
  background: #fff;
  border: 1px solid var(--tabor-border);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(92,51,23,.07);
  transition: box-shadow .2s, transform .2s;
  overflow: hidden;
}

.coffee-card:hover {
  box-shadow: 0 6px 24px rgba(92,51,23,.13);
}

/* esquina decorativa estilo café artesanal */
.coffee-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 22px 22px 0;
  border-color: transparent var(--tabor-cream) transparent transparent;
  pointer-events: none;
}

.coffee-card { position: relative; }

.card-header-tabor {
  background: linear-gradient(135deg, #3D1F0A 0%, var(--tabor-dark) 100%);
  color: var(--tabor-logo-bg);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .06em;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid rgba(184,149,106,.3);
}

/* ── Stat cards (dashboard) ───────────────────────────────────── */
.stat-card {
  background: #fff;
  border: 1px solid var(--tabor-border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(92,51,23,.07);
}

.stat-card .stat-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--tabor-dark);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--tabor-muted);
  font-weight: 700;
  margin-top: .35rem;
}

/* ================================================================
   BOTONES
   ================================================================ */
.btn-tabor-primary {
  background: linear-gradient(135deg, #3D1F0A 0%, var(--tabor-dark) 100%);
  color: var(--tabor-logo-bg);
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .65rem 1.4rem;
  transition: opacity .18s, transform .15s;
  box-shadow: 0 3px 10px rgba(61,31,10,.28);
}

.btn-tabor-primary:hover {
  opacity: .9;
  transform: translateY(-1px);
  color: var(--tabor-logo-bg);
}

.btn-tabor-primary:active { transform: scale(.97); }

/* alias para compatibilidad con código existente */
.btn-coffee-primary {
  background: linear-gradient(135deg, #3D1F0A 0%, var(--tabor-dark) 100%);
  color: var(--tabor-logo-bg);
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .65rem 1.4rem;
  transition: opacity .18s, transform .15s;
  box-shadow: 0 3px 10px rgba(61,31,10,.28);
}
.btn-coffee-primary:hover {
  opacity: .9; transform: translateY(-1px); color: var(--tabor-logo-bg);
}
.btn-coffee-primary:active { transform: scale(.97); }

/* ── Botón outline café ───────────────────────────────────────── */
.btn-tabor-outline {
  background: transparent;
  color: var(--tabor-dark);
  border: 1.5px solid var(--tabor-dark);
  border-radius: 12px;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .6rem 1.3rem;
  transition: background .18s, color .18s;
}

.btn-tabor-outline:hover {
  background: var(--tabor-dark);
  color: var(--tabor-logo-bg);
}

/* ── Botones de estado (KDS) ──────────────────────────────────── */
.btn-kds-start {
  background: var(--tabor-dark);
  color: var(--tabor-cream);
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  width: 100%;
  padding: .7rem;
  transition: opacity .15s;
}

.btn-kds-start:hover { opacity: .88; }

.btn-kds-listo {
  background: var(--status-listo);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  width: 100%;
  padding: .7rem;
}

/* ================================================================
   FORMS — inputs con paleta Tabor
   ================================================================ */
.form-control,
.form-select {
  background-color: var(--tabor-cream);
  border: 1.5px solid var(--tabor-border);
  border-radius: 10px;
  color: var(--tabor-text);
  font-size: .88rem;
  font-weight: 500;
  transition: border-color .18s, box-shadow .18s;
}

.form-control:focus,
.form-select:focus {
  background-color: #fff;
  border-color: var(--tabor-accent);
  box-shadow: 0 0 0 3px rgba(184,149,106,.18);
  color: var(--tabor-text);
  outline: none;
}

.form-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tabor-dark);
  margin-bottom: .4rem;
}

.input-group-text {
  background: var(--tabor-cream);
  border: 1.5px solid var(--tabor-border);
  color: var(--tabor-medium);
}

/* ================================================================
   LOGIN PAGE
   ================================================================ */
.login-bg {
  min-height: 100dvh;
  background: linear-gradient(160deg, #3D1F0A 0%, var(--tabor-dark) 55%, #7B4A2C 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  flex-direction: column;
}

.login-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(240,235,227,.04) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.login-card {
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--tabor-border);
  box-shadow: 0 16px 60px rgba(20,8,2,.45);
  width: 100%;
  max-width: 920px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(310px,.9fr) minmax(390px,1.1fr);
  position: relative;
  z-index: 1;
}

.login-hero {
  background: linear-gradient(160deg, #3D1F0A 0%, var(--tabor-dark) 60%, #7B4A2C 100%);
  padding: 3.5rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-row: 1 / 3;
}

.login-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(240,235,227,.045) 1px, transparent 1px);
  background-size: 18px 18px;
}

.login-logo-wrap {
  position: relative;
  z-index: 1;
  width: min(280px,100%);
  height: auto;
  margin: 0 auto 1.25rem;
  border-radius: 24px;
  border: 2px solid var(--tabor-accent);
  background: var(--tabor-logo-bg);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-logo-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 4px;
}

.login-hero h1 {
  position: relative;
  z-index: 1;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 2.35rem;
  letter-spacing: .03em;
  color: var(--tabor-logo-bg);
  line-height: 1;
  margin-bottom: .3rem;
}

.login-hero .brand-tagline {
  position: relative;
  z-index: 1;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tabor-accent);
  font-weight: 600;
}

.login-hero-copy { position:relative; z-index:1; max-width:320px; margin:1.4rem auto 0; color:rgba(255,248,234,.72); font-size:.95rem; line-height:1.6; }

.login-hero .ornament {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.25rem;
  color: var(--tabor-accent);
  opacity: .6;
  font-size: .72rem;
}

.login-hero .ornament::before,
.login-hero .ornament::after {
  content: '';
  display: block;
  width: 55px;
  height: 1px;
  background: var(--tabor-accent);
  opacity: .5;
}

.login-body {
  padding: 3rem 3.2rem 1.5rem;
}

.login-body h2 { font-family:'Playfair Display',Georgia,serif; font-weight:900; color:var(--tabor-dark); margin:0 0 .35rem; font-size:2rem; }
.login-help { color:var(--tabor-muted); line-height:1.5; margin:0 0 1.6rem; font-size:.92rem; }

.login-body .section-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--tabor-muted);
  font-weight: 700;
  text-align: left;
  margin-bottom: .5rem;
}

.btn-login {
  background: linear-gradient(135deg, #3D1F0A 0%, var(--tabor-dark) 100%);
  color: var(--tabor-logo-bg);
  border: none;
  border-radius: 12px;
  font-weight: 900;
  font-size: .88rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .9rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: 0 4px 14px rgba(61,31,10,.3);
  transition: opacity .18s, transform .15s;
  cursor: pointer;
}

.btn-login:hover { opacity: .9; transform: translateY(-1px); }
.btn-login:active { transform: scale(.97); }

.login-footer {
  background: var(--tabor-cream);
  border-top: 1px solid var(--tabor-border);
  padding: 1.1rem 3.2rem 1.4rem;
  grid-column: 2;
}

.btn-password{border:1px solid var(--tabor-border);border-left:0;background:var(--tabor-cream);color:var(--tabor-medium);padding:0 1rem;border-radius:0 10px 10px 0}.login-home{display:block;text-align:center;margin-top:.8rem;color:var(--tabor-medium);font-size:.82rem;text-decoration:none}.login-home:hover{text-decoration:underline}

@media (max-width: 720px) {
  .login-bg{padding:0;background:var(--tabor-cream);justify-content:flex-start}
  .login-card{max-width:none;min-height:100dvh;border:0;border-radius:0;grid-template-columns:1fr;box-shadow:none}
  .login-hero{padding:max(1.5rem,env(safe-area-inset-top)) 1.25rem 1.5rem}
  .login-hero{grid-row:auto}
  .login-logo-wrap{width:150px;margin-bottom:.9rem;border-radius:17px}
  .login-hero h1{font-size:1.8rem}.login-hero-copy{display:none}.login-hero .ornament{display:none}
  .login-body{padding:1.75rem 1.25rem 1.25rem}.login-body h2{font-size:1.7rem}
  .login-footer{grid-column:1;padding:1rem 1.25rem max(1.25rem,env(safe-area-inset-bottom))}
  .login-bg>p{display:none}
}

.login-footer .quick-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--tabor-muted);
  font-weight: 700;
  text-align: center;
  margin-bottom: .75rem;
}

.quick-btn {
  background: #fff;
  border: 1px solid var(--tabor-border);
  border-radius: 12px;
  padding: .6rem .5rem;
  text-align: center;
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s;
  text-decoration: none;
  display: block;
}

.quick-btn:hover {
  background: var(--tabor-beige);
  border-color: var(--tabor-medium);
  box-shadow: 0 2px 8px rgba(92,51,23,.1);
}

.quick-btn .ql-role {
  font-size: .75rem;
  font-weight: 800;
  color: var(--tabor-dark);
  display: block;
}

.quick-btn .ql-user {
  font-size: .65rem;
  color: var(--tabor-muted);
  display: block;
  margin-top: 1px;
}

/* ================================================================
   KDS BARISTA — 3 columnas
   ================================================================ */
.kds-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  height: calc(100vh - 80px);
  overflow: hidden;
}

@media (max-width: 991px) {
  .kds-board { grid-template-columns: 1fr; height: auto; }
}

.kds-col {
  display: flex;
  flex-direction: column;
  background: var(--tabor-paper);
  border: 1px solid var(--tabor-border);
  border-radius: 16px;
  overflow: hidden;
}

.kds-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--tabor-cream);
  border-bottom: 1px solid var(--tabor-border);
}

.kds-col-title {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--tabor-dark);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.kds-col-title .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}

.dot-nuevo      { background: var(--status-nuevo); }
.dot-preparando { background: var(--status-preparando); }
.dot-listo      { background: var(--status-listo); }

.kds-count-badge {
  background: var(--tabor-dark);
  color: var(--tabor-cream);
  font-size: .65rem;
  font-weight: 800;
  padding: .15rem .55rem;
  border-radius: 99px;
}

.kds-col-body {
  flex: 1;
  overflow-y: auto;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ticket */
.kds-ticket {
  background: #fff;
  border: 1px solid var(--tabor-border);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 1px 6px rgba(92,51,23,.06);
}

.kds-ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--tabor-border);
}

.kds-ticket-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--tabor-dark);
  line-height: 1;
}

.kds-ticket-table {
  font-size: .75rem;
  font-weight: 700;
  color: var(--tabor-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.kds-timer {
  font-size: .7rem;
  font-weight: 700;
  background: var(--tabor-cream);
  border: 1px solid var(--tabor-border);
  border-radius: 99px;
  padding: .2rem .6rem;
  color: var(--tabor-muted);
  white-space: nowrap;
}

.kds-timer.warning-wait {
  background: #FEF3C7;
  border-color: #F59E0B;
  color: #92400E;
}

.kds-timer.danger-wait {
  background: #FEE2E2;
  border-color: var(--status-nuevo);
  color: #991B1B;
  animation: pulse-timer 1.4s ease-in-out infinite;
}

@keyframes pulse-timer {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

.kds-item-row {
  padding: .45rem 0;
  border-bottom: 1px solid var(--tabor-cream);
}

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

.kds-item-qty {
  font-size: 1rem;
  font-weight: 900;
  color: var(--tabor-dark);
}

.kds-item-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--tabor-text);
}

.kds-item-meta {
  font-size: .72rem;
  color: var(--tabor-muted);
  margin-top: .2rem;
  line-height: 1.5;
}

.kds-prep-highlights {
  display:grid;
  grid-template-columns:minmax(110px,.75fr) minmax(150px,1.25fr);
  gap:.45rem;
  margin:.55rem 0;
}
.kds-prep-highlight {
  background:#fff7d6;
  border:2px solid #d9a441;
  border-radius:10px;
  padding:.5rem .65rem;
  color:#4b2a13;
}
.kds-prep-highlight > span {
  display:block;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.06em;
  color:#8a551b;
}
.kds-prep-highlight > strong {
  display:block;
  font-size:1.35rem;
  line-height:1.12;
  text-transform:uppercase;
}
.kds-prep-syrups {
  grid-column:1 / -1;
  background:#ffe9a6;
}
.kds-prep-syrups div {
  font-size:1.05rem;
  line-height:1.35;
}

@media (max-width: 479px) {
  .kds-prep-highlights { grid-template-columns:1fr; }
  .kds-prep-syrups { grid-column:auto; }
  .kds-prep-highlight > strong { font-size:1.15rem; }
}

.kds-recipe-box {
  margin-top: .5rem;
  padding: .5rem .75rem;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  font-size: .72rem;
  color: #92400E;
  font-weight: 600;
  line-height: 1.6;
}

/* ================================================================
   BEBIDAS GRID (mesero & menú público)
   ================================================================ */
.drinks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

@media (max-width: 576px) {
  .drinks-grid { grid-template-columns: repeat(2, 1fr); }
}

.btn-drink-large {
  background: #fff;
  border: 1.5px solid var(--tabor-border);
  border-radius: 16px;
  padding: 1rem .75rem;
  text-align: center;
  min-height: 110px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  color: var(--tabor-text);
}

.btn-drink-large:hover,
.btn-drink-large:focus {
  border-color: var(--tabor-accent);
  box-shadow: 0 4px 16px rgba(92,51,23,.14);
  transform: translateY(-2px);
  outline: none;
}

.btn-drink-large img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--tabor-border);
}

.btn-drink-large .drink-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--tabor-dark);
  line-height: 1.2;
}

.drink-cat-pill {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: var(--tabor-cream);
  color: var(--tabor-medium);
  border: 1px solid var(--tabor-border);
  border-radius: 99px;
  padding: .15rem .55rem;
  display: inline-block;
}

/* ================================================================
   TABLA ADMIN
   ================================================================ */
.tabor-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .83rem;
}

.tabor-table thead th {
  background: linear-gradient(135deg, #3D1F0A 0%, var(--tabor-dark) 100%);
  color: var(--tabor-logo-bg);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .75rem 1rem;
  border: none;
}

.tabor-table thead th:first-child { border-radius: 12px 0 0 0; }
.tabor-table thead th:last-child  { border-radius: 0 12px 0 0; }

.tabor-table tbody tr {
  background: #fff;
  transition: background .15s;
}

.tabor-table tbody tr:hover {
  background: var(--tabor-cream);
}

.tabor-table tbody td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--tabor-border);
  vertical-align: middle;
  color: var(--tabor-text);
}

/* ================================================================
   BADGES DE ESTADO
   ================================================================ */
.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .25rem .65rem;
  border-radius: 99px;
}

.badge-estado::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-nuevo      { background: #FEE2E2; color: var(--status-nuevo);      }
.badge-preparando { background: #FEF3C7; color: #B45309;                   }
.badge-listo      { background: #D1FAE5; color: var(--status-listo);       }
.badge-entregado  { background: #F3F4F6; color: var(--status-entregado);   }
.badge-cancelado  { background: #F3F4F6; color: var(--status-cancelado);   }

/* ================================================================
   MENÚ PÚBLICO QR
   ================================================================ */
.menu-public-hero {
  background: linear-gradient(160deg, #3D1F0A 0%, var(--tabor-dark) 60%, #7B4A2C 100%);
  padding: 2.5rem 1.5rem 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.menu-public-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(240,235,227,.04) 1px, transparent 1px);
  background-size: 20px 20px;
}

.menu-public-hero .hero-logo {
  position: relative;
  z-index: 1;
  width: 96px; height: 96px;
  margin: 0 auto 1rem;
  border-radius: 18px;
  border: 2px solid var(--tabor-accent);
  background: var(--tabor-logo-bg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

.menu-public-hero .hero-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
}

.menu-public-hero h1 {
  position: relative;
  z-index: 1;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--tabor-logo-bg);
  margin-bottom: .2rem;
}

.menu-public-hero .hero-sub {
  position: relative;
  z-index: 1;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tabor-accent);
  font-weight: 600;
}

.aura-menu-card {
  background: #fff;
  border: 1px solid var(--tabor-border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 2px 10px rgba(92,51,23,.07);
  cursor: pointer;
}

.aura-menu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(92,51,23,.16);
}

.aura-menu-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform .3s;
}

.aura-menu-card:hover img {
  transform: scale(1.04);
}

/* ================================================================
   CARRITO (ticket lateral)
   ================================================================ */
.cart-panel {
  background: #fff;
  border: 1px solid var(--tabor-border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
  position: sticky;
  top: 72px;
  overflow: hidden;
}

.cart-header {
  padding: 1rem 1.25rem;
  background: var(--tabor-dark);
  color: var(--tabor-logo-bg);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .05em;
  flex-shrink: 0;
}

.cart-body { flex: 1; overflow-y: auto; padding: .75rem; }

.cart-item {
  padding: .6rem .75rem;
  background: var(--tabor-cream);
  border: 1px solid var(--tabor-border);
  border-radius: 10px;
  margin-bottom: .5rem;
  font-size: .8rem;
}

.cart-item-name {
  font-weight: 700;
  color: var(--tabor-dark);
  font-size: .85rem;
}

.cart-item-meta {
  font-size: .7rem;
  color: var(--tabor-muted);
  margin-top: .15rem;
}

.cart-footer {
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--tabor-border);
  flex-shrink: 0;
}

/* ================================================================
   IMPRESIÓN — ticket 80mm
   ================================================================ */
@media print {
  * { visibility: hidden; }
  .printable-ticket, .printable-ticket * { visibility: visible; }
  .printable-ticket {
    position: fixed;
    top: 0; left: 0;
    width: 80mm;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000;
    background: #fff;
    padding: 6mm;
  }
  .print-logo {
    width: 32mm;
    margin: 0 auto 3mm;
    display: block;
  }
  .print-title {
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    letter-spacing: .1em;
    border-bottom: 1px dashed #000;
    padding-bottom: 2mm;
    margin-bottom: 3mm;
  }
  .print-divider {
    border-top: 1px dashed #000;
    margin: 2mm 0;
  }
  .no-print { display: none !important; }
}

/* ================================================================
   FOOTER
   ================================================================ */
footer {
  background: var(--tabor-cream) !important;
  border-top: 1px solid var(--tabor-border) !important;
  color: var(--tabor-muted);
  font-size: .72rem;
  padding: .85rem 1rem;
  text-align: center;
}

footer strong {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--tabor-dark);
}

/* ================================================================
   ALERTAS Y NOTIFICACIONES
   ================================================================ */
.alert-tabor-info {
  background: #FEF9F0;
  border: 1px solid var(--tabor-accent);
  border-left: 4px solid var(--tabor-accent);
  border-radius: 10px;
  color: var(--tabor-dark);
  font-size: .83rem;
  padding: .75rem 1rem;
}

/* ── Notificación pedido listo (banner animado) ───────────────── */
.notification-listo {
  background: var(--tabor-dark);
  color: var(--tabor-cream);
  border-left: 4px solid var(--status-listo);
  border-radius: 12px;
  padding: .75rem 1.1rem;
  font-weight: 700;
  font-size: .85rem;
  animation: slide-in .3s ease-out;
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   KDS — clases legacy usadas por main.js (compatibilidad)
   ================================================================ */
.kds-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  height: calc(100vh - 130px);
  overflow: hidden;
}

.kds-column {
  display: flex;
  flex-direction: column;
  background: var(--tabor-paper);
  border: 1px solid var(--tabor-border);
  border-radius: 16px;
  overflow: hidden;
}

.kds-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #fff;
  flex-shrink: 0;
}

.kds-header-nuevos     { background: var(--status-nuevo); }
.kds-header-preparando { background: var(--status-preparando); }
.kds-header-listos     { background: var(--status-listo); }

/* el cuerpo scrollable de cada columna */
.kds-column > div:not(.kds-column-header) {
  flex: 1;
  overflow-y: auto;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ticket generado por main.js buildTicketHTML */
.kds-ticket {
  background: #fff;
  border: 1px solid var(--tabor-border);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 1px 6px rgba(92,51,23,.06);
}

.kds-ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--tabor-border);
}

.kds-ticket-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--tabor-dark);
  line-height: 1;
}

.kds-ticket-table {
  font-size: .75rem;
  font-weight: 700;
  color: var(--tabor-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.kds-timer {
  font-size: .7rem;
  font-weight: 700;
  background: var(--tabor-cream);
  border: 1px solid var(--tabor-border);
  border-radius: 99px;
  padding: .2rem .6rem;
  color: var(--tabor-muted);
  white-space: nowrap;
}
.kds-timer.warning-wait {
  background: #FEF3C7; border-color: #F59E0B; color: #92400E;
}
.kds-timer.danger-wait {
  background: #FEE2E2; border-color: var(--status-nuevo); color: #991B1B;
  animation: pulse-timer 1.4s ease-in-out infinite;
}

.kds-item-row {
  padding: .45rem 0;
  border-bottom: 1px solid var(--tabor-cream);
}
.kds-item-row:last-child { border-bottom: none; }
.kds-item-qty   { font-size: 1rem; font-weight: 900; color: var(--tabor-dark); }
.kds-item-title { font-size: .88rem; font-weight: 700; color: var(--tabor-text); }
.kds-item-meta  { font-size: .72rem; color: var(--tabor-muted); margin-top: .2rem; line-height: 1.5; }

/* ================================================================
   RESPONSIVE — mobile-first
   ================================================================

   Breakpoints:
     xs  < 480px   → móvil pequeño (iPhone SE)
     sm  480–767px → móvil grande
     md  768–991px → tableta vertical / tableta horizontal pequeña
     lg  992–1199px→ tableta horizontal grande / laptop pequeña
     xl  ≥ 1200px  → escritorio

   ================================================================ */

/* ── xs / sm — móvil ─────────────────────────────────────────── */
@media (max-width: 767px) {

  html, body { max-width: 100%; overflow-x: hidden; }
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

  /* Navbar: logo más pequeño, sin subtítulo */
  .navbar-coffeebar          { padding: max(.35rem,env(safe-area-inset-top)) .75rem .35rem; }
  .navbar-brand .brand-logo  { width: 36px; height: 36px; border-radius: 8px; }
  .navbar-brand .brand-name  { font-size: 1.05rem; }
  .navbar-brand .brand-sub   { display: none; }
  .user-pill                 { padding: .25rem .6rem; font-size: .72rem; }
  .user-pill .rol-badge      { display: none; }
  .navbar-toggler            { width: 44px; height: 44px; padding: 0; display:flex; align-items:center; justify-content:center; }
  .navbar-coffeebar .navbar-collapse { max-height: calc(100dvh - 58px); overflow-y:auto; overscroll-behavior:contain; padding:.55rem .35rem .8rem; border-top:1px solid rgba(184,149,106,.18); }
  .navbar-coffeebar .navbar-nav { align-items:stretch !important; gap:.2rem !important; }
  .navbar-coffeebar .nav-link { display:flex; align-items:center; min-height:44px; padding:.65rem .8rem !important; font-size:.82rem !important; border-radius:9px; }
  .navbar-coffeebar .dropdown-menu { padding:.25rem 0 .25rem .6rem !important; }
  .navbar-coffeebar .dropdown-item { min-height:42px; padding:.6rem .75rem; }
  .navbar-coffeebar .navbar-collapse > .d-flex { width:100%; justify-content:space-between; padding:.6rem .35rem 0; border-top:1px solid rgba(184,149,106,.15); }
  .navbar-coffeebar .user-pill, .navbar-coffeebar .btn-logout { min-height:42px; display:flex; align-items:center; }

  /* container más apretado */
  .container-fluid.py-3 { padding: .75rem !important; }
  footer { font-size:.68rem; padding:.75rem; text-align:center; }
  .coffee-card { border-radius:14px; }
  .btn, button, .form-control, .form-select { min-height:44px; }
  .btn-sm { min-height:38px; }
  h2 { font-size:1.3rem; }
  h3 { font-size:1.2rem; }
  .table-responsive { -webkit-overflow-scrolling:touch; border-radius:12px; }
  .table-responsive table { min-width:680px; }

  /* página header */
  .page-title   { font-size: 1.15rem; }

  /* stat cards: 2×2 en móvil */
  .stat-grid-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .stat-card { padding: .85rem .75rem; }
  .stat-card .stat-value { font-size: 1.75rem; }
  .stat-card .stat-label { font-size: .6rem; letter-spacing: .1em; }

  /* KDS en móvil: acordeón / columna única */
  .kds-container {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
    gap: .75rem;
  }
  .kds-column { min-height: 180px; }
  .kds-column > div:not(.kds-column-header) { max-height: 55vh; }

  .kds-ticket            { padding: .65rem .75rem; }
  .kds-ticket-number     { font-size: 1.1rem; }
  .kds-toolbar { align-items:flex-start !important; }
  .kds-toolbar > div:last-child { width:100%; justify-content:space-between; }
  .kds-column-header { min-height:44px; font-size:.76rem; }
  .kds-ticket .btn-lg { min-height:48px; font-size:.9rem; }

  /* Pedido del mesero: una sola columna y carrito dentro del flujo */
  .pedido-layout-tablet { display:block !important; }
  .pedido-layout-tablet > div:last-child { position:static !important; max-height:none !important; margin-top:1rem; }
  .pedido-layout-tablet > div:last-child .coffee-card { max-height:none !important; }
  #cart-items-container-side { max-height:45dvh; }
  #reto-sorpresa-card .d-flex.flex-shrink-0 { width:100%; flex-direction:column; }
  #reto-sorpresa-card .d-flex.flex-shrink-0 .btn { width:100%; }
  .bebida-card-item .btn-drink-large { height:100%; }
  .bebida-card-item .btn-drink-large img { height:105px !important; }

  /* Formularios complejos de recetas utilizables con dedos */
  .recipe-row > .col-3 { flex:0 0 42%; max-width:42%; }
  .recipe-row > .col-4 { flex:0 0 58%; max-width:58%; }
  .recipe-row > .col-2 { flex:0 0 40%; max-width:40%; margin-top:.25rem; }
  .recipe-row > .col-1 { flex:0 0 20%; max-width:20%; margin-top:.25rem; }

  /* botones de pedido: 2 columnas en móvil */
  #bebidas-grid          { --bs-gutter-x: .5rem; }
  .btn-drink-large       { min-height: 90px; padding: .7rem .5rem; font-size: .78rem; }
  .btn-drink-large .bi   { font-size: 1.4rem !important; }

  /* carrito: barra fija abajo en móvil */
  #cart-float-bar { transition:transform .18s ease,box-shadow .18s ease; }
  #cart-float-bar:active { transform:scale(.94); }
  /* El botón es compacto; ya no hace falta reservar una franja completa. */
  .pb-cart { padding-bottom: 0; }

  /* menú público hero más compacto */
  .menu-public-hero       { padding: 1.5rem 1rem 2rem; }
  .menu-public-hero h1    { font-size: 1.55rem; }
  .menu-public-hero .hero-logo { width: 70px; height: 70px; }

  /* login más compacto */
  .login-hero             { padding: 1.75rem 1.25rem 1.5rem; }
  .login-hero h1          { font-size: 1.8rem; }
  .login-logo-wrap        { width: 90px; height: 90px; }
  .login-body             { padding: 1.25rem 1.25rem 1rem; }
  .login-footer           { padding: 1rem 1.25rem 1.25rem; }

  /* modales: pantalla completa en móvil */
  .modal-dialog           { margin: 0; max-width: 100%; }
  .modal-content          { border-radius: 20px 20px 0 0; }
  .modal-dialog-centered  { align-items: flex-end; min-height: 100%; }

  /* tablas admin: ocultar columnas no esenciales */
  .table-hide-mobile      { display: none !important; }

  /* mis_pedidos: cards apiladas */
  .pedido-list-item       { padding: .75rem !important; }
  .pedido-list-actions    { margin-top: .5rem; display: flex; gap: .35rem; flex-wrap: wrap; }

  /* aura menu cards: 1 columna en xs, 2 en sm */
  .aura-menu-grid         { grid-template-columns: 1fr 1fr !important; gap: .75rem !important; }
  .aura-menu-card img     { height: 110px; }
}

/* xs específico < 480px */
@media (max-width: 479px) {
  .aura-menu-grid         { grid-template-columns: 1fr !important; }
  .aura-menu-card img     { height: 140px; }
  .kds-ticket-number      { font-size: 1rem; }
  .btn-drink-large        { min-height: 82px; }
}

/* ── md — tableta vertical + tableta horizontal pequeña ──────── */
@media (min-width: 768px) and (max-width: 991px) {
  /* Bootstrap mantiene el menú hamburguesa hasta 991 px */
  .navbar-toggler { width:46px; height:46px; padding:0; display:flex; align-items:center; justify-content:center; }
  .navbar-coffeebar .navbar-collapse { max-height:calc(100dvh - 62px); overflow-y:auto; padding:.65rem .5rem 1rem; }
  .navbar-coffeebar .navbar-nav { align-items:stretch !important; }
  .navbar-coffeebar .nav-link { min-height:44px; display:flex; align-items:center; padding:.6rem .8rem !important; }
  .navbar-coffeebar .navbar-collapse > .d-flex { justify-content:flex-end; padding-top:.6rem; border-top:1px solid rgba(184,149,106,.15); }
  .navbar-brand .brand-sub           { font-size: .56rem; letter-spacing: .2em; }

  .container-fluid.py-3 { padding: 1rem 1.25rem !important; }

  /* KDS tableta vertical: columnas apiladas y legibles */
  .kds-container {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
    gap:.85rem;
  }
  .kds-column:first-child { grid-column:auto; }
  .kds-column { min-height:220px; }
  .kds-column > div:not(.kds-column-header) { max-height: 38dvh; }

  /* bebidas grid: 3 columnas en tableta vertical */
  #bebidas-grid .col-6 { flex: 0 0 33.333%; max-width: 33.333%; }

  /* stat cards: 4 en una fila */
  .stat-grid-mobile { grid-template-columns: repeat(4, 1fr); gap: .75rem; }

  /* menú público: 2 cols por categoría */
  .aura-menu-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── lg — tableta horizontal grande (landscape iPad, Surface) ── */
@media (min-width: 992px) and (max-width: 1199px) {

  /* Navbar: todo en fila, links más compactos */
  .navbar-coffeebar .nav-link { font-size: .78rem; padding: .38rem .7rem !important; }

  /* KDS: 3 columnas, altura completa de pantalla */
  .kds-container {
    grid-template-columns: repeat(3, 1fr);
    height: calc(100vh - 130px);
    overflow: hidden;
  }
  .kds-column > div:not(.kds-column-header) {
    max-height: calc(100vh - 200px);
  }

  /* bebidas: 3-4 columnas según espacio disponible */
  #bebidas-grid .col-6 { flex: 0 0 25%; max-width: 25%; }

  /* stat cards: 4 en una fila */
  .stat-grid-mobile { grid-template-columns: repeat(4, 1fr); }

  /* menú público: 3 cols */
  .aura-menu-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── xl — escritorio ─────────────────────────────────────────── */
@media (min-width: 1200px) {
  .kds-container {
    grid-template-columns: repeat(3, 1fr);
    height: calc(100vh - 130px);
    overflow: hidden;
  }
  .kds-column > div:not(.kds-column-header) {
    max-height: calc(100vh - 200px);
  }
  .aura-menu-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── Tableta horizontal específica: orientación landscape ─────── */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {

  /* Navbar ocupa menos altura */
  .navbar-coffeebar          { padding: .35rem 1rem; }
  .navbar-brand .brand-logo  { width: 36px; height: 36px; }
  .navbar-brand .brand-name  { font-size: 1.1rem; }
  .container-fluid.py-3      { padding: .6rem 1rem !important; }

  /* KDS: 3 columnas fijas que llenan la pantalla */
  .kds-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: calc(100dvh - 126px);
    overflow: hidden;
    gap: .6rem;
  }
  .kds-column { border-radius: 12px; }
  .kds-column:first-child { grid-column: auto; } /* cancela override tableta vertical */
  .kds-column-header       { padding: .65rem .85rem; font-size: .76rem; min-height:46px; }
  .kds-column > div:not(.kds-column-header) {
    max-height: none;
    min-height:0;
    padding: .65rem;
    gap: .65rem;
  }
  .kds-ticket              { padding: .75rem; border-width:1px; box-shadow:0 3px 10px rgba(61,31,10,.1); }
  .kds-ticket-number       { font-size: 1.3rem; }
  .kds-item-qty            { font-size: 1rem; }
  .kds-item-title          { font-size: .9rem; }
  .kds-item-meta           { font-size: .74rem; line-height:1.45; }
  .kds-ticket .btn-lg      { min-height:48px; font-size:.9rem; }
  .page-index.seccion-barista .container-fluid.py-3 { height:calc(100dvh - 55px); display:flex; flex-direction:column; overflow:hidden; }
  .page-index.seccion-barista .kds-toolbar { flex:0 0 auto; margin-bottom:.55rem !important; }
  .page-index.seccion-barista .kds-container { flex:1 1 auto; height:auto; min-height:0; }
  .page-index.seccion-barista footer { display:none; }

  /* pedido mesero: layout 2 columnas (bebidas | carrito) */
  .pedido-layout-tablet {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
    align-items: start;
  }

  /* menú público: hero compacto */
  .menu-public-hero       { padding: 1.25rem 1rem 1.75rem; }
  .menu-public-hero h1    { font-size: 1.65rem; }
  .menu-public-hero .hero-logo { width: 72px; height: 72px; }
  .aura-menu-grid         { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── Animaciones reducidas (accesibilidad) ────────────────────── */
@keyframes pulse-timer {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .kds-timer.danger-wait { animation: none; }
  .kds-ticket, .aura-menu-card, .btn-drink-large { transition: none; }
}

/* ═══ Escritorio operativo: navegación, pedido y modales ═══ */
@media (min-width: 992px) {
  html, body { overflow-x: clip; }

  .page-pedido .pedido-layout-tablet {
    grid-template-columns: minmax(0,1fr) 400px !important;
    gap: 1.15rem !important;
  }
  .page-pedido #reto-sorpresa-card { padding:.7rem 1rem !important; margin-bottom:.75rem !important; }
  .page-pedido #reto-sorpresa-card h5 { font-size:1rem; }
  .page-pedido #reto-sorpresa-card p { max-width:620px; }
  .page-pedido .pedido-search-wrap {
    display:grid; grid-template-columns:145px minmax(0,1fr); align-items:center;
    gap:.75rem; margin-bottom:.75rem !important;
  }
  .page-pedido .pedido-search-wrap > label { margin:0 !important; }
  .page-pedido .pedido-search-wrap .input-group { box-shadow:none !important; }
  .page-pedido .pedido-search-wrap .input-group-lg > * { min-height:42px; font-size:.9rem; }
  .page-pedido #bloque-bebidas > .mb-2,
  .page-pedido #bloque-bebidas > .mb-3 {
    display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.35rem !important;
  }
  .page-pedido #bloque-bebidas > .mb-2 > div:first-child,
  .page-pedido #bloque-bebidas > .mb-3 > div:first-child {
    flex:0 0 145px; padding-top:.35rem; margin:0 !important;
  }
  .page-pedido #bloque-bebidas > p { margin-top:.55rem; }

  #modalBebida .modal-dialog { max-width:620px; margin:1rem auto; min-height:calc(100% - 2rem); }
  #modalBebida .modal-content { max-height:calc(100dvh - 2rem); overflow:hidden; }
  #modalBebida .modal-header, #modalBebida .modal-footer { flex:0 0 auto; }
  #modalBebida .modal-body { overflow-y:auto; padding:1.15rem 1.4rem !important; overscroll-behavior:contain; }
  #modalBebida .modal-footer { position:relative; z-index:2; box-shadow:0 -5px 16px rgba(61,31,10,.1); }

  #panel-listos-flotante { right:420px !important; width:310px !important; bottom:12px !important; border-radius:18px !important; }
  #btn-abrir-listos { right:420px !important; bottom:20px !important; }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .navbar-coffeebar .container-fluid { padding-left:.6rem !important; padding-right:.6rem !important; }
  .navbar-coffeebar .nav-link { font-size:.68rem !important; padding:.32rem .38rem !important; }
  .navbar-brand { margin-right:.45rem !important; }
  .navbar-brand .brand-sub, .user-pill .user-name-text, .user-pill .rol-badge, .btn-logout .logout-text { display:none !important; }
  .user-pill, .btn-logout { width:36px; height:36px; justify-content:center; padding:0 !important; border-radius:50% !important; }
}

/* KDS simplificado: solo información esencial para preparación. */
.kds-diner-name {
  margin: .35rem 0 .65rem;
  padding: .55rem .7rem;
  background: #2f1609;
  color: #fff8eb;
  border-radius: 10px;
}
.kds-diner-name span,
.kds-simple-size span,
.kds-simple-syrups > span,
.kds-comment-large span {
  display: block;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
  opacity: .72;
}
.kds-diner-name strong { display:block; font-size:1.35rem; line-height:1.15; }
.kds-item-simple { display:grid; gap:.55rem; }
.kds-coffee-name { font-size:1.18rem; font-weight:900; line-height:1.15; color:var(--tabor-dark); }
.kds-simple-size,
.kds-simple-syrups {
  padding: .55rem .65rem;
  background: #fff3c8;
  border: 2px solid #d99b2b;
  border-radius: 10px;
  color: #4a2b0d;
}
.kds-simple-size strong { display:block; font-size:1.55rem; line-height:1; }
.kds-simple-syrups div { font-size:1rem; line-height:1.3; }
.kds-simple-toppings {
  padding: .65rem .75rem;
  background: #dcfce7;
  border: 2.5px solid #16a34a;
  border-radius: 12px;
  color: #064e3b;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
}
.kds-simple-toppings > span {
  display: block;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  color: #15803d;
  margin-bottom: .25rem;
  text-transform: uppercase;
}
.kds-simple-toppings strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.25;
  color: #052e16;
  text-decoration: underline 3.5px #16a34a;
  text-underline-offset: 4px;
}


.kds-kept-details {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.35rem;
}
.kds-kept-details > div {
  min-width:0;
  padding:.45rem .5rem;
  background:#f5eee5;
  border:1px solid #d7c1a6;
  border-radius:9px;
}
.kds-kept-details span {
  display:block;
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.08em;
  color:#80684f;
}
.kds-kept-details strong {
  display:block;
  font-size:.78rem;
  line-height:1.15;
  overflow-wrap:anywhere;
}
.kds-order-staff {
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  margin:-.25rem 0 .65rem;
  padding:0 .15rem;
  color:var(--tabor-muted);
  font-size:.72rem;
}
.kds-comment-large {
  padding: .75rem;
  background: #ffe0df;
  border: 3px solid #dc3545;
  border-radius: 12px;
  color: #721c24;
}
.kds-comment-large strong { display:block; font-size:1.25rem; line-height:1.25; overflow-wrap:anywhere; }
.kds-general-comment { margin-bottom:.65rem; }
.kds-ticket-web {
  border:3px solid #168650 !important;
  box-shadow:0 0 0 3px rgba(22,134,80,.14),0 8px 22px rgba(22,134,80,.18) !important;
}

@media (max-width: 479px) {
  .kds-kept-details { grid-template-columns:1fr; }
  .kds-order-staff { flex-direction:column; gap:.1rem; }
}

/* ── Caja de cafetería: cuadrícula fluida y segura en móvil ─── */
.page-caja { overflow-x: hidden; }
.page-caja .caja-page-header,
.page-caja .caja-summary-grid,
.page-caja .caja-panels { min-width: 0; }
.page-caja .caja-page-header > *,
.page-caja .caja-panels > *,
.page-caja .coffee-card { min-width: 0; }
.caja-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
.caja-summary-card { height: 100%; }
.caja-summary-label { line-height: 1.25; }
.caja-summary-value {
  margin-top: .35rem;
  font-size: clamp(1.45rem, 2.25vw, 2rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.caja-table-wrap { max-width: 100%; }
.caja-table-wrap table { min-width: 560px; }

.ofrecer-postre-card {
  background: linear-gradient(135deg, #fffaf0, #fff0bd);
  border: 2px dashed #c58a18;
  box-shadow: 0 5px 18px rgba(99, 58, 12, .1);
}
.menu-producto-filter {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: .4rem;
}
.menu-producto-filter .btn { font-weight: 800; }
.pedido-search-wrap { max-width: 720px; }
.pedido-search-wrap .input-group { border-radius: 14px; overflow: hidden; }
.pedido-search-wrap .form-control,
.pedido-search-wrap .input-group-text,
.pedido-search-wrap .btn { border-color: #d8c5aa; }

/* Cobro móvil: una vez elegida la cuenta, mostrar primero el pago. */
@media (max-width: 991px) {
  .page-cobros.cuenta-cobro-activa .container-fluid.py-3 > .row.g-4 > .col-lg-7 {
    display: none;
  }
  .page-cobros.cuenta-cobro-activa .container-fluid.py-3 > .row.g-4 > .col-lg-5 {
    width: 100%;
  }
  .page-cobros.cuenta-cobro-activa #resumen-cobro {
    position: static !important;
    padding: 1rem !important;
  }
  .page-cobros.cuenta-cobro-activa #resumen-cobro h3 { font-size: 1.35rem; }
  .page-cobros.cuenta-cobro-activa #resumen-cobro .fs-3 { font-size: 1.55rem !important; }
  .page-cobros.cuenta-cobro-activa #formCobro .form-select-lg,
  .page-cobros.cuenta-cobro-activa #formCobro .input-group-lg > .form-control {
    font-size: 1rem;
  }
}
.menu-export-preview {
  display: block;
  aspect-ratio: 1240 / 1754;
  object-fit: contain;
  background: #eee7dc;
}

@media (max-width: 479px) {
  .menu-producto-filter { width: 100%; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1199px) {
  .caja-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .page-caja .caja-page-header { display: block !important; }
  .page-caja .caja-page-header h2 { font-size: 1.35rem; }
  .caja-page-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-top: .85rem;
  }
  .caja-page-actions .btn {
    min-width: 0;
    padding-inline: .55rem;
    white-space: normal;
  }
  .caja-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  .caja-summary-card { padding: .85rem !important; }
  .caja-summary-label { font-size: .7rem !important; }
  .caja-summary-value { font-size: clamp(1.25rem, 7vw, 1.75rem); }
  .caja-panels h4 { font-size: 1.2rem; }
  .caja-movimiento-form .form-label { margin-bottom: .25rem; font-size: .75rem; font-weight: 700; }
  .caja-table-wrap table { min-width: 520px !important; }
}

@media (max-width: 389px) {
  .caja-summary-grid { grid-template-columns: 1fr; }
  .caja-page-actions { grid-template-columns: 1fr; }
  .caja-summary-value { font-size: 1.55rem; }
}

/* ================================================================
   MISC — clases de utilidad extra
   ================================================================ */
.text-tabor      { color: var(--tabor-dark) !important; }
.text-tabor-muted { color: var(--tabor-muted) !important; }
.text-tabor-accent { color: var(--tabor-accent) !important; }
.bg-tabor-cream  { background-color: var(--tabor-cream) !important; }
.bg-tabor-paper  { background-color: var(--tabor-paper) !important; }
.border-tabor    { border-color: var(--tabor-border) !important; }
.fw-black        { font-weight: 900 !important; }
.extra-small     { font-size: .72rem; }
.tracking-wide   { letter-spacing: .08em; }
.tracking-wider  { letter-spacing: .16em; }