:root{
  --brand:#0b6ef9;           /* Azul primario */
  --brand-2:#0ea5e9;         /* Celeste */
  --accent:#16a34a;          /* Verde botones */
  --banner:#100f0f;          /* Durazno del header */
  --okbar:#1a7f2e;           /* Barra WhatsApp */
  --okbar-h:48px;            /* altura mínima/estimada de la barra */
  --bg:#f3f4f6;              /* Fondo gris claro */
  --card:#ffffff;            /* Fondo tarjeta */
  --text:#111827;            /* Texto */
  --muted:#6b7280;           /* Texto secundario */
  --border:#e5e7eb;          /* Bordes suaves */
  --radius:16px;
  --nav-offset:180px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg);display:flex;flex-direction:column;height:100vh;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;padding-top:var(--nav-offset);padding-bottom:var(--okbar-h);font-size:16px}
body::-webkit-scrollbar{display:none}

@media (max-width:640px){
  html,body{overflow-x:clip}
  body{font-size:19px}
}

@supports not (overflow: clip){
  @media (max-width:640px){
    html,body{overflow-x:hidden}
  }
}

main{flex:1;padding-bottom:60px}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin-inline:auto;padding:0 16px}

.brand-logo{
  display:block;
  height:100px;
  width:auto;
  object-fit:contain;
}

/* Navbar */
.navbar{
  background:var(--banner);
  border-bottom:1px solid #f3b98b;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  color:#fff;
}
.navbar__top{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  padding:12px 16px;
  width:100%;
}

.navbar__main{
  display:flex;
  align-items:center;
  gap:24px;
  flex:0 0 auto;
  min-width:0;
}

.navbar__main .brand{
  margin-right:0;
  flex-shrink:0;
}

.navbar__center{
  display:flex;
  flex:1 1 auto;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:6px;
  min-width:0;
  max-width:820px;
  margin-inline:auto;
}
.navbar__right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:16px;
  margin-left:auto;
  min-width:0;
  flex-shrink:0;
}
.navbar__filters{
  border-top:1px solid rgba(243,185,139,.6);
  padding:6px 0 12px;
}
.navbar__filters.container{max-width:1200px;}
.navbar__filters .query-row{margin:8px 0 0;}

#auth-box{display:flex;gap:20px}

@media (min-width:1024px){
  .navbar__top.container{
    max-width:none;
    margin-inline:0;
    padding-inline:24px;
  }
}

