body.kiosk{ background:#f6f8fb; }
.kiosk-header,.kiosk-footer{ background:#fff; border-color:#eaeaea; border-style:solid; }
.kiosk-header{ border-bottom-width:1px; }
.kiosk-footer{ border-top-width:1px; }
.chip{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid #e0e0e0; padding:.25rem .5rem; border-radius:999px; background:#fff; white-space:nowrap; }
.chip img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.chip.active{ border-color:#0d6efd; box-shadow:0 0 0 2px rgba(13,110,253,.15); }
.card img{ height:140px; object-fit:cover; }
.floating-cart{ position:fixed; bottom:20px; right:20px; }
.theme-dark body.kiosk{ background:#111; color:#eee; }
/* Grid fluido con columnas auto-ajustables */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

/* En pantallas grandes, permite más columnas (opcional) */
@media (min-width: 1200px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* Miniatura cuadrada con recorte elegante */
.thumb.ratio { --bs-aspect-ratio: 100%; } /* 1:1 */
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* recorta manteniendo proporción */
  object-position: center;
  display: block;
  border-top-left-radius: 0.75rem;   /* mismo radio que la card */
  border-top-right-radius: 0.75rem;
}

/* Título en una o dos líneas como máximo */
.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em; /* estabiliza alturas */
}
/* Layout de página con header y footer fijos */
html, body { height: 100%; }
.body-wrap {
  display: grid;
  grid-template-rows: auto 1fr auto; /* header - main - footer */
  min-height: 100%;
}
.kiosk-shell {
  height: calc(100vh - var(--footer-h, 56px) - var(--header-h, 64px));
  display: grid;
  grid-template-columns: 280px 1fr 360px; /* filtros | catálogo | carrito */
  gap: 16px;
}

/* Sidebars fijas con scroll propio */
.kiosk-left,
.kiosk-right {
  position: sticky;
  top: var(--header-h, 64px);
  align-self: start;
  max-height: calc(100vh - var(--header-h, 64px) - var(--footer-h, 56px));
  overflow: auto;
}

.kiosk-center {
  overflow: auto;   /* el catálogo scrollea, footer no se mueve */
}

/* Paneles */
.kiosk-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  padding: 14px;
}

/* Grilla de productos (más columnas en pantallas grandes) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 14px;
}
@media (min-width: 1200px){ .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); } }
@media (min-width: 1600px){ .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); } }

/* Miniatura cuadrada */
.thumb.ratio { --bs-aspect-ratio: 100%; }
.thumb img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-top-left-radius:.75rem; border-top-right-radius:.75rem; }

/* Títulos truncados */
.card-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }

/* Chips */
.chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:999px; border:1px solid #e5e7eb; color:#111; text-decoration:none;
}
.chip.active, .chip:hover { background:#eef6ff; border-color:#bcd9ff; }

/* Footer fijo: asegúrate de asignar esta altura real en runtime si difiere */
footer { height: var(--footer-h, 56px); }


/* Unified app.css additions */
:root{
  --card-radius: 1rem;
}
body.kiosk{
  font-size: 16.5px;
}
.card{
  border-radius: var(--card-radius);
}
.product-grid .card .thumb img{
  object-fit: cover;
  width:100%;
  height:100%;
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
}
.btn{
  padding:.6rem .9rem;
  font-weight:600;
}
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid #e5e7eb; padding:.35rem .6rem; border-radius:999px; background:#fff;
}
.chip.active{ background:#0d6efd; color:#fff; border-color:#0d6efd; }

/* === Kiosk: right sidebar cart on desktop; below on mobile === */
.k-sticky{
  position: sticky;
  top: calc(var(--header-h, 64px) + 12px);
  max-height: calc(100vh - var(--header-h, 64px) - 24px);
  overflow: auto;
}
#cart-sidebar .card,
#cart-sidebar .list-group-item{
  border-radius: .75rem;
}

/* === Catálogo: Grid robusto para ubicar el carrito a la derecha en desktop === */
@media (min-width: 992px){
  .d-lg-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; align-items: start; }
  .catalog-aside{ min-width: 320px; }
}
.k-sticky{
  position: sticky;
  top: calc(var(--header-h, 64px) + 12px);
  max-height: calc(100vh - var(--header-h, 64px) - 24px);
  overflow: auto;
}
#cart-sidebar .card,
#cart-sidebar .list-group-item{
  border-radius: .75rem;
}