:root{
  --nm-bg:#f6fbf8;
  --nm-card:#ffffff;
  --nm-text:#0a3d2e;
  --nm-sub:#4b6b5f;
  --nm-accent:#16a34a;
  --nm-accent-2:#0ea5e9;
  --nm-border:#e5eee9;
  --shadow:0 10px 20px rgba(0,0,0,.06);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--nm-text);background:var(--nm-bg)}

.nm-header{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:#ffffff;border-bottom:1px solid var(--nm-border);
}
.nm-header__brand{display:flex;align-items:center;gap:12px}
.nm-logo{height:40px;width:auto;object-fit:contain}
.nm-brand-text h1{font-size:18px;margin:0}
.nm-brand-text p{font-size:12px;color:var(--nm-sub);margin:0}

.nm-cart-btn{
  position:relative;border:none;background:#fff;padding:10px 12px;border-radius:999px;
  box-shadow:var(--shadow);cursor:pointer;transition:transform .08s ease
}
.nm-cart-btn:active{transform:scale(.98)}
.nm-cart-icon{width:24px;height:24px;fill:var(--nm-text)}
.nm-cart-count{
  position:absolute;top:-6px;right:-6px;background:var(--nm-accent);color:#fff;
  font-size:12px;line-height:18px;min-width:18px;text-align:center;border-radius:999px;padding:0 5px
}