.btn{--bg:var(--brand);--fg:#fff;border:none;background:var(--bg);color:var(--fg);padding:10px 14px;border-radius:999px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.btn:hover{filter:saturate(1.05) brightness(0.98)}
.btn:focus{outline:3px solid rgba(59,130,246,.35);outline-offset:2px}
.btn--ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn--green{--bg:var(--accent)}

.tagline{margin:0;font-size:16px;text-align:center;color:#fff;font-style:normal;white-space:normal}
@media (min-width:1025px){
  .tagline{font-size:24px}
}
/* Form inputs */
/* Address search strip */
.addr-wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}


.input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.input::placeholder{color:#9ca3af}

/* WhatsApp bar */
.okbar{
  background:var(--okbar);
  color:#eaffea;
  padding:6px 12px;
  font-weight:600;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1000;
  margin:0;
  border-radius:0;
  min-height:var(--okbar-h);
  width:100vw;
  max-width:100vw;
  overflow-x:clip;
  isolation:isolate;
  contain:content;
  padding-bottom:calc(env(safe-area-inset-bottom,0) + 6px);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

@supports not (overflow: clip){
  .okbar{overflow-x:hidden}
}

/* Query row */
.query-row{display:grid;grid-template-columns:repeat(3,1fr) auto auto;gap:10px;align-items:center;margin:14px 0}
select.input{appearance:none;background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%236b7280"><path d="M5.5 7.5l4.5 5 4.5-5"/></svg>') no-repeat right 12px center;background-size:16px;padding-right:38px}
#clear-filters{width:auto;white-space:nowrap}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0 60px}
/* Variación de grid para mostrar cinco columnas en pantallas grandes */
.grid.grid-5{grid-template-columns:repeat(5,1fr)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.card h3{margin:0;font-size:20px;line-height:1.3}
.card p{margin:0;color:var(--muted);line-height:1.4;font-size:12px}
.card .prod-title{margin:10px 0 6px;min-height:calc(1.3em * 2);max-height:calc(1.3em * 2);overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.card-desc{min-height:calc(1.4em * 3);max-height:calc(1.4em * 3);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3; line-clamp: 3;text-align:left;font-size:12px}
@media (max-width:640px){
  .card-desc{font-size:14px}
}
.prod-img{width:100%;height:200px;object-fit:cover;border-radius:var(--radius)}
.prod-img.placeholder{background:#eef1f4;display:flex;align-items:center;justify-content:center;opacity:.7}
.thumbs-carousel{position:relative}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.thumbs .thumb{width:100%;aspect-ratio:1/1;border-radius:10px;border:1px solid var(--border);overflow:hidden;background:#f3f4f6;display:flex;align-items:center;justify-content:center}
.thumbs .thumb.placeholder{background:#fff}
.thumbs .thumb img{width:100%;height:100%;object-fit:cover}
.thumbs-arrow{display:none;position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.8);border:none;border-radius:50%;width:24px;height:24px;align-items:center;justify-content:center;cursor:pointer;opacity:.7}
.thumbs-arrow.left{left:2px}
.thumbs-arrow.right{right:2px}
@media (max-width:640px){
  .thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
  .thumbs::-webkit-scrollbar{display:none}
  .thumbs .thumb{flex:0 0 calc((100% - 12px)/3);scroll-snap-align:start}
  .thumbs-arrow{display:flex}
}
.card-title{display:flex;align-items:center;gap:8px}
.card-title h3{flex:1;min-width:0;overflow-wrap:anywhere;min-height:calc(1.3em * 2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; line-clamp: 2;   overflow:hidden;text-overflow:ellipsis}
.card-avatar{width:1cm;height:1cm;border-radius:50%;overflow:hidden;background:#e6eef8;color:#0f172a;font-weight:700;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-size:.8rem}
.card-avatar img{width:100%;height:100%;object-fit:cover}
.card .cta{display:flex;justify-content:flex-start}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:#fafafa;color:#374151;font-size:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips--contact{align-items:center}
.chips--contact .chip{font-size:0.95rem}
@media (max-width:640px){
  .chips--contact{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .chips--contact .chip{white-space:nowrap}
}
.chip--wa{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip--wa:hover{filter:saturate(1.05) brightness(0.98)}
.chip--wa .wa-icon{width:18px;height:18px}
.chip--location svg{flex:0 0 auto}
.pin{width:14px;height:14px;display:inline-block}
.wa-icon{width:20px;height:20px}

/* Modal bienvenida */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px}
.modal.hidden{display:none}

/* Responsive */
@media (max-width: 1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  /* Asegura que la variante de cinco columnas también se adapte */
  .grid.grid-5{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .query-row{grid-template-columns:repeat(2,1fr);}
  .query-row>:nth-child(n+3){grid-column:1 / span 2;}
  .grid{grid-template-columns:1fr}
  .grid.grid-5{grid-template-columns:1fr}

  .navbar__top{flex-direction:column;align-items:center;gap:12px;padding:12px 0}
  .navbar__main{order:1;width:auto;justify-content:center;gap:12px}
  .navbar__center{order:2;width:100%;align-items:center;text-align:center}
  .navbar__right{order:3;width:100%;justify-content:center}
  .navbar__filters{padding:6px 0;}
  .navbar__filters .query-row{margin-top:4px}
  .brand-logo{height:64px}
  #auth-box{width:100%;justify-content:center;gap:12px;flex-wrap:wrap;margin:0;padding:6px 0}
  #auth-box.auth-buttons{justify-content:center}
  #auth-box .user-info{margin-left:0;margin-right:0}
  .navbar #auth-box .btn{flex:1;min-width:140px;justify-content:center;text-align:center;border-radius:12px}
  .tagline{font-size:14px}
  .with-sidebar .navbar__top{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .with-sidebar #sidebar-toggle{order:0}
  .with-sidebar .navbar__main{order:1;justify-content:flex-start;gap:12px}
  .with-sidebar .navbar__right{order:2;width:auto;justify-content:flex-end}
  .with-sidebar .navbar__center{order:3;width:100%;margin-top:4px}
  .with-sidebar #auth-box{width:auto;margin-left:auto;padding:0;flex-wrap:nowrap;gap:10px}
  .with-sidebar .navbar #auth-box .btn{min-width:auto;border-radius:10px}
  .with-sidebar .navbar__right .user-info{gap:6px;font-size:14px}
  .with-sidebar .navbar__right .user-menu__name{font-size:14px}
  .with-sidebar .navbar__right .user-menu__avatar{width:18px;height:18px;font-size:10px}
}

@media (max-width:400px){
  #auth-box{gap:8px;}
  .navbar #auth-box .btn{
    padding:8px 8px;
    font-size:0.8em;
    border-radius:10px;
  }
  .navbar #auth-box .btn--green{padding:8px 8px}
  .brand-logo{height:52px}
}


/* Loading indicator */
.indicator{display:none}

/* Formularios */

.register{background:#fff;padding:24px 32px;border-radius:var(--radius);max-width:700px;width:100%;box-shadow:0 2px 8px rgba(0,0,0,.15);position:relative}
.form-grid{display:grid;gap:12px;margin-bottom:16px;grid-template-columns:1fr}
@media (min-width:768px){
  .form-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
.field--full{grid-column:1/-1}
.img-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.img-input{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.img-preview{display:none;width:100%;max-width:180px;aspect-ratio:1/1;margin-top:4px;border-radius:10px;object-fit:cover;align-self:center}
.file-input-inline{display:grid;grid-template-columns:1fr 50px;align-items:center;gap:8px;max-width:100%;width:100%}
.file-input-inline input[type='file']{width:100%;min-width:0}
.img-preview-small{display:none;width:50px;height:50px;border-radius:10px;object-fit:cover}
@media (max-width:640px){
  .file-input-inline{grid-template-columns:70% 30%}
  .img-preview-small{width:100%;height:auto;aspect-ratio:1/1}
}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:14px;font-weight:600}
.field-hint{margin:0;font-size:0.85rem;color:var(--muted);font-weight:400}
.field-error{margin:0;font-size:0.85rem;color:#dc2626;font-weight:600;display:none}
.field-error.is-visible{display:block}
.input--error{border-color:#dc2626;box-shadow:0 0 0 1px rgba(220,38,38,.15)}
.password-wrapper{position:relative}
.password-wrapper .input{padding-right:40px}
.toggle-password{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer}
.forgot-password{margin-top:12px;text-align:center;font-size:0.95rem}
.forgot-password a{color:var(--brand);font-weight:600;text-decoration:none}
.forgot-password a:focus,.forgot-password a:hover{text-decoration:underline}
.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.actions .btn{flex:1}
.modal__close{position:absolute;top:8px;right:8px;background:none;border:none;font-size:24px;line-height:1;cursor:pointer}
.btn--dark{--bg:#111827}

/* Detalle de puesto */
.stall-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
@media(min-width:768px){.stall-header{flex-direction:row;text-align:left}}
.stall-logo{width:120px;height:120px;border-radius:50%;overflow:hidden;background:#eef1f4;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stall-logo img{width:100%;height:100%;object-fit:cover}
.stall-logo span{font-weight:700;opacity:.6;font-size:1.2rem}
.stall-info h1{margin:0;font-size:calc(2em + 5px)}
.stall-info p{margin-top:12px;font-size:1em}
.stall-description{margin-top:12px;font-size:1em}
.stall-description__toggle{display:none}
@media (max-width:640px){
  .stall-description{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
    line-clamp:4;
    overflow:hidden;
  }
  .stall-description.is-expanded{
    display:block;
    -webkit-line-clamp:unset;
    line-clamp:unset;
  }
  .stall-description__toggle{
    display:inline-flex;
    margin-top:6px;
    background:none;
    border:none;
    color:var(--brand);
    font-weight:600;
    cursor:pointer;
    padding:0;
    font-size:0.95rem;
  }
}
@media (min-width:641px){
  .stall-description{display:block;overflow:visible}
}
.stall-description__toggle:focus{outline:3px solid rgba(59,130,246,.35);outline-offset:2px}

/* === User menu (navbar) === */
.user-menu { position: relative; display: inline-block; }
.user-menu__btn {
  display: flex; align-items: center; gap: 10px;
  background: white; border: 1px solid var(--border,#e5e7eb);
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
}
.user-menu__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #e6eef8; color: #0f172a; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: uppercase; font-size: 12px;
  overflow: hidden;
}
.user-menu__avatar img{width:100%;height:100%;object-fit:cover}
.user-menu__name { font-weight: 600; }
.user-menu__chev { opacity: .6; font-size: 12px; }
.user-menu__list {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 220px; background: #fff; border: 1px solid var(--border,#e5e7eb);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.07);
  padding: 6px; z-index: 50;
}
.user-menu__list[hidden] { display: none; }
.user-menu__item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit;
}
.user-menu__item:hover { background: #f3f4f6; }
.user-menu__item.is-disabled {
  opacity: .5; pointer-events: none;
}
.user-menu__sep { height: 1px; background: #e5e7eb; margin: 6px 0; }

/* === Sidebar === */
.sidebar {
  position: fixed;
  top: var(--nav-offset);
  left: 0;
  bottom: 0;
  width: 215px;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
  transform: translateX(0);
  transition: transform .3s ease;
}
.sidebar__item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.sidebar__item:hover { background: #f3f4f6; }
.sidebar__item.is-disabled { opacity: .5; pointer-events: none; }
.sidebar__btn {
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.sidebar__close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
.user-info { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* Botón hamburguesa */
.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #fff;
}

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.with-sidebar { padding-left: 0; }
  .sidebar-toggle { display: block; }
  .sidebar__close { display: block; }
}

@media (min-width: 769px) {
  body.with-sidebar { padding-left: 215px; }
}

/* === Panel forms === */
.stall-form,
.product-form {
  background: #fff;
  padding: 24px 32px;
  border-radius: var(--radius);
  width: 100%;
  margin-inline: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.stall-form { max-width: 1000px; width: 100%; }
.product-form { max-width: 1100px; width: 100%; }

@media (min-width:768px){
  .stall-form .form-grid,
  .product-form .form-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* === Product detail === */
.prod-layout{display:flex;gap:24px;align-items:flex-start}
.prod-thumbs{flex:0 0 60px}
.prod-thumbs .thumbs{display:flex;flex-direction:column;gap:8px}
.prod-thumbs .thumb{width:60px;height:60px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);cursor:pointer}
.prod-thumbs .thumb img{width:100%;height:100%;object-fit:cover}
.prod-thumbs .thumb.placeholder{background:#f3f4f6;cursor:default;pointer-events:none}
.prod-main{flex:1;min-width:250px;position:relative}
.main-carousel{display:flex;overflow:hidden;width:100%;max-width:400px;max-height:400px;aspect-ratio:1/1;margin:0 auto;border-radius:var(--radius);background:#fff}
.main-carousel img{width:100%;height:100%;flex:0 0 100%;object-fit:cover;display:none;cursor:pointer}
.main-carousel img.active{display:block}
.dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.dot{width:8px;height:8px;border-radius:50%;background:#d1d5db}
.dot.active{background:#111827}
.main-arrow{display:none;position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.8);border:none;border-radius:50%;width:32px;height:32px;align-items:center;justify-content:center;cursor:pointer;opacity:.7;z-index:1}
.main-arrow.left{left:8px}
.main-arrow.right{right:8px}
.prod-info{flex:1;min-width:250px}

@media (max-width:640px){
  .prod-layout{flex-direction:column;align-items:center}
  .prod-thumbs{display:none}
  .main-arrow{display:flex}
  .prod-info{order:2}
}

/* Layout base del detalle */
.prod-layout{
  display: grid;
  grid-template-columns: 120px 1fr 320px; /* thumbs | foto principal | info */
  gap: 24px;
  align-items: start;
}

/* Carrusel principal con altura estable (independiente de la foto) */
.prod-main{ position: relative; }
.main-carousel{
  position: relative;
  height: clamp(280px, 45vw, 520px); /* fija un alto consistente */
  background: var(--card, #fff);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.main-carousel img{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* no deforma, mantiene proporción */
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.main-carousel img.active{ opacity: 1; }

/* Miniaturas: tamaño fijo cuadrado para que no empujen el layout */
.prod-thumbs { width: 70px; }
.prod-thumbs .thumb,
.prod-thumbs .thumb.placeholder{
  position: relative;
  width: 100%;
  padding-top: 100%;   /* ← hace el cuadrado 1:1 */
  border-radius: 8px;  /* bajá a 4px o 0 si querés menos redondeo */
  overflow: hidden;
  background: #f1f1f1;
  margin-bottom: 12px; /* separación entre thumbs */
}
.prod-thumbs .thumb img{
 position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* recorta manteniendo proporción */
  display: block;
}

/* Columna de info con ancho máximo consistente */
.prod-info{
  max-width:340px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
#producto-detalle .prod-info>*{margin:0}
#producto-detalle .prod-info h1{margin:0}
.prod-price{font-size:1.2rem;font-weight:700}
.prod-description{font-size:calc(1rem - 5px);line-height:1.6}

.prod-contact{
  margin-top:0;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.prod-contact__location{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:0.95rem;
  flex:1 1 auto;
  min-width:0;
}
.prod-contact__location span{
  display:inline-block;
}
.prod-contact__whatsapp{
  flex-shrink:0;
  white-space:nowrap;
}

@media (max-width:640px){
  .prod-info{gap:18px}
  .prod-contact{
    width:100%;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:10px;
  }
  .prod-contact__location{
    font-size:0.85rem;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .prod-contact__location span{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #producto-detalle .prod-info h1{
    font-size:1.35rem;
    line-height:1.35;
  }
  #producto-detalle .prod-price{
    font-size:1.55rem;
    font-weight:700;
  }
  #producto-detalle .prod-description{
    font-size:1rem;
    line-height:1.6;
    color:var(--muted);
  }
}

/* Responsivo */
@media (max-width: 1024px){
  .prod-layout{ grid-template-columns: 1fr 320px; } /* ocultás thumbs en mobile en tu HTML */
}
@media (max-width: 768px){
  .prod-layout{ display: block; }
  .main-carousel{ height: clamp(260px, 65vw, 420px); }
  .prod-info{ max-width: none; margin-top: 16px; }
}


@media (min-width:768px){
  .prod-info{gap:24px}
  .prod-description{font-size:calc(1rem - 2px)}
  #producto-detalle .btn.btn--green{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:calc(1rem + 5px);
    line-height:1;
    padding:6px 12px;
  }
  #producto-detalle .btn.btn--green .wa-icon{
    width:1em;
    height:1em;
    flex:0 0 auto;
  }
}

.pagination{display:flex;justify-content:center;gap:8px;margin-top:16px}
.pagination button[disabled]{opacity:.5;cursor:not-allowed}

/* Ajuste de tamaño de previsualización de imágenes en móviles */
@media (max-width:640px){
  .img-inputs{grid-template-columns:repeat(2,1fr)}
  .img-input{width:100%}
  .img-preview{width:100%;height:auto;aspect-ratio:1/1}
}

/* Tabla de edición de productos */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
}

.table th + th,
.table td + td {
  border-left: 1px solid #eee;
}

.table th {
  background: #f9fafb;
  text-align: left;
}

.table tbody tr:nth-child(even) {
  background: #f9fafb;
}

.table td.desc {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table td.actions {
  white-space: nowrap;
}

.table td.actions button {
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 8px;
  padding: 0;
}

.table td.actions button:last-child {
  margin-right: 0;
}

@media (max-width:640px){
  #productos-list{overflow-x:auto;}
  #productos-list .table{display:block;width:100%;}
  #productos-list .table thead{display:none;}
  #productos-list .table tbody{display:flex;flex-direction:column;gap:16px;}
  #productos-list .table tr{display:block;padding:16px;border:1px solid rgba(148,163,184,.35);border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.08);}
  #productos-list .table td{display:block;width:100%;padding:6px 0;border:none;font-size:14px;line-height:1.55;color:#0f172a;}
  #productos-list .table td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px;letter-spacing:.02em;text-transform:uppercase;}
  #productos-list .table td.desc{white-space:normal;max-width:100%;}
  #productos-list .table td.actions{display:flex;gap:14px;justify-content:flex-start;align-items:center;white-space:normal;margin-top:12px;}
  #productos-list .table td.actions button{margin-right:0;font-size:1.5rem;line-height:1;background:none;border:none;padding:10px;border-radius:999px;box-shadow:0 6px 18px rgba(15,23,42,.08);transition:transform .2s ease,box-shadow .2s ease;display:flex;align-items:center;justify-content:center;}
  #productos-list .table td.actions button:active{transform:scale(.94);box-shadow:0 2px 8px rgba(15,23,42,.12);}
  #productos-list .table td.actions .btn-edit{color:#1d4ed8;background:rgba(59,130,246,.16);}
  #productos-list .table td.actions .btn-del{color:#b91c1c;background:rgba(248,113,113,.18);}
}

@media (max-width:640px){
  #edit-prod-modal .register{padding:20px 20px 28px;}
  #edit-prod-modal .product-form{padding:0;box-shadow:none;}
  #edit-prod-modal .product-form .form-grid{gap:10px;}
  #edit-prod-modal .product-form label{font-size:.9rem;color:#0f172a;}
  #edit-prod-modal .product-form .input{font-size:.95rem;padding:12px 14px;}
  #edit-prod-modal .product-form button[type="submit"]{width:100%;margin-top:12px;}
}

.okbar{ overflow-y:hidden; } /* mantener la barra limpia */
.marquee{
  flex:1;
  overflow:hidden;
  display:flex;
  justify-content:center;
}
.marquee__inner{
  display:inline-block;
  padding-inline:16px;
  white-space:nowrap;
  animation:slide-left 15s linear infinite; /* ajustar velocidad si hace falta */
  will-change:transform;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
}
@keyframes slide-left{
  0%   { transform: translateX(100%); }  /* entra por la derecha */
  100% { transform: translateX(-100%); } /* sale por la izquierda */
}
/* Accesibilidad: respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce){
  .marquee__inner{
    animation:none;
    transform:none;
  }
}

@media (max-width:640px){
  /* 1) Descripción del producto en cards (base era 12px -> ahora 16px) */
  #productos .card-desc{
    font-size:16px;     /* +4px */
    line-height:1.5;    /* mantiene legibilidad en mobile */
  }

  /* 2) y 3) Precio del producto en cards (base .chip=14px -> ahora 18px) */
  #productos .card .chip:not(.chip--wa){
    font-size:18px;     /* +4px */
    font-weight:700;    /* negrita */
  }
}

/* SweetAlert2: contenido alineado y lista de errores */
.swal2-html-container{ text-align:left; }
.ui-errors{ margin:0; padding-left:18px; }
.ui-errors li{ margin:4px 0; }