.nm-container{max-width:1100px;margin:0 auto;padding:16px}
.nm-hero{background:linear-gradient(135deg,#e6f7ef,#f3fbfe);border:1px solid var(--nm-border);
  border-radius:var(--radius);padding:18px 16px;margin:12px 0;box-shadow:var(--shadow)}
.nm-hero h2{margin:0 0 8px 0}
.nm-hero p{margin:0;color:var(--nm-sub)}

.nm-grid{display:grid;gap:14px;margin:18px 0}
@media (min-width:500px){.nm-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:800px){.nm-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.nm-grid{grid-template-columns:repeat(4,1fr)}}

.nm-card{
  background:var(--nm-card);border:1px solid var(--nm-border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)
}
.nm-card__img{width:100%;aspect-ratio:4/3;object-fit:cover}
.nm-card__body{padding:12px;display:flex;flex-direction:column;gap:8px}
.nm-card__title{font-size:16px;margin:0}
.nm-price{font-weight:700}
.nm-card__actions{display:flex;gap:8px;align-items:center}
.nm-qty{display:flex;align-items:center;border:1px solid var(--nm-border);border-radius:12px}
.nm-qty button{border:none;background:transparent;padding:6px 10px;cursor:pointer;font-size:18px}
.nm-qty input{width:44px;text-align:center;border:none;outline:none;padding:6px}

.nm-add-btn{
  flex:1;border:none;background:var(--nm-accent);color:#fff;padding:10px 12px;border-radius:12px;
  cursor:pointer;font-weight:600
}
.nm-add-btn:hover{filter:brightness(.95)}

.nm-cart-panel{
  position:fixed;top:0;right:0;bottom:0;width:92%;max-width:380px;background:#fff;
  box-shadow:-16px 0 40px rgba(0,0,0,.08);border-left:1px solid var(--nm-border);
  transform:translateX(110%);transition:transform .25s ease;display:flex;flex-direction:column;z-index:40
}
.nm-cart-panel.open{transform:translateX(0)}
.nm-cart-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--nm-border)}
.nm-close{border:none;background:transparent;font-size:28px;line-height:1;cursor:pointer}
.nm-cart-items{padding:10px 12px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px}
.nm-cart-item{display:flex;gap:10px;align-items:center;border:1px solid var(--nm-border);border-radius:12px;padding:10px}
.nm-cart-item img{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid var(--nm-border)}
.nm-cart-item .meta{flex:1}
.nm-cart-item .meta .name{font-size:14px;margin:0 0 4px}
.nm-cart-item .meta .line{color:var(--nm-sub);font-size:13px}
.nm-remove{border:none;background:#f1f5f9;color:#334155;padding:6px 10px;border-radius:10px;cursor:pointer}
.nm-remove:hover{background:#e2e8f0}

.nm-cart-footer{border-top:1px solid var(--nm-border);padding:12px;display:flex;flex-direction:column;gap:10px}
.nm-total-line{display:flex;align-items:center;justify-content:space-between;font-size:16px}
.nm-note{margin:0;color:#6b7280;font-size:13px}
.nm-primary-btn{border:none;background:var(--nm-accent-2);color:#fff;padding:12px;border-radius:12px;font-weight:700;cursor:pointer}
.nm-primary-btn:hover{filter:brightness(.95)}

.nm-footer{padding:20px 16px;text-align:center;color:var(--nm-sub)}

/* Imagen clickeable en card */
.nm-card__img{cursor:pointer}

/* ===== MODAL ===== */
.nm-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center; z-index:60;
}
.nm-modal.open{display:flex}
.nm-modal__dialog{
  width:min(920px, 92vw); max-height:90vh; overflow:auto;
  background:#fff; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:grid; grid-template-columns: 1.1fr 1fr; gap:0;
}
@media (max-width:820px){ .nm-modal__dialog{ grid-template-columns:1fr } }

.nm-modal__close{
  position:absolute; margin:10px; right:10px; top:10px;
  border:none; background:#fff; width:36px; height:36px; border-radius:999px;
  box-shadow:var(--shadow); font-size:22px; cursor:pointer;
}
.nm-modal__media{background:#f8fafc; padding:14px; display:flex; align-items:center; justify-content:center; border-right:1px solid var(--nm-border)}
.nm-modal__media img{max-width:100%; height:auto; border-radius:14px}
.nm-modal__body{padding:16px}
.nm-modal__body h3{margin:0 0 8px 0}
.nm-modal__desc{color:#475569; margin:0 0 14px 0}
.nm-modal__section{margin:14px 0}
.nm-chips{display:flex; flex-wrap:wrap; gap:8px}
.nm-chips .chip{
  padding:6px 10px; border-radius:999px; font-size:12px; background:#e8f8ee; color:#0a3d2e; border:1px solid #cfeedd
}
.nm-chips--warn .chip{ background:#fff1f2; color:#9f1239; border-color:#fecdd3 }

.nm-unit{
  margin-left: 6px;
  font-weight: 600;
  color: var(--nm-sub);
  white-space: nowrap;
}

/* Modal de bienvenida simple */
.nm-modal__dialog--welcome{
  grid-template-columns: 1fr;
  max-width: 520px;
  text-align: center;
}

.nm-welcome{ padding: 18px; }

.nm-welcome__actions{
  display: flex;
  justify-content: center;   /* 👈 Centra el botón */
  margin-top: 14px;
}

/* Media wrapper para superponer badges */
.nm-card__media{ position: relative; }
.nm-card__img{ cursor: pointer; }

/* Badges */
.nm-badges{
  position:absolute; top:10px; left:10px;
  display:flex; gap:6px; flex-wrap:wrap;
}
.nm-badge{
  padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700;
  box-shadow: var(--shadow); color:#fff; user-select:none;
}
.nm-badge--new{ background:#16a34a; }   /* verde */
.nm-badge--sale{ background:#ef4444; }  /* rojo */

/* Precios en oferta */
.nm-price--old{
  color:#9ca3af; text-decoration: line-through; margin-right:8px; font-weight:500;
}
.nm-price--new{
  font-weight:800;
}

/* Modal de éxito */
.nm-modal__dialog--success{
  grid-template-columns:1fr;
  max-width:520px;
  text-align:center;
}
.nm-success{ padding:18px; }
.nm-success__emoji{ font-size:42px; margin:6px 0 4px; }

/* Toolbar */
.nm-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}
.nm-search{display:flex;gap:8px;flex:1 1 260px}

/* Pills de filtro */
.nm-pills{display:flex;gap:8px}
.nm-pill{
  border:1px solid var(--nm-border);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
}
.nm-pill.active{
  background:#16a34a;
  color:#fff;
  border-color:#16a34a;
}
.nm-pill:focus{outline:2px solid #a7f3d0; outline-offset:2px}

.nm-input{
  flex:1; padding:10px 12px; border:1px solid var(--nm-border);
  border-radius:12px; outline:none
}
.nm-clear-btn{
  border:none; background:#f1f5f9; padding:10px 12px;
  border-radius:12px; cursor:pointer
}
.nm-empty{ color:#6b7280; text-align:center; padding:20px }

/* Modal de carga */
.nm-modal__dialog--loading{
  grid-template-columns:1fr;
  max-width:520px;
  text-align:center;
}
.nm-loading{ padding:18px; }
.nm-loading__emoji{ font-size:38px; margin:6px 0 8px; }

.nm-progress{
  height:10px;
  border-radius:999px;
  background:#e5eee9;
  overflow:hidden;
  margin-top:12px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
}
.nm-progress__bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#16a34a,#22c55e);
  transition:width .15s linear;
}
.nm-progress__label{ color:#64748b; }

.nm-savings-line{
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px; color:#16a34a; /* verde ahorro */
  margin-bottom:6px;
}
.nm-oldprice{
  text-decoration: line-through; color:#94a3b8; margin-left:6px; font-size:12px;
}

/* styles.css */
.nm-footer p { color:#3b5d55; }
#appVersion { font-weight:600; }

/* Botón quitar en modo "peligro" (rojo con icono) */
.nm-remove--danger{
  width: 36px; height: 36px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background:#fee2e2;
  color:#b91c1c;
  cursor:pointer;
}
.nm-remove--danger:hover{ background:#fecaca }
.nm-remove--danger svg{ display:block }

/* ===== SPLASH / INTRO (intenso + rápido + bounce) ===== */
.nm-splash{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center; opacity:1;
}
.nm-splash.show{ display:flex; }
.nm-splash.out{ opacity:0; transition:opacity .4s ease; pointer-events:none; }

/* Fondo con verde más intenso */
.nm-splash__bg{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#0148ff,#003cd4); /* emerald-300 → emerald-500 */
  transform:translateY(-100%);
}
.nm-splash.show .nm-splash__bg{
  animation:splashSlide .45s cubic-bezier(.2,.9,.25,1) forwards; /* más rápida */
}
@keyframes splashSlide{
  from{ transform:translateY(-100%); }
  to  { transform:translateY(0%); }
}

/* Contenido y logo con pop/bounce suave */
.nm-splash__content{ position:relative; text-align:center; color:#053b2a; }
.nm-splash__logo{
  width:min(180px,42vw);  /* 👈 más grande */
  height:auto; margin-bottom:10px;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.18));
}
.nm-splash__content h2{ margin:0 0 2px 0; font-size:clamp(22px,4.4vw,30px); }
.nm-splash__content p{ margin:0; color:#0a3d2e; opacity:.9; }

/* zoom/bounce */
.nm-splash.show .nm-splash__content{
  animation:splashPop .6s cubic-bezier(.18,.9,.22,1.1) .1s both;
}
@keyframes splashPop{
  0%   { transform:scale(.88); opacity:0; }
  60%  { transform:scale(1.07); opacity:1; } /* pequeño sobreimpulso */
  100% { transform:scale(1); }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .nm-splash.show .nm-splash__bg{ animation:none; transform:translateY(0); }
  .nm-splash.show .nm-splash__content{ animation:none; }
  .nm-splash.out{ transition:none; }
}

/* Overlay */
.nm-overlay{
  position: fixed; inset: 0; display:none;
  align-items:center; justify-content:center;
  background: rgba(255,255,255,.65); backdrop-filter: blur(3px);
  z-index: 60;
}
.nm-overlay.show{ display:flex; }

/* Tarjeta del loader */
.nm-loader-card{
  background: #fff; padding: 18px 22px; border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}

/* Spinner circular */
.nm-spinner{
  width: 56px; height:56px; border-radius:50%;
  border: 4px solid #e6f2ff;            /* anillo base */
  border-top-color: #0ea5e9;            /* color principal */
  animation: nm-spin .8s linear infinite;
  box-shadow: 0 0 25px rgba(14,165,233,.35) inset;
}
@keyframes nm-spin { to { transform: rotate(360deg); } }

.nm-loader-text{ color:#0f172a; font-weight:600; letter-spacing:.2px; }

.nm-pager{
  display:flex;
  gap:.5rem;
  align-items:center;
  justify-content:center;
  margin: 20px 0 10px;
  flex-wrap: wrap;
}

.nm-pager .nm-page{
  appearance: none;
  border: 1px solid #d1d5db;
  background: #fff;
  padding: .35rem .6rem;
  border-radius: .5rem;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}
.nm-pager .nm-page:hover:not([disabled]){
  background:#f9fafb;
  transform: translateY(-1px);
}
.nm-pager .nm-page[disabled]{
  opacity:.5; cursor:not-allowed;
}
.nm-pager .nm-page.active{
  background:#0a3d2e; /* tu color de marca */
  border-color:#0a3d2e;
  color:#fff;
  font-weight:600;
}
.nm-pager .nm-ellipsis{
  padding: 0 .25rem;
  color:#6b7280;
  user-select:none;
}

/* ===== Scroll infinito ===== */
.nm-infinite{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:18px 0 6px;
  color:#6b7280;
}
.nm-infinite.show{ display:flex; }

.nm-pres-list { display:grid; gap:.5rem; }
.nm-pres-item { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border:1px solid #e5e7eb; border-radius:.75rem; }
.nm-pres-item input { transform: translateY(1px); }
.nm-pres-price { margin-left:auto; font-weight:600; }
.nm-price__range { opacity:.75; }

.nm-price-lb {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